/* VS 2 — page Graphic Design Books sur le fond animé de l’accueil (VS 1 = /books/design/, fond blanc).
   Se charge après books-v9.css et ne fait que le surcharger. */

/* fond plein écran, fondu entre les images */
body.essai{background:#1f1d1a}
.fond{position:fixed;inset:0;z-index:-1;margin:0;padding:0;list-style:none}
.fond li{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.fond li.on{opacity:1}

/* un seul grand bloc blanc posé sur le fond (titre + books + pied de page), comme la carte de l'accueil */
.essai .intro,.essai main,.essai .colophon{width:calc(100% - 2 * clamp(16px,8vw,140px));max-width:560px;margin-left:auto;margin-right:auto;background:var(--paper)}
.essai .intro{margin-top:clamp(24px,6vh,64px);padding:clamp(18px,2.4vw,30px) clamp(28px,4vw,48px) 0}
.essai .intro{container-type:inline-size}
.essai .name{font-size:min(3.1rem,11.4cqi)}   /* titre calé sur la largeur du bloc : « KRAJEWSKI » n'en sort jamais */
.essai main{margin-top:-1px;padding:clamp(18px,2.4vw,28px) clamp(28px,4vw,48px) 0}
.essai .colophon{margin-top:-1px;margin-bottom:clamp(24px,6vh,64px);padding:clamp(22px,3vw,34px) clamp(28px,4vw,48px) clamp(24px,3.4vw,40px)}

/* grille de books : 4 colonnes sur ordinateur, moins si la place manque (puis 2 et 1 sur téléphone) */
.essai .books{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:24px 18px;border:0;padding-bottom:0}   /* sans filet avant le pied de page */
.essai .books li{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0}
.essai .cover{width:100%;aspect-ratio:1191/812}
.essai .info{padding:14px 0 0}
.essai .t{display:block;font-size:17px;line-height:1.1}   /* titre serré, liens juste dessous */
.essai .a{flex-wrap:nowrap;gap:0 8px;padding:0;white-space:nowrap}
.essai .a .more+.more::before{left:-4px}   /* filet au milieu de l'espace, plus serré dans les cartes */
.essai .more{letter-spacing:.05em}   /* « View | pdf | Download » tient dans une carte étroite */

/* téléphone : deux colonnes serrées, puis une seule sous 420 px */
@media (max-width:700px){
  .essai .books{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .essai .books li{display:flex;grid-template-areas:none;padding:0}
  .essai .cover{width:100%}
  .essai .info{padding:10px 0 0}
  .essai .t{font-size:16px}
  .essai .a{gap:0 8px;padding:0}
  .essai .a .more+.more::before{left:-4px}
}
@media (max-width:420px){
  .essai .books{grid-template-columns:1fr}
  .essai .t{font-size:19px}
}

/* écran horizontal : le bloc blanc s'allonge en largeur, titre sur une ligne,
   books sur 4 colonnes (2 rangées) */
@media (orientation:landscape) and (min-width:700px){
  .essai .intro,.essai main,.essai .colophon{width:calc(100% - 2 * clamp(20px,6vw,120px));max-width:1040px}
  .essai .name{font-size:min(2.6rem,4.9cqi)}   /* « ROMAN KRAJEWSKI BOOKS » sur une ligne, dans le bloc */
  .essai .name span{display:inline}
  .essai .books{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* horizontal mais étroit (téléphone couché, petite tablette) : 3 colonnes, les liens ont la place */
@media (orientation:landscape) and (min-width:700px) and (max-width:1000px){
  .essai .books{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* pied de page : « Art direction & illustration | © Roman Krajewski » à gauche, sur une ligne */
.essai .colophon .role{margin-top:8px;text-align:left;white-space:nowrap}
.essai .colophon .role .sep{display:inline-block;width:1px;height:.95em;margin:0 .45em;background:var(--gold-soft);vertical-align:-.12em}

/* ouverture : le bloc blanc est entier dès le départ, seuls les books apparaissent en fondu dedans
   (sinon le fond animé se voit entre le titre et le pied de page pendant l'animation) */
.essai main{animation:none}
@media (prefers-reduced-motion:no-preference){
  .essai .books{animation:rise 1s .8s var(--ease) both}
}

/* pied de page : site | mail | téléphone | LinkedIn | Instagram sur une seule ligne à l'horizontale,
   sur deux lignes à la verticale (retour avant LinkedIn, sans filet en bout de ligne) */
.essai .contact-line{font-size:9.6px;line-height:1.75}   /* un peu plus d’air entre les deux lignes */
.essai .contact-line .sep-reseaux{display:none}
@media (orientation:landscape) and (min-width:700px){
  .essai .contact-line .sep-reseaux{display:inline-block}
  .essai .contact-line .br-reseaux{display:none}
}
.essai .contact-line a{white-space:nowrap}   /* un lien (picto + mot) ne se coupe jamais */

/* crédit « Art direction & illustration | © Roman Krajewski » à 70 % de sa taille (7,3 → 5,1 px) */
.essai .colophon .role{font-size:6.1px}   /* 5,1 px × 120 % */
@media (max-width:700px){.essai .colophon .role{font-size:6.1px}}
@media (max-width:480px){.essai .colophon .role{font-size:5.4px}}   /* téléphone : tient encore sur une ligne */

/* téléphone : contacts à la suite avec les filets, sur 3 lignes coupées proprement
   (krajewski.fr | mail / téléphone | LinkedIn / photography | illustration) */
.essai .contact-line .br-tel,.essai .contact-line .br-insta{display:none}
@media (max-width:700px){
  .essai .contact-line{font-size:8.4px}
  .essai .contact-line .sep{display:inline-block;width:1px;height:.95em;margin:0 .45em;vertical-align:-.12em}
  .essai .contact-line .sep-tel,.essai .contact-line .sep-insta,.essai .contact-line .br-reseaux{display:none}
  .essai .contact-line .sep-reseaux{display:inline-block}
  .essai .contact-line .br-tel,.essai .contact-line .br-insta{display:inline}
}

/* écran très étroit (moins de 375 px) : les 3 lignes ne tiennent plus →
   une info par ligne, sans filets, et le crédit peut passer à la ligne */
@media (max-width:374px){
  .essai .contact-line .sep,.essai .contact-line .sep-reseaux,.essai .contact-line .br-tel,.essai .contact-line .br-insta,.essai .contact-line .br-reseaux{display:none}
  .essai .contact-line{display:flex;flex-direction:column;align-items:flex-start}   /* pas de blanc entre les groupes */
  .essai .colophon .role{white-space:normal}
}

/* vignettes animées : deux images superposées, fondu lent de l'une à l'autre */
.essai .cover{position:relative}
.essai .cover img.fondu{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.essai .cover img.fondu.on{opacity:1}

/* écran horizontal : le bloc blanc est centré en hauteur dans la fenêtre (même marge en haut et en bas),
   et reste en haut s'il est plus haut que l'écran */
@media (orientation:landscape) and (min-width:700px){
  body.essai{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100dvh;
    padding:clamp(20px,5vh,56px) 0;box-sizing:border-box}
  .essai .intro{margin-top:0}
  .essai .colophon{margin-bottom:0}
}

/* lecteur : picto téléchargement à droite de « N pages » */
.reader-bar .reader-dl{position:absolute;top:50%;transform:translateY(-50%);display:flex;padding:4px;color:var(--gold-deep)}
.reader-bar .reader-dl:hover{color:var(--ink)}
.reader-bar .reader-dl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}
.reader-bar .reader-dl[hidden]{display:none}

/* titres des books et boutons réduits à 75 % (proportions gardées) :
   titres 17 → 12,75 px, boutons 9,6 → 7,2 px ; téléphone : 16 → 12 px et 19 → 14,25 px */
.essai .t{font-size:12.75px}
.essai .more{font-size:7.2px}
@media (max-width:700px){.essai .t{font-size:12px}.essai .more{font-size:7.2px}}
@media (max-width:420px){.essai .t{font-size:14.25px}}