/* williamsan.art — le Journal.
   Une page de lecture sur l'ivoire de l'accueil : un titre en grand, l'image en large, puis une seule
   colonne de texte, étroite, qui se lit comme un livre. Les figures débordent un peu de la colonne,
   les œuvres citées attendent en bas, en petites fenêtres. Rien ne bouge.
   Les couleurs, l'en-tête et le pied viennent de l'accueil (accueil/accueil.css). */

.billet,
.journal {
  position: relative;
  z-index: 1;
  max-width: 78rem;
  margin: 0 auto;
  padding: calc(clamp(7.5rem, 17svh, 10rem) + env(safe-area-inset-top)) var(--gouttiere) clamp(4.5rem, 12svh, 7.5rem);
}

/* ───────────── L'article ───────────── */

.billet__apercu {
  max-width: 38rem;
  margin: 0 auto 2rem;
  padding: .7rem 1rem;
  border: 1px solid #9b2f1d;
  color: #9b2f1d;
  font: 500 .875rem/1.4 var(--sans);
}

.billet__ariane,
.billet__tete { max-width: 46rem; margin-inline: auto; }

.billet__ariane a {
  font: 500 .8125rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ocre);
  text-decoration: none;
}
.billet__ariane a:hover { text-decoration: underline; text-underline-offset: .35em; }

.billet__titre {
  margin: 1.1rem 0 0;
  font: 500 clamp(2.25rem, 4.6vw, 3.75rem)/1.12 var(--serif);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.billet__chapo {
  margin: 1.4rem 0 0;
  font: 400 clamp(1.1875rem, 1.6vw, 1.375rem)/1.6 var(--serif);
  color: var(--usuzumi);
  text-wrap: pretty;
}

.billet__signe {
  margin: 1.5rem 0 0;
  font: 400 .9375rem/1.5 var(--sans);
  color: var(--usuzumi);
}

.billet__couverture {
  max-width: 64rem;
  margin: clamp(2.5rem, 6svh, 3.75rem) auto 0;
}
.billet__couverture img {
  width: auto;
  max-width: 100%;
  max-height: 82svh;
  margin-inline: auto;
}

/* La colonne de lecture : 38rem, environ 70 signes par ligne. */
.billet__corps {
  max-width: 38rem;
  margin: clamp(2.75rem, 7svh, 4rem) auto 0;
  font: 400 1.1875rem/1.85 var(--serif);
  text-wrap: pretty;
  hyphens: manual;
}
.billet__corps > * { margin: 0; }
.billet__corps > * + * { margin-top: 1.35em; }

.billet__corps h2 {
  margin-top: 2.4em;
  font: 500 1.625rem/1.3 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.billet__corps h3 {
  margin-top: 2em;
  font: 500 1.25rem/1.4 var(--serif);
}
.billet__corps h2 + *,
.billet__corps h3 + * { margin-top: .8em; }

.billet__corps blockquote {
  padding-left: 1.4rem;
  border-left: 2px solid var(--kin);
  font-size: 1.3125rem;
  line-height: 1.7;
  color: var(--encre);
}
.billet__corps blockquote p { margin: 0; }

.billet__corps ul,
.billet__corps ol { padding-left: 1.2em; }
.billet__corps li + li { margin-top: .45em; }

.billet__corps strong { font-weight: 600; }

/* Les figures sortent de la colonne, sans la quitter des yeux. */
.billet__figure {
  width: min(52rem, calc(100vw - 2 * var(--gouttiere)));
  margin-left: 50%;
  transform: translateX(-50%);
}
.billet__corps > .billet__figure { margin-top: 2.4em; margin-bottom: .6em; }
.billet__figure img {             /* une photo en hauteur tient dans l'écran, sans bandes autour */
  width: auto;
  max-width: 100%;
  max-height: 86svh;
  margin-inline: auto;
}
.billet__figure figcaption {
  max-width: 38rem;
  margin: .8rem auto 0;
  font: 400 .875rem/1.55 var(--sans);
  color: var(--usuzumi);
}

/* Les œuvres citées : de petites fenêtres carrées, comme sur l'accueil. */
.billet__oeuvres,
.billet__auteur,
.billet__autres {
  max-width: 46rem;
  margin: clamp(3.5rem, 9svh, 5rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}
.billet__oeuvres h2,
.billet__autres h2 {
  margin: 0 0 1.25rem;
  font: 500 .8125rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--usuzumi);
}
.billet__oeuvres ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 1.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.carte { display: block; text-decoration: none; }
.carte img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--nuit);
  outline: 1px solid rgb(167 128 60 / .55);
  outline-offset: 4px;
  transition: outline-color .4s var(--lent);
}
.carte:hover img,
.carte:focus-visible img { outline-color: var(--kin); }
.carte__titre {
  display: block;
  margin-top: .85rem;
  font: 500 1.0625rem/1.3 var(--serif);
}
.carte__serie {
  display: block;
  font: 400 .8125rem/1.4 var(--sans);
  color: var(--usuzumi);
}

.billet__auteur p {
  margin: 0;
  font: 400 1rem/1.7 var(--serif);
  color: var(--usuzumi);
}
.billet__auteur p + p { margin-top: .6rem; }

.billet__autres ul { margin: 0; padding: 0; list-style: none; }
.billet__autres li + li { margin-top: .6rem; }
.billet__autres a { font: 400 1.125rem/1.5 var(--serif); }

/* ───────────── La liste des articles ───────────── */

.journal__tete { max-width: 46rem; }
.journal__titre {
  margin: 0;
  font: 500 clamp(3rem, 5.4vw, 5.25rem)/1 var(--serif);
  letter-spacing: -.025em;
}
.journal__chapo {
  max-width: 34rem;
  margin: 1.4rem 0 0;
  font: 400 clamp(1.1875rem, 1.55vw, 1.375rem)/1.6 var(--serif);
  color: var(--usuzumi);
  text-wrap: pretty;
}

.journal__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: clamp(2.5rem, 6svh, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  margin: clamp(3rem, 8svh, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.entree__lien { display: block; text-decoration: none; }
.entree__lien img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #d9d4c8;
}
.entree__date {
  display: block;
  margin-top: 1rem;
  font: 400 .8125rem/1.4 var(--sans);
  letter-spacing: .06em;
  color: var(--usuzumi);
}
.entree__titre {
  display: block;
  margin-top: .45rem;
  font: 500 1.4375rem/1.3 var(--serif);
  text-wrap: balance;
}
.entree__lien:hover .entree__titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.entree__resume {
  display: block;
  margin-top: .55rem;
  font: 400 1rem/1.6 var(--serif);
  color: var(--usuzumi);
}

@media (max-width: 40rem) {
  .billet__corps { font-size: 1.125rem; }
}