/* Clean, fast styling for a blog. System fonts, a few KB, zero frameworks.
   The palette itself lives in common.css, which every page loads first: here
   we only map the historical variable names of the public site onto those
   shared tokens. Both themes are covered by this single block, because the
   tokens are what change when html[data-tema="dark"] is set. */
:root {
  --testo:var(--pb-text); --secondario:var(--pb-text-muted); --link:var(--pb-accent);
  --bordo:var(--pb-border); --codice-bg:var(--pb-code-bg); --larghezza:var(--pb-width-text);
  --larghezza-home:var(--pb-width-wide); --card-bg:var(--pb-surface); --card-hover:var(--pb-surface-alt);
  --sfondo:var(--pb-bg); --hero-1:var(--pb-hero-1); --hero-2:var(--pb-hero-2); --hero-bordo:var(--pb-hero-border);
}
/* In dark mode, the elements with fixed colours must be adapted by hand,
   otherwise they stay dark on dark and become unreadable. */
html[data-tema="dark"] .home-intro p { color:#cbd5e1; }
html[data-tema="dark"] .home-intro p strong { color:#f1f5f9; }
html[data-tema="dark"] .card-snippet,
html[data-tema="dark"] .card-excerpt,
html[data-tema="dark"] .card-date,
html[data-tema="dark"] .card-read-more,
html[data-tema="dark"] .home-card-excerpt,
html[data-tema="dark"] .meta { color:var(--secondario); }
html[data-tema="dark"] .card-title,
html[data-tema="dark"] .home-card-title { color:var(--testo); }
html[data-tema="dark"] .card-snippet mark,
html[data-tema="dark"] .card-title mark { background:#7a5a00; color:#fff; }
/* Gradient headings: in dark mode we lighten the gradient for readability. */
html[data-tema="dark"] .home-intro h1, html[data-tema="dark"] .home-intro h2,
html[data-tema="dark"] .card-hero-title {
  background:linear-gradient(120deg, #6ba9ff, #b39dff); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;
}
html[data-tema="dark"] .articles-heading { color:var(--testo); }
html[data-tema="dark"] .card-page { color:var(--testo); }
/* Dark-mode contrast fixes.
   The borders of a table and the rule of a blockquote were drawn with
   --bordo (#2e2e35) on the page background (#101013): a ratio of 1.41:1,
   a line you have to hunt for rather than see. Both now use #66667a, which
   measures 3.39:1 and clears the 3:1 WCAG asks of a non-text element that
   carries meaning. The quoted text itself moves from the muted grey to the
   body colour: a whole paragraph set in the secondary colour is harder to
   read than the caption that colour was chosen for. */
html[data-tema="dark"] .article-table th,
html[data-tema="dark"] .article-table td { border-color:#66667a; }
html[data-tema="dark"] .article-table th { background:#26262d; }
html[data-tema="dark"] blockquote {
  border-left-color:#66667a; color:var(--testo); opacity:0.92; }
/* The search snippet: the highlight was already adjusted, but the text
   around it stayed at the muted colour on a card background. */
html[data-tema="dark"] .card-snippet { color:#c4c4cc; }
html[data-tema="dark"] .card-snippet mark,
html[data-tema="dark"] .card-title mark { background:#8a6600; color:#fff; }
/* Small tag labels under a card. */
html[data-tema="dark"] .card-tag { border-color:#3a3a45; }
body {
  font-family:var(--pb-font);
  font-size:var(--pb-font-size); line-height:var(--pb-line-height); color:var(--testo);
  margin:0; background:var(--sfondo);
}
/* Header with navbar: title on the left, navigation on the right. */
header.site {
  max-width:var(--larghezza-home); margin:0 auto;
  padding:1.5rem 1.2rem; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:1rem;
  border-bottom:1px solid var(--bordo);
}
header.site .site-brand h1 { font-size:1.5rem; margin:0; }
header.site .site-brand h1 a { color:var(--testo); text-decoration:none; }
header.site .site-brand .site-subtitle { color:var(--secondario); font-size:0.9rem; margin:0.2rem 0 0; }
header.site .site-nav { display:flex; gap:1.5rem; }
header.site .site-nav a {
  color:var(--testo); text-decoration:none; font-size:0.95rem;
  font-weight:500; padding:0.3rem 0; border-bottom:2px solid transparent;
}
header.site .site-nav a:hover { border-bottom-color:var(--link); color:var(--link); }
.tema-toggle { background:none; border:1px solid var(--bordo); border-radius:50%; width:36px; height:36px;
  cursor:pointer; font-size:1.1rem; line-height:1; color:var(--testo); display:inline-flex;
  align-items:center; justify-content:center; padding:0; }
.tema-toggle:hover { border-color:var(--link); color:var(--link); }
/* Main container: wider on the home, for the grid. */
.main-content { max-width:var(--larghezza-home); margin:0 auto; padding:2.5rem 1.2rem 4rem; }
a { color:var(--link); }
h1,h2,h3 { line-height:1.25; font-weight:600; }
article.post h1 { font-size:2rem; margin:0 0 0.4rem; }
.meta { color:var(--secondario); font-size:0.9rem; margin-bottom:2rem; }
.tag { font-size:0.8rem; color:var(--secondario); text-decoration:none; }
.tag:hover { color:var(--link); }
.breadcrumbs { font-size:0.85rem; color:var(--secondario); margin:0 0 0.5rem; }
.breadcrumbs a { color:var(--link); text-decoration:none; }
.text-tag-conteggio { color:var(--secondario); font-size:0.9rem; margin:0 0 1.5rem; }
/* Table of contents (TOC) for long articles. */
.table-of-contents { background:var(--card-bg); border:1px solid var(--bordo); border-radius:10px;
  padding:1rem 1.4rem; margin:0 0 2rem; }
.table-of-contents .toc-title { font-weight:700; margin:0 0 0.5rem; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--secondario); }
.table-of-contents ul { list-style:none; padding:0; margin:0; }
.table-of-contents li { margin:0.3rem 0; }
.table-of-contents li.toc-h3 { padding-left:1.2rem; font-size:0.92rem; }
.table-of-contents a { color:var(--link); text-decoration:none; }
.table-of-contents a:hover { text-decoration:underline; }
/* Related articles block at the bottom of the article. */
.related-articles { max-width:var(--larghezza); margin:3rem auto 0; padding:2rem 1.2rem 0; border-top:1px solid var(--bordo); }
/* Page of a card (Biography, Projects, About). */
.card-hero { text-align:center; padding:2.5rem 1rem 1.5rem; margin-bottom:2rem;
  background:linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%);
  border:1px solid var(--hero-bordo); border-radius:16px; }
.card-hero .breadcrumbs { justify-content:center; }
.card-hero-title { font-size:2rem; margin:0.3rem 0 0; letter-spacing:-0.02em;
  background:linear-gradient(120deg, #0066cc, #5b3df5); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
.card-page { max-width:var(--larghezza); margin:0 auto; font-size:1.05rem; line-height:1.7; }
.card-page img { max-width:100%; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.08); margin:1rem 0; }
.card-ritorno { max-width:var(--larghezza); margin:3rem auto 0; }
.card-ritorno a { color:var(--link); text-decoration:none; }
.language-switcher-home { text-align:right; margin:0 0 1rem; }
.language-switcher-home a { color:var(--link); text-decoration:none; font-size:0.9rem; }
/* Grid of clickable cards for the articles. */
.articles-grid {
  display:flex; flex-direction:column; gap:1rem;
}
/* The card is a row: thumbnail on the left, text on the right. With no cover
   the row has a single child and the text simply takes the whole width, so a
   blog without images looks exactly as it did. */
.article-card {
  display:flex; flex-direction:row; gap:1.2rem; align-items:flex-start;
  text-decoration:none; color:var(--testo);
  background:var(--card-bg); border:1px solid var(--bordo); border-radius:12px;
  padding:1.3rem 1.5rem; transition:transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.card-corpo { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
/* Sized exactly like the thumbnail of the highlighted block, and for the same
   reasons: a declared width so the automatic minimum size of a flex item
   cannot fall back to the intrinsic width of the file, min-width:0 to remove
   that minimum outright, and a width rather than a max-width because the
   global img rule further down carries !important. Smaller than the
   highlighted one, because these cards are a list to scan. */
.card-copertina {
  flex:0 0 auto;
  width:clamp(56px, 14%, 92px);
  aspect-ratio:1 / 1; height:auto;
  min-width:0;
  object-fit:cover;
  border-radius:10px;
}
.article-card:hover {
  transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.08);
  background:var(--card-hover);
}
.card-date { color:var(--secondario); font-size:0.8rem; margin-bottom:0.4rem; }
.card-title { font-size:1.2rem; margin:0 0 0.5rem; line-height:1.3; }
.card-excerpt { color:var(--secondario); font-size:0.95rem; margin:0 0 1rem; flex-grow:1; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* Author avatar in the homepage hero. */
.home-avatar { width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:3px solid var(--sfondo); box-shadow:0 2px 10px rgba(0,0,0,0.12);
  margin:0 auto 1rem; display:block; }
/* "Written by" box at the bottom of the articles. */
.author-box { display:flex; gap:1.2rem; align-items:flex-start;
  background:var(--card-bg); border:1px solid var(--bordo); border-radius:12px;
  padding:1.3rem 1.5rem; margin:3rem 0 0; }
.author-box-photo { width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-box-name { margin:0 0 0.2rem; font-weight:700; }
.author-box-name a { color:var(--testo); text-decoration:none; }
.author-box-name a:hover { color:var(--link); }
.author-box-label { font-weight:400; color:var(--secondario); font-size:0.85rem; }
.author-box-role { margin:0 0 0.4rem; color:var(--secondario); font-size:0.9rem; }
.author-box-bio { margin:0 0 0.5rem; font-size:0.95rem; line-height:1.55; }
.author-box-social { margin:0; font-size:0.88rem; }
.author-box-social a { color:var(--link); text-decoration:none; }
.author-box-social a:hover { text-decoration:underline; }
/* Navigation between articles (newer / older). */
.article-nav { display:flex; justify-content:space-between; gap:1rem; margin:1.5rem 0 0; }
.article-nav-link { flex:1; max-width:48%; text-decoration:none; padding:0.8rem 1rem;
  border:1px solid var(--bordo); border-radius:10px; background:var(--card-bg); }
.article-nav-link:hover { border-color:var(--link); }
.article-nav-right { text-align:right; }
.article-nav-label { display:block; font-size:0.78rem; color:var(--secondario);
  text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.25rem; }
.article-nav-title { display:block; color:var(--testo); font-size:0.92rem;
  font-weight:600; line-height:1.35; }
.article-nav-empty { flex:1; max-width:48%; }
@media (max-width: 640px) {
  .article-nav { flex-direction:column; }
  .article-nav-link, .article-nav-empty { max-width:100%; }
  .article-nav-empty { display:none; }
  .author-box { flex-direction:column; align-items:center; text-align:center; }
}
/* Language switcher in the navbar. */
.nav-lingua { font-weight:700; font-size:0.85rem; border:1px solid var(--bordo);
  border-radius:6px; padding:0.15rem 0.5rem; }
/* Social links in the footer. */
.pie-social { margin:0.4rem 0 0; }
.pie-social a { color:var(--secondario); text-decoration:none; }
.pie-social a:hover { color:var(--link); }
/* Skip link: invisible until it receives keyboard focus. */
.skip-to-content { position:absolute; left:-9999px; top:0; background:var(--link);
  color:#fff; padding:0.6rem 1rem; border-radius:0 0 8px 0; z-index:100; text-decoration:none; }
.skip-to-content:focus { left:0; }
/* Context snippet in the search results, with the term highlighted. */
.card-snippet { color:var(--secondario); font-size:0.9rem; margin:0 0 1rem; flex-grow:1; line-height:1.5; }
.card-snippet mark, .card-title mark { background:#fff3b0; color:inherit; padding:0 2px; border-radius:2px; }
.card-read-more { color:var(--link); font-size:0.88rem; font-weight:500; margin-top:auto; }
.no-articles { color:var(--secondario); }
/* Archive page: compact list by year, date aligned left. */
.archive-year h2 { font-size:1.3rem; margin:2rem 0 0.6rem; color:var(--testo);
  border-bottom:1px solid var(--bordo); padding-bottom:0.3rem; }
.archive-list { list-style:none; padding:0; margin:0; }
.archive-list li { margin:0.45rem 0; display:flex; gap:1rem; align-items:baseline; }
.archive-date { color:var(--secondario); font-size:0.85rem; min-width:9.5rem; flex-shrink:0; }
.archive-list a { color:var(--testo); text-decoration:none; }
.archive-list a:hover { color:var(--link); text-decoration:underline; }
@media (max-width: 640px) {
  .archive-list li { flex-direction:column; gap:0.1rem; margin:0.8rem 0; }
  .archive-date { min-width:0; }
}
/* Navigation between the homepage pages (pagination). */
.paginazione { display:flex; justify-content:space-between; align-items:center;
  margin:2rem 0 0; gap:1rem; }
.paginazione a { color:var(--link); text-decoration:none; font-size:0.95rem;
  padding:0.5rem 1rem; border:1px solid var(--bordo); border-radius:8px; }
.paginazione a:hover { border-color:var(--link); }
.paginazione .paginazione-vuoto { visibility:hidden; }
.paginazione .paginazione-info { color:var(--secondario); font-size:0.85rem; }
pre { background:var(--codice-bg); padding:1rem 1.2rem; border-radius:6px; overflow-x:auto; font-size:0.85rem; line-height:1.5; }
pre.ql-syntax, pre code { font-family:"SF Mono",Menlo,Monaco,Consolas,monospace; tab-size:4; }
pre.ql-syntax { background:var(--codice-bg); border:1px solid var(--bordo); }
/* Tables (including those pasted from Word or imported from a .docx).
   The backgrounds use the theme variables: they used to be fixed light colours
   that became unreadable in dark mode (light text on a light background).

   The table must stay display:table. It used to carry display:block with
   overflow-x:auto, so that a wide table would scroll on a phone, and that is
   what made every table on the public site narrower than the same table in
   the editor: with display:block the element becomes an ordinary block box,
   its rows generate an ANONYMOUS table box inside it, and that anonymous box
   is sized shrink-to-fit. The width:100% then applied to the outer block and
   never reached the grid the reader sees.

   The horizontal scrolling now lives on the wrapper instead. Every table in
   an article is inside div.raw-html-block - the editor's own blot writes it,
   and so does the Word importer - so the wrapper is always there to scroll. */
.article-table { border-collapse:collapse; width:100%; max-width:100%; margin:1.5rem 0; font-size:0.92rem; }
.article-table th, .article-table td { border:1px solid var(--bordo); padding:0.6rem 0.8rem; text-align:left; vertical-align:top; }
.article-table th { background:var(--codice-bg); font-weight:600; }
.article-table tr:nth-child(even) td { background:var(--card-hover); }
.raw-html-block { margin:0; overflow-x:auto; }
/* A table written by hand in an article, with no wrapper around it, has no
   scroll container of its own. On a narrow screen it falls back to the old
   behaviour, where shrink-to-fit plus scrolling is what you want anyway. */
@media (max-width: 640px) {
  article.post > .article-table,
  .card-page > .article-table { display:block; overflow-x:auto; }
}
code { font-family:"SF Mono",Menlo,Monaco,Consolas,monospace; font-size:0.88em; }
p code,li code { background:var(--codice-bg); padding:0.1rem 0.35rem; border-radius:4px; }
img { max-width:100% !important; height:auto; }
video { max-width:100%; height:auto; display:block; margin:1rem 0; }
.video-youtube { position:relative; width:100%; padding-bottom:56.25%; margin:1rem 0; height:0; overflow:hidden; }
.video-youtube iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
/* Alignment generated by Quill (text and images). */
.ql-align-center { text-align:center; }
.ql-align-right { text-align:right; }
.ql-align-justify { text-align:justify; }
/* Fonts and sizes chosen in the editor (Quill uses these classes). */
.ql-font-serif { font-family:Georgia,"Times New Roman",serif; }
.ql-font-monospace { font-family:Menlo,Monaco,Consolas,monospace; }
.ql-size-small { font-size:0.75em; }
.ql-size-large { font-size:1.5em; }
.ql-size-huge { font-size:2.5em; }
/* A centred image is inline: display block is needed to really centre it. */
p.ql-align-center img, .ql-align-center img { display:inline-block; }
blockquote { border-left:3px solid var(--bordo); margin-left:0; padding-left:1.2rem; color:var(--secondario); font-style:italic; }
.commenti { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--bordo); }
.commenti h2 { font-size:1.2rem; }
.search-box { margin-bottom:2rem; }
.search-box input { width:100%; padding:0.7rem 1rem; font-size:1rem; border:1px solid var(--bordo); border-radius:8px; font-family:inherit; }
.search-box input:focus { border-color:var(--link); }
#search-box-info { color:var(--secondario); font-size:0.85rem; margin:0.5rem 0 0; min-height:1em; }
/* The individual article pages stay narrow, for readability. */
article.post { max-width:var(--larghezza); margin:0 auto; padding:2.5rem 1.2rem 2rem; }
/* Lists in the articles: we restore the bullets and the numbers, which some
   CSS resets remove. Without these rules bulleted lists show with no bullet. */
article.post ul { list-style:disc; padding-left:1.6rem; margin:1rem 0; }
article.post ol { list-style:decimal; padding-left:1.6rem; margin:1rem 0; }
article.post li { margin:0.3rem 0; }
/* Lists with check boxes (checklists) generated by the editor. */
article.post ul[data-checked] { list-style:none; padding-left:0.3rem; }
article.post li[data-list="unchecked"]::before { content:"±0"; margin-right:0.5rem; }
article.post li[data-list="checked"]::before { content:"±1"; margin-right:0.5rem; }
/* Indentation produced by the editor: 5 levels. */
article.post .ql-indent-1 { padding-left:2.5rem; }
article.post .ql-indent-2 { padding-left:5rem; }
article.post .ql-indent-3 { padding-left:7.5rem; }
article.post .ql-indent-4 { padding-left:10rem; }
article.post .ql-indent-5 { padding-left:12.5rem; }
/* Superscript and subscript (for formulas, notes, units of measure). */
article.post sub { vertical-align:sub; font-size:0.75em; }
article.post sup { vertical-align:super; font-size:0.75em; }
/* Strikethrough text. */
article.post s, article.post del { text-decoration:line-through; }
.commenti { max-width:var(--larghezza); margin:2rem auto 0; padding:2rem 1.2rem 0; border-top:1px solid var(--bordo); }
footer.site { max-width:var(--larghezza-home); margin:4rem auto 0; padding:1.5rem 1.2rem; border-top:1px solid var(--bordo); color:var(--secondario); font-size:0.85rem; text-align:center; }
/* Top of the homepage (bio, images, introduction). */
/* Welcome section (hero): elegant but very light, CSS only.
   A gentle gradient and careful typography give emphasis without images. */
.home-intro {
  margin:0 0 2rem; padding:1.3rem 2rem; border-radius:16px;
  background:linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%);
  border:1px solid var(--hero-bordo); text-align:center; position:relative; overflow:hidden;
}
.home-intro::before {
  content:""; position:absolute; top:-50%; right:-10%; width:260px; height:260px;
  background:radial-gradient(circle, rgba(0,102,204,0.08) 0%, transparent 70%);
  pointer-events:none;
}
.home-intro h1, .home-intro h2 {
  font-size:1.7rem; margin:0 0 0.3rem; line-height:1.2; letter-spacing:-0.02em;
  background:linear-gradient(120deg, #0066cc, #5b3df5); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; font-weight:700;
}
.home-intro p { font-size:1rem; color:#475569; max-width:620px; margin:0.2rem auto; line-height:1.5; }
.home-intro p strong { color:#1a1a1a; }
/* We hide the empty paragraphs the editor leaves behind (both <p></p> and
   <p><br></p>), so as not to add useless vertical space in the hero. */
.home-intro p:empty { display:none; }
.home-intro p:last-child:has(br:only-child) { display:none; }
.home-intro br { display:none; }
.home-intro img { border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.08); max-height:160px; width:auto; }
/* Images side by side with the text: float left/right, text wrapping around. */
.home-intro .ql-align-left img { float:left; margin:0 1.5rem 1rem 0; max-width:45%; }
.home-intro .ql-align-right img { float:right; margin:0 0 1rem 1.5rem; max-width:45%; }
.home-intro::after { content:""; display:block; clear:both; }
/* Homepage cards: each one is a link to a dedicated page. */
.home-cards-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.2rem; margin:0 0 3rem; }
.cards-section { margin-top:3.5rem; }
.home-card { display:flex; flex-direction:column; text-decoration:none; color:var(--testo);
  background:var(--card-bg); border:1px solid var(--bordo); border-radius:12px; padding:1.4rem;
  transition:transform 0.15s, box-shadow 0.15s, background 0.15s; }
.home-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.08); background:var(--card-hover); }
.home-card-title { font-size:1.15rem; margin:0 0 0.6rem; padding-bottom:0.5rem; border-bottom:2px solid var(--link); display:inline-block; }
.home-card-excerpt { font-size:0.92rem; color:var(--secondario); margin:0 0 1rem; flex-grow:1; }
.home-card-link { color:var(--link); font-size:0.88rem; font-weight:500; margin-top:auto; }
.articles-heading { font-size:1.6rem; margin:0 0 0.3rem; font-weight:700; letter-spacing:-0.01em; }
.articles-section { position:relative; }
.articles-section::before {
  content:""; display:block; width:48px; height:4px; border-radius:2px;
  background:linear-gradient(90deg, #0066cc, #5b3df5); margin-bottom:1.2rem;
}
/* Language switcher in the article pages. */
.language-switcher { display:flex; gap:0.5rem; margin-bottom:1rem; font-size:0.85rem; }
.language-switcher a, .language-switcher span { padding:0.2rem 0.7rem; border-radius:20px; text-decoration:none; }
.language-switcher a { color:var(--link); border:1px solid var(--bordo); }
.language-switcher .lingua-attiva { background:var(--link); color:#fff; }
/* --- Responsive / mobile friendly --- */
@media (max-width: 640px) {
  body { font-size:16px; }
  header.site { padding:1rem; flex-direction:column; align-items:flex-start; gap:0.6rem; }
  header.site .site-nav { gap:1.2rem; }
  .main-content { padding:1.5rem 1rem 3rem; }
  article.post { padding:1.5rem 1rem; }
  article.post h1 { font-size:1.6rem; }
  /* Side-by-side images become full width, stacked. */
  .home-intro .ql-align-left img,
  .home-intro .ql-align-right img { float:none; max-width:100%; margin:1rem 0; display:block; }
  /* The hero adapts: less padding and a smaller title on mobile. */
  .home-intro { padding:2rem 1.2rem; border-radius:16px; }
  .home-intro h1, .home-intro h2 { font-size:1.7rem; }
  .home-intro p { font-size:1rem; }
  pre { font-size:0.8rem; padding:0.8rem 1rem; }
}
/* --- Tag labels under the homepage cards ---------------------------------
   They sit outside the card, because the card is itself a link and nesting
   one anchor inside another is invalid HTML. */
.card-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.5rem 0 0.2rem; padding:0 0.3rem; }
.card-tag {
  font-size:0.75rem; color:var(--secondario); text-decoration:none;
  border:1px solid var(--bordo); border-radius:999px; padding:0.1rem 0.6rem;
  background:var(--card-bg); line-height:1.6;
}
.card-tag:hover { color:var(--link); border-color:var(--link); }
/* --- Copy button on the code blocks --------------------------------------- */
.blocco-codice { position:relative; }
.blocco-codice pre { margin:0; }
.copia-codice {
  position:absolute; top:0.5rem; right:0.5rem;
  font-family:inherit; font-size:0.75rem; line-height:1.4;
  padding:0.2rem 0.6rem; border-radius:6px; cursor:pointer;
  color:var(--secondario); background:var(--card-bg);
  border:1px solid var(--bordo);
  opacity:0; transition:opacity 0.15s;
}
/* The button appears on hover on a mouse, and is always visible on a touch
   screen, where there is no hover to reveal it. */
.blocco-codice:hover .copia-codice,
.copia-codice:focus-visible { opacity:1; }
@media (hover: none) { .copia-codice { opacity:1; } }
.copia-codice:hover { color:var(--link); border-color:var(--link); }
.copia-codice.copiato { color:#0a6b2e; border-color:#0a6b2e; }
html[data-tema="dark"] .copia-codice.copiato { color:#4ade80; border-color:#4ade80; }
/* --- Reading progress bar ------------------------------------------------- */
.progresso-lettura {
  position:fixed; top:0; left:0; width:100%; height:3px;
  background:transparent; z-index:50; pointer-events:none;
}
.progresso-lettura-barra {
  height:100%; width:0;
  background:linear-gradient(90deg, #0066cc, #5b3df5);
}
html[data-tema="dark"] .progresso-lettura-barra {
  background:linear-gradient(90deg, #6ba9ff, #b39dff);
}
/* Someone who has asked for less motion gets the bar without the animation. */
@media (prefers-reduced-motion: reduce) {
  .progresso-lettura-barra { transition:none; }
}
/* --- 404 page ------------------------------------------------------------- */
.pagina-404 { max-width:var(--larghezza); margin:0 auto; text-align:center; padding:3rem 0 2rem; }
.errore-404-numero { font-size:3.5rem; margin:0; line-height:1;
  background:linear-gradient(120deg, #0066cc, #5b3df5); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
html[data-tema="dark"] .errore-404-numero {
  background:linear-gradient(120deg, #6ba9ff, #b39dff); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.errore-404-testo { font-size:1.15rem; color:var(--secondario); margin:0.6rem 0 2rem; }
.errore-404-ricerca { display:flex; gap:0.5rem; max-width:28rem; margin:0 auto 2.5rem; }
.errore-404-ricerca input {
  flex:1; padding:0.7rem 1rem; font-size:1rem; font-family:inherit;
  border:1px solid var(--bordo); border-radius:8px;
  background:var(--card-bg); color:var(--testo);
}
.errore-404-ricerca input:focus { border-color:var(--link); }
.errore-404-ricerca button {
  padding:0.7rem 1.2rem; font-size:0.95rem; font-family:inherit; cursor:pointer;
  border:none; border-radius:8px; background:var(--link); color:#fff;
}
.errore-404-ultimi { text-align:left; max-width:34rem; margin:0 auto 2rem; }
.errore-404-ultimi h2 { font-size:1.1rem; margin:0 0 0.8rem;
  padding-bottom:0.4rem; border-bottom:1px solid var(--bordo); }
.errore-404-ultimi ul { list-style:none; padding:0; margin:0; }
.errore-404-ultimi li { display:flex; justify-content:space-between; gap:1rem;
  align-items:baseline; margin:0.5rem 0; }
.errore-404-ultimi a { color:var(--testo); text-decoration:none; }
.errore-404-ultimi a:hover { color:var(--link); text-decoration:underline; }
.errore-404-data { color:var(--secondario); font-size:0.82rem; white-space:nowrap; }
.errore-404-ritorno a { color:var(--link); text-decoration:none; }
/* A label that only a screen reader needs. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (max-width: 640px) {
  .errore-404-ricerca { flex-direction:column; }
  .errore-404-ultimi li { flex-direction:column; gap:0.1rem; }
  .errore-404-numero { font-size:2.8rem; }
}
/* --- Pagination on a narrow screen ----------------------------------------
   Three items side by side leave no room for the labels on a phone: the
   counter moves to its own line and the two links share the row below,
   each big enough to be a comfortable tap target. */
@media (max-width: 560px) {
  .paginazione {
    display:grid; grid-template-columns:1fr 1fr; gap:0.6rem;
  }
  .paginazione .paginazione-info {
    grid-column:1 / -1; order:-1; text-align:center;
  }
  .paginazione a {
    display:block; text-align:center; padding:0.7rem 0.5rem;
  }
  .paginazione .paginazione-vuoto { display:none; }
}
/* --- Formats applied to a whole table in the editor -----------------------
   The toolbar can format a selected table as a unit: an embedded table has
   no text in the editor's model, so these formats become classes on the
   table itself. The rules mirror the ones in admin.css, so what the author
   sees while writing is what gets published. */
.article-table.pb-tbl-bold th,
.article-table.pb-tbl-bold td { font-weight:700; }
.article-table.pb-tbl-italic th,
.article-table.pb-tbl-italic td { font-style:italic; }
.article-table.pb-tbl-underline th,
.article-table.pb-tbl-underline td { text-decoration:underline; }
.article-table.pb-tbl-strike th,
.article-table.pb-tbl-strike td { text-decoration:line-through; }
.article-table.pb-tbl-underline.pb-tbl-strike th,
.article-table.pb-tbl-underline.pb-tbl-strike td { text-decoration:underline line-through; }
.article-table.pb-tbl-sfondo th,
.article-table.pb-tbl-sfondo td { background:transparent; }
/* An aligned table shrinks to its content: a table at width:100% has no room
   to move, so centring it would look like nothing happened. */
.raw-html-block.ql-align-center .article-table,
.raw-html-block.ql-align-right .article-table { width:auto; max-width:100%; }
.raw-html-block.ql-align-center .article-table { margin-left:auto; margin-right:auto; }
.raw-html-block.ql-align-right .article-table { margin-left:auto; margin-right:0; }
.raw-html-block.ql-align-justify .article-table { width:100%; }
/* --- The most recent article, highlighted ---------------------------------
   It sits below the search box on purpose: hiding it while a search is
   running must not make the box jump. The block is removed from the list
   below rather than repeated in it. */
.in-evidenza { margin:0 0 1.6rem; }
.in-evidenza[hidden] { display:none; }
.in-evidenza-etichetta {
  font-size:0.72rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--link); margin:0 0 0.5rem; padding-left:0.9rem;
  border-left:3px solid var(--link);
}
.in-evidenza-card {
  display:flex; gap:1.5rem; align-items:flex-start; text-decoration:none;
  color:var(--testo); background:var(--card-bg);
  border:1px solid var(--hero-bordo); border-radius:16px;
  padding:1.6rem 1.8rem;
  background-image:linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%);
  transition:transform 0.15s, box-shadow 0.15s;
}
.in-evidenza-card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,0.10); }
/* The cover is a thumbnail, not a column: a square that identifies the
   article and leaves the text the width it needs. It treats a tall photo and
   a wide one the same way.

   Its size is written as a clamp, and both ends of that clamp matter:

     - the width is DECLARED, not left to a flex-basis. A flex item's
       automatic minimum size (min-width:auto) falls back to the size of its
       CONTENT when no width is specified, and for an image that is its
       intrinsic width. With flex:0 0 20% and nothing else, an 800px cover
       claimed 800px, refused to shrink, and pushed the text out of the block
       entirely. min-width:0 removes that automatic minimum outright, so an
       upload of any size behaves the same.
     - the 150px ceiling is a width, not a max-width, because the global
       "img { max-width:100% !important }" rule further down would override a
       max-width here and leave the thumbnail with no cap at all.

   The clamp also does the responsive work by itself: 150px on a desktop
   block, proportional in between, never below 72px on the narrowest phone.
   That is why the media queries below carry no rule for it. */
.in-evidenza-copertina {
  flex:0 0 auto;
  width:clamp(72px, 20%, 150px);
  aspect-ratio:1 / 1; height:auto;
  min-width:0;
  object-fit:cover;
  border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,0.10);
}
.in-evidenza-testo { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.in-evidenza-titolo {
  font-size:1.55rem; line-height:1.25; margin:0 0 0.4rem; letter-spacing:-0.01em;
}
.in-evidenza-meta { color:var(--secondario); font-size:0.85rem; margin:0 0 0.8rem; }
.in-evidenza-estratto {
  font-size:1rem; line-height:1.6; margin:0 0 1rem; color:var(--testo);
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.in-evidenza .card-read-more { margin-top:auto; font-size:0.92rem; }
.in-evidenza .card-tags { margin-top:0.6rem; }
/* In dark mode the hero gradient is dark, so the text has to come back to the
   body colour or it would sit at the muted grey on a dark panel. */
html[data-tema="dark"] .in-evidenza-card { border-color:var(--hero-bordo); }
html[data-tema="dark"] .in-evidenza-estratto,
html[data-tema="dark"] .in-evidenza-titolo { color:var(--testo); }
@media (max-width: 720px) {
  /* The row survives on a phone: a small square beside the text reads like a
     list item, and stacking it full width would undo the point of shrinking
     it. The thumbnail needs no rule here - its clamp already scales it. */
  .in-evidenza-card { gap:1rem; padding:1.2rem; }
  .in-evidenza-titolo { font-size:1.25rem; }
  .in-evidenza-estratto { -webkit-line-clamp:4; }
}
@media (max-width: 420px) {
  .in-evidenza-card { gap:0.8rem; padding:1rem; }
}
/* --- The cover inside the article ------------------------------------------
   Under the title and the date, never above them: a cover is usually
   decorative, and putting it first would push the opening line of the article
   off the first screen on a phone. The height cap is there for the same
   reason. Since the cap crops the picture, clicking it opens the whole
   thing. */
.articolo-copertina { margin:0 0 2rem; }
.articolo-copertina img {
  width:100%; max-height:340px; object-fit:cover;
  border-radius:12px; display:block;
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
  cursor:zoom-in;
}
.articolo-copertina img:hover { box-shadow:0 6px 24px rgba(0,0,0,0.16); }
@media (max-width: 640px) {
  .articolo-copertina img { max-height:220px; }
  .articolo-copertina { margin-bottom:1.4rem; }
}
/* --- The enlarged picture --------------------------------------------------
   A div, an image and two ways out. No library: this is the whole feature. */
.zoom-immagine {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.88);
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1rem; cursor:zoom-out;
}
/* The picture closes on a click too, so it shows the same cursor as the
   backdrop: a "default" cursor on the one thing filling the screen said the
   opposite of what happens. */
.zoom-immagine img {
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:6px; cursor:zoom-out;
  box-shadow:0 10px 50px rgba(0,0,0,0.5);
}
/* 2.75rem is 44px, the smallest target a finger hits reliably. The button is
   a shortcut, not the way out: a tap anywhere does that. */
.zoom-chiudi {
  position:absolute; top:1rem; right:1rem;
  width:2.75rem; height:2.75rem; line-height:1;
  font-size:1.8rem; font-family:inherit;
  color:#fff; background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.3); border-radius:50%;
  cursor:pointer; z-index:1;
}
.zoom-chiudi:hover { background:rgba(255,255,255,0.24); }
@media (max-width: 640px) {
  /* Less padding gives the picture the room a small screen does not have,
     and the button steps in from the edge so it clears a rounded corner or
     a notch. */
  .zoom-immagine { padding:0.75rem 0.5rem; }
  .zoom-chiudi { top:0.75rem; right:0.75rem; }
}
/* The page behind must not scroll while the picture is open. */
body.zoom-aperto { overflow:hidden; }
/* Someone who has asked for less motion gets no hover lift on the cover. */
@media (prefers-reduced-motion: reduce) {
  .articolo-copertina img { transition:none; }
}