@keyframes dc-blink{0%,100%{opacity:1}50%{opacity:.55}}
#breaking-bar .breaking-link{display:inline-block;max-width:calc(100% - 110px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
@media (max-width:480px){
  #breaking-bar{font-size:12px;padding:6px 36px 6px 10px;}
  #breaking-bar .breaking-badge{font-size:11px;letter-spacing:.08em;margin-right:6px;}
  #breaking-bar .breaking-link{max-width:calc(100% - 90px);}
}
@media (prefers-reduced-motion:reduce){
  #breaking-bar .breaking-badge{animation:none;opacity:1;}
}
/* Mode lectura: amaga capçalera, barres, asides, related — només l'article */
body.dc-reading-mode .top-bar,
body.dc-reading-mode .masthead,
body.dc-reading-mode #breaking-bar,
body.dc-reading-mode nav,
body.dc-reading-mode .newsletter-box,
body.dc-reading-mode footer,
body.dc-reading-mode .related-section,
body.dc-reading-mode #my-town-host,
body.dc-reading-mode #weekly-poll-host,
body.dc-reading-mode .dc-tts-bar,
body.dc-reading-mode #progress-bar { display: none !important; }
body.dc-reading-mode #article-view { padding-top: 56px; }
body.dc-reading-mode .article-full-wrap { max-width: 640px !important; margin: 0 auto; }
body.dc-reading-mode { background: #faf8f4; }
/* Botó d'eixida del mode lectura — sempre visible i accessible (BLOCKER #3) */
#exit-reading-btn { display: none; }
body.dc-reading-mode #exit-reading-btn {
  display: inline-flex; align-items: center; gap: 6px; position: fixed; top: 12px; right: 12px;
  z-index: 300; background: var(--ink); color:var(--cream); border: none; border-radius: 20px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
/* Botons de seguiment i mode lectura: focus visible per a teclat (#11) */
.article-full-meta button:focus-visible,
#breaking-bar button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Meta de l'article: en mòbil estret, apila en columna (#4) */
@media (max-width: 480px) {
  .article-full-meta { gap: 8px; }
  .article-full-meta .meta-read-btn { font-size: 12px; }
}
/* Widgets de portada: hereten l'amplada i padding de .page-wrap (home-main),
   així queden alineats amb la resta de la portada. */
#my-town-host, #weekly-poll-host { width: 100%; }
@media (max-width: 480px) {
  #my-town-host select, #weekly-poll-host { font-size: 13px; }
}
/* ── EFECTES DE LECTURA (Lista 2) ──────────────────────── */
/* #1 Número gegant destacat dins del cos */
.dc-bignum { display:block; font-family:var(--serif); font-size:clamp(40px,8vw,72px); font-weight:900; line-height:1; color:var(--red); margin:18px 0 6px; letter-spacing:-.02em; }
.dc-bignum + .dc-bignum-label { display:block; font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:18px; }
/* #2 Realç de dades clau — efecte RETOLADOR (marker pen), no subratllat sec.
   Pinta només la franja inferior del text com un retolador real: és el patró
   que usen els mitjans més cuidats (Stripe Press, The Pudding). Elegant, càlid
   i editorial. Reset del <mark> per a matar el groc per defecte del navegador. */
.dc-hl {
  background-color: transparent;
  background-image: linear-gradient(
    transparent 0,
    transparent 55%,
    rgba(184,38,43,.22) 55%,
    rgba(184,38,43,.22) 92%,
    transparent 92%
  );
  color: inherit;
  font-weight: 600;
  padding: 0 1px;
  border-radius: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-image .2s;
}
.dc-hl:hover {
  background-image: linear-gradient(
    transparent 0,
    transparent 50%,
    rgba(184,38,43,.30) 50%,
    rgba(184,38,43,.30) 94%,
    transparent 94%
  );
}
html.dc-dark .dc-hl {
  background-image: linear-gradient(
    transparent 0, transparent 55%,
    rgba(224,82,79,.30) 55%, rgba(224,82,79,.30) 92%, transparent 92%);
}

/* Enllaços d'entitat automàtics (municipis i temes) — SEO + navegació interna.
   Estil d'enllaç editorial: color marca amb subratllat fi que s'engruixeix al
   passar el rató. Subratlla MÉS coses que abans (pobles, temes), no només
   xifres, i en un color/forma més refinada que el subratllat anterior. */
.dc-entity {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(184,38,43,.38);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  border-radius: 2px;
  transition: text-decoration-color .15s, background .15s;
}
.dc-entity:hover {
  text-decoration-color: var(--red);
  background: rgba(184,38,43,.07);
}
html.dc-dark .dc-entity { color: var(--red); }
/* ── Botons d'eines de la top-bar (Agenda, Mapa viu, etc.) ─────────
   Classe pròpia perquè NO heretin l'opacitat .4 de .lang-btn. */
.dc-tool-btn {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  opacity: 1;
  transition: color .15s, opacity .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dc-tool-btn:hover { color: var(--red); }
html.dc-dark .dc-tool-btn { color: var(--ink); }
/* Caixa "Les 3 claus" — resum citable per a buscadors d'IA + lectura ràpida */
.dc-claus { background: var(--light, #f0ece1); border-left: 4px solid var(--red); border-radius: 0 6px 6px 0; padding: 16px 20px; margin: 4px 0 24px; }
.dc-claus-h { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.dc-claus ul { margin: 0; padding-left: 18px; }
.dc-claus li { font-family: var(--body); font-size: 15px; line-height: 1.5; color: var(--ink); margin-bottom: 6px; }
.dc-claus li::marker { color: var(--red); }
/* Icones de les eines: SVG monocromàtic, lineal, coherent amb la identitat
   editorial. NO emojis nacarats, NO multicolor. Stroke gruix 1.6 línia neta. */
.dc-ic {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.dc-tool-btn:hover .dc-ic { stroke: var(--red); }
@media (prefers-reduced-motion: no-preference){
  .dc-ic { transition: stroke .15s; }
}
/* #4 Pull-quotes animades */
.dc-pullquote { font-family:var(--serif); font-style:italic; font-size:clamp(20px,3.2vw,28px); line-height:1.3; font-weight:700; color:var(--ink); border-left:4px solid var(--red); padding:6px 0 6px 20px; margin:26px 0; opacity:0; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease; }
.dc-pullquote.dc-in { opacity:1; transform:none; }
/* #6 Indicador de progrés circular */
#dc-progress-ring { position:fixed; bottom:18px; right:18px; width:46px; height:46px; z-index:120; display:none; pointer-events:none; }
#dc-progress-ring svg { transform:rotate(-90deg); }
#dc-progress-ring .ring-bg { stroke:rgba(26,26,26,.12); }
#dc-progress-ring .ring-fg { stroke:var(--red); stroke-linecap:round; transition:stroke-dashoffset .15s linear; }
body.article-open #dc-progress-ring { display:block; }
@media (prefers-reduced-motion:reduce){ .dc-pullquote{ transition:none; opacity:1; transform:none; } }
/* #9 Efecte tinta als titulars d'article */
.article-full-title { text-shadow:0 1px 0 rgba(26,26,26,.04); }
/* #7 comptador de lectors */
.dc-reader-count { display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:11px; color:var(--grey); }
.dc-reader-count .dot { width:6px; height:6px; border-radius:50%; background:#16a34a; animation:dc-pulse 2s infinite; }
@keyframes dc-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* #10 Saludo personalitzat */
#dc-greeting { display:none; background:var(--cream,#f5f3ef); border-bottom:1px solid var(--div); font-family:var(--serif); font-size:14px; padding:8px 16px; text-align:center; color:var(--ink); }
#dc-greeting strong { font-style:italic; }
/* #8 Mode només titulars (overlay) */
#dc-headlines-overlay { display:none; position:fixed; inset:0; background:var(--cream,#f5f3ef); z-index:900; overflow-y:auto; padding:24px 18px 60px; }
#dc-headlines-overlay.open { display:block; }
#dc-headlines-overlay h2 { font-family:var(--serif); font-size:26px; font-weight:900; margin:0 0 4px; max-width:680px; margin-left:auto; margin-right:auto; }
#dc-headlines-overlay .dc-hl-list { max-width:680px; margin:18px auto 0; }
#dc-headlines-overlay a { display:block; font-family:var(--serif); font-size:17px; line-height:1.35; font-weight:600; color:var(--ink); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--div); }
#dc-headlines-overlay a .hl-cat { font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); font-weight:700; display:block; margin-bottom:3px; }
#dc-headlines-close { position:fixed; top:14px; right:16px; background:var(--ink); color:var(--cream); border:none; border-radius:20px; font-family:var(--sans); font-size:13px; font-weight:600; padding:8px 16px; cursor:pointer; z-index:901; }
/* #10 View Transitions — fade suau tipus app nativa */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: dc-vt-out .22s ease both; }
  ::view-transition-new(root) { animation: dc-vt-in .28s ease both; }
}
@keyframes dc-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes dc-vt-in { from { opacity: 0; transform: translateY(8px); } }