/* =========================================================================
   Yi Bai — feuille de style unique
   Encre sur papier : un fond de papier chaud, un noir d'encre, un rouge de
   sceau utilisé au compte-gouttes. Rien d'autre.
   ========================================================================= */

:root{
  --paper:#fcfbf6;     /* blanc du papier de riz xuan : franc, à peine tiédi */
  --paper-2:#f5f2e9;
  --paper-3:#ece7da;
  --ink:#14120f;
  --ink-2:#4a453e;
  --ink-3:#8b847a;
  --rule:#ded8ca;
  --rule-2:#cbc4b3;
  --seal:#a3322a;

  --ff-display:"Instrument Serif","Times New Roman",Georgia,serif;
  --ff-text:"Newsreader",Georgia,"Times New Roman",serif;
  --ff-micro:ui-sans-serif,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(1.15rem,5vw,5.5rem);
  --max:1680px;
  --row-bleed:.9rem;   /* débord du fond au survol des lignes d’écrits */
  --zh-scale:.55;      /* 一白水墨 s’écrit toujours à 55 % du nom en français */
  --prose:66ch;
  --t:.45s cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-text);
  font-size:clamp(1.02rem,.35vw + .95rem,1.14rem);
  line-height:1.72;
  font-weight:350;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px}

/* ---------------------------------------------------------------- micro-type */
.section-label,.chip,.cartel__meta,.readrow__d,.ph__label,
.tl__year,.exhibs__y,.evt__k,.specs dt,.foot__nav,.foot__legal,.nav,.morelink,
.btn,.essay__meta,.cartel__todo,.footnote{
  font-family:var(--ff-micro);
  font-weight:450;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-size:.665rem;
  line-height:1.55;
}
.section-label{color:var(--ink-3);margin:0 0 1.1rem}
.section-label a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2)}
.section-label a:hover{color:var(--seal);border-color:var(--seal)}

/* ------------------------------------------------------------------- shell */
.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(252,251,246,.9);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.masthead__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  height:clamp(58px,7vw,74px);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.wordmark{--wordmark:1.42rem;display:flex;align-items:baseline;gap:.55rem;text-decoration:none}
/* Le nom ne s’écrit qu’une fois par écran. Là où la page le porte déjà en grand
   — le bandeau d’accueil, le titre de la page du peintre —, celui de la barre
   reste absent, puis vient s’y poser une fois le grand nom passé dessous. La
   visibilité est différée pour qu’il soit aussi hors de portée du clavier et des
   lecteurs d’écran tant qu’il n’est pas là. */
body:has([data-name-anchor]) .wordmark{
  opacity:0;transform:translateY(-.5rem);visibility:hidden;pointer-events:none;
  transition:opacity var(--t),transform var(--t),visibility 0s linear .45s;
}
body:has([data-name-anchor]).is-named .wordmark{
  opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity var(--t),transform var(--t),visibility 0s;
}
@media (prefers-reduced-motion:reduce){body:has([data-name-anchor]) .wordmark{transform:none}}
.wordmark__name{font-family:var(--ff-display);font-size:var(--wordmark);letter-spacing:.005em;white-space:nowrap}
.wordmark__zh{font-size:calc(var(--wordmark) * var(--zh-scale));color:var(--ink-3);letter-spacing:.18em}
.nav{display:flex;gap:clamp(1.1rem,2.4vw,2.4rem)}
.nav a{text-decoration:none;color:var(--ink-2);padding:.35rem 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.05rem;height:1px;background:var(--seal);transition:right var(--t)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav a[aria-current]{color:var(--ink)}
/* dernier de la barre, à droite : c’est lui qui tient lieu de contact */
.nav__ig::after{display:none}
.nav .nav__ig{color:var(--ink)}
.nav .nav__ig:hover{color:var(--seal)}

.burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:var(--ink);transition:transform var(--t),opacity var(--t)}
.burger span+span{margin-top:6px}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu{border-top:1px solid var(--rule);padding:.6rem var(--gutter) 1.4rem}
.menu nav{display:flex;flex-direction:column}
.menu a{text-decoration:none;padding:.85rem 0;border-bottom:1px solid var(--rule);font-family:var(--ff-display);text-transform:none;letter-spacing:0;font-size:1.35rem}
@media (max-width:860px){.nav{display:none}.burger{display:block}}
@media (min-width:861px){.menu{display:none}}

/* ------------------------------------------------------------ champ de lignes */
/* isolation : le canevas est posé en z-index négatif, donc au-dessus du fond de
   son hôte mais sous son contenu, sans qu'il faille positionner ce contenu. */
[data-lines]{position:relative;isolation:isolate}
.linefield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
/* Une bande ou un appel se termine sur un filet, qui justifie l'arête du champ.
   Une tête de page, non : le champ s'y éteint en fondu, sur les quatre bords,
   sans quoi on voit la trame s'arrêter au carré. */
.phead .linefield{
  -webkit-mask-image:linear-gradient(to bottom,#000 38%,transparent 94%),
                     linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to bottom,#000 38%,transparent 94%),
             linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero__in{
  position:relative;max-width:var(--max);margin:0 auto;
  padding:clamp(3.5rem,9vw,7.5rem) var(--gutter) clamp(1.6rem,3vw,2.6rem);
}
.hero__name{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(2.43rem,10.13vw,7.76rem);
  line-height:.86;letter-spacing:-.022em;margin:0;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(.8rem,2.5vw,2rem);
}
.hero__zh{font-size:calc(1em * var(--zh-scale));color:var(--ink-3);letter-spacing:.3em}
.hero__baseline{
  font-family:var(--ff-display);font-style:italic;
  font-size:clamp(1.25rem,2.6vw,2rem);line-height:1.32;
  max-width:22ch;margin:clamp(1.6rem,3.5vw,2.6rem) 0 0;color:var(--ink-2);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.8rem,4vw,2.8rem)}
.hero__work{
  position:relative;max-width:min(var(--max),1080px);margin:0 auto;
  padding:0 var(--gutter) clamp(3rem,7vw,6rem);
  display:grid;justify-items:center;gap:1.1rem;
}
.hero__work img{
  max-height:min(74vh,860px);width:auto;max-width:100%;background:#fff;
  box-shadow:0 1px 0 var(--rule-2),0 24px 64px -32px rgba(20,18,15,.4);
}
.hero__work .cartel{text-align:center}

/* ------------------------------------------------------------------ boutons */
.btn{
  display:inline-block;text-decoration:none;
  padding:.95rem 1.6rem;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);cursor:pointer;
  transition:background var(--t),color var(--t),transform var(--t);
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.morelink{text-decoration:none;color:var(--ink-2);border-bottom:1px solid var(--rule-2);padding-bottom:.25rem;justify-self:start;white-space:nowrap}
.morelink:hover{color:var(--seal);border-color:var(--seal)}

/* ------------------------------------------------------------------ cartels */
.cartel{display:block;font-family:var(--ff-text);margin-top:.85rem}
.cartel__title{display:block;font-size:1.02rem;line-height:1.35}
.cartel__zh{display:block;font-size:.82rem;color:var(--ink-3);letter-spacing:.16em;margin-top:.15rem}
.cartel__meta{display:block;color:var(--ink-3);margin-top:.45rem}
.cartel__todo,.todo{color:var(--seal)}
.cartel__todo::before{content:"◇ "}

/* Œuvre vendue : mention de cartel de musée, jamais un « sticker » de boutique.
   Le trait de soulignement vermillon suffit ; l'œuvre reste montrée à l'identique. */
.sold{
  font-family:var(--ff-micro);font-weight:450;
  letter-spacing:.13em;text-transform:uppercase;font-size:.58rem;
  color:var(--seal);border:1px solid currentColor;border-radius:2px;
  padding:.14em .45em .1em;margin-left:.5rem;
  white-space:nowrap;vertical-align:.14em;
}

/* -------------------------------------------------------------- bande temps */
.band{background:var(--ink);color:var(--paper);}
.band__in{max-width:var(--max);margin:0 auto;padding:clamp(3.5rem,8vw,7rem) var(--gutter)}
.band .section-label{color:#8d857a}
.band__lead{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.75rem,4.4vw,3.5rem);line-height:1.12;letter-spacing:-.012em;
  margin:0 0 clamp(2.5rem,6vw,4.5rem);max-width:22ch;
}
.band__note{
  margin:clamp(2.5rem,6vw,4rem) 0 0;color:#8d857a;
  font-style:italic;font-size:1rem;max-width:52ch;
}

/* ----------------------------------------------------------------- sections */
.sec{max-width:var(--max);margin:0 auto;padding:clamp(3.5rem,8vw,7rem) var(--gutter)}
.sec--rule{border-top:1px solid var(--rule)}
.sec__head{
  display:grid;gap:.4rem 2rem;align-items:end;
  grid-template-columns:1fr auto;
  margin-bottom:clamp(2rem,4.5vw,3.4rem);
}
.sec__head .section-label{grid-column:1;margin:0}
.sec__title{
  grid-column:1;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.7rem,4vw,3.1rem);line-height:1.1;letter-spacing:-.012em;margin:.5rem 0 0;
}
.sec__head .morelink{grid-column:2;grid-row:2}
@media (max-width:640px){.sec__head{grid-template-columns:1fr}.sec__head .morelink{grid-column:1;grid-row:auto;margin-top:1rem}}

/* --------------------------------------------------------- grille d'accueil */
/* Chaque œuvre est présentée « en planche » : cadrage régulier, jamais recadrée,
   sur un fond légèrement plus sombre que le papier de l'œuvre. */
.tiles{display:grid;gap:clamp(1.6rem,3.5vw,3.2rem);grid-template-columns:repeat(6,1fr);align-items:start}
.tile{text-decoration:none;display:block;grid-column:span 3}
.tile:nth-child(1),.tile:nth-child(4){grid-column:span 4}
.tile:nth-child(2),.tile:nth-child(3){grid-column:span 2}
.tile__frame{
  display:grid;place-items:center;overflow:hidden;
  aspect-ratio:4/3;background:var(--paper-3);
  padding:clamp(1rem,2.2vw,2.4rem);box-shadow:inset 0 0 0 1px var(--rule);
}
.tile img{
  max-height:100%;max-width:100%;width:auto;object-fit:contain;
  box-shadow:0 8px 26px -14px rgba(20,18,15,.45);
  transition:transform 1.1s cubic-bezier(.2,.7,.25,1);
}
.tile:hover img{transform:scale(1.035)}
.tile:hover .cartel__title{color:var(--seal)}
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile,.tile:nth-child(1),.tile:nth-child(2),.tile:nth-child(3),.tile:nth-child(4){grid-column:span 1}
}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- triptyque */
.triptych{display:grid;gap:clamp(2rem,4vw,3.2rem);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tri__img{margin:0 0 1.4rem;overflow:hidden;background:#fff;aspect-ratio:4/3}
.tri__img img{width:100%;height:100%;object-fit:cover}
.tri__t{font-family:var(--ff-display);font-weight:400;font-size:1.55rem;margin:0 0 .6rem;display:flex;gap:.7rem;align-items:baseline}
.tri__t span{font-size:.85rem;color:var(--ink-3);letter-spacing:.22em}
.tri p{margin:0;color:var(--ink-2);font-size:1rem}

/* ------------------------------------------------------------------- écrits */
.readlist--index{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(2.5rem,5vw,4rem)}
.readrow{
  display:grid;align-items:baseline;gap:.3rem 1.5rem;
  /* le titre prend la largeur de son texte, la date le suit aussitôt ;
     minmax(max-content,1fr) empêche la date d’être écrasée : c’est le titre qui plie */
  grid-template-columns:minmax(0,auto) minmax(max-content,1fr);
  grid-template-areas:"t d" "zh zh";
  padding:1.35rem 0;
  text-decoration:none;position:relative;isolation:isolate;
}
/* le fond du survol déborde un peu de part et d’autre du texte, pour qu’il ne
   soit pas collé à l’arête de la couleur ; un pseudo-élément plutôt qu’un
   padding, afin que le texte reste aligné sur la gouttière */
.readrow::before{
  content:"";position:absolute;inset:0 calc(-1 * var(--row-bleed));z-index:-1;
  background:var(--paper-2);opacity:0;transition:opacity var(--t);
}
.readrow:hover::before{opacity:1}
/* les filets débordent d’autant que le fond du survol : les deux arêtes
   coïncident, et la ligne ne paraît pas plus courte que la couleur */
.readrow::after{
  content:"";position:absolute;inset:0 calc(-1 * var(--row-bleed));z-index:-1;
  border-bottom:1px solid var(--rule);pointer-events:none;
}
.readrow:first-child::after{border-top:1px solid var(--rule)}
.readrow__t{grid-area:t;font-family:var(--ff-display);font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.25}
.readrow:hover .readrow__t{color:var(--seal)}
.readrow__zh{grid-area:zh;font-size:.84rem;color:var(--ink-3);letter-spacing:.14em}
.readrow__d{grid-area:d;color:var(--ink-3);white-space:nowrap}
.readlist--index .readrow{padding:1.6rem 0}
@media (max-width:640px){
  .readrow{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "zh" "d"}
}

/* ---------------------------------------------------------------- page head */
.phead{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,6rem) var(--gutter) clamp(2rem,4vw,3.2rem)}
.phead--center{text-align:center}
/* le chapeau est un bloc étroit : le centrer demande de centrer la boîte, pas
   seulement le texte qu'elle contient */
.phead--center .phead__p{margin-left:auto;margin-right:auto}
.phead__t{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(2.4rem,7vw,5.6rem);line-height:1.02;letter-spacing:-.02em;margin:0;
}
.phead__zh{font-size:calc(1em * var(--zh-scale));color:var(--ink-3);letter-spacing:.2em}
.phead__p{max-width:56ch;color:var(--ink-2);margin:clamp(1.4rem,3vw,2.2rem) 0 0;font-size:1.08rem}

/* ------------------------------------------------------------------ filtres */
.filters{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.chip{
  background:transparent;border:1px solid var(--rule-2);border-radius:999px;
  padding:.6rem 1.05rem;cursor:pointer;color:var(--ink-2);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip__n{opacity:.5;margin-left:.35rem}
.serienotes{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.serienote{
  margin-top:1.6rem;padding-left:1.1rem;border-left:1px solid var(--seal);
  max-width:60ch;color:var(--ink-2);
}
.serienote__zh{font-size:.85rem;color:var(--ink-3);letter-spacing:.2em;margin-right:.9rem}
.serienote__years{font-family:var(--ff-micro);font-size:.665rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.serienote p{margin:.4rem 0 0;font-size:1rem}

/* ------------------------------------------------------------------ galerie */
.grid{
  max-width:var(--max);margin:0 auto;
  padding:clamp(2rem,4vw,3.4rem) var(--gutter) clamp(3rem,6vw,5rem);
  columns:3;column-gap:clamp(1.6rem,3.2vw,3rem);
}
@media (max-width:1100px){.grid{columns:2}}
@media (max-width:620px){.grid{columns:1}}
.card{break-inside:avoid;margin:0 0 clamp(2rem,4vw,3.4rem)}
.card[hidden]{display:none}
.is-filtering .card:not([hidden]){animation:rise .55s cubic-bezier(.2,.7,.25,1) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.card__btn{
  display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;
  overflow:hidden;position:relative;
  box-shadow:0 0 0 1px var(--rule),0 12px 34px -20px rgba(20,18,15,.5);
}
.card__btn img{width:100%;transition:transform 1.1s cubic-bezier(.2,.7,.25,1),opacity var(--t)}
.card__btn:hover img{transform:scale(1.03)}
/* la pastille reste sur l'image, à l'angle, sans jamais mordre sur l'œuvre au centre */
.card__sold{
  position:absolute;top:0;left:0;
  font-family:var(--ff-micro);font-weight:450;
  letter-spacing:.13em;text-transform:uppercase;font-size:.6rem;line-height:1;
  color:var(--paper);background:var(--seal);
  padding:.5em .75em .45em;
}
.chip--sold{border-color:var(--seal);color:var(--seal)}
.chip--sold:hover{border-color:var(--seal);color:var(--seal)}
.chip--sold.is-on{background:var(--seal);border-color:var(--seal);color:var(--paper)}
.grid__empty{text-align:center;color:var(--ink-3);padding:4rem var(--gutter)}

/* ----------------------------------------------------------------- lightbox */
.lb{
  border:0;padding:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;
  background:rgba(18,16,13,.97);color:var(--paper);
}
.lb::backdrop{background:rgba(18,16,13,.97)}
.lb__fig{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.4rem;padding:clamp(3rem,7vw,4.5rem) clamp(3rem,9vw,7rem)}
.lb__img{max-width:100%;max-height:72vh;width:auto;object-fit:contain;background:#fff}
.lb__cap{text-align:center;max-width:60ch}
.lb__cap .cartel__title{font-family:var(--ff-display);font-size:1.4rem}
.lb__cap .cartel__zh,.lb__cap .cartel__meta{color:#a49c91}
.lb__cap .sold{color:#cf7a70;vertical-align:.3em}   /* le vermillon du sceau, éclairci pour le fond noir */
.lb__cap .lb__note{margin:.9rem 0 0;color:#b3aca1;font-size:.97rem;font-style:italic}
.lb__close,.lb__nav{
  position:absolute;background:none;border:0;color:var(--paper);cursor:pointer;
  width:56px;height:56px;font-size:1.7rem;line-height:1;opacity:.6;transition:opacity var(--t)
}
.lb__close:hover,.lb__nav:hover{opacity:1}
.lb__close{top:.6rem;right:.9rem;font-size:2rem}
.lb__nav{top:50%;transform:translateY(-50%);font-size:2.4rem}
.lb__nav--prev{left:.3rem}
.lb__nav--next{right:.3rem}

/* --------------------------------------------------------------- le peintre */
.prose{max-width:var(--prose);margin-left:auto;margin-right:auto;padding:0 var(--gutter)}
.prose--wide{max-width:calc(var(--prose) + 8ch)}
.prose p{margin:0 0 1.35em}
.prose .lead{font-size:clamp(1.16rem,1.4vw,1.35rem);line-height:1.62;color:var(--ink)}
.pull{
  font-family:var(--ff-display);font-style:italic;font-size:1.3rem;line-height:1.4;
  color:var(--ink);border-left:1px solid var(--seal);padding-left:1.2rem;margin:2rem 0!important;
}
.quote{margin:2.2rem 0;padding-left:1.2rem;border-left:1px solid var(--seal)}
.quote p{font-family:var(--ff-display);font-style:italic;font-size:1.25rem;line-height:1.44;margin:0;color:var(--ink)}

.cols2{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}
.cols2 .prose{padding:0;margin-left:0}
.cols2 p{margin:0 0 1.25em;color:var(--ink-2)}
.cols2--bio{padding-bottom:clamp(2rem,5vw,4rem)}
/* le portrait garde ses proportions, mais reste plus étroit que sa colonne :
   à pleine largeur il écraserait le texte de biographie posé à côté */
.portrait{margin:0;max-width:430px}
.portrait img{
  display:block;width:100%;height:auto;background:var(--paper-2);
  box-shadow:0 0 0 1px var(--rule),0 18px 44px -28px rgba(20,18,15,.45);
}
.cols3{
  max-width:var(--max);margin:clamp(2rem,4vw,3rem) auto 0;padding:0 var(--gutter);
  display:grid;gap:clamp(1.4rem,3vw,2.4rem);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.strike-list{display:flex;flex-wrap:wrap;gap:.55rem .9rem;font-family:var(--ff-display);font-size:1.35rem;line-height:1.4}
.strike-list s{color:var(--ink-3);text-decoration-thickness:1px}

.figure{margin:0}
.figure img{width:100%;background:#fff;box-shadow:0 0 0 1px var(--rule),0 12px 34px -20px rgba(20,18,15,.45)}
.figure figcaption{margin-top:.9rem;color:var(--ink-3);font-size:.94rem;line-height:1.6}


.specs{margin:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.specs>div{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:1.5rem;
  padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.specs dt{margin:0;color:var(--ink-3);padding-top:.25rem}
.specs dd{margin:0;color:var(--ink-2)}
@media (max-width:600px){.specs>div{grid-template-columns:1fr;gap:.25rem}}

/* ------------------------------------------------------------- écrit (page) */
.essay{max-width:var(--max);margin:0 auto}
.essay__head{max-width:var(--prose);margin:0 auto;padding:clamp(3rem,7vw,5.5rem) var(--gutter) clamp(2rem,4vw,3rem)}
.essay__t{font-family:var(--ff-display);font-weight:400;font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.08;letter-spacing:-.015em;margin:.6rem 0 0}
.essay__t i{font-style:italic}
.essay__zh{margin:.9rem 0 0;color:var(--ink-3);font-size:1rem;letter-spacing:.16em}
.essay__foot{max-width:var(--prose);margin:0 auto;padding:0 var(--gutter) clamp(3rem,6vw,4.5rem)}
.essay__meta{margin:0;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:1.1rem}
.essay .prose{padding-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.figure--bleed{
  margin:clamp(2.4rem,5vw,3.6rem) calc(-1 * clamp(0px,6vw,9rem));
}
.figure--bleed a{display:block}
@media (max-width:900px){.figure--bleed{margin-left:0;margin-right:0}}

.pager{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(3rem,6vw,5rem);
  display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid var(--rule);padding-top:2rem;
}
.pager a{text-decoration:none;font-family:var(--ff-display);font-size:1.2rem;line-height:1.3;display:block}
.pager a span{display:block;font-family:var(--ff-micro);font-size:.665rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.pager a:hover{color:var(--seal)}
.pager__next{text-align:right}
@media (max-width:600px){.pager__next{text-align:left}}

/* ----------------------------------------------------------------- parcours */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.tl__item{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:1.5rem;
  padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.tl__year{color:var(--ink-3);padding-top:.35rem}
.tl__txt{margin:0;color:var(--ink-2);max-width:62ch}
@media (max-width:640px){.tl__item{grid-template-columns:1fr;gap:.5rem}}

.exhibs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.exhibs li{display:grid;grid-template-columns:minmax(80px,120px) 1fr;gap:1.5rem;
  padding:1.35rem 0;border-bottom:1px solid var(--rule)}
.exhibs__y{color:var(--ink-3);padding-top:.35rem}
.exhibs__t{color:var(--ink-2)}
.evts{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.exhibs .evt{display:grid;grid-template-columns:minmax(90px,120px) 1fr;gap:1.5rem;
  padding:0;border:0;align-items:baseline}
.evt__k{color:var(--ink-3)}
.evt__t{max-width:62ch}
@media (max-width:640px){.exhibs .evt{grid-template-columns:1fr;gap:.2rem}}
.footnote{color:var(--ink-3);margin-top:1.6rem}

/* ------------------------------------------------------------- placeholders */
.ph{margin:0}
.ph__box{
  aspect-ratio:var(--ph-ratio,4/3);
  border:1px solid var(--rule-2);
  background:
    repeating-linear-gradient(-45deg,transparent 0 9px,rgba(20,18,15,.045) 9px 10px),
    var(--paper-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  color:var(--ink-3);text-align:center;padding:1.5rem;
}
.ph__glyph{width:30px;height:30px;fill:currentColor;opacity:.55}
.ph__label{font-family:var(--ff-micro);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--seal)}
.ph__desc{margin-top:.9rem;color:var(--ink-3);font-size:.93rem;line-height:1.6;max-width:46ch}
.cols3--ph{margin-top:clamp(2rem,4vw,3rem)}

/* --------------------------------------------------------------- appel/CTA */
.cta{border-top:1px solid var(--rule);background:var(--paper-2);scroll-margin-top:clamp(58px,7vw,74px)}
.cta__in{max-width:min(var(--max),1100px);margin:0 auto;padding:clamp(3.5rem,8vw,6.5rem) var(--gutter)}
.cta__t{font-family:var(--ff-display);font-weight:400;font-size:clamp(1.7rem,4vw,3rem);
  line-height:1.1;letter-spacing:-.012em;margin:0 0 1rem;max-width:24ch}
.cta__p{color:var(--ink-2);max-width:52ch;margin:0 0 2rem}
.cta--slim .cta__in{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}

/* ------------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--rule);background:var(--ink);color:#a49c91}
.foot__in{max-width:var(--max);margin:0 auto;padding:clamp(3rem,6vw,5rem) var(--gutter) 2.5rem;
  display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.foot__brand{--footname:1.7rem}
.foot__name{font-family:var(--ff-display);font-size:var(--footname);color:var(--paper);white-space:nowrap}
.foot__zh{margin-left:.6rem;letter-spacing:.2em;font-size:calc(var(--footname) * var(--zh-scale))}
.foot__line{margin:1rem 0 0;font-size:.97rem;max-width:30ch}
.foot__nav{display:flex;flex-direction:column;gap:.7rem}
.foot__nav a{text-decoration:none;color:#a49c91}
.foot__nav a:hover{color:var(--paper)}
.foot__contact a{color:var(--paper);text-decoration:none;border-bottom:1px solid #3a352e;word-break:break-all}
.foot__contact a:hover{border-color:var(--paper)}
.foot__note{display:block;margin-top:.8rem;max-width:28ch;line-height:1.6}
.foot__legal{max-width:var(--max);margin:0 auto;padding:1.5rem var(--gutter) 2.5rem;
  border-top:1px solid #2a2620;color:#6d665d}