/* =========================================================================
   TIPS AIRBNB, feuille de style unique.

   PARTI PRIS : la clarte d'une documentation, la mise en page d'une revue.
   Fond blanc, filets fins, sommaire numerote plutot que grille de vignettes,
   colonne de lecture etroite. Un site de guides longs se juge au confort de
   lecture ; les vignettes ne servent qu'a remplir un premier ecran.

   LA POLICE EST SERVIE PAR NOUS, jamais par Google Fonts. Une police distante,
   c'est un aller-retour de plus sur le chemin critique et un saut de rendu ; et
   Google Fonts, servi depuis les Etats-Unis, expose une adresse IP europeenne a
   chaque visite, ce qu'un tribunal allemand a deja juge contraire au RGPD. Les
   trois graisses ci-dessous font 29 ko piece, deja sous-ensemblees.
   ========================================================================= */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  /* `swap` : le texte s'affiche tout de suite dans la police de secours et
     bascule a l'arrivee. Le contraire, c'est trois cents millisecondes de page
     blanche, et un score de performance qui s'effondre. */
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --papier: #ffffff;
  --papier-creux: #f7f7f7;
  /* LES JETONS DE LA CHARTE AIRBNB, repris tels quels.
     `#222222` pour le texte, `#717171` pour le secondaire (Foggy tel qu'il est
     employe aujourd'hui sur airbnb.com), `#ebebeb` pour les filets de
     separation entre deux lignes d'une liste, et `#dddddd` pour les bordures
     qui doivent se voir, comme le cadre d'une image. Deux gris et pas un
     seul : un filet de liste au meme contraste qu'un cadre d'image fait une
     page quadrillee. */
  --encre: #222222;
  --encre-douce: #717171;
  --filet: #ebebeb;
  --filet-fort: #dddddd;
  /* Hof, le gris fonce d'Airbnb. Sert de fond aux blocs inverses ; le blanc
     dessus donne 9,15:1, tres au-dela de ce que la norme demande. */
  --sombre: #484848;

  /* LE ROSE DE LA MARQUE, EN DEUX VALEURS, ET CE N'EST PAS UN CAPRICE.
     `#f2545b` est la couleur du logo, a un cheveu du Rausch d'Airbnb. Sur
     blanc il donne 3,39:1 de contraste : conforme pour un grand titre, un
     pictogramme ou un fond de bouton, INSUFFISANT pour un lien dans un
     paragraphe, ou la norme demande 4,5:1. On garde donc le rose de la marque
     partout ou il est gros ou decoratif, et un corail plus sombre (4,91:1) la
     ou il porte du texte a lire. Meme famille, meme lecture, et personne ne
     bute sur un lien qu'il ne distingue pas du texte. */
  --rose: #f2545b;
  --rose-fonce: #c4444a;

  /* Une seule famille, trois graisses. Les variables restent distinctes parce
     que les tailles et l'interlettrage different entre un titre et un
     paragraphe, pas la police. */
  --titre: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texte: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Airbnb arrondit tout : 8 px sur un bouton, 12 px sur une image ou un bloc,
     16 px sur une grande surface. Une seule echelle, appliquee partout. */
  --rayon: 8px;
  --rayon-bloc: 12px;

  --rang: 72rem;
  --mesure: 38rem;
  --pas: clamp(1rem, 3vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #121212;
    --papier-creux: #1c1c1c;
    --encre: #f7f7f7;
    --encre-douce: #a3a3a3;
    --filet: #2b2b2b;
    --filet-fort: #3d3d3d;
    --sombre: #1c1c1c;
    /* Sur fond sombre, le rose de la marque monte a 5,53:1 : la nuance foncee
       n'a plus lieu d'etre, les deux variables pointent le meme ton. */
    --rose: #f2545b;
    --rose-fonce: #f2545b;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.6;
  /* Le crenage optique change vraiment quelque chose sur une old-style en
     grande taille : sans lui, « Ta » et « Vo » s'ecartent. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Le rang : la colonne unique qui tient toute la page. Une seule definition
   de la largeur et des marges laterales, partout. */
.rang {
  width: 100%;
  max-width: var(--rang);
  margin-inline: auto;
  padding-inline: var(--pas);
}

/* Le lien d'evitement. Invisible tant qu'on ne l'atteint pas au clavier, et
   parfaitement visible des qu'on y arrive : un lien cache en permanence est
   un lien inutile. */
.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--sombre);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--rayon) 0;
  font-family: var(--texte);
}
.saut:focus {
  left: 0;
}

/* ------------------------------------------------------------------ entete */

.entete {
  border-bottom: 1px solid var(--filet);
}

.entete .rang {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  flex-wrap: wrap;
}

.marque {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.marque-nom {
  font-family: var(--titre);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* Le marque-page, aligne sur la ligne de base du nom. */
.marque-signe {
  color: var(--rose);
  flex: none;
  transform: translateY(2px);
}

.marque-baseline {
  font-size: 0.8rem;
  color: var(--encre-douce);
  letter-spacing: 0.02em;
}

@media (max-width: 32rem) {
  .marque-baseline {
    display: none;
  }
}

.nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a:focus-visible {
  border-bottom-color: var(--rose-fonce);
  color: var(--rose-fonce);
}

.nav-lang {
  color: var(--encre-douce);
}

/* -------------------------------------------------------------------- hero */

.hero {
  border-bottom: 1px solid var(--filet);
}

.hero .rang {
  padding-block: clamp(3rem, 9vw, 7rem);
}

.hero .rang::before {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--rose);
  margin-bottom: 1.75rem;
}

.hero-titre {
  font-family: var(--titre);
  /* Volontairement enorme. C'est le seul endroit du site ou la typographie
     parle avant le texte, et c'est ce qui distingue une revue d'un blog. */
  font-size: clamp(2.75rem, 9vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0;
  max-width: 16ch;
}

.hero-intro {
  font-family: var(--titre);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: 46ch;
  margin: 1.75rem 0 0;
}

/* ------------------------------------------------------- listes de guides */

.section-guides {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section-titre {
  font-family: var(--texte);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rose-fonce);
  font-weight: 600;
  margin: 0 0 1.5rem;
}

.section-index .section-titre-h1::before {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--rose);
  margin-bottom: 1.5rem;
}

.section-titre-h1 {
  font-family: var(--titre);
  font-size: clamp(2rem, 5vw, 3.25rem);
  text-transform: none;
  letter-spacing: -0.025em;
  color: var(--encre);
  line-height: 1.05;
  margin-bottom: 2.5rem;
}

.guides {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}

.guide {
  border-bottom: 1px solid var(--filet);
}

.guide-lien {
  display: grid;
  /* La vignette d'abord, le texte ensuite. Sur telephone elle se reduit sans
     disparaitre : c'est elle qui donne envie d'ouvrir, la supprimer au premier
     manque de place reviendrait a la juger accessoire. */
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.5rem;
  text-decoration: none;
  align-items: start;
}

@media (min-width: 48rem) {
  .guide-lien {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2rem;
    padding-block: 2rem;
  }
}

.guide-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon-bloc);
  background: var(--papier-creux);
  transition: transform 0.25s ease;
}

/* Un article sans couverture ne laisse pas un trou : la place est tenue, en
   gris de fond. Une grille dont une ligne saute est plus laide qu'une
   vignette vide. */
.guide-image-vide {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--rayon-bloc);
  background: var(--papier-creux);
}

.guide-titre {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--titre);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.guide-resume {
  display: block;
  margin-top: 0.5rem;
  color: var(--encre-douce);
  max-width: 62ch;
  font-size: 0.98rem;
}

.guide-meta {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--encre-douce);
}

/* Au survol, la vignette avance imperceptiblement. C'est le seul mouvement de
   la liste : si chaque ligne se soulevait, la page ferait sapin de Noel. */
.guide-lien:hover .guide-image,
.guide-lien:focus-visible .guide-image {
  transform: scale(1.02);
}

.guide-lien:hover .guide-titre,
.guide-lien:focus-visible .guide-titre {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--rose-fonce);
}

.plus {
  margin-top: 2rem;
}

.plus a {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid var(--rose-fonce);
  padding-bottom: 3px;
  color: var(--rose-fonce);
}

/* ----------------------------------------------------------------- article */

.article-tete {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem;
}

.fil {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--encre-douce);
  margin: 0 0 1.5rem;
}

.fil a {
  text-decoration: none;
}

.fil a:hover,
.fil a:focus-visible {
  color: var(--rose-fonce);
}

.article-titre {
  overflow-wrap: anywhere;
  font-family: var(--titre);
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.028em;
  font-weight: 600;
  margin: 0;
  max-width: 20ch;
}

.chapeau {
  font-family: var(--titre);
  font-size: clamp(1.1rem, 2.1vw, 1.35rem);
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: 52ch;
  margin: 1.5rem 0 0;
}

/* LA SIGNATURE. Le portrait porte `alt=""` : le nom est ecrit juste a cote,
   une alternative le ferait annoncer deux fois. */
.signature {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

.signature-portrait {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--papier-creux);
}

.signature-texte {
  margin: 0;
  line-height: 1.35;
}

.signature-nom {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
}

.signature-role {
  display: block;
  font-size: 0.85rem;
  color: var(--encre-douce);
}

.article-meta {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.sep {
  color: var(--filet);
}

.couverture {
  width: 100%;
  max-width: var(--rang);
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  padding-inline: var(--pas);
}

.couverture img {
  display: block;
  width: 100%;
  /* Un format panoramique impose : les images de la source ont des ratios
     varies, et une couverture qui change de hauteur d'un article a l'autre
     casse le rythme de la collection. */
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--rayon-bloc);
}

/* Deux colonnes a partir du grand format : le sommaire a gauche, colle, et la
   prose a droite. En dessous, une seule colonne et le sommaire redevient un
   bloc ordinaire en tete d'article. */
/* `minmax(0, 1fr)` ET PAS LA COLONNE IMPLICITE PAR DEFAUT.
   Une piste de grille non declaree vaut `auto`, et une piste `auto` se
   dimensionne sur le contenu le plus large qu'elle contient, sans jamais
   descendre en dessous. Le corps des articles porte des tableaux en
   `white-space: nowrap` dont la largeur naturelle depasse les six cents
   pixels : la grille prenait cette largeur, et toute la page avec elle. Sur un
   telephone de 375 px, le document defilait jusqu'a 624. `minmax(0, 1fr)`
   autorise la piste a descendre sous son contenu, et le tableau redevient ce
   qu'il devait etre, un bloc qui defile dans son propre cadre. */
.article-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 60rem) {
  .article-colonnes {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

.sommaire {
  font-size: 0.9rem;
}

@media (min-width: 60rem) {
  .sommaire {
    position: sticky;
    top: 2rem;
    align-self: start;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

.sommaire-titre {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rose-fonce);
  font-weight: 600;
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--filet);
}

.sommaire ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: som;
}

.sommaire li {
  counter-increment: som;
  margin-bottom: 0.7rem;
  line-height: 1.35;
}

.sommaire a {
  text-decoration: none;
  color: var(--encre-douce);
  display: block;
}

.sommaire a::before {
  content: counter(som) '. ';
  color: var(--filet);
  font-variant-numeric: tabular-nums;
}

.sommaire a:hover,
.sommaire a:focus-visible {
  color: var(--rose-fonce);
}

/* ------------------------------------------------------------------- prose */

/* Tout ce qui suit habille du HTML qu'on ne genere pas nous-memes : il vient
   de la source, on ne peut donc pas y poser de classes. D'ou le style par
   BALISE, entierement contenu dans `.prose` pour ne rien deborder ailleurs. */
.prose {
  font-family: var(--titre);
  font-size: 1.15rem;
  line-height: 1.72;
  max-width: var(--mesure);
  min-width: 0;
  /* Une adresse longue collee dans un lien, un nom de fichier, une reference :
     sans ca, un seul mot insecable de quatre cents pixels ressort du cadre sur
     un telephone. */
  overflow-wrap: anywhere;
}

.prose > *:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0 0 1.4em;
}

/* La lettrine du premier paragraphe. Le detail typographique qui dit
   « revue » avant meme qu'on ait lu un mot. Elle ne s'applique qu'au premier
   paragraphe reel, jamais a une liste ou un tableau qui ouvrirait l'article. */
.prose > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.9;
  font-weight: 800;
  padding-right: 0.08em;
  padding-top: 0.06em;
  color: var(--rose);
  font-weight: 600;
}

.prose h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 2.4em 0 0.7em;
  /* Le filet au-dessus du titre separe les sections plus surement qu'un
     grand blanc, et il tient meme quand deux sections sont courtes. */
  padding-top: 0.9em;
  border-top: 1px solid var(--filet);
}

.prose h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  line-height: 1.25;
  font-weight: 600;
  margin: 2em 0 0.6em;
}

.prose a {
  color: var(--rose-fonce);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--rose-fonce) 45%, transparent);
}

.prose a:hover,
.prose a:focus-visible {
  text-decoration-color: var(--rose-fonce);
}

.prose ul,
.prose ol {
  margin: 0 0 1.4em;
  padding-left: 1.3em;
}

.prose li {
  margin-bottom: 0.55em;
}

.prose li::marker {
  color: var(--rose);
}

.prose blockquote {
  margin: 2em 0;
  padding-left: 1.4em;
  border-left: 3px solid var(--rose-fonce);
  font-style: italic;
  color: var(--encre-douce);
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose img {
  display: block;
  width: 100%;
  margin: 2em 0;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-bloc);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 2.5em 0;
}

/* Les tableaux de la source ont jusqu'a cinq colonnes : sur telephone ils
   defilent dans leur propre cadre, ils ne poussent jamais la page. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--texte);
  font-size: 0.92rem;
  margin: 2em 0;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .prose table {
    display: table;
    white-space: normal;
  }
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.7em 1em 0.7em 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}

.prose th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--encre-douce);
  font-weight: 600;
}

.prose strong {
  font-weight: 600;
}

/* ------------------------------------------------------------------ encart */

/* Le bloc qui renvoie vers CleanClac. Inverse, plein cadre : c'est le seul
   endroit du site qui vend quelque chose, il doit se voir comme une page de
   publicite dans une revue, et pas se deguiser en contenu. */
.encart {
  background: var(--sombre);
  color: #fff;
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--rayon-bloc);
  margin-block: clamp(3rem, 7vw, 5rem);
}

.encart-titre {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 0.9rem;
  max-width: 18ch;
}

.encart-texte {
  margin: 0 0 1.75rem;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.82);
}

/* Le bouton porte le rose de la marque en aplat. Blanc sur Rausch donne
   3,05:1 : conforme a partir de 18,66 px en gras, d'ou le libelle en 1,05 rem
   700. Un libelle plus petit aurait oblige a foncer le fond, et le bouton
   aurait perdu la couleur qu'on venait y chercher. */
.bouton {
  display: inline-block;
  background: var(--rose);
  color: #fff;
  text-decoration: none;
  padding: 0.9rem 1.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  border-radius: var(--rayon);
  transition: background 0.18s ease, transform 0.18s ease;
}

.bouton:hover,
.bouton:focus-visible {
  background: #d94950;
  transform: translateY(-1px);
}

/* -------------------------------------------------------------- vide, pied */

.vide {
  padding-block: clamp(4rem, 12vw, 8rem);
  max-width: 44ch;
}

.vide h1 {
  font-family: var(--titre);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}

.vide p {
  color: var(--encre-douce);
  font-family: var(--titre);
  font-size: 1.1rem;
  margin: 0 0 1rem;
}

.pied {
  border-top: 1px solid var(--filet);
  margin-top: auto;
}

.pied .rang {
  padding-block: 2.5rem;
}

.pied-marque {
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

.pied-marque {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pied-mentions {
  margin: 0;
  font-size: 0.82rem;
  color: var(--encre-douce);
  max-width: 62ch;
}

/* La mention de non-affiliation : lisible, jamais en avant. Elle doit se
   trouver quand on la cherche, pas concurrencer le contenu. */
.pied-avertissement {
  margin-top: 0.6rem;
  font-size: 0.76rem;
}

/* ------------------------------------------------------------------ divers */

:focus-visible {
  outline: 2px solid var(--rose-fonce);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}

/* Une ancre atteinte ne doit pas se coller au bord haut de la fenetre. */
:target {
  scroll-margin-top: 2rem;
}

/* L'IMPRESSION. Un guide de vingt minutes se sort parfois sur papier pour le
   suivre en logement, un chiffon dans l'autre main. Le chrome part, la prose
   reprend toute la largeur, et les adresses des liens s'ecrivent en clair
   puisqu'on ne peut plus cliquer. */
@media print {
  .entete,
  .pied,
  .sommaire,
  .encart,
  .section-suite,
  .saut {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .prose {
    max-width: none;
    font-size: 11pt;
  }

  .prose a::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }

  .prose h2,
  .prose h3 {
    break-after: avoid;
  }

  .prose img,
  .prose table,
  .prose blockquote {
    break-inside: avoid;
  }
}