/* ═══════════════════════════════════════════════════════════════
   ARTICLE — template des pages /publications/<id>, refondu (2026-07)
   dans le langage actuel du site : navy profond, Epilogue pour les
   titres, Mulish pour le texte, hairlines, estampilles mono capitales.

   DEUX THÈMES pilotés par variables : sombre (défaut, = reste du site)
   et clair (crème Raise). Le choix vit dans html[data-artx="light"]
   (persisté en localStorage, appliqué avant le premier rendu).
   ═══════════════════════════════════════════════════════════════ */

/* ── Jetons de thème ──────────────────────────────────────────── */
:root{
  --ax-bg:#131B2A;                        /* fond de page (navy-3) */
  --ax-surface:#182233;                   /* encarts : citation, cartes */
  --ax-ink:rgba(247,245,243,.84);         /* texte courant */
  --ax-strong:#F7F5F3;                    /* titres, gras */
  --ax-muted:rgba(247,245,243,.55);       /* méta, légendes */
  --ax-faint:rgba(247,245,243,.4);        /* libellés discrets */
  --ax-hair:rgba(247,245,243,.13);        /* filets */
  --ax-accent:#8BA3D9;                    /* accent Raise */
  --ax-link:#9FB4E2;                      /* liens dans le texte */
  --ax-accent-soft:rgba(139,163,217,.12); /* fonds teintés */
  --ax-stamp:rgba(247,245,243,.72);       /* estampilles (dates) */
}
html[data-artx="light"]{
  --ax-bg:#FFFFFF;                        /* blanc pur (test — était crème #F7F5F3) */
  --ax-surface:#F8F8F9;                   /* encarts : gris à peine perceptible */
  --ax-ink:#14171D;                       /* texte courant quasi-noir */
  --ax-strong:#0B0D12;                    /* titres NOIRS */
  --ax-muted:#454B57;                     /* méta gris foncé (bien lisible) */
  --ax-faint:#6E7683;
  --ax-hair:rgba(11,13,18,.16);
  --ax-accent:#5F79B8;                    /* accent assombri : contraste sur crème */
  --ax-link:#3E5290;
  --ax-accent-soft:rgba(95,121,184,.12);
  --ax-stamp:#2C333F;
}

/* fond de page : suit le thème (évite l'éclair au sur-défilement) */
body{background:var(--ax-bg)}
.artx ::selection{background:var(--ax-accent);color:#fff}

/* ── Nav sur les pages article ────────────────────────────────────
   Le logo garde la MÊME taille que sur le reste du site (défini dans
   global.css) → cohérence visuelle d'une page à l'autre. */

/* Thème CLAIR : en haut de page la nav montre normalement le logo BLANC
   (invisible sur crème) → on affiche sa déclinaison sombre et on fonce le
   burger. Le menu plein écran reste navy → burger re-blanchi à l'ouverture. */
html[data-artx="light"] .nav:not(.scrolled) .nav-logo-w{display:none}
html[data-artx="light"] .nav:not(.scrolled) .nav-logo-d{display:block}
html[data-artx="light"] body:not(.locked) .nav-burger span{background:var(--navy)}
html[data-artx="light"] body:not(.locked) .nav-lang{color:rgba(11,13,18,.92)}
html[data-artx="light"] body:not(.locked) .nav-lang-inactive{color:rgba(11,13,18,.34)}
html[data-artx="light"] body:not(.locked) .nav-lang-sep{background:rgba(11,13,18,.24)}
html[data-artx="light"] body:not(.locked) .nav-lang-inactive:hover{color:var(--ax-link)}

/* ── Enveloppe ────────────────────────────────────────────────── */
.artx{background:var(--ax-bg);color:var(--ax-ink);
  transition:background-color .45s ease,color .45s ease}

/* ── En-tête éditorial ────────────────────────────────────────── */
.artx-head{position:relative;padding:clamp(118px,15vh,160px) var(--pad) 0}
/* Image de couverture EN FILIGRANE : posée derrière l'en-tête, très
   estompée (désaturée, ~10 %), fondue dans le fond par un masque en
   dégradé — elle s'évanouit avant le corps du texte. Présence, pas décor. */
.artx-head-bg{position:absolute;inset:0;pointer-events:none;
  background-size:cover;background-position:center 30%;
  opacity:.11;filter:saturate(.45) brightness(.95);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.55) 60%,transparent 96%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.55) 60%,transparent 96%);
  transition:opacity .45s ease}
html[data-artx="light"] .artx-head-bg{opacity:.08;filter:saturate(.4) brightness(1.05)}
.artx-head>*:not(.artx-head-bg){position:relative}
/* MÊME format que le fil d'Ariane de /veille (.page-hero-breadcrumb) :
   11px, .22em, capitales ; ancêtres discrets, séparateurs très fins,
   élément courant en accent bleu. Variables de thème → OK sombre + clair. */
/* ligne du haut : fil d'Ariane à gauche, signature auteur à droite */
.artx-head-top{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin:0 0 clamp(36px,5vh,60px)}
.artx-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;
  font-family:var(--mu);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ax-accent)}
.artx-crumb a{color:var(--ax-faint);text-decoration:none;transition:color .3s}
.artx-crumb a:hover{color:var(--ax-accent)}
.artx-crumb .sep{color:var(--ax-hair)}
.artx-crumb .cur{color:var(--ax-accent)}

/* signature auteur (byline) : petite photo ronde + nom + « Avocat associé »,
   intégrée à la ligne de méta sous le chapô (auteur à gauche, date à droite) */
.artx-sig{display:inline-flex;align-items:center;gap:18px;flex:none;
  text-decoration:none}
.artx-sig-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;
  object-position:31% 24%;
  flex:none;border:1px solid var(--ax-hair);
  transition:border-color .3s}
.artx-sig-photo--ph{display:flex;align-items:center;justify-content:center;
  color:var(--ax-accent);font-family:var(--mu);font-size:14px;font-weight:600;
  letter-spacing:.04em;border-color:var(--ax-accent)}
.artx-sig:hover .artx-sig-photo{border-color:var(--ax-accent)}
.artx-sig-text{display:flex;flex-direction:column;gap:7px;line-height:1}
.artx-sig-name{font-family:var(--mu);font-size:14px;font-weight:600;
  color:var(--ax-strong);transition:color .3s}
.artx-sig:hover .artx-sig-name{color:var(--ax-accent)}
.artx-sig-role{font-family:var(--mu);font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ax-muted)}

/* l'en-tête est calé sur la COLONNE DE LECTURE (même grille que le corps) :
   le titre démarre au-dessus du texte, le rail reste vide à gauche */
.artx-headline{display:grid;
  grid-template-columns:minmax(210px,260px) minmax(0,760px);
  column-gap:clamp(56px,7vw,130px);
  justify-content:center}
.artx-headline-inner{grid-column:2}

.artx-cat{display:inline-flex;align-items:center;
  font-family:var(--mu);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ax-accent);margin:0 0 18px}

.artx-title{font-family:var(--ep);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(28px,3.4vw,48px);line-height:1.14;color:var(--ax-strong);
  margin:0 0 clamp(18px,2.4vh,26px);max-width:24ch;
  transition:color .45s ease}

.artx-lead{font-family:var(--mu);font-weight:300;
  font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--ax-muted);
  max-width:62ch;margin:0 0 clamp(22px,3vh,30px)}

/* UNE seule ligne : auteur à gauche, date + temps de lecture à droite,
   le tout posé sur le filet — pas d'empilement */
.artx-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px clamp(22px,2.4vw,34px);
  padding-bottom:clamp(18px,2.6vh,26px);border-bottom:1px solid var(--ax-hair)}
.artx-meta-right{display:inline-flex;flex-wrap:wrap;align-items:baseline;
  gap:8px clamp(18px,2vw,28px)}
.artx-meta-date{font-family:var(--mu);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ax-stamp)}
.artx-meta-item{font-family:var(--mu);font-size:12.5px;font-weight:300;
  letter-spacing:.02em;color:var(--ax-muted)}
.artx-meta-item strong{font-weight:600;color:var(--ax-ink)}
.artx-meta-item a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ax-hair);
  transition:color .3s,border-color .3s}
.artx-meta-item a:hover{color:var(--ax-link);border-color:var(--ax-link)}

/* ── Grille corps : rail gauche + colonne de lecture ──────────── */
.artx-grid{display:grid;
  grid-template-columns:minmax(210px,260px) minmax(0,760px);
  column-gap:clamp(56px,7vw,130px);
  /* les pistes se rangeaient au fer à gauche : au-delà de 1 150 px de large,
     tout le bloc restait collé à gauche et le vide s'accumulait à droite */
  justify-content:center;
  padding:clamp(34px,4.6vh,54px) var(--pad) clamp(60px,8vh,100px)}

/* ── Article SANS sommaire : une seule colonne, centrée ────────────
   Le rail n'est posé que si l'article a des intertitres. Sans lui, la
   première piste restait pourtant réservée — 260 px de gouttière vide à
   gauche plus l'écart, soit la colonne de lecture décalée de 195 px vers la
   droite sur une page par ailleurs symétrique. L'article paraissait de
   travers alors que rien ne le justifiait. Ici, plus de piste à réserver :
   le texte est au milieu de la page, au pixel.
   Le titre suit la même règle — il est calé sur la colonne de lecture, il
   doit basculer avec elle. */
.artx:not(:has(.artx-rail)) .artx-headline,
.artx:not(:has(.artx-rail)) .artx-grid{
  grid-template-columns:minmax(0,760px);justify-content:center}
.artx:not(:has(.artx-rail)) .artx-headline-inner,
.artx:not(:has(.artx-rail)) .artx-content{grid-column:1}

/* ── Rail (sticky) : sommaire uniquement — absent si l'article n'en a pas ;
   la colonne de lecture reste calée en 2e colonne dans les deux cas */
.artx-content{grid-column:2}
.artx-rail{min-width:0;grid-column:1;grid-row:1}
.artx-rail-sticky{position:sticky;top:104px;display:flex;flex-direction:column;
  gap:clamp(28px,3.6vh,40px)}
.artx-rail-title{font-family:var(--mu);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ax-faint);
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--ax-hair)}

/* « À lire aussi » dans le rail : même grammaire que le sommaire — titre en
   capitales sous filet, entrées en Mulish, rien de plus. */
.artx-rail-rel ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:clamp(14px,1.8vh,20px)}
.artx-relr{display:flex;flex-direction:column;gap:6px;text-decoration:none}
.artx-relr-meta{font-family:var(--mu);font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ax-faint);
  transition:color .3s}
.artx-relr-title{font-family:var(--mu);font-size:13px;font-weight:300;
  line-height:1.45;color:var(--ax-muted);transition:color .3s;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.artx-relr:hover .artx-relr-title{color:var(--ax-strong)}
.artx-relr:hover .artx-relr-meta{color:var(--ax-accent)}
.artx-relr-all{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--ax-hair);
  font-family:var(--mu);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ax-faint);text-decoration:none;
  transition:color .3s,gap .3s}
.artx-relr-all svg{width:11px;height:11px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.artx-relr-all:hover{color:var(--ax-link);gap:11px}

/* sommaire */
.artx-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.artx-toc a{display:flex;gap:10px;align-items:baseline;padding:6px 0;
  font-family:var(--mu);font-size:13px;font-weight:300;line-height:1.45;
  color:var(--ax-muted);text-decoration:none;
  transition:color .25s,transform .25s}
.artx-toc a:hover{color:var(--ax-strong)}
.artx-toc a.is-on{color:var(--ax-strong);transform:translateX(2px)}
.artx-toc a.is-on .artx-toc-n{color:var(--ax-accent)}
.artx-toc-n{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--ax-faint);
  flex:none;transition:color .25s}

/* partage : petits boutons ronds hairline (désormais en haut, sous la méta) */
.artx-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.artx-share--top{margin-top:clamp(20px,2.6vh,30px)}
.artx-share-btn{width:36px;height:36px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:none;border:1px solid var(--ax-hair);color:var(--ax-muted);
  transition:color .3s,border-color .3s,background .3s,transform .3s}
.artx-share-btn:hover{color:var(--ax-accent);border-color:var(--ax-accent);transform:translateY(-2px)}
.artx-share-btn.is-done{background:var(--ax-accent);border-color:var(--ax-accent);color:#fff}
.artx-share-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.artx-share-btn svg.f{fill:currentColor;stroke:none}

/* affichage : bouton bascule sombre / clair, intégré à la rangée de partage.
   En sombre on montre le soleil (→ passer en clair), en clair la lune. */
.artx-share-sep{width:1px;height:28px;background:var(--ax-hair);margin:0 4px;flex:none;align-self:center}
html[data-artx="dark"] #axTheme .ic-moon{display:none}
html[data-artx="light"] #axTheme .ic-sun{display:none}

/* ── Corps de l'article ───────────────────────────────────────── */
.artx-content{min-width:0;counter-reset:axh2}

.artx-content h2{counter-increment:axh2;
  font-family:var(--ep);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(21px,2vw,29px);line-height:1.25;color:var(--ax-strong);
  margin:clamp(40px,5.4vh,58px) 0 clamp(14px,2vh,20px);
  scroll-margin-top:110px;transition:color .45s ease}
.artx-content h2::before{content:counter(axh2,decimal-leading-zero);
  display:block;margin-bottom:9px;
  font-family:var(--mu);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  color:var(--ax-accent)}
.artx-content h2:first-child{margin-top:0}

.artx-content h3{font-family:var(--mu);font-weight:600;letter-spacing:0;
  font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.4;color:var(--ax-strong);
  margin:clamp(28px,3.6vh,38px) 0 12px;scroll-margin-top:110px}

.artx-content p{font-family:var(--mu);font-weight:300;
  font-size:clamp(15px,1.15vw,16.5px);line-height:1.78;color:var(--ax-ink);
  margin:0 0 18px}
.artx-content strong{font-weight:600;color:var(--ax-strong)}
.artx-content a{color:var(--ax-link);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--ax-link) 40%,transparent);
  transition:border-color .3s}
.artx-content a:hover{border-bottom-color:var(--ax-link)}

.artx-content ul{list-style:none;margin:0 0 20px;padding:0;
  display:flex;flex-direction:column;gap:10px}
.artx-content ul li{position:relative;padding-left:26px;
  font-family:var(--mu);font-weight:300;
  font-size:clamp(15px,1.15vw,16.5px);line-height:1.7;color:var(--ax-ink)}
.artx-content ul li::before{content:'—';position:absolute;left:0;top:0;
  color:var(--ax-accent);font-weight:400}

.artx-content blockquote{margin:clamp(26px,3.6vh,36px) 0;
  padding:clamp(20px,2.6vh,28px) clamp(22px,2.6vw,32px);
  background:var(--ax-accent-soft);border-left:2px solid var(--ax-accent)}
.artx-content blockquote p{font-family:var(--ep);font-weight:300;
  font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ax-strong);margin:0}
.artx-content blockquote cite{display:block;margin-top:12px;font-style:normal;
  font-family:var(--mu);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ax-muted)}

/* ── Mots-clés : hashtags en petites capitales espacées — « # » fin en
   accent, terme crème. Ancrés à l'appareil de fin : le filet de clôture
   les précède, l'avertissement suit — un seul bloc, rien ne flotte. ── */
.artx-tags{display:flex;flex-wrap:wrap;gap:12px 22px;
  margin:clamp(40px,5.4vh,56px) 0 0;
  padding-top:clamp(22px,3vh,30px);border-top:1px solid var(--ax-hair)}
.artx-tags+.artx-note{margin-top:clamp(24px,3.2vh,32px);
  padding-top:0;border-top:none}
.artx-content a.artx-tag{display:inline-flex;align-items:baseline;gap:0;
  font-family:var(--mu);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ax-stamp);text-decoration:none;
  border-bottom:none;transition:color .3s}
.artx-tag-h{color:var(--ax-accent);font-weight:400;font-size:13px;
  letter-spacing:0;transform:translateY(.5px)}
.artx-content a.artx-tag:hover{color:var(--ax-accent)}

/* ── Avertissement de fin d'article ───────────────────────────── */
.artx-note{margin-top:clamp(40px,5.4vh,56px);padding-top:clamp(18px,2.4vh,24px);
  border-top:1px solid var(--ax-hair)}
.artx-note p{font-family:var(--mu);font-weight:300;font-size:12px;line-height:1.7;
  letter-spacing:.01em;color:var(--ax-faint);margin:0}

/* ── À lire aussi ─────────────────────────────────────────────── */
/* Deux colonnes : l'intitulé tient la gauche, les articles occupent la droite.
   La grille en trois colonnes fixes laissait deux cases vides dès qu'il n'y
   avait qu'un seul article à proposer — le cas courant tant que le fonds est
   mince. Ici la colonne de droite s'ajuste au nombre d'articles : un seul la
   remplit, trois s'y partagent. */
.artx-related{display:grid;
  /* EXACTEMENT la grille du corps de l'article : l'intitulé prend la place du
     rail, les articles se calent au pixel sur la colonne de lecture. */
  grid-template-columns:minmax(210px,260px) minmax(0,760px);
  column-gap:clamp(56px,7vw,130px);justify-content:center;
  padding:clamp(48px,7vh,84px) var(--pad) clamp(64px,9vh,110px);
  border-top:1px solid var(--ax-hair)}
/* article sans sommaire : le corps est en une colonne centrée, ce bloc suit */
.artx:not(:has(.artx-rail)) .artx-related{
  grid-template-columns:minmax(0,760px);row-gap:clamp(28px,3.8vh,42px)}
.artx:not(:has(.artx-rail)) .artx-related-head{grid-column:1;flex-direction:row;
  align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:24px}
.artx:not(:has(.artx-rail)) .artx-related-grid{grid-column:1}
.artx-related-head{grid-column:1;display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(14px,2vh,20px)}
.artx-related-title{font-family:var(--ep);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(23px,2.2vw,32px);color:var(--ax-strong);margin:0}
.artx-related-title em{font-style:normal;color:var(--ax-accent)}
.artx-related-all{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mu);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ax-faint);text-decoration:none;
  transition:color .3s,gap .3s}
.artx-related-all svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.artx-related-all:hover{color:var(--ax-link);gap:12px}

/* auto-fit, et non auto-fill : les pistes vides sont supprimées, si bien
   qu'un article seul occupe toute la largeur au lieu d'un tiers. */
.artx-related-grid{grid-column:2;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(20px,2.6vw,40px);align-content:start}
.artx-rel{display:flex;flex-direction:column;gap:12px;
  padding-top:18px;border-top:1px solid var(--ax-hair);text-decoration:none;
  transition:border-color .35s}
.artx-rel:hover{border-top-color:var(--ax-accent)}
.artx-rel-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.artx-rel-cat{font-family:var(--mu);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ax-accent)}
.artx-rel-date{font-family:var(--mu);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ax-faint);white-space:nowrap}
.artx-rel-title{font-family:var(--mu);font-size:15.5px;font-weight:400;line-height:1.45;
  color:var(--ax-ink);margin:0;transition:color .3s;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.artx-rel:hover .artx-rel-title{color:var(--ax-strong)}
.artx-rel-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mu);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ax-faint);transition:color .3s,gap .3s}
.artx-rel-more svg{width:12px;height:12px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.artx-rel:hover .artx-rel-more{color:var(--ax-link);gap:11px}

/* ── Révélations (mêmes courbes que le reste du site) ─────────── */
/* La révélation est définie UNE seule fois, dans global.css : même durée,
   même courbe, même distance, même échelle (numéro → titre → contenu, un cran
   de 100 ms). Cette page n'en redéfinit plus sa propre version. */

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:1020px){
  .artx-headline,.artx-grid{grid-template-columns:1fr}
  .artx-headline-inner{grid-column:1}
  .artx-grid{row-gap:34px}
  .artx-content{grid-column:1}
  .artx-rail{grid-column:1;grid-row:auto}
  /* rail sous forme de blocs empilés AVANT l'article ; plus de sticky */
  .artx-rail-sticky{position:static;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
  /* « À lire aussi » : l'intitulé repasse au-dessus des articles */
  .artx-related{grid-template-columns:1fr;row-gap:clamp(28px,3.8vh,42px)}
  .artx-related-head{grid-column:1;flex-direction:row;align-items:baseline;
    justify-content:space-between;flex-wrap:wrap;gap:24px}
  .artx-related-grid{grid-column:1}
}
@media(max-width:640px){
  .artx-related-grid{grid-template-columns:1fr}
}

/* ── Impression : article seul, noir sur blanc ────────────────── */
@media print{
  .nav,.sidebar,#spb,.menu,.artx-rail,.artx-related,
  .site-end,.cta-pf,.footer,.cursor,.cursor-dot{display:none!important}
  body,.artx{background:#fff!important;color:#111!important}
  .artx-title,.artx-content h2,.artx-content h3,.artx-content strong,
  .artx-content blockquote p{color:#000!important}
  .artx-content p,.artx-content ul li,.artx-lead{color:#222!important}
  .artx-head{padding-top:24px}
  .artx-headline,.artx-grid{grid-template-columns:1fr}
  .artx-headline-inner{grid-column:1}
  .artx-content{grid-column:1}
}