/* =========================================================
   Cives — foglio di stile unico
   Colori e font ripresi dai post Instagram di @cives_.
   Per cambiare un colore in tutto il sito, modifica le variabili qui sotto.
   ========================================================= */

:root {
  --orange: #FF5222;
  --orange-dark: #E0410F;
  --cream: #F6EEE3;
  --paper: #F3F0E9;
  --ink: #0B0B0B;
  --ink-soft: #3A3A3A;
  --dark: #141414;
  --dark-2: #232323;
  --yellow: #F8E869;
  --blue: #4A63D6;
  --line: #D9D4C7;

  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.035em; font-weight: 800; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(720px + 2 * var(--gutter)); }
.wrap--wide { max-width: calc(1000px + 2 * var(--gutter)); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); padding: 8px 14px; z-index: 100; font-weight: 700; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- Segni grafici ricorrenti ---------- */

/* Evidenziatore giallo dietro i titoli, come nei caroselli */
.hl {
  background: var(--yellow);
  color: var(--ink);
  padding: .02em .18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl--dark { background: var(--ink); color: var(--yellow); }

/* Etichetta di categoria in maiuscolo sopra i titoli */
.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

.meta { font-size: .85rem; color: var(--ink-soft); margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  padding: .8em 1.4em;
  border-radius: 999px;
  border: 2px solid var(--orange);
  background: var(--orange); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-1px); }
.btn--small { padding: .5em 1.05em; font-size: .9rem; }
.btn--ghost { background: transparent; border-color: var(--cream); color: var(--cream); }
.btn--ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn--ghost-dark { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost-dark:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--dark { background: var(--ink); border-color: var(--ink); }
.btn--dark:hover { background: var(--dark-2); border-color: var(--dark-2); }

.link-arrow { font-weight: 700; text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--dark);
  color: var(--cream);
  border-bottom: 1px solid #000;
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand__name { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.05em; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; }
.site-nav a:not(.btn) { text-decoration: none; font-weight: 600; font-size: .95rem; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; }

.menu-toggle { display: none; background: none; border: 0; color: inherit; width: 44px; height: 44px; cursor: pointer; position: relative; }
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after {
  position: absolute; left: 10px; width: 24px; height: 2.5px; background: currentColor; border-radius: 2px; content: ""; transition: transform .2s;
}
.menu-toggle__bar { top: 21px; }
.menu-toggle__bar::before { left: 0; top: -7px; }
.menu-toggle__bar::after { left: 0; top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .menu-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--dark); border-bottom: 1px solid #000; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .site-nav li { width: 100%; }
  .site-nav a:not(.btn) { display: block; padding: .8rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--dark-2); }
  .site-nav .btn { margin-top: 1rem; }
}

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  background: var(--dark);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .35; z-index: -1; }
.hero::after {
  content: ""; position: absolute; z-index: -1;
  width: 520px; height: 520px; right: -140px; top: -120px;
  border-radius: 50%; background: var(--orange); opacity: .95;
}
.hero__inner { padding-block: clamp(64px, 11vw, 140px); }
.hero__title { font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: 1.2; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
.hero__title .hl { padding: 0 .12em; }
.hero__lead { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 36ch; color: #E9E2D6; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (max-width: 760px) {
  .hero::after { width: 300px; height: 300px; right: -120px; top: -90px; }
}

/* ---------- Sezioni ---------- */

.section { padding-block: clamp(48px, 7vw, 88px); }
.section--dark { background: var(--dark); color: var(--cream); position: relative; isolation: isolate; }
.section--dark::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .3; z-index: -1; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 2rem; }
.section-title { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 0; }

.page-head { background: var(--dark); color: var(--cream); padding-block: clamp(48px, 8vw, 96px); position: relative; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .3; z-index: -1; }
.page-head--center { text-align: center; }
.page-title { font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.12; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 46ch; color: #E9E2D6; margin-top: 1rem; }
.page-head--center .lead { margin-inline: auto; }

.empty { padding: 2rem; border: 2px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--ink-soft); }

/* ---------- Card articoli ---------- */

.grid { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.featured { margin-bottom: clamp(20px, 3vw, 32px); }
.featured:empty { display: none; }

.card { background: var(--dark); color: var(--cream); border-radius: var(--radius); overflow: hidden; }
.card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; position: relative; }
.card__media { aspect-ratio: 16 / 10; background: var(--dark-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; filter: saturate(.9); }
.card__link:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 1.2rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card__title { font-size: 1.3rem; line-height: 1.22; margin: 0 0 .35rem; }
.card__excerpt { font-size: .95rem; color: #DDD5C8; margin: 0 0 .5rem; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { color: #B9B1A4; }

/* Card in evidenza: stile "slide" con il testo sopra la foto sfumata */
.card--big .card__link { display: block; min-height: clamp(380px, 52vw, 560px); }
.card--big .card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.card--big .card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,.05) 20%, rgba(11,11,11,.92) 85%); }
.card--big .card__media::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .25; z-index: 1; }
.card--big .card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.25rem, 4vw, 2.75rem); max-width: 820px; }
.card--big .card__title { font-size: clamp(1.6rem, 4vw, 2.7rem); }
.card--big .card__excerpt { font-size: clamp(1rem, 1.6vw, 1.15rem); color: #EDE6DA; }

/* ---------- Filtri categorie e paginazione ---------- */

.chips ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 2rem; }
.chips a {
  display: inline-block; padding: .45em 1em; border-radius: 999px;
  border: 2px solid var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.chips a:hover { background: var(--yellow); }
.chips a[aria-current] { background: var(--ink); color: var(--yellow); }

.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 3rem 0 0; justify-content: center; }
.pagination a, .pagination span { display: inline-block; min-width: 2.6em; padding: .5em .8em; text-align: center; border-radius: 999px; font-weight: 600; text-decoration: none; }
.pagination a:hover { background: var(--yellow); }
.pagination span[aria-current] { background: var(--ink); color: var(--paper); }

/* ---------- Pagina articolo ---------- */

.article__head { background: var(--dark); color: var(--cream); padding: clamp(48px, 8vw, 96px) 0 clamp(120px, 16vw, 200px); position: relative; isolation: isolate; }
.article__head::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .3; z-index: -1; }
.article__title { font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.14; margin-bottom: 1rem; }
.article__subtitle { font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.5; color: #E9E2D6; }
.article__head .meta { color: #C9C1B4; margin-top: 1.5rem; }
.article__head .meta strong { color: var(--cream); }
.article__cover { margin: clamp(-170px, -14vw, -100px) 0 0; position: relative; z-index: 1; }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.article__cover figcaption { font-size: .8rem; color: var(--ink-soft); margin-top: .5rem; text-align: right; }
.article__video { margin-top: 2.5rem; }
.article > .wrap--narrow { padding-top: clamp(32px, 5vw, 56px); }

/* Testo lungo: ottimizzato per la lettura */
.prose { font-size: 1.125rem; line-height: 1.75; }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-top: 2em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.8em; }
.prose a { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { background: var(--yellow); }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--orange); font-weight: 700; }
.prose blockquote:not(.instagram-media) {
  margin: 2em 0; padding: .2em 0 .2em 1.2em;
  border-left: 5px solid var(--orange);
  font-size: 1.3rem; line-height: 1.5; font-weight: 600; letter-spacing: -0.02em;
}
.prose img { border-radius: 10px; margin-inline: auto; }
.prose hr { border: 0; height: 2px; background: var(--ink); margin: 2.5em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .6em .5em; text-align: left; }
.prose th { font-weight: 700; }
.prose code { overflow-wrap: anywhere; font-size: .9em; background: #E7E2D7; padding: .1em .35em; border-radius: 4px; }

.embed { margin: 2em 0; }
.embed--ig { display: flex; justify-content: center; }
.embed--ig .instagram-media { margin: 0 auto !important; max-width: 540px; width: 100%; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 3rem 0 0; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.share .eyebrow { margin: 0 .25rem 0 0; }
.share a, .share button { font: inherit; font-weight: 600; font-size: .9rem; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; color: var(--ink); }

.related { margin-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(48px, 7vw, 88px); }
.related .section-title { margin-bottom: 1.5rem; }

/* ---------- Video YouTube (caricato al clic) ---------- */

.yt { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.yt__link, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__link img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.yt__link:hover img { opacity: 1; }
.yt__play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%);
  background: var(--orange); border-radius: 50%; box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.yt__play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.videos { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.video__title { font-weight: 600; margin-top: .75rem; line-height: 1.35; }

/* ---------- Blocchi pagine fisse ---------- */

.pillars { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pillar h3 { font-size: 1.5rem; }
.pillar p { color: var(--ink-soft); }

.cta-band { background: var(--orange); color: #fff; position: relative; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .2; z-index: -1; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding-block: clamp(40px, 6vw, 72px); }
.cta-band h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: 0; max-width: 24ch; }

.roles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-bottom: 2.5rem; }
.role { background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.2rem 1.25rem; box-shadow: 5px 5px 0 var(--ink); }
.role h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.role p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.contact-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.contact-card { display: block; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.4rem; text-decoration: none; box-shadow: 5px 5px 0 var(--ink); transition: transform .15s, box-shadow .15s; overflow-wrap: anywhere; }
.contact-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--orange); }
.contact-card strong { font-size: 1.2rem; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--cream); padding-top: clamp(48px, 6vw, 72px); }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr; }
.site-footer__tagline { margin-top: 1rem; color: #CFC7BA; max-width: 30ch; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: .4rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.site-footer .eyebrow { color: var(--yellow); }
.site-footer__bottom { border-top: 1px solid var(--dark-2); margin-top: 3rem; padding-block: 1.5rem; font-size: .85rem; color: #A39B8F; }
.site-footer__bottom p { margin: 0; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__grid > :first-child { grid-column: 1 / -1; } }

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

/* ---------- Contributori ---------- */

.people { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.person { display: flex; gap: 1.25rem; align-items: flex-start; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.4rem; box-shadow: 5px 5px 0 var(--ink); scroll-margin-top: 90px; }
.person:target { box-shadow: 7px 7px 0 var(--orange); }
.person__photo { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); background: var(--orange); }
.person__photo--empty { display: grid; place-items: center; color: var(--cream); font-weight: 800; font-size: 2.2rem; }
.person__body { min-width: 0; }
.person__name { font-size: 1.35rem; margin: 0 0 .25rem; }
.person__bio { font-size: .95rem; color: var(--ink-soft); margin: .5rem 0 .75rem; }
.person__link { font-weight: 700; font-size: .9rem; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.person__articles { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.person__articles ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.person__articles li + li { margin-top: .35rem; }
.person__articles a { text-decoration: none; font-weight: 600; }
.person__articles a:hover { text-decoration: underline; }
.article__head .meta a { color: inherit; text-decoration-color: var(--orange); text-underline-offset: 3px; }
@media (max-width: 420px) { .person { flex-direction: column; } }

/* ---------- Contenuti esterni con consenso (YouTube, Instagram) ---------- */

.yt-wrap { margin: 0; }
.yt__placeholder { position: absolute; inset: 0; background: var(--dark-2) var(--grain); }
.consent-note { font-size: .78rem; color: var(--ink-soft); margin-top: .5rem; }
.section--dark .consent-note { color: #B9B1A4; }
.consent-note a { color: inherit; }

.ig-consent {
  width: 100%; max-width: 540px; margin-inline: auto;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: 5px 5px 0 var(--ink);
}
.ig-consent p { font-size: .95rem; margin: 0 0 .75rem; }
.ig-consent .eyebrow { margin-bottom: .5rem; }
.ig-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 0 !important; }
.ig-consent__actions a { font-weight: 600; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Il pulsante serve solo con JavaScript attivo; senza JS resta il link a Instagram */
.ig-consent [data-ig-load] { display: none; }
.js .ig-consent [data-ig-load] { display: inline-flex; }
.ig-frame { display: block; width: 100%; max-width: 540px; height: 760px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

/* ---------- Grafici negli articoli (scripts/charts.js) ---------- */

.chart { margin: 2.2em 0; padding: 1.4rem 1.4rem 1.2rem; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); }
.chart__title { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: .2rem; }
.chart__unit { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1rem !important; }
.chart__rows { display: grid; gap: .55rem; }
.chart__row { display: grid; grid-template-columns: minmax(5.5rem, 28%) 1fr auto; align-items: center; gap: .75rem; font-size: .95rem; line-height: 1.3; }
.chart__label { overflow-wrap: anywhere; }
.chart__value { font-weight: 700; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.chart__track { position: relative; height: 1.1rem; }
.chart__mark { position: absolute; }
.chart__row.is-hl .chart__label, .chart__row.is-hl .chart__value { color: var(--orange-dark); font-weight: 800; }

/* Barre orizzontali */
.chart--barre .chart__track { background: var(--paper); border-radius: 4px; }
.chart--barre .chart__mark { inset: 0 auto 0 0; width: var(--v); background: var(--ink); border-radius: 4px; }
.chart--barre .is-hl .chart__mark { background: var(--orange); }

/* Punti su una linea (come nei caroselli Instagram) */
.chart--punti .chart__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line); }
.chart--punti .chart__mark { top: 50%; left: var(--v); width: .95rem; height: .95rem; margin: -.475rem 0 0 -.475rem; border-radius: 50%; background: var(--ink); }
.chart--punti .is-hl .chart__mark { background: var(--orange); }

@media (max-width: 480px) {
  .chart { padding: 1.1rem; }
  .chart__row { grid-template-columns: 1fr auto; }
  .chart__track { grid-column: 1 / -1; grid-row: 2; }
}