/* Von Berg & Cross — pages intérieures : exposition, salon privé, artistes,
   fiche d'œuvre, foire.

   Modèle : Marian Goodman Gallery (mariangoodman.com), le même que la page
   « Expositions », relevé au navigateur à 1440 × 900 sur cinq de ses pages :
     /exhibitions/<exposition>/   -> von-berg-cross-vue.html
     /viewing-room/<salon>/       -> von-berg-cross-salon.html
     /artists/                    -> von-berg-cross-artistes.html
     /content/feature/…/artworks… -> von-berg-cross-oeuvre.html
     /news/<foire>/               -> von-berg-cross-foire.html

   Corps, interlignes, interlettrages et couleurs sont les leurs ; la police
   reste la NÔTRE (Public Sans) : leurs titres en EB Garamond passent en
   graisse 400, leurs petits textes en Apercu gardent la graisse relevée.
   Leur en-tête fait 120px de haut, le nôtre 96 : toutes les ordonnées
   relevées chez eux sont remontées de 24px.

   Deux calages viennent de notre propre grille, celle de la page
   « Expositions » : la colonne de texte commence à 7,7 % et fait 353px, la
   colonne d'image commence à 36,32 % — sous le premier onglet de la nav —
   et s'arrête à 60px du bord, sous la fin du logo. */

.vbg {
  position: relative;
  height: 100vh;
  overflow: hidden;
  color: #333333;
}

/* Page courante en noir, le reste de la nav en gris, comme sur « Expositions ». */
.vbg .vbc-nav a { color: #999999; }
.vbg .vbc-nav a[aria-current="page"] { color: var(--vbc-ink); }

/* :where() : une remise à zéro sans poids, que chaque bloc peut reprendre. */
:where(.vbg) :where(p, h1, h2, ul, figure) { margin: 0; padding: 0; }
:where(.vbg) h1 { font: inherit; letter-spacing: inherit; }
.vbg ul { list-style: none; }

/* Flèche fine des diaporamas (chez eux : 40 × 40, à cheval sur le bord du cadre). */
.vbg-arrow {
  position: absolute;
  display: flex;
  width: 14px;
  color: #333333;
}
.vbg-arrow svg { display: block; width: 14px; height: 8px; }

/* ---------- Exposition (leur /exhibitions/<exposition>/) ----------
   Titre 60px, puis trois lignes de 22px au pas de 33px ; la vue d'accrochage
   vient dessous, entière, sur toute la largeur utile, et c'est le bas du
   cadre qui la coupe. */

.vbg-expo { margin: 60px 60px 0; }

.vbg-expo h1 {
  font-size: 60px;
  font-weight: 400;
  line-height: 74px;
}

.vbg-expo__lines {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: 0.5px;
}

.vbg-expo__view {
  position: relative;
  margin-top: 48px;
}

.vbg-expo__view img {
  display: block;
  width: 100%;
  height: auto;
}

.vbg-expo__view .vbg-arrow { top: 367px; }
.vbg-expo__view .vbg-arrow--prev { left: -37px; }
.vbg-expo__view .vbg-arrow--next { right: -37px; }

/* ---------- Salon privé (leur /viewing-room/<salon>/) ----------
   Deux aplats noirs sur toute la largeur, séparés de 60px : le titre en bas
   du premier (52px / 60px, colonne de 740px centrée), l'avis d'accès dans le
   second (18px / 28px). */

.vbg-room__block {
  background: #000000;
  color: #ffffff;
  padding-left: 350px;
}

.vbg-room__block--title {
  height: 551px;
  padding-top: 350px;
  box-sizing: border-box;
  font-size: 52px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 0.5px;
}

.vbg-room__block--title em { font-style: italic; }

.vbg-room__block--notice {
  height: 250px;
  margin-top: 60px;
  padding-top: 98px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
}

.vbg-room__block--notice p { width: 612px; }

/* ---------- Artistes (leur /artists/) ----------
   Une ligne d'onglets en petites capitales espacées, puis les noms sur
   quatre colonnes : 25px / 32px, un nom tous les 49px. */

.vbg-bar {
  display: flex;
  justify-content: space-between;
  margin: 85px 60px 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #111111;
}

.vbg-bar span + span { margin-left: 24px; }
.vbg-bar .is-off { color: #ababab; }

.vbg-names {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 13px;
  margin: 57px 60px 0;
}

.vbg-names li {
  height: 32px;
  margin-bottom: 17.14px;
  font-size: 25px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.5px;
  color: #111111;
  white-space: nowrap;
}

/* ---------- Fiche d'œuvre et foire : texte à gauche, image à droite ---------- */

.vbg-split__text {
  position: absolute;
  left: 7.7%;
  width: 353px;
}

.vbg-split__image {
  position: absolute;
  left: 36.32%;
  right: 60px;
  top: 151px;
}

/* Fiche d'œuvre (leur /content/feature/…/artworks…) : l'œuvre entière, sans
   rognage, dans un cadre de 679px de haut ; le cartel à mi-hauteur. */

.vbg-work .vbg-split__text { top: 287px; }

.vbg-work__artist {
  font-size: 32px;
  font-weight: 400;
  line-height: 38px;
}

.vbg-work__title {
  margin-top: 6px;
  font-size: 25px;
  font-weight: 400;
  line-height: 32px;
}

.vbg-work__title em { font-style: italic; }

.vbg-work__data {
  margin-top: 21px;
  font-size: 13px;
  font-weight: 200;
  line-height: 26px;
  letter-spacing: 0.5px;
}

.vbg-work__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 35px;
}

.vbg-work__thumbs span {
  display: block;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.vbg-work__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Seconde vignette : un détail, la vague et les baigneurs du haut de la toile. */
.vbg-work__thumbs span + span img {
  transform: scale(2.6);
  transform-origin: 62% 16%;
}

/* Les rubriques de la notice, dans le style de leurs listes de rubriques
   (13px / 31,2px, un pas de 33px). */
.vbg-work__links {
  margin-top: 25px;
  font-size: 13px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: 0.5px;
}

.vbg-work .vbg-split__image { height: 679px; }

.vbg-work .vbg-split__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vbg-work .vbg-arrow { right: 23px; top: 422px; }

/* Foire (leur /news/<foire>/) : rubrique soulignée d'un filet, titre 32px,
   sous-titre 25px, puis le texte courant en 13px / 31,2px. */

.vbg-fair .vbg-split__text { top: 126px; }

.vbg-fair__kind {
  padding-bottom: 13px;
  border-bottom: 1px solid #dddddd;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #111111;
}

.vbg-fair__title {
  margin-top: 25px;
  font-size: 32px;
  font-weight: 400;
  line-height: 38px;
}

.vbg-fair__subtitle {
  font-size: 25px;
  font-weight: 400;
  line-height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.vbg-fair__body {
  margin-top: 15px;
  font-size: 13px;
  font-weight: 400;
  line-height: 31.2px;
  letter-spacing: 0.5px;
}

.vbg-fair__body p + p { margin-top: 27px; }

.vbg-fair .vbg-split__image img {
  display: block;
  width: 100%;
  height: auto;
}