/* ============================================================
   THE ESTATE OF ALINA SZAPOCZNIKOW — DESIGN LAYER
   The only design file of the design version. It sits on top of the wireframe's own CSS
   (wireframe.css, home.css, expo-index.css — copied verbatim from system/ by
   scripts/build-frontend.sh) and dresses it in the Figma tokens (page "UI UX Claude").
   The wireframe decides structure and behaviour; this file decides only the look.
   Rule: no value outside the tokens below. Sections follow the build order:
   tokens → remap → global → home → actualités → expositions → chronologie.
   ============================================================ */

/* ---------- Diplomat ST (trial — no accented glyphs: French falls back to Times) ---------- */
@font-face { font-family: 'Diplomat'; font-weight: 400; font-style: normal; font-display: fallback;
  src: url('../assets/fonts/Diplomat ST Trial/WOFF2/DiplomatSTTrial-Regular.woff2') format('woff2'),
       url('../assets/fonts/Diplomat ST Trial/WOFF/DiplomatSTTrial-Regular.woff') format('woff'); }
@font-face { font-family: 'Diplomat'; font-weight: 400; font-style: italic; font-display: fallback;
  src: url('../assets/fonts/Diplomat ST Trial/WOFF2/DiplomatSTTrial-Italic.woff2') format('woff2'),
       url('../assets/fonts/Diplomat ST Trial/WOFF/DiplomatSTTrial-Italic.woff') format('woff'); }
@font-face { font-family: 'Diplomat'; font-weight: 500; font-style: normal; font-display: fallback;
  src: url('../assets/fonts/Diplomat ST Trial/WOFF2/DiplomatSTTrial-Medium.woff2') format('woff2'),
       url('../assets/fonts/Diplomat ST Trial/WOFF/DiplomatSTTrial-Medium.woff') format('woff'); }
@font-face { font-family: 'Diplomat'; font-weight: 700; font-style: normal; font-display: fallback;
  src: url('../assets/fonts/Diplomat ST Trial/WOFF2/DiplomatSTTrial-Bold.woff2') format('woff2'),
       url('../assets/fonts/Diplomat ST Trial/WOFF/DiplomatSTTrial-Bold.woff') format('woff'); }
@font-face { font-family: 'Diplomat Mono'; font-weight: 400; font-style: normal; font-display: fallback;
  src: url('../assets/fonts/Diplomat ST Trial/WOFF2/DiplomatMonoSTTrial-Regular.woff2') format('woff2'),
       url('../assets/fonts/Diplomat ST Trial/WOFF/DiplomatMonoSTTrial-Regular.woff') format('woff'); }

/* ---------- Figma tokens (1:1 from the Variables + text styles; change them here only) ---------- */
:root {
  /* colours */
  --fond-page:      #ffffff;
  --fond-sombre:    #000000;
  --fond-carte:     #f3f3f3;
  --fond-surface:   #cfcfcf;
  --encre-primaire: #000000;
  --encre-inverse:  #ffffff;
  --accent-vif:     #ffffff;   /* the chartreuse #deff4d is gone (Seba 05.10, confirmed with the designer): panels, spines, active states and rollovers are white */
  /* the design's secondary text = the ink at 60%. Every shade of black or white below is mixed from
     its token (color-mix), so a Figma change to encre/* or fond/sombre reaches the shades too */
  --encre-seconde:  color-mix(in srgb, var(--encre-primaire) 60%, transparent);

  /* spacing */
  --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px;
  --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px;
  --sp-120: 120px;
  --couture: 5px;                        /* "the 5px seam everywhere" */
  --bordure-fine: 1px;                   /* Figma bordure/fine: every hairline and border */
  --bordure-normale: 2px;                /* Figma bordure/normale: the focus ring */

  /* type: anchored to the 1512px Figma frame, fluid above/below; the floors (the phone sizes) stay
     as they were until the designer draws a phone size (06.10) */
  --fs-titre:      clamp(34px, 4.762vw, 91px);   /* Diplomat / Titre       72/64 (designer 06.10; was 60/56) */
  --fs-section:    clamp(21px, 2.381vw, 46px);   /* Diplomat / Section     36/40 (designer 06.10; was 30/35) */
  --fs-corps:      clamp(16px, 1.1905vw, 23px);  /* Diplomat / Corps       18/22 (designer 06.10; was 20/28) */
  --fs-small:      clamp(13px, 0.893vw, 17px);   /* Diplomat / Small       13.5/16.5 (designer 06.10): the menu, the agenda's groups */
  --fs-titre-site: clamp(13px, 0.992vw, 19px);   /* 15/20, no Figma style since 06.10 (Titre site deleted): the bar's name, the cover's galleries, related links, footer */
  --fs-mono-meta:  clamp(11px, 0.7275vw, 17px);  /* Diplomat Mono / Méta    11/13 (designer 06.10, third pass), never under 11px, phones included (their note) */
  --lh-titre: 0.889; --lh-section: 1.111; --lh-corps: 1.222; --lh-small: 1.222; --lh-titre-site: 1.333; --lh-meta: 1.182;
  --retrait: 50px;                               /* Diplomat / Corps Suite (06.10): indent of every paragraph after the first */

  /* structure (Figma AS – Home) */
  --bandeau-h:  36px;                           /* the grey band at the top of the bar */

  --f-diplomat: 'Diplomat', 'Times New Roman', serif;
  --f-mono:     'Diplomat Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------- the wireframe's variables, remapped onto the tokens ---------- */
:root {
  --bg:        var(--fond-page);
  --ink:       var(--encre-primaire);
  --mut:       var(--encre-seconde);
  --rule:      var(--fond-surface);
  --ph:        var(--fond-carte);
  --ph-line:   var(--fond-surface);
  --ph-ink:    var(--encre-seconde);
  --accent:    var(--encre-primaire);   /* links are black + underlined: the accent can't be text on white */
  --hover:     var(--encre-primaire);
  --wash:      var(--accent-vif);       /* every rollover = the Figma accent */

  --display:   var(--f-diplomat);
  --body:      var(--f-diplomat);
  --ui:        var(--f-mono);

  --fs-display: var(--fs-titre);
  --fs-body:    var(--fs-corps);
  --fs-meta:    var(--fs-mono-meta);

  --side:  var(--sp-20);                /* the Figma frame margin (1512 − 1472 = 20 each side) */
  --xedge: var(--sp-12);                /* the lists' edge (.xsheet below): 12, as the section heads (designer 06.10) */
}

/* ============================================================
   GLOBAL
   ============================================================ */
body { background: var(--fond-page); color: var(--encre-primaire); }

/* ============================================================
   MOTION — ONE CLOCK (Seba 07.10: "impeccable animations, loading and
   transitions", "behave in the same way"). Three durations, three curves;
   every transition and animation of the design version maps onto them (the
   wireframe's own are re-timed in the ONE CLOCK section at the end of this
   file), and design.js reads the same tokens for its script-driven moves.
     --mo-fast   a state flip: hovers, focus, ink changes
     --mo-med    a fade: pictures arriving, the page cross-fade, a record
                 sliding in from its neighbour, the bars
     --mo-slow   travel: the sheets, their spines, the phone pile
   ============================================================ */
:root {
  --mo-fast: .15s;
  --mo-med: .35s;
  --mo-slow: .5s;
  --mo-ease: cubic-bezier(.4, 0, .2, 1);        /* fades and hovers */
  --mo-enter: cubic-bezier(.22, .61, .36, 1);   /* arriving from the side */
  --mo-glide: cubic-bezier(.77, 0, .175, 1);    /* the sheets' travel (the wireframe's curve) */
}
/* one switch turns all of it off: the reader asked for less motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: .01ms !important; transition-delay: 0s !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto !important; }
}

/* TEXT (07.10): tracking 0 everywhere, as every Figma style measures (the
   wireframe's -0.01em body tracking is Mercure's, its .02-.06em UI trackings
   are Riforma's: Diplomat gets neither); both engines smooth the same way;
   kerning on; no synthesised bold or oblique (a cut the fonts lack falls back
   rather than being faked, the no-faked-bold rule). The two reading faces are
   preloaded (build-frontend.sh), so font-display: fallback (above) shows them
   or holds a beat, instead of flashing a serif and reflowing mid-read. */
body { letter-spacing: 0; -moz-osx-font-smoothing: grayscale; font-kerning: normal; font-synthesis: none; }
.xback, .cs-yr, .cs-cap-m, .xsel, .xmenu button { letter-spacing: 0; }   /* the wireframe trackings not already zeroed above */
/* PAGE TO PAGE, SOFTLY (Seba 07.10: "main nav clicks and loadings … flashes … smooth AF"; the jump to the
   Biographie "so hard"): a click on the menu keeps the page in view until the next one is built and has
   landed on its section (the build holds its first picture: scripts/build-frontend.sh, #d-built), then the
   two cross-fade. Filmed before: a blank page under the bars, the home's top then a cut to the section. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--mo-med); animation-timing-function: var(--mo-ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* …and the pictures of a list, a Galerie, a record's works and the home's portrait arrive the same way: each
   fades in once loaded (design.js 0i) instead of popping in one by one. The Chronologie keeps its own (it
   dims its pictures by opacity). */
@media (prefers-reduced-motion: no-preference) {
  :is(.xthumb, .xg-img, .xw-img, .xcoll-wlink, .cover-media) img { transition: opacity var(--mo-med) var(--mo-ease); }
  :is(.xthumb, .xg-img, .xw-img, .xcoll-wlink, .cover-media) img:not(.d-in) { opacity: 0; }
}
/* LOADING: list rows and gallery cards lay out as they approach the view
   (expositions holds 447 rows; measured 07.10: the first layout 432ms down to
   325ms, a scroll pass 60ms down to 43ms). Each keeps its real height once
   seen (contain-intrinsic-size: auto …), so the scrollbar holds steady. A
   work tile cannot take this (size containment would break the grid's shared
   rows), and the record sheets keep full layout. */
.xlist.xstd > .xitem { content-visibility: auto; contain-intrinsic-size: auto 137px; }
.xgalerie > .xg-item { content-visibility: auto; contain-intrinsic-size: auto 571px; }
@media (max-width: 900px) {
  .xlist.xstd > .xitem { contain-intrinsic-size: auto 86px; }
  .xgalerie > .xg-item { contain-intrinsic-size: auto 422px; }
}

/* ---------- type roles (the 5 Figma styles), applied by class below ---------- */
:root { --encre-inverse-seconde: color-mix(in srgb, var(--encre-inverse) 60%, transparent); }

/* ============================================================
   SHARED — elements present on every page
   ============================================================ */

/* the menu bar ("barre de navigation"): WHITE since 05.10 (Seba: no black anywhere; it was black with
   white links and the accent for the active one). Links in Méta mono as the page toolbars' buttons:
   dimmed, full ink on hover, the active one full ink and underlined; a hairline under the bar as
   under every white bar */
.topbar, .topbar.solid {
  background: var(--fond-page); color: var(--encre-primaire);
  border-bottom: 0; backdrop-filter: none; box-shadow: 0 var(--bordure-fine) 0 var(--fond-surface);
  padding: var(--sp-12);   /* 12 from the edges, the designer's margin (06.10; it was 20), as the section bars and the cover */
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0;
}
.topbar .crumb { font-family: var(--f-diplomat); font-size: var(--fs-titre-site); line-height: var(--lh-titre-site);
  color: var(--encre-primaire); letter-spacing: 0; }
.topbar .crumb:hover { opacity: .6; }
.topnav a { font-family: var(--f-diplomat); font-size: var(--fs-small); line-height: var(--lh-small);   /* Diplomat / Small (designer 06.10; was Méta mono) */
  color: var(--encre-primaire); opacity: .6; letter-spacing: 0; border-bottom: var(--bordure-fine) solid transparent; }
.topnav a:hover { color: var(--encre-primaire); opacity: 1; }
.topnav a.active { color: var(--encre-primaire); opacity: 1; font-weight: 400; border-bottom-color: transparent; }   /* the current section in full ink, no underline (Seba 06.10, Figma: no link is underlined) */
.lang, .lang button { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0; }
.lang button.on { font-weight: 400; }
.lang .sep { color: var(--encre-seconde); }
/* on the bar: the other language dimmed, the current one full ink */
.topbar .lang, .topbar .lang button { color: var(--encre-primaire); }
.topbar .lang button { opacity: .6; }
.topbar .lang button.on { opacity: 1; color: var(--encre-primaire); }
.topbar .lang .sep { color: var(--encre-seconde); }
.nav-toggle { color: var(--encre-primaire); font-family: var(--f-mono); font-size: var(--fs-mono-meta); letter-spacing: 0; }   /* a word since 05.10 (wireframe): "Menu" / "Fermer" */
.nav-toggle:hover, .nav-toggle:focus-visible { opacity: .6; }
@media (max-width: 1024px) {
  .topbar .topnav { background: var(--fond-page); box-shadow: 0 var(--bordure-fine) 0 var(--fond-surface); }   /* white over the page: its edge */
  .topbar .topnav a { font-size: var(--fs-titre-site); font-family: var(--f-diplomat); opacity: 1;   /* the open phone menu reads in full ink */
    border-bottom-color: color-mix(in srgb, var(--encre-primaire) 15%, transparent); }
  /* FR / EN, moved into the open menu (wireframe, 05.10): its last line, at the links' size */
  .topbar .topnav .lang, .topbar .topnav .lang button { font-size: var(--fs-titre-site); }
}

/* every list row = a Figma card ("entrée"): #f3f3f3, 5px seams, accent rollover, Méta mono */
.xitem { background: var(--fond-carte); border: 0; margin-bottom: var(--couture); }
.xitem:first-child { border-top: 0; }
.xrow { padding: var(--sp-8) var(--sp-20); }
.xitem:hover > .xrow { background: var(--accent-vif); opacity: 1; }
/* keyboard focus lights the row as the wireframe does (v110): only :focus-visible, never a row a closing
   record gave the focus back to (.xquiet) — :focus-within lit clicked and closed rows */
.xitem:not(.xquiet):has(> .xrow:focus-visible) > .xrow { background: var(--accent-vif); opacity: 1; }
.xrow .xyr, .xrow .xlieu, .xrow .xville, .xrow .xtick {
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0; color: var(--encre-primaire); }
/* ONE text hierarchy for every list on the site (Seba 30.09): the title in Corps, everything
   else in Méta mono — home Actualités, Collections, Publications, the Actualités and
   Expositions pages */
.xrow .xttl { font-family: var(--f-diplomat); font-size: var(--fs-corps); line-height: var(--lh-corps); letter-spacing: 0; color: var(--encre-primaire); }
.xrev .xinner { padding: 0 var(--sp-20); }
/* NO HOVER PREVIEW ON THE LISTS (Seba 06.10: "remove the over popup across all indexes cause is not ready
   yet"): a row lights up and a click opens its record; the wireframe keeps its previews */
.xitem > .xrev { display: none !important; }
/* nor the "Actualités (n)" button at the bottom right (Seba 06.10: "hide the actualites button for now");
   the wireframe keeps it (tweaks-apply.js) */
.qa { display: none !important; }
/* THE ROWS ON THE DESIGNER'S GRID (Figma home 06.10; the designer: "j'avais poussé le titre vers la
   droite pour laisser plus de place aux images"). On a desktop: 12 inside the row, then the image 225,
   the title and its date 489, the venue (the rest), the place 350, 12 apart and scaling with the row,
   so at 1512 the title starts on the grid's 3rd column (x 261), the venue on its 7th (x 762, the line
   of the foot's "Toutes les …" link) and the place on its 10th (x 1138). The image frame keeps the row's height
   (112 at 1512): wide pictures gain room, upright ones stay centred. The ▸ shares the place's cell, at
   its right end, so it moves no column. A record's "Autres actualités" narrower than 820 keeps the
   wireframe's image and title. */
/* the lists on the section heads' edge, 12 from the window (Figma Th rework, Actualités: the cards at x 12,
   1488 wide; the wireframe's .xsheet sets its own 10) */
.xsheet { --xedge: var(--sp-12); }
@media (min-width: 901px) {
  .xlist.xstd .xrow { grid-template-columns: 225fr 489fr 364fr 350fr; column-gap: var(--sp-12); padding: var(--sp-12); }   /* in a 1488 card: 24 · 261 · 762 · 1138, the frame's */
  .xlist.xstd .xrow > .xthumb { width: 100%; aspect-ratio: 2 / 1; }
  .xlist.xstd .xrow > .xtick { grid-column: 4; justify-self: end; }
  .xlist.xstd .xrow > .xville { padding-right: var(--sp-20); }
}
@container xrel (max-width: 820px) {
  .xlist.xstd .xrow { grid-template-columns: var(--xth-w) minmax(0, 1fr); column-gap: 20px; padding: 10px 0; }
  .xlist.xstd .xrow > .xthumb { aspect-ratio: 4 / 3; }
}
/* TEXT THUMBNAILS ARE SQUARE (Seba 06.10: "text thumbnails, should rather be 1:1 and adapt text size if
   necessary"): a row without an image prints its title in a white square as tall as the row's images
   (half the 2:1 frame on a desktop, 3/4 of the 4:3 one on a phone or in a narrow record), centred as an
   upright image is; the whole title, at the largest size that fits (design.js 0f), no longer cut at
   four or five lines */
.xlist.xstd .xrow > .xthumb.xthumb-none { width: 75%; aspect-ratio: 1 / 1; justify-self: center; contain: strict; }
@media (min-width: 901px) { .xlist.xstd .xrow > .xthumb.xthumb-none { width: 50%; } }
@container xrel (max-width: 820px) { .xlist.xstd .xrow > .xthumb.xthumb-none { width: 75%; } }
.xlist.xstd .xthumb-none > .xthumb-t { display: block; -webkit-line-clamp: unset; line-clamp: none; max-height: 100%; overflow: hidden; }

/* every record panel = Figma's chartreuse overlay ("AS – Home with overlay"), on every page at
   the Fondation Giacometti's width (Seba 30.09, measured on its biography: 85% of the window).
   Its centred 880px text column read as huge margins here (Seba): the record fills the panel
   inside --d-fpad, and only the running text keeps that measure (.xdesc, section 5). */
.xfiche { background: var(--accent-vif); width: 85vw; border-left: 0;
  box-shadow: 0 0 60px color-mix(in srgb, var(--fond-sombre) 18%, transparent);
  --d-fpad: var(--sp-12); --d-ftop: var(--sp-32);   /* 12 from the sheet's edges (Seba 06.10, the frame's; it was 40) */
  --wash: var(--fond-carte);                /* rollovers inside the panel: the cards' grey (the panel is the accent, white since 05.10) */
  --rule: color-mix(in srgb, var(--encre-primaire) 35%, transparent);   /* Figma: the overlay's rules are black at 35% */
  --mut: color-mix(in srgb, var(--encre-primaire) 70%, transparent); }
.xfiche-inner { padding: var(--d-ftop) var(--d-fpad) var(--sp-48); }   /* the foot: 48px, none on a record that fits (wireframe .xfit, 05.10; it was 120px) */
/* THE SHEET'S HEAD (designer 06.10, Figma "AS – Home with overlay"; design.js 0 head()): a white bar
   along the top of every record, the menu bar's height, a fine grey rule under it, in view as the
   record scrolls; on the left the record's neighbours in its list ("Exposition précédente / suivante",
   which replace ‹ n/N ›), on the right "Fermer tous les onglets" (once records are stacked) and "Fermer
   cet onglet" (which replaces the ✕), in Small at 60% like the menu, full ink under the pointer, never
   underlined (Seba 06.10: the frame's links are not). The words are the buttons' data-d-label. The title's
   capitals 24 under it (Seba 07.10; it was 12, the sheet's edge, after the frame's 48: a mono title's tall
   letters and the accents over capitals reached the bar). */
.xfiche .d-shead { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24);
  margin: calc(-1 * var(--d-ftop)) calc(-1 * var(--d-fpad)) calc(var(--sp-24) - var(--trim-titre)); padding: var(--sp-12) var(--d-fpad);
  background: var(--fond-page); border-bottom: 0.5px solid var(--gris-moyen); }
.xfiche .d-shead > .xseq, .xfiche .d-shead > .xsheet-tools { position: static; float: none; display: flex; align-items: center; gap: var(--sp-24);
  margin: 0; padding: 0; background: none; }
.xfiche .d-shead > .xsheet-tools { margin-left: auto; }
.xfiche .d-shead .xs-count { display: none; }
.xfiche .d-shead :is(.xs-btn, .xclose-all, .xfiche-close) { display: inline-flex; min-width: 0; min-height: 0; border: 0;
  box-sizing: border-box; min-height: var(--sp-40); align-items: center;
  padding: 10px 8px; margin: -10px -8px;   /* a 40px target for a finger (also where the phone's line box is smaller), the bar's height and the 24px gaps unchanged */
  background: none; color: var(--encre-primaire); font-size: 0; line-height: 1; cursor: pointer; opacity: .6; transition: opacity var(--mo-fast) var(--mo-ease); }
.xfiche .d-shead :is(.xs-btn, .xclose-all, .xfiche-close)::before { content: attr(data-d-label); font-family: var(--f-diplomat);
  font-size: var(--fs-small); line-height: calc(var(--fs-titre-site) * var(--lh-titre-site)); letter-spacing: 0; white-space: nowrap; }
.xfiche .d-shead :is(.xs-btn, .xclose-all, .xfiche-close):is(:hover, :focus-visible):not([aria-disabled="true"]) { opacity: 1; }
.xfiche .d-shead .xs-btn[aria-disabled="true"] { opacity: .3; cursor: default; }
@media (max-width: 900px) { .xfiche .d-shead :is(.xs-btn, .xclose-all, .xfiche-close)::before { content: attr(data-d-short); } }   /* a phone: "Précédente", "Fermer"… */
/* "Fermer tous les onglets" only once records are stacked (the wireframe's body.xpile; the phone pile's d-mp-on) */
.xfiche .d-shead .xclose-all { display: none; }
body.xpile .xfiche .d-shead .xclose-all, body.d-mp-on .xfiche .d-shead .xclose-all { display: inline-flex; }
/* the spines of the covered sheets (records.js .xtab): white like their sheet, the title in Small, a fine
   grey rule on their edge (designer 06.10, Figma "AS – Home with overlay (incl. tabs)"; it was Méta mono
   and a black rule at 35%); the cards' grey on hover */
.xtab { background: var(--accent-vif); color: var(--encre-primaire); border-left: 0.5px solid var(--gris-moyen);
  font-family: var(--f-diplomat); font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0; }
.xtab:hover, .xtab:focus-visible { background: var(--fond-carte); color: var(--encre-primaire); }   /* the spine is the accent: its hover, the panel's grey */
/* WHAT EACH SHEET IS (proto 07.10; design.js 0h, 1m, 0 head()): the spine reads "Exposition : <title>", the
   type at 60% before the title, as the phone's piled tabs do; a sheet with no neighbours names its type at
   the left of its head, in full ink (it is a label, its links are the 60% words beside it) */
.xtab span::before, .d-mp-t::before { content: attr(data-d-type); color: var(--encre-seconde); }
.xfiche .d-shead > .d-stype { font-family: var(--f-diplomat); font-size: var(--fs-small); letter-spacing: 0; white-space: nowrap;
  line-height: calc(var(--fs-titre-site) * var(--lh-titre-site)); color: var(--encre-primaire); }
.xfiche-title { font-family: var(--f-diplomat); font-size: var(--fs-titre); line-height: var(--lh-titre); max-width: none; text-wrap: wrap; }   /* the panel's width; the ✕ floats beside the first line (Seba 30.09: no early break) */
/* A WORD LONGER THAN ITS COLUMN BREAKS, EVERYWHERE (phone pass over the whole database, 30.09:
   12 exhibition titles, e.g. "Beeldententoonstelling", "GRUPPENAUSSTELLUNG", "Aspekte/Positionen.",
   "Międzynarodowej", ran past a 343px column, under the ✕ and out of the panel). Normal wrapping is
   untouched: only a word that cannot fit on a line of its own breaks (hyphenated on phones, where the
   browser knows the word). Titles and cards break "anywhere" so a grid or a float never grows
   around a long word. */
html { overflow-wrap: break-word; }
.xfiche-title, .xfiche .d-band, .xg-ttl, .xttl, .xw-ttl, .xrel { overflow-wrap: anywhere; }
@media (max-width: 900px) { .xfiche-title, .xg-ttl, .xttl, .xw-ttl { hyphens: auto; } }   /* only where long words fail; desktop titles wrap as before */
.xfiche-dates { font-family: var(--f-diplomat); font-size: var(--fs-section); line-height: var(--lh-section); }
.xfiche-place, .xcoll-sub, .xfields, .xfields dt, .xfields dd, .xfiche-fig figcaption, .xcoll-work figcaption,
.xcoll-ext, .xback, .xrel-h, .xseq, .xs-btn, .xs-count, .xw-date, .xrel .xyr {
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0; }
.xfields dt { color: var(--encre-seconde); }   /* label and value both at 60% (Figma "AS – Home with overlay"; the label was at 70%) */
.xdesc { font-family: var(--f-diplomat); font-size: var(--fs-corps); line-height: var(--lh-corps); text-align: left; }   /* set left, not justified (designer 06.10, Figma "AS – Home with overlay") */
.xcoll-ext a { color: var(--encre-primaire); border-bottom-color: var(--encre-primaire); }
.xw-ttl, .xrel button, .xrel a { font-family: var(--f-diplomat); font-size: var(--fs-titre-site); line-height: var(--lh-titre-site); }
@media (max-width: 900px) { .xfiche { --d-fpad: var(--sp-12); --d-ftop: var(--sp-24); } .xfiche-inner { padding-bottom: var(--sp-40); } }   /* 12 on a phone too, the site's edge there */

/* ============================================================
   1 · HOME
   ============================================================ */


/* section heads = Figma "en-tête de section": at the left (designer 06.10, Figma home; they were centred),
   in Small (the designer's second pass, 06.10; it was Corps); a white bar, the cards' grey on hover */
.hz-down, a.hz-down { justify-content: flex-start; background: var(--fond-page); border: 0;
  padding: var(--sp-12); font-family: var(--f-diplomat); font-size: var(--fs-small);
  line-height: calc(var(--fs-titre-site) * var(--lh-titre-site)); }   /* Small on the menu bar's line box, so the bar keeps the menu bar's height (Seba 05.10) */
.hz-down:hover { background: var(--fond-carte); }

/* the agenda's two groups, En cours / À venir (wireframe .xgroup, 04.10): Diplomat / Small (designer 06.10;
   was Méta mono), on the section head's edge, x 12 like the head above (Seba 06.10, Figma Th rework
   "AS – Home (live site, 05.10)"; it was the cards' text edge, 20 in). ONE SPACING, cap to baseline, on the
   home and on every page, in Liste and in Galerie alike (Seba 07.10: "standardise"; "should be the same"
   between the two views): the first label 48 under its bar (its list's own top, below), its first card
   12 under its baseline; the next label 48 under the last card before it (it was 54 in a list, 23 in a
   Galerie). The card's 5px seam and the Galerie's 5px gap count in the 48. */
.xgroup { padding: calc(var(--sp-48) - var(--couture) - var(--trim-small)) 0 calc(var(--sp-12) - var(--trim-small));
  color: var(--encre-seconde); font-family: var(--f-diplomat); font-size: var(--fs-small); line-height: var(--lh-small); }
.xgroup:first-child { padding-top: 0; margin-top: calc(-1 * var(--trim-small)); }
.xgroup + .xitem { border-top: 0; }
.xgalerie > .xgroup { padding-bottom: calc(var(--sp-12) - var(--couture) - var(--trim-small)); }   /* the grid's gap under it counts in the 12 */
.xgalerie > .xgroup ~ .xgroup { padding-top: calc(var(--sp-48) - var(--couture) - var(--trim-small)); }   /* the wireframe's 14 */
/* every page's list 48 under its bar, as the home's sections (Expositions and Actualités had none, Publications
   and Collections the wireframe's inline clamp(34px, 5vh, 64px)) */
.xpagebar + .xsheet { padding-top: var(--sp-48) !important; }

/* Biographie = Figma home "BIO-SECTION" (designer 06.10): the column on the site's left edge, its head
   and its text set left (until 06.10 centred, the text justified); on a desktop it fills the left half
   of the page, 6 of the 12 columns (739 of 1512 in the frame) */
#biographie .bio-title { font-family: var(--f-diplomat); font-size: var(--fs-section); line-height: var(--lh-section); text-align: left; }
#biographie .body { font-family: var(--f-diplomat); font-size: var(--fs-corps); line-height: var(--lh-corps); text-align: left; }
#biographie .meta, .meta { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0; }
#biographie .measure { margin-left: 0; margin-right: 0; }
@media (min-width: 901px) { #biographie .measure { max-width: none; width: calc(50% - 5px); } }
/* its spacing as in the frame: 96 under the bar and after the source, 48 between the head, the dates,
   the text and the source, 6 between the two dates, 12 between paragraphs. Figma measures these from
   the cap height to the baseline (every text style trims to the cap height since 06.10), CSS from the
   line box, so each gap gives back the space between the two: (line height - cap height) / 2, the same
   above and below in Diplomat and Diplomat Mono (cap height 0.686 em, measured) */
:root {
  --cap: 0.686;
  --trim-section: calc(var(--fs-section) * (var(--lh-section) - var(--cap)) / 2);
  --trim-corps: calc(var(--fs-corps) * (var(--lh-corps) - var(--cap)) / 2);
  --trim-meta: calc(var(--fs-mono-meta) * (var(--lh-meta) - var(--cap)) / 2);
  --trim-titre: calc(var(--fs-titre) * (var(--lh-titre) - var(--cap)) / 2);
  --trim-small: calc(var(--fs-small) * (var(--lh-small) - var(--cap)) / 2);
}
body.d-home #biographie > .hz-bar + .wrap { padding-top: 0 !important; }
#biographie .measure { margin-top: calc(var(--sp-96) - var(--trim-section)) !important; padding-bottom: calc(var(--sp-96) - var(--trim-meta)); }
#biographie .measure > * { margin: 0 !important; }   /* the wireframe's gaps, some of them inline */
#biographie .bio-title + .meta { margin-top: calc(var(--sp-48) - var(--trim-section) - var(--trim-meta)) !important; }
#biographie .meta + .meta { margin-top: calc(6px - 2 * var(--trim-meta)) !important; }
#biographie .meta + .body { margin-top: calc(var(--sp-48) - var(--trim-meta) - var(--trim-corps)) !important; }
#biographie .body + .body { margin-top: calc(var(--sp-12) - 2 * var(--trim-corps)) !important; }
#biographie .body + .meta { margin-top: calc(var(--sp-48) - var(--trim-corps) - var(--trim-meta)) !important; }

/* Diplomat / Corps Suite (designer 06.10): running text has no space between paragraphs, and every
   paragraph after the first is indented by --retrait. Work captions (.xwk-cap) are cartels: unchanged. */
.xdesc:not(.xwk-cap) p, .lz-yr .lz-body p { margin: 0; }
.xdesc:not(.xwk-cap) p + p, .lz-yr .lz-body p + p, #biographie .body + .body { text-indent: var(--retrait); }

/* Collections = Figma "carte collection" type: the name in Corps, the place in Méta mono */
.xlist.coll .xttl { font-family: var(--f-diplomat); font-size: var(--fs-corps); line-height: var(--lh-corps); }
.xlist.coll .xitem.is-current > .xrow { background: var(--accent-vif); box-shadow: none; }
.xq-work figcaption, .xq-artist, .xq-title, .xq-more { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); }

/* Publications, list view: the SAME sizing as Collections (Seba 30.09) — the title in Corps,
   year · type · "City, Publisher" in Méta mono */
.xlist.pub .xttl { font-family: var(--f-diplomat); font-size: var(--fs-corps); line-height: var(--lh-corps); color: var(--encre-primaire); }
.xlist.pub .xyr { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); color: var(--encre-primaire); }
.pubview, .pubview button { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); }
.pubview button.is-on { font-weight: 400; color: var(--encre-primaire); border-bottom-color: var(--encre-primaire); }

/* THE GALERIE = Figma's collection card ("carte collection", Seba 30.09), ONE grid on every page and
   home section since 04.10 (wireframe .xgalerie / .xg-item: it was Couvertures, Cartes and the
   Expositions / Actualités Galerie): a card with a 5px inner margin, the date in Corps, the
   image in the card's 228/320 format, the title in Corps, the place in Méta mono; 5 across, 2 on
   a phone, as the wireframe (it was 6 here). Since 05.10 it works as a list row (Seba): the
   cards' grey, black text, the accent (white) on hover; it was a black card. Since 06.10 (designer,
   Figma home, Publications Galerie: "caption below title to keep everything nicely rowed") the date
   and the title stand at the top of the text and the place at the card's foot, 6 inside the card all
   round (it was 5, and 40 at the foot): the cards of a row share its height, so their places line up. */
.xgalerie { gap: var(--couture); align-items: stretch; }
.xg-item { display: flex; flex-direction: column; gap: var(--couture); padding: calc(var(--sp-12) / 2);
  background: var(--fond-carte); color: var(--encre-primaire); transition: background-color var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease); }
.xg-item:hover, .xg-item:focus-visible { background: var(--accent-vif); color: var(--encre-primaire); }
.xg-item.xstatic:hover { background: var(--fond-carte); color: var(--encre-primaire); }   /* an exhibition with nothing behind it: no rollover */
.xgalerie .xg-item.is-current { background: var(--accent-vif); color: var(--encre-primaire); }   /* the institution open behind its record */
/* the date in Méta, as the frame (Seba 06.10: "follow the figma, date in méta"; from 30.09 it was in Corps,
   Seba then: the dates "feel small") */
.xg-yr { margin: 0; color: inherit;
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0; }
.xg-img { display: block; aspect-ratio: 228 / 320; width: 100%; background: var(--fond-carte); overflow: hidden; }
.xg-img img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover;
  box-shadow: none; transform: none; transition: none; }
.xg-item:hover .xg-img img, .xg-item:focus-visible .xg-img img { transform: none; }
.xg-ttl { margin: 0; color: inherit; font-family: var(--f-diplomat); font-size: var(--fs-corps); line-height: var(--lh-corps); }
.xg-pl { margin: auto 0 0; color: inherit; font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0; }
/* no image yet: the grey block, its title centred in it (Seba 04.10) */
.xg-none { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-8); }
.xg-t { font-family: var(--f-diplomat); font-size: var(--fs-titre-site); line-height: var(--lh-titre-site); color: var(--encre-seconde); }
@media (max-width: 900px) { .xgalerie { gap: var(--couture); } }

/* footer (not in Figma — tokens only, see docs/DESIGN-GAPS.md) */
.site-foot { border-top: 0; background: var(--fond-carte); }
.site-foot .body { font-family: var(--f-diplomat); font-size: var(--fs-titre-site); line-height: var(--lh-titre-site); }
.foot-block .ft-label { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); color: var(--encre-seconde); letter-spacing: 0; }


/* ============================================================
   2 · ACTUALITÉS  (the x* kit — shared with Expositions)
   Not in Figma: dressed in its vocabulary, see docs/DESIGN-GAPS.md
   ============================================================ */

/* THE PAGE'S BAR (wireframe .xpagebar, 04.10, after Mousse Magazine): the page's title and its tools,
   sticky under the menu bar, dressed as the home's section bars: white, the title at the left (06.10;
   it was centred), the tools at the right end (they were a second black bar at the foot) */
.xpagebar { background: var(--fond-page); border-top: 0; border-bottom: 0; box-shadow: 0 var(--bordure-fine) 0 var(--fond-surface);
  padding: var(--sp-12); }   /* the menu bar's height, as the home's section heads (05.10); 12 from the edges (06.10; it was 20) */
.xpage-t { font-family: var(--f-diplomat); font-size: var(--fs-small); line-height: calc(var(--fs-titre-site) * var(--lh-titre-site)); letter-spacing: 0; }   /* Small, as the home's section heads (designer 06.10), on the menu bar's line box */
@media (min-width: 901px) {
  .xpagebar { justify-content: flex-start; }
  .xpagebar > .xtools, .xpagebar > .pubview { position: absolute; top: 0; bottom: 0; right: var(--sp-12); align-items: center; }
}
.xtools { color: var(--encre-primaire); font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); }
.xtools button { font-family: var(--f-mono); font-size: var(--fs-mono-meta); letter-spacing: 0; color: var(--encre-primaire); opacity: .6; }
.xtools button:hover { color: var(--encre-primaire); opacity: 1; }
.xtools button.is-on { color: var(--encre-primaire); opacity: 1; font-weight: 400; }
.xtools button[data-view].is-on { border-bottom-color: var(--encre-primaire); }
.xtools .sep { color: var(--fond-surface); }
.xtools .xsel { opacity: 1; color: var(--encre-primaire); border: var(--bordure-fine) solid var(--encre-primaire); border-radius: 0; padding: var(--sp-4) var(--sp-8); }
.xtools .xsel:hover, .xtools .xsel[aria-expanded="true"] { background: var(--accent-vif); }
.xtools .xsel-ar { color: inherit; }
.xtools .xmenu { background: var(--fond-page); border: var(--bordure-fine) solid var(--fond-surface); box-shadow: none;
  padding: var(--sp-12) var(--sp-16); gap: var(--sp-8); }
.xtools .xmenu button.is-on { border-bottom-color: var(--encre-primaire); }

/* the empty-type line ("Aucune conférence annoncée pour le moment.") */
.xwithheld { font-family: var(--f-mono); font-size: var(--fs-mono-meta); color: var(--encre-seconde); padding: var(--sp-16) var(--sp-20); }

/* record: the image viewer and the works grid inside the chartreuse overlay */
.xs-btn { color: var(--encre-primaire); }
.xs-count { color: var(--encre-primaire); }
.xworks { border-top-color: var(--rule); }
.xworks-grid { gap: var(--sp-24) var(--couture); }
.xw-img:empty, .xw-img { background: transparent; }
.xwork:hover .xw-img img { opacity: 1; outline: var(--couture) solid var(--fond-page); }

/* ============================================================
   3 · EXPOSITIONS  (the list, Galerie and record come from the shared x* kit above)
   ============================================================ */
/* the CMS uses <sub> for small print (links, references) inside descriptions, not for
   subscripts: set it as Méta mono on the baseline */
.xdesc sub { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); vertical-align: baseline; }
.xdesc sub a, .xdesc sub em { font-size: inherit; }
/* a row with nothing behind it (no image, text or works) stays a quiet card: no rollover */
.xitem.xstatic:hover > .xrow, .xitem.xstatic:has(> .xrow:focus-visible) > .xrow { background: none; }
/* the work record: its title in mono at the Titre size (italics replaced by mono, 06.10), the cartel in Méta mono, relations as Titre site rows */
.xwk-title { font-family: var(--f-mono); }
.xwk-cap { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); color: var(--encre-primaire); }
.xwk-cap em { color: var(--encre-primaire); }
.xrel li { border-bottom-color: var(--rule); }
.xrel { border-top-color: var(--rule); }
.xback { color: var(--encre-primaire); }
.xback:hover { text-decoration: underline; }

/* ============================================================
   4 · CHRONOLOGIE  (not in Figma: dressed in its vocabulary, see docs/DESIGN-GAPS.md)
   ============================================================ */
.lz-strip { background: var(--fond-page); border-bottom: 0; }
/* the bar is opaque here (the wireframe's was transparent over the strip): on desktop it takes its
   place in the page's column, so the strip starts under it instead of losing its top 44–49px behind
   it (review 30.09). Phones already have it in the flow. */
@media (min-width: 900px) { body:has(#lzStrip) .topbar { position: relative; flex: 0 0 auto; } }
.lz-track { gap: var(--couture); }
.lz-fig img { background: var(--fond-carte); }
.lz-year { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0;
  background: var(--fond-page); color: var(--encre-primaire); padding: var(--sp-4) var(--sp-8); }
.lz-narr { border-right: 0; padding-left: var(--sp-20); padding-right: var(--sp-40); }
.lz-yr { border-bottom: var(--couture) solid var(--fond-carte); }
.lz-yr h2 { font-family: var(--f-diplomat); font-weight: 400; letter-spacing: 0;
  font-size: var(--fs-section); line-height: var(--lh-section); color: var(--encre-seconde); }
.lz-yr.on h2 { color: var(--encre-primaire); }
.lz-yr p { font-family: var(--f-diplomat); font-size: var(--fs-corps); line-height: var(--lh-corps); text-align: left; }   /* set left like every other text, the biography's and the records' (Seba 06.10; it was justified) */
.lz-src { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0; }
/* the caption index = a column of Figma cards, the current one in accent */
.lz-idx { background: var(--fond-page); padding-left: var(--sp-20); padding-right: var(--sp-20); }
.lz-cap { background: var(--fond-carte); border-bottom: 0; margin-bottom: var(--couture); padding: var(--sp-12) var(--sp-16);
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); color: var(--encre-primaire); opacity: .55; }
.lz-cap:hover { opacity: 1; }
.lz-cap.on { background: var(--accent-vif); color: var(--encre-primaire); padding-left: var(--sp-16); opacity: 1; }
.lz-cap .lz-cy { color: var(--encre-primaire); letter-spacing: 0; }
/* each caption in the kit's format (design.js §0c): the card holds a band (year + description)
   and ruled rows; the band spans the card, band and rows share a 16px inset. The card stays the
   Figma grey, turning accent when its image is the active one; the others stay dimmed. */
.lz-idx .lz-cap.d-cap { padding: 0; --d-bleed: 0px; --d-inset: var(--sp-16); }
.lz-idx .lz-cap.d-cap.on { padding-left: 0; }
.lz-idx .lz-cap .d-band .lz-cy { display: inline; margin: 0 1ch 0 0; color: var(--encre-primaire); }
.lz-idx .lz-cap .d-rows > :last-child { border-bottom: 0; }
.lz-idx.dim .lz-cap.on { background: var(--fond-carte); opacity: .55; }   /* a year without images: the held caption is not lit (chronologie.js) */
/* the year rail: a white bar since 05.10 like the menu bar (it was black, the current year in the
   accent): years dimmed, full ink on hover, the current one full ink and underlined */
.year-nav { background: var(--fond-page); border-top: 0; box-shadow: 0 calc(-1 * var(--bordure-fine)) 0 var(--fond-surface); }
.year-nav a { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0;
  color: var(--encre-primaire); border-right-color: color-mix(in srgb, var(--encre-primaire) 15%, transparent); opacity: .6; }
.year-nav a:hover { color: var(--encre-primaire); opacity: 1; }
.year-nav a.on { color: var(--encre-primaire); font-weight: 400; opacity: 1; text-decoration: underline; text-underline-offset: var(--sp-4); }

/* ============================================================
   5 · DESIGN EXPLORATIONS (behaviour in design/design.js — design version only)
   ============================================================ */


/* THE COVER is the wireframe's own since v105 (index.html .cover; layout and foot grid in home.css;
   its name scrolls away and the bar's title drops in, home.js, 05.10): dressed here in the tokens.
   The name and the colophon stay WHITE over the photo, on its dark veil (Seba 05.10: a white veil
   with black text "is not good"); the white menu bar under it takes the title in black once docked */
.cover { background: var(--fond-page); color: var(--encre-inverse);
  padding: var(--sp-48) var(--sp-12) var(--sp-20); }   /* the name's capitals 48 under the top, 12 from the edges (designer 06.10, Figma home; it was 5svh and 20) */
.cover-media::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--fond-sombre) 55%, transparent),
  color-mix(in srgb, var(--fond-sombre) 0%, transparent) 34%, color-mix(in srgb, var(--fond-sombre) 0%, transparent) 56%,
  color-mix(in srgb, var(--fond-sombre) 80%, transparent)); }
.cover-nom { font-family: var(--f-diplomat); font-weight: 400; font-size: var(--fs-titre); line-height: var(--lh-titre); letter-spacing: 0;
  text-align: left; margin-top: calc((var(--cap) - var(--lh-titre)) / 2 * 1em); }   /* set left (designer 06.10; it was centred); the margin lifts the line box so its capitals stand on the padding's edge */
/* phones: "Alina Szapocznikow" is 10.84 em wide in Diplomat (measured; Mercure 8.80): the name
   shrinks to the width it has, the Titre ratio 56/60 kept (Seba 01.10) */
@media (max-width: 899px) { .cover-nom { font-size: min(var(--fs-titre), calc((100vw - 2 * var(--sp-20)) / 11)); line-height: var(--lh-titre); } }
.cover-foot { gap: var(--sp-12); }   /* three columns 12 apart: at 1512 they start at 12, 512, 1012, as the frame (was 20) */
.cover-foot .ft-label { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta);
  color: var(--encre-inverse-seconde); letter-spacing: 0; }
.cover-foot .body { font-family: var(--f-diplomat); font-size: var(--fs-titre-site); line-height: var(--lh-titre-site); color: var(--encre-inverse); }
.cover-foot .meta { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta);
  color: var(--encre-inverse); letter-spacing: 0; font-style: normal; }
.cover-foot a { color: var(--encre-inverse); }
@media (min-width: 901px) { .cover-foot { row-gap: var(--sp-4); } }





/* GALERIE IMAGES FLOAT WHOLE (Seba 30.09, after the Mousse Magazine shop): never cropped and never
   touching the frame, the image fits a centred box with wide margins of the card, whatever its
   proportions (a fixed crop lost up to a third of one; the client asked for no crop in the
   Galerie, 5 Sept). */
.xg-item .xg-img { display: flex; align-items: center; justify-content: center; background: transparent; }
.xg-item .xg-img img { width: auto; height: auto; max-width: 74%; max-height: 78%; object-fit: contain; }
.xg-item .xg-none { background: transparent; }   /* no image: the card's grey, white with the card on hover (Seba 06.10; the frame has no fill there; it was a white block) */

/* ============================================================
   SEBA 30.09, ROUND 2 — lists, Galerie, record table (every page)
   ============================================================ */

/* LISTS: the rollover reveal was hidden here on 30.09 ("it repeated what the row shows"); the
   wireframe's floating previews (v110) answer the meeting of 1 Oct (a collective show previews its
   works, never the installation view, and the list never moves): shown, in the tokens. */

/* RECORD (Figma "AS – Home with overlay"): one column, the image centred (Seba 30.09), then the
   information. ONE FORMAT FOR EVERY OVERLAY (Seba 30.09: "a class that applies this to all
   overlays"): design.js §0 fmt() tags what each engine renders with three classes, and only
   these rules draw them:
     .d-band   the grey band heading a block: the title over the fields, a list's heading,
               a caption's title line, a work tile's title
     .d-rows   the ruled rows under it: a hairline under each row (and on top, except right under a band)
     .d-frame  a work's image, whole and centred in a 4:5 frame, as in the cards
   In a record (Figma "AS – Home with overlay", synced 06.10): band and rows span the text, no bleed,
   their words 6 in from either edge and 6 above and below, cap to baseline; a 0.5 mid-grey rule under
   each row and none under the band (Seba 06.10: "no line anymore below the small mono title"). In a
   tile of works: 8 in, 4 above and below, the rules black at 15% above and under the date (the frame's
   tiles). The Chronologie's caption column keeps its own: the band 16 past the text, 4 above and below. */
.xfiche, .lz-idx { --d-line: color-mix(in srgb, var(--encre-primaire) 15%, transparent); --d-bleed: var(--sp-16); --d-inset: 0px;
  --d-pady: var(--sp-4); --d-rule: var(--bordure-fine); }   /* the overlays and the Chronologie caption column (§0c) */
.xfiche { --d-bleed: 0px; --d-inset: 6px; --d-pady: calc(6px - var(--trim-meta)); --d-line: var(--gris-moyen); --d-rule: 0.5px; }
.xfiche .xworks-grid, .xfiche .xcoll-works { --d-bleed: 0px; --d-inset: var(--sp-8); --d-pady: calc(var(--sp-4) - var(--trim-meta));
  --d-line: color-mix(in srgb, var(--encre-primaire) 15%, transparent); --d-rule: var(--bordure-fine); }
.xfiche .xfiche-body { display: block; }
.xfiche .xfiche-fig { margin: var(--sp-24) 0 var(--sp-32); display: flex; flex-direction: column; align-items: center; }
.xfiche .xfiche-fig .xs-stage { display: flex; justify-content: center; }
.xfiche .xfiche-fig img { width: auto; max-width: 100%; height: auto; max-height: 62vh; background: transparent; }
.xfiche .xfiche-fig figcaption { text-align: center; }
:is(.xfiche, .lz-idx) .d-band { display: block; margin: 0 calc(-1 * var(--d-bleed));
  padding: var(--d-pady) calc(var(--d-bleed) + var(--d-inset));
  background: color-mix(in srgb, var(--encre-primaire) 6%, transparent); color: var(--encre-primaire); text-align: left;
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); font-weight: 400; letter-spacing: 0; }
:is(.xfiche, .lz-idx) .d-rows { display: block; margin: 0; padding: 0; list-style: none; text-align: left;
  border-top: var(--d-rule) solid var(--d-line); }
:is(.xfiche, .lz-idx) .d-rows > * { display: block; margin: 0; padding: var(--d-pady) var(--d-inset); border-bottom: var(--d-rule) solid var(--d-line);
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); color: var(--encre-seconde); }
.xfiche .d-band + .d-rows { border-top: 0; }                                            /* the band is the block's top */
.xfiche :is(.xworks-grid, .xcoll-works) .d-band + .d-rows { border-top: var(--d-rule) solid var(--d-line); }   /* a tile's date keeps its rule above */
.xfiche .d-frame { box-sizing: border-box; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: contain; object-position: center; padding: 10%; background: transparent; }   /* no tint (Seba) */
/* the variants: fields are label | value at half width; a list of records keeps its larger,
   clickable rows (only the rules are shared); work titles in mono (no italics, 06.10); blocks 48px apart (the frame's) */
.xfiche .xfields.d-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-bottom: var(--sp-48); }
.xfiche .xrel.d-rows { max-width: none; margin-bottom: var(--sp-48); }
.xfiche .xrel.d-rows > li { padding: 0; font: inherit; color: inherit; }
.xfiche h3.d-band { margin-top: var(--sp-48); }
/* THE RECORD'S RHYTHM, cap to baseline (Figma "AS – Home with overlay", synced 06.10): the dates 12 under
   the title; whatever comes next (the strip, or the fields when a record has no image) 48 under the
   dates; the running text 48 under the block above it and 48 over the block under it, its paragraphs 12
   apart (and indented); the works 48 under the block above (the wireframe's 34, 18 and 69 replaced) */
.xfiche .xfiche-dates { margin-top: calc(var(--sp-12) - var(--trim-titre) - var(--trim-section)); }
.xfiche .xfiche-body { margin-top: calc(var(--sp-48) - var(--trim-section)); }
.xfiche .xfiche-title + .xfiche-body, .xfiche .xfiche-title + .xfiche-side { margin-top: calc(var(--sp-48) - var(--trim-titre)); }   /* a record without dates (a publication, a collection): 48 under the title */
.xfiche .xfiche-body > .xfiche-fig.d-strip-on:first-child { margin-top: 0; }   /* the body's margin sets it, whichever line is above */
.xfiche .xfiche-side > .xdesc:not(.d-cap) { margin-top: calc(-1 * var(--trim-corps)); margin-bottom: calc(-1 * var(--trim-corps)); }
.xfiche .xdesc:not(.xwk-cap) p + p { margin-top: calc(var(--sp-12) - 2 * var(--trim-corps)); }
.xfiche .xworks { border-top: 0; padding-top: 0; margin-top: var(--sp-48); }
.xfiche .xworks > .d-band { margin-top: 0; margin-bottom: var(--sp-16); }
.xfiche .xwk-cap.d-cap { max-width: none; margin: 0 0 var(--sp-32); }
.xfiche .xcoll-work figcaption.d-cap { margin-top: var(--sp-8); }
.xfiche .xw-ttl.d-band { margin-top: var(--sp-8); }
/* one grid for every set of works (Collections, an exhibition, an actualité): same tiles, same
   seams; a tile turns white on hover, as rollovers do in the overlay */
/* STRICT (Seba 06.10: "years perfectly rowed … really strict"; tried on design/works-grid, adopted the same day): at most 5 tiles
   across (Seba 06.10, with the sheet's 12px edges: "keeping related works at 5 per row", the other
   galleries' count; it was 6, and before that 200px tiles, 12 on a wide screen), and each tile takes
   three rows of the grid, its image, its title, its date (CSS subgrid): the titles of a row share the
   height of its longest one, so the row's dates stand on one line and no title is cut */
.xfiche .xworks-grid, .xfiche .xcoll-works { grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 4 * var(--couture)) / 5)), 1fr)); gap: 0 var(--couture); }
@media (max-width: 900px) { .xfiche .xworks-grid, .xfiche .xcoll-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xfiche .xworks-grid > .xwork, .xfiche .xcoll-works > .xcoll-work { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  align-content: start; margin: 0 0 var(--sp-24); }
.xfiche .xcoll-works > .xcoll-work > figcaption.d-cap { grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; margin: 0; }
.xfiche .xcoll-works > .xcoll-work > figcaption.d-cap > .d-band { margin-top: var(--sp-8); }
.xfiche .xw-img { aspect-ratio: auto; }
.xfiche .xw-img:empty { aspect-ratio: 4 / 5; }       /* a work without an image keeps the rhythm */
.xfiche .xwork { transition: background-color var(--mo-fast) var(--mo-ease); }
.xfiche .xwork:hover, .xfiche .xwork:focus-visible { background: var(--wash); }
.xfiche .xwork:hover .xw-img img { outline: 0; }
/* a collection's works open their records too (?v=102): the IMAGE is the link (the caption stays
   selectable text); while it is hovered or focused the whole tile turns white, like the rest */
.xfiche .xcoll-work { transition: background-color var(--mo-fast) var(--mo-ease); }
.xfiche .xcoll-work:has(.xcoll-wlink:hover), .xfiche .xcoll-work:has(.xcoll-wlink:focus-visible) { background: var(--wash); }
.xfiche .xcoll-wlink:hover img, .xfiche .xcoll-wlink:focus-visible img { opacity: 1; }   /* the wireframe dims it; here the tile turns white */
/* ONE SLIDESHOW CLASS FOR EVERY OVERLAY (Seba 30.09; design.js §0 tags it): .d-series is any
   record's image viewer, the engines' own (figure.xseries). The image centred, ‹ n/N › centred
   under it, the caption under that; a click on the image steps. */
.xfiche .d-series .xs-nav { justify-content: center; }
.xfiche .d-series [data-step]:not(button), .xfiche .d-series [data-d-step]:not(button) { cursor: e-resize; }
/* ‹ › big enough to see and to hit (review 30.09: 8px glyphs in a 13×16px box, in every viewer and
   on the Collections ‹ n/17 ›): the glyph at Corps size in a 40px square; the count stays Méta */
.xfiche { --d-btn: var(--sp-40); }
.xfiche .xs-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--d-btn); min-height: var(--d-btn);
  padding: 0; font-family: var(--f-diplomat); font-size: var(--fs-corps); line-height: 1; cursor: pointer; }
.xfiche .xs-nav, .xfiche .xseq { display: flex; align-items: center; gap: var(--sp-4); }
/* EVERY record image sits in ONE fixed stage (Seba 30.09, ex-5419: "jumpy AF", then "apply this
   everywhere, can't have inconsistencies"; that exhibition's 51 images ran 452–609px tall and
   moved everything below by up to 157px, and each step to an image not yet loaded collapsed it
   to 0×0 first). One height for single images and slideshows alike, on every page, so the
   information always starts at the same place; the image fitted inside whole and centred,
   never enlarged past its file (scale-down: the CMS copies are ~700px). A slideshow (.d-multi)
   also keeps room for ‹ n/N › and three lines of caption, so nothing under it moves. */
.xfiche { --d-stage: min(62vh, 110vw); }
.xfiche .d-series .xs-stage { box-sizing: border-box; width: 100%; height: var(--d-stage);
  display: flex; align-items: center; justify-content: center; }
.xfiche .d-series .xs-stage img, .xfiche .d-series > img { display: block; width: 100%; height: var(--d-stage); max-width: none; max-height: none;
  object-fit: scale-down; object-position: center; }
/* a work's video plays in the same stage (design.js videos()) */
.xfiche .d-series .xs-stage video, .xfiche .d-series > video { display: block; width: 100%; height: var(--d-stage); object-fit: contain; background: transparent; }
/* the caption of a slideshow has ONE height, whatever each image says (review 30.09: the
   reserve held 2.5 lines, so longer captions still moved the record by 7–20px): the ‹ n/N ›
   row, then four lines of caption; a longer one scrolls inside its own box */
.xfiche .d-series.d-multi figcaption { box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4); height: calc(var(--d-btn) + var(--sp-4) + 6.2em); min-height: 0; }
.xfiche .d-series.d-multi figcaption .xs-cap {
  display: block; width: 100%; font-size: inherit; line-height: 1.55; max-height: 6.2em; margin: 0; overflow-y: auto; overscroll-behavior: contain; }
.xfiche .d-series .xs-cap p { margin: 0; }
/* THE FILM STRIP (design.js 0g; designer 06.10, Figma "AS – Home with overlay"; Seba 06.10: "image as film
   strip is nice, make sure the UX is amazing"): the record's images in one row, edge to edge across the
   sheet, each at the strip's height (550 of 982 in the frame), 12 apart, the current one in the middle;
   under each its caption, centred, full ink under the current image and 60% under the others (the frame's),
   in boxes of one height (design.js: the record's tallest caption, 4 lines at most); ‹ n/N › centred under
   the strip, in Méta, the arrows 12 from the count and each a 40px target outwards. The frame's spacing,
   cap to baseline: the strip 48 under the dates, a caption 10 under its image, the counter 18 under the
   captions, the next block 48 under the counter. This replaces the one-image stage above, which stays only
   for a page whose engine has no AlinaRecords.images. */
.xfiche { --d-strip: min(56vh, 110vw);
  --d-ctr: calc((var(--sp-40) - var(--cap) * var(--fs-mono-meta)) / 2); }   /* a 40px button's room above (and under) the counter's capitals */
.xfiche .xfiche-fig.d-strip-on { display: block; margin: calc(var(--sp-48) - var(--trim-section)) 0 calc(var(--sp-48) - var(--d-ctr)); }
.xfiche .xfiche-fig.d-strip-on:not(.d-multi) { margin-bottom: calc(var(--sp-48) - var(--trim-meta)); }
.xfiche .xfiche-fig.d-strip-on.d-nocap:not(.d-multi) { margin-bottom: var(--sp-48); }
.xfiche .d-strip { position: relative; display: flex; align-items: flex-start; gap: var(--sp-12); margin: 0 calc(-1 * var(--d-fpad));
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; outline-offset: -2px; }
.xfiche .d-strip::-webkit-scrollbar { display: none; }
.xfiche .d-strip.d-dragging { scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
.xfiche .d-strip.d-dragging, .xfiche .d-strip.d-dragging * { cursor: grabbing !important; }
.xfiche .d-slide { flex: none; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; }
.xfiche .d-slide-img { width: 100%; height: var(--d-strip); display: flex; align-items: flex-end; justify-content: center; }
.xfiche .d-slide-frame { flex: none; background: var(--fond-carte); }   /* the image's place while it loads: the cards' grey */
.xfiche .d-slide-frame > .d-slide-media { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain;
  background: transparent; opacity: 0; transition: opacity var(--mo-med) var(--mo-ease); -webkit-user-drag: none; }
.xfiche .d-slide-frame > .d-slide-media.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .xfiche .d-slide-frame > .d-slide-media { transition: none; } }
/* what a click does, shown by the pointer: a neighbour comes to the centre, the current image gives the next */
.xfiche .d-slide.is-on .d-slide-img, .xfiche .d-slide.is-after .d-slide-img { cursor: e-resize; }
.xfiche .d-slide.is-before .d-slide-img { cursor: w-resize; }
.xfiche .d-slide.is-on:last-child .d-slide-img { cursor: default; }
.xfiche .d-slide-cap { box-sizing: border-box; width: 100%; height: var(--d-caph, 0px); margin-top: calc(10px - var(--trim-meta)); overflow: hidden;
  text-align: center; font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0;
  color: var(--encre-seconde); transition: color var(--mo-fast) var(--mo-ease); }
.xfiche .d-strip-on.d-nocap .d-slide-cap { margin-top: 0; }
.xfiche .d-slide.is-on .d-slide-cap { color: var(--encre-primaire); overflow-y: auto; overscroll-behavior: contain; }
.xfiche .d-slide-cap .xs-cap, .xfiche .d-slide-cap .xs-cap p { margin: 0; font: inherit; color: inherit; max-height: none; overflow: visible; }
.xfiche .d-strip-nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-12); margin: calc(18px - var(--trim-meta) - var(--d-ctr)) 0 0;
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0; color: var(--encre-primaire); }
.xfiche .d-strip-on.d-nocap .d-strip-nav { margin-top: calc(var(--sp-24) - var(--d-ctr)); }
.xfiche .d-strip-nav .xs-btn { min-width: var(--sp-40); min-height: var(--sp-40); padding: 0; border: 0; background: none; color: inherit;
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: 1; }
.xfiche .d-strip-nav .xs-btn[data-d-step="-1"] { justify-content: flex-end; }
.xfiche .d-strip-nav .xs-btn[data-d-step="1"] { justify-content: flex-start; }
.xfiche .d-strip-nav .xs-btn[aria-disabled="true"] { opacity: .3; cursor: default; }
.xfiche .d-strip-nav .xs-count { text-align: center; }
/* each fact once (design.js dedupe()): a legend's lines one per row; a repeat stays in the page, hidden */
.xfiche .d-l { display: block; }
:is(.xfiche, .lz-idx) .d-dup { display: none !important; }
.xfiche .xfiche-side .xdesc:not(.d-cap) { max-width: 880px; }   /* ~95 characters of Corps: a readable line in the wider panel */
@media (min-width: 901px) { .xfiche .xfiche-side .xdesc:not(.d-cap) { max-width: calc(50% - var(--sp-12)); } }   /* up to the middle of the sheet, 12 short of it (designer 06.10, Figma "AS – Home with overlay") */

/* ACCESSIBILITY (independent review 30.09) */
/* the focus ring takes the text's colour: the accent ring vanished on the chartreuse overlay
   and nearly on white (white on the black bar, black on white and on the overlay) */
:focus-visible { outline: var(--bordure-normale) solid currentColor; outline-offset: var(--bordure-normale); }
/* …but not on what a click or a closing record focused (design.js 0e .d-quiet; the wireframe's .xquiet
   rows): closed with Esc, a record hands the focus back to its row, card or tile, the browser counts it
   as keyboard focus, and the ring framed it in black (Seba 06.10: "undesired black frame around entries
   when user clicks"). Tab to the next element shows the ring as before. */
.d-quiet:focus-visible, .xitem.xquiet > .xrow:focus-visible { outline: none; }
/* the closed overlay leaves the Tab order once it has slid out (its content stays in the DOM,
   off-screen: its links were still reachable); visible again the moment it opens, so the
   engines' focus() on open still lands */
.xfiche { visibility: hidden; transition: transform var(--mo-slow) var(--mo-glide), visibility 0s linear var(--mo-slow); }
body.xopen .xfiche { visibility: visible; transition: transform var(--mo-slow) var(--mo-glide), visibility 0s; }
body.xopen .xfiche.xcovered { transition: transform var(--mo-slow) var(--mo-glide), box-shadow 0s linear var(--mo-slow), visibility 0s; }
.xfiche.xcovered { transition: transform var(--mo-slow) var(--mo-glide), box-shadow 0s linear var(--mo-slow), visibility 0s linear var(--mo-slow); }   /* "Tout fermer": the covered sheets slide out with the rest */


/* the Collections publiques record: its rebuilt table (design.js §0) sits between the title and
   the works, with the same band and rules as every other record */
.xfiche .d-collside { margin-top: var(--sp-24); }
.xfiche .xfields a { color: inherit; }   /* a website in a field row: one look, no underline (Seba 12.10), on the sheets of a collection, an exhibition and an actualité */
/* its works, their captions and every other band, rows and frame: the shared kit, section 5
   RECORD above */

/* HOME SECTION HEADS — every section of the home: the same space above and below each (60px from
   the title's line box to the content either side, Seba 30.09; no ↓ since 04.10). Since 04.10 the
   head is the section's sticky bar (wireframe .hz-bar, with Liste / Galerie at its right end), so
   the bar itself is the menu bar's height (Seba 05.10: 12px above and below the title, as the menu
   bar; it was 16) and the rest of the 60px is space around it: the section's MARGIN above (never
   the bar's: a sticky bar keeps its margin when it sticks, and stood 44px under the top with the
   page showing above it; nor the section's padding, since 05.10: a jump to a section showed that
   padding as part of its head, which then read taller than the menu bar), and the top of what
   follows. The sheet paddings that used to add to it (some inline in index.html) are zeroed here. */
:root { --d-head: 60px; }                                   /* Seba 30.09: 60 below (not a Figma step); above, see the next rule */
/* the space BETWEEN two sections, from the end of one to the next one's bar: 96 (designer 06.10, Figma
   home: every section ends on 96, "desktop-gutter-margin × 8"; it was 48). After the biography, which
   ends on its own 96 (section 1, Biographie), Actualités keeps 48: 144, as in the frame. */
body.d-home section:has(> .hz-bar) { padding-top: 0 !important; margin-top: var(--sp-96); }
body.d-home #facingHome { margin-top: calc(var(--d-head) - var(--sp-12)); }
body.d-home #biographie { margin-top: 0; }   /* the first section's bar flush under the menu bar (designer 06.10, Figma home) */
body.d-home section > .hz-bar { background: var(--fond-page); border-top: 0; box-shadow: 0 var(--bordure-fine) 0 var(--fond-surface); }
body.d-home .hz-down, body.d-home a.hz-down { padding: var(--sp-12); border: 0; }
body.d-home section > .hz-bar + * { padding-top: calc(var(--d-head) - var(--sp-12)) !important; }
@media (min-width: 901px) {   /* the title centred on the whole bar, the switch at its right end */
  body.d-home section > .hz-bar > .pubview { position: absolute; top: 0; bottom: 0; right: var(--sp-12); padding: 0; }
}
/* no section adds its own space after it (the wireframe's ~108 at 1512 under Actualités, Expositions
   and Chronologie made 156 there and 48 after Collections): the 96 above each bar is the whole gap.
   Publications keeps its own, over the footer. */
body.d-home section:has(> .hz-bar):not(#publications) { padding-bottom: 0; }



/* ============================================================
   TOKEN COVERAGE (05.10) — wireframe rules that set their own value where a token should rule,
   so a Figma variable change reaches them too (audit of the live preview at 1512 and 375)
   ============================================================ */
/* mono text the wireframe sets at body's 1.65 or at 1.45: Méta's line height (line-height/caption) */
.xall, .qa, .qa-btn, .xpeek-meta, .cs-yr, .xq-date { line-height: var(--lh-meta); }
.xlist.xstd .xrow .xlieu, .xlist.xstd .xrow .xville { line-height: var(--lh-meta); }   /* outranked design.css's .xrow .xlieu */
/* the Publications rollover titles were mono at the wireframe's .92rem (14.72px), a size outside the
   system: Méta, as the Collections rollover's */
.xq-work.xq-pub .xq-title { font-size: var(--fs-mono-meta); line-height: var(--lh-meta); }
/* the home Chronologie strip: its caption in Corps (it kept the wireframe's 1.35), its ‹ › as the
   record viewers' (the glyph in Corps in a 40px square; they were mono at 25.6px) */
.cs-cap-t { line-height: var(--lh-corps); }
.cs-nav .xs-btn { font-family: var(--f-diplomat); font-size: var(--fs-corps); width: var(--sp-40); height: var(--sp-40); }
/* ITS CAPTION IN A BOX OF ONE HEIGHT (designer 06.10, Figma home "Paragraph:margin"; design.js 0d):
   the cards' grey, 6 under the strip and over the foot, at least 192 tall (16 × 12), the caption
   centred at its top on 2/3 of its width (994 of 1492 in the frame), its room the tallest caption's
   (--d-cs-cap, measured), then ‹ n/N › in Méta 48 under it, at the foot. Gaps from the cap height to
   the baseline, as the frame's (--trim-*, section 1 Biographie). */
.d-csbox { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  min-height: calc(var(--sp-12) * 16); margin: 6px 0;
  padding: calc(var(--sp-12) - var(--trim-corps)) 0 calc(var(--sp-12) - var(--trim-meta)); background: var(--fond-carte); }
.d-csbox .cs-cap { box-sizing: border-box; width: 100%; max-width: calc(200% / 3); min-height: var(--d-cs-cap, 0px); margin: 0; text-align: center; }
.d-csbox .cs-cap-t { font-family: var(--f-diplomat); font-size: var(--fs-corps); line-height: var(--lh-corps); color: var(--encre-primaire); }
.d-csbox .cs-cap-m { margin-top: calc(var(--sp-12) - var(--trim-corps) - var(--trim-meta)); font-family: var(--f-mono);
  font-size: var(--fs-mono-meta); line-height: var(--lh-meta); letter-spacing: 0; color: var(--encre-seconde); }
.d-cscount { display: flex; align-items: center; gap: var(--sp-12); margin: calc(var(--sp-48) - 2 * var(--trim-meta)) 0 0;
  font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); color: var(--encre-primaire); }
.d-cscount[hidden] { display: none; }
.d-cscount .xs-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-8); margin: calc(-1 * var(--sp-8));
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.d-cscount .xs-btn[aria-disabled="true"] { opacity: .3; cursor: default; }
@media (max-width: 900px) { .d-csbox { padding-left: var(--sp-12); padding-right: var(--sp-12); } .d-csbox .cs-cap { max-width: none; } }
/* the strip's own ‹ › at its edges go (Seba 06.10: "remove double arrows now that we implemented the
   counter"): the counter's arrows click them, so they stay in the page, out of sight and of the Tab order */
#chronoNav.cs-nav { display: none; }
/* white frames the wireframe paints with a literal #fff */
.xthumb-none, .qa-none { background: var(--fond-page); }


/* ============================================================
   PHONE PILE (Seba 06.10; tried on design/mobile-pile, adopted the same day): the pile on a phone (design.js 1m)
   On a phone the record panel covers the whole screen (Seba 06.10: "cover the homepage completely";
   the wireframe kept a sliver of the page). The pages of the Retour path pile at the bottom of the
   screen, at the panel's width, under the page on top (Seba 06.10: the bottom, within reach of the
   thumb; the top was tried): the first page at the very bottom, each newer one above it. Tabs in
   Small, the spines' white, the panel's grey on hover; the page on top ends where the pile starts.
   ============================================================ */
.d-mpile { display: none; }
@media (max-width: 900px) {
  .xfiche { width: 100vw; }   /* the whole screen: nothing of the page behind; its shadow, off screen at rest, marks the page edge as it slides */
  /* the pile: always laid out on a phone (empty, it takes no room), so tabs can fade out after it empties */
  .d-mpile { display: flex; flex-direction: column-reverse; position: fixed; right: 0; bottom: 0; z-index: 90; width: 100vw;
    --rule: color-mix(in srgb, var(--encre-primaire) 35%, transparent); }
  body:is(.d-mp-on, .d-mp-closing) .d-mpile { box-shadow: 0 calc(-1 * var(--sp-8)) var(--sp-24) color-mix(in srgb, var(--fond-sombre) 12%, transparent); }
  body:is(.d-mp-on, .d-mp-closing) #xfiche { height: calc(100dvh - var(--d-mp-n, 0) * var(--sp-40)); }
  .d-mp-tab { display: flex; align-items: center; gap: var(--sp-8); box-sizing: border-box; width: 100%; height: var(--sp-40); margin: 0;
    padding: 0 var(--sp-16); border: 0; border-top: var(--bordure-fine) solid var(--rule); background: var(--accent-vif);
    color: var(--encre-primaire); text-align: left; cursor: pointer;
    font-family: var(--f-diplomat); font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0;
    transition: opacity var(--mo-med) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease); }
  .d-mp-tab:hover, .d-mp-tab:focus-visible { background: var(--fond-carte); }
  /* a tab fades in over the edge of the page it stands for (design.js times it with the slide), and
     fades out where it is when its page comes back on top */
  .d-mp-tab.d-mp-new, .d-mp-tab.d-mp-out { opacity: 0; }
  .d-mp-tab.d-mp-out { pointer-events: none; }
  .d-mp-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .d-mp-more { font-family: var(--f-mono); font-size: var(--fs-mono-meta); line-height: var(--lh-meta); color: var(--encre-seconde); }
  body.d-mp-on #xficheInner .xback { display: none; }   /* the pile replaces the Retour link */
  body.d-mp-on #xficheInner .xclose-all { display: inline; }   /* the wireframe shows it with a desktop pile only (body.xpile) */
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .d-mp-tab { transition: background-color var(--mo-fast) var(--mo-ease); }
}

/* ============================================================
   NO ITALICS (Seba with the designer, 06.10): the first design never used them; they were Claude's
   reading of work titles. A work's title is set in mono instead. One rule for every italic the site
   showed: the CMS's <em> and <i> in running text and captions (Chronologie, descriptions, legends),
   the wireframe's italic titles (expo-index.css .xq-title em, .xw-ttl, .xcoll-work figcaption em,
   .xwk-title; chronologie.html .lz-yr em) and ours. Inline mono keeps its line's size, and its
   line-height of 0 keeps a paragraph's lines evenly spaced (another face would set its own leading).
   ============================================================ */
em, i, cite, .xq-title em, .xw-ttl, .xcoll-work figcaption em, .xwk-title, .lz-yr em { font-style: normal; }
em, i, cite { font-family: var(--f-mono); line-height: 0; }


/* ============================================================
   NAV ICONS (designer 06.10, Figma "Th rework" › "Nav icons"): the Liste / Galerie switch drawn as two
   16 × 12 icons, the list as five rules, the Galerie as a 3 × 2 grid of frames; the view shown in ink
   at 1px, the other in mid-grey at 0.5px; 12px apart, then a hairline and the next tool (the designer's
   "Filtres"; here the sort). The words stay in the buttons, as their names for screen readers and
   FR/EN. Home section bars (.pubview, data-v) and page bars (.xtools, data-view) alike. Icons are CSS
   masks, so their colour is a token.
   ============================================================ */
:root { --gris-moyen: #808080; }   /* Figma th-rework/mid-grey: the icon not in use, the hairline between tools */
:is(.xtools, .pubview) button:is([data-view], [data-v]) {
  box-sizing: content-box; width: 16px; height: 12px; padding: 0; margin: 0; border: 0;
  font-size: 0; line-height: 0; color: transparent; opacity: 1; text-decoration: none; vertical-align: middle;
  background-color: var(--gris-moyen);
  -webkit-mask: var(--ico) center / 16px 12px no-repeat; mask: var(--ico) center / 16px 12px no-repeat; }
:is(.xtools, .pubview) button:is([data-view="list"], [data-v="list"]) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23000'%3E%3Cpath stroke-width='.5' d='M0 .5H16M0 3.25H16M0 6H16M0 8.75H16M0 11.5H16'/%3E%3C/svg%3E"); }
:is(.xtools, .pubview) button:is([data-view="list"], [data-v="list"]).is-on { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23000'%3E%3Cpath stroke-width='1' d='M0 .5H16M0 3.25H16M0 6H16M0 8.75H16M0 11.5H16'/%3E%3C/svg%3E"); }
:is(.xtools, .pubview) button:is([data-view="galerie"], [data-v="galerie"]) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23000'%3E%3Cg stroke-width='.5'%3E%3Crect x='.5' y='.5' width='4' height='4.5'/%3E%3Crect x='6' y='.5' width='4' height='4.5'/%3E%3Crect x='11.5' y='.5' width='4' height='4.5'/%3E%3Crect x='.5' y='7' width='4' height='4.5'/%3E%3Crect x='6' y='7' width='4' height='4.5'/%3E%3Crect x='11.5' y='7' width='4' height='4.5'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.xtools, .pubview) button:is([data-view="galerie"], [data-v="galerie"]).is-on { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23000'%3E%3Cg stroke-width='1'%3E%3Crect x='.5' y='.5' width='4' height='4.5'/%3E%3Crect x='6' y='.5' width='4' height='4.5'/%3E%3Crect x='11.5' y='.5' width='4' height='4.5'/%3E%3Crect x='.5' y='7' width='4' height='4.5'/%3E%3Crect x='6' y='7' width='4' height='4.5'/%3E%3Crect x='11.5' y='7' width='4' height='4.5'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.xtools, .pubview) button:is([data-view], [data-v]):is(.is-on, :hover, :focus-visible) { background-color: var(--encre-primaire); }
.xtools:has(> .xgrp > button[data-view]) { column-gap: var(--sp-12); }
.xtools .xgrp:has(> button[data-view]) { gap: var(--sp-12); align-items: center; }
.xtools .xgrp:has(> button[data-view]) > .sep { display: none; }
.xtools .xgrp:has(> button[data-view]) + .xgrp { border-left: 0.5px solid var(--gris-moyen); padding-left: var(--sp-12); align-self: center; }
.pubview:has(> button[data-v]) { display: flex; gap: var(--sp-12); align-items: center; }

/* ============================================================
   THE FOOT OF A HOME LIST (designer 06.10, Figma "AS – Home (live site, 05.10)" › "Container"): the
   "Toutes les … →" line becomes two halves 6px apart, the estate's name in Small at 60% on the left
   (the designer's second pass, 06.10; it was Méta),
   and on the right a 0.5px hairline 96px tall with the link beside it in Small (it was Méta mono,
   underlined on hover). 4px above and below. The name is drawn here, hidden from screen readers:
   the menu bar already says it.
   ============================================================ */
.xall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6px; align-items: start;
  margin: 0; padding: var(--sp-4) 0; }
.xall::before { content: "The Estate of Alina Szapocznikow" / ""; font-family: var(--f-diplomat); font-size: var(--fs-small);
  line-height: var(--lh-small); letter-spacing: 0; color: var(--encre-seconde); }
.xall > .link-arrow { box-sizing: border-box; min-height: var(--sp-96); padding-left: 10px; border: 0;
  border-left: 0.5px solid var(--encre-primaire); color: var(--encre-primaire); text-decoration: none;
  font-family: var(--f-diplomat); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; letter-spacing: 0; }
.xall > .link-arrow:hover, .xall > .link-arrow:focus-visible { text-decoration: underline; text-underline-offset: var(--sp-4); }

/* ============================================================
   ONE CLOCK — the wireframe's remaining transitions, re-timed onto the motion
   tokens (system/ keeps its own values for the wireframe; the design version
   overrides them here, in one place). The 160ms hover-intent delay served the
   wireframe's preview panels, which the design version hides: rows answer at
   once.
   ============================================================ */
.topnav a, .lang button, .nav-toggle, .xtools button, .pubview button, .xsel, .xmenu button,
.hz-down, a.hz-down, .topbar .crumb, .xall > .link-arrow, .xfiche-close, .xclose-all, .xback,
.xs-btn, .xitem > .xrow, .xrel button, .xrel a, .cs-yr, .lz-yr h2, .lz-year, .year-nav a {
  transition: background-color var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease),
    opacity var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease);
}
.xitem:hover > .xrow { transition-delay: 0s; }
/* image opacity settles at the fades' pace */
.cs-pic img, .lz-fig img, .lz-track, .xcoll-wlink img { transition: opacity var(--mo-med) var(--mo-ease); }
.lz-cap { transition: opacity var(--mo-fast) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease), padding-left var(--mo-fast) var(--mo-ease); }
/* a record arriving from its neighbour, and the bars sliding from under the menu */
.x-from-r, .x-from-l { animation-duration: var(--mo-med); animation-timing-function: var(--mo-enter); }
.topbar, .xpagebar { transition: top var(--mo-med) var(--mo-enter); }
.topbar.title-wait .crumb { transition: opacity var(--mo-med) var(--mo-ease), transform var(--mo-slow) var(--mo-enter); }
/* travel: the spines move with their sheets */
.xtab { transition: transform var(--mo-slow) var(--mo-glide), opacity var(--mo-med) var(--mo-ease),
  background-color var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease); }
.xfiche.xcovered > .xfiche-inner { transition: visibility 0s linear var(--mo-slow); }