/**
 * Claira — livello editoriale
 * ===========================
 * Claira non e' un prodotto software con un blog attaccato: e' una redazione
 * senza redattori. Ogni lunedi' alle 9 un sistema legge decine di fonti, ne
 * sceglie cinque e scrive un pezzo citandole. Questo foglio porta il sito sul
 * registro che quel meccanismo merita — il dispaccio d'agenzia — al posto
 * dell'estetica "prodotto AI" fatta di bagliori e punteggi inventati.
 *
 * Sta in un file a parte, caricato per ultimo, per non dover riscrivere i tredici
 * fogli esistenti: qui si sovrascrive solo cio' che cambia davvero.
 */

/* ---------------------------------------------------------------------------
   1. Tipografia
   Serif per i titoli: e' una testata, non una dashboard. Il monospace resta ma
   cambia mestiere — non piu' decorazione "tech", ma marca d'edizione e dati.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: local('Source Serif 4'), url('fonts/source-serif.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Fondo d'inchiostro, non nero puro: il nero assoluto e' da terminale,
       questo e' blu notte e ha una temperatura. */
    --ed-ink: #0A0F1A;
    --ed-surface: #111A2B;
    --ed-rule: #22304A;
    --ed-text: #E7ECF4;
    --ed-text-dim: #93A2BA;
    /* Il blu del marchio, desaturato: deve leggersi come inchiostro, non come neon. */
    --ed-blue: #3C82D6;
    /* Ambra: unico colore caldo, riservato alla marca d'edizione e alle fonti.
       E' il segnale che distingue Claira dal blu-su-nero di ogni altro sito AI. */
    --ed-signal: #E0A340;

    --ed-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --ed-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------------------------------------------------------------------------
   2. Marca d'edizione — l'elemento che il sito si porta addosso
   Una riga sola: numero progressivo, giorno, ora, fonti lette. Sono tutti dati
   veri e verificabili, al contrario dei "98.7% AI Confidence" che stavano qui
   prima identici su ogni articolo.
   --------------------------------------------------------------------------- */
.ed-dispatch {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1.25rem;
    font-family: var(--ed-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-text-dim);
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--ed-rule);
    margin-bottom: 1.75rem;
}

.ed-dispatch__n {
    color: var(--ed-signal);
    font-weight: 600;
}

/* Il pallino segnala l'edizione piu' recente: unico elemento che si muove in
   tutta la pagina, e solo perche' "in diretta" e' un'informazione. */
.ed-dispatch__live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ed-signal);
}

.ed-dispatch__live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ed-signal);
    animation: ed-pulse 2.6s ease-in-out infinite;
}

@keyframes ed-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .ed-dispatch__live::before { animation: none; }
}

/* ---------------------------------------------------------------------------
   3. Apertura: l'edizione corrente al posto dello slogan
   La home si apriva con "Claira AI Blog |" e una foto stock di una donna col
   headset — l'immagine piu' intercambiabile possibile, e l'unica cosa che con
   una redazione automatica non c'entra niente. Al suo posto: il pezzo della
   settimana, che e' la cosa piu' caratteristica che Claira abbia.
   --------------------------------------------------------------------------- */
/* Gabbia. Il .container del tema non impone margini laterali propri, e senza
   questi il testo finiva a filo del bordo dello schermo. La misura massima tiene
   la riga di lettura entro una lunghezza sensata anche sui monitor larghi. */
.ed-lead > .container,
.ed-archive,
.ed-shell {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.ed-lead {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--ed-rule);
}

.ed-lead__title {
    font-family: var(--ed-serif);
    font-weight: 700;
    font-size: clamp(2.1rem, 5.4vw, 4.1rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--ed-text);
    margin: 0 0 1.25rem;
    max-width: 20ch;
    text-wrap: balance;
}

.ed-lead__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--ed-signal), var(--ed-signal));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.35s ease;
}

.ed-lead__title a:hover,
.ed-lead__title a:focus-visible {
    background-size: 100% 2px;
}

.ed-lead__standfirst {
    font-family: var(--ed-serif);
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    line-height: 1.55;
    color: var(--ed-text-dim);
    max-width: 58ch;
    margin: 0 0 1.75rem;
    /* Tre righe bastano ad aprire il pezzo: l'estratto completo scorreva per
       otto righe e rubava lo spazio al titolo, che e' l'aggancio vero. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ed-lead__meta {
    font-family: var(--ed-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--ed-text-dim);
}

.ed-lead__meta strong {
    color: var(--ed-text);
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   4. Archivio come registro
   Le card erano tutte identiche: stesso badge, stessi tre tag ("AI",
   "AI Generated", "Automated Content") su ogni pezzo, stesso bottone. Tag uguali
   ovunque non informano, e un elenco di rettangoli uguali non ha gerarchia.
   Qui diventano righe di registro: la data ancora la lettura a sinistra, il
   titolo porta il peso, una riga di sommario basta a decidere se aprire.
   --------------------------------------------------------------------------- */
.ed-archive {
    border-top: 1px solid var(--ed-rule);
}

.ed-entry {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0 2.5rem;
    padding: 1.9rem 0;
    border-bottom: 1px solid var(--ed-rule);
    transition: background-color 0.2s ease;
}

.ed-entry:hover {
    background-color: rgba(60, 130, 214, 0.045);
}

.ed-entry__date {
    font-family: var(--ed-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-text-dim);
    padding-top: 0.45rem;
    white-space: nowrap;
}

.ed-entry__n {
    display: block;
    color: var(--ed-rule);
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.3rem;
    transition: color 0.2s ease;
}

.ed-entry:hover .ed-entry__n {
    color: var(--ed-signal);
}

.ed-entry__title {
    font-family: var(--ed-serif);
    font-weight: 600;
    font-size: clamp(1.25rem, 2.3vw, 1.65rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
    text-wrap: balance;
}

.ed-entry__title a {
    color: var(--ed-text);
    text-decoration: none;
}

.ed-entry__title a:hover,
.ed-entry__title a:focus-visible {
    color: var(--ed-blue);
}

.ed-entry__summary {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ed-text-dim);
    margin: 0;
    max-width: 68ch;
    /* Due righe: quanto basta per decidere se aprire. Prima l'estratto occupava
       cinque righe fitte e le voci si somigliavano tutte. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 720px) {
    .ed-entry {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }
    .ed-entry__date {
        padding-top: 0;
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
    }
    .ed-entry__n {
        display: inline;
        font-size: 0.95rem;
        margin: 0;
    }
}

/* ---------------------------------------------------------------------------
   5. Lettura
   Il corpo del testo occupava tutta la larghezza della colonna: righe da oltre
   cento caratteri, faticose. Qui si torna a una misura da lettura.
   --------------------------------------------------------------------------- */
.ed-read {
    max-width: 68ch;
}

.ed-read p {
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--ed-text);
    margin: 0 0 1.4rem;
}

.ed-read h2 {
    font-family: var(--ed-serif);
    font-weight: 600;
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ed-text);
    margin: 3rem 0 1rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--ed-rule);
}

.ed-read h3 {
    font-family: var(--ed-serif);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--ed-text);
    margin: 2.2rem 0 0.7rem;
}

.ed-read strong { color: #FFF; font-weight: 600; }

.ed-read a {
    color: var(--ed-blue);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

.ed-read a:hover { color: var(--ed-signal); }

.ed-read ul, .ed-read ol {
    margin: 0 0 1.4rem 1.1rem;
    color: var(--ed-text);
    line-height: 1.7;
}

.ed-read li { margin-bottom: 0.5rem; }

.ed-read blockquote {
    margin: 2rem 0;
    padding: 0.2rem 0 0.2rem 1.5rem;
    border-left: 2px solid var(--ed-signal);
    font-family: var(--ed-serif);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ed-text);
}

.ed-read table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.94rem;
}

.ed-read th, .ed-read td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--ed-rule);
}

.ed-read th {
    font-family: var(--ed-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-text-dim);
    border-bottom-color: var(--ed-blue);
}

/* Le fonti chiudono il pezzo: sono la ragione per cui un'analisi scritta da una
   macchina si puo' verificare, quindi hanno un trattamento visivo dedicato e non
   sono l'ennesimo elenco puntato in coda. */
.ed-read h2#fonti,
.ed-read h2[id^="fonti"] {
    border-top-color: var(--ed-signal);
}

/* ---------------------------------------------------------------------------
   6. Titolo dell'articolo
   Stava dentro un riquadro blu pieno che competeva col testo. Un titolo non ha
   bisogno di un contenitore per farsi notare: basta la scala.
   --------------------------------------------------------------------------- */
.ed-headline {
    font-family: var(--ed-serif);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--ed-text);
    margin: 0 0 1.5rem;
    max-width: 22ch;
    text-wrap: balance;
}

.ed-standfirst {
    font-family: var(--ed-serif);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.55;
    color: var(--ed-text-dim);
    max-width: 60ch;
    margin: 0 0 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ed-rule);
}

/* ---------------------------------------------------------------------------
   7. Ripuliture
   Il tema circondava la testata dell'articolo con un riquadro blu in gradiente e
   arrotondava tutto: serviva a dare importanza al titolo quando il titolo era
   piccolo. Ora l'importanza gliela da' la scala tipografica, e il riquadro resta
   solo come rumore — per giunta con meta' larghezza vuota alla destra del testo.
   --------------------------------------------------------------------------- */
.single-post-header,
.ai-single-post .single-post-header {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 0 !important;
}

.single-post-container,
.ai-single-post {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

.single-post-container {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* "Vedi di più": era un bottone azzurro pieno con alone, l'elemento piu' acceso
   della pagina per un'azione secondaria. In un registro conta poco piu' di una
   riga di continuazione. */
.load-more-button {
    background: none !important;
    border: 1px solid var(--ed-rule) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--ed-text-dim) !important;
    font-family: var(--ed-mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.85rem 1.6rem !important;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.load-more-button:hover {
    border-color: var(--ed-signal) !important;
    color: var(--ed-signal) !important;
    transform: none !important;
}

.load-more-button::before { display: none !important; }

/* Provenienza: il riquadro che spiega come nasce l'edizione. Sobrio, e' un nota
   a margine, non un richiamo. */
.ed-provenance__steps {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ed-text-dim);
}

.ed-provenance__steps li { margin-bottom: 0.6rem; }

.ed-provenance__note {
    font-family: var(--ed-mono);
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--ed-text-dim);
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ed-rule);
}

/* ---------------------------------------------------------------------------
   8. Apertura con la firma
   Claira ha un volto, ed e' il tratto piu' riconoscibile del marchio: qui non fa
   da illustrazione ma da firma della redazione, come il ritratto in testa a una
   rubrica. Sta accanto all'edizione corrente, non sopra il titolo, cosi' la
   gerarchia resta quella giusta: prima cosa si legge, poi chi l'ha scritto.
   --------------------------------------------------------------------------- */
.ed-lead__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.ed-lead__text { min-width: 0; }

.ed-byline {
    margin: 0;
    padding-top: 0.35rem;
}

.ed-byline__portrait {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 22%;
    border-radius: 2px;
    /* Vira il ritratto verso l'inchiostro della pagina: cosi' appartiene alla
       testata invece di sembrare una foto incollata sopra. */
    filter: grayscale(0.35) contrast(1.04);
    border: 1px solid var(--ed-rule);
}

.ed-byline__caption {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.9rem;
    font-family: var(--ed-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--ed-text-dim);
}

.ed-byline__name {
    font-family: var(--ed-serif);
    font-size: 1.15rem;
    letter-spacing: 0;
    color: var(--ed-text);
}

.ed-byline__role {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ed-signal);
}

.ed-byline__since {
    padding-top: 0.45rem;
    border-top: 1px solid var(--ed-rule);
    margin-top: 0.35rem;
}

/* Un solo invito, e discreto: prima ce n'erano due per la stessa azione
   ("continua a leggere..." nel testo e il bottone pieno sotto). */
.ed-lead__cta {
    display: inline-block;
    margin-bottom: 1.75rem;
    font-family: var(--ed-mono);
    font-size: 0.73rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-signal);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--ed-rule);
    transition: border-color 0.2s ease;
}

.ed-lead__cta:hover,
.ed-lead__cta:focus-visible { border-bottom-color: var(--ed-signal); }

.ed-lead__cta::after {
    content: ' →';
    display: inline-block;
    transition: transform 0.2s ease;
}

.ed-lead__cta:hover::after { transform: translateX(3px); }

@media (max-width: 860px) {
    /* Su schermo stretto la firma passa sotto e si dispone in orizzontale:
       il ritratto resta, ma non ruba l'altezza al titolo. */
    .ed-lead__grid { grid-template-columns: 1fr; }

    .ed-byline {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--ed-rule);
    }

    .ed-byline__portrait { width: 68px; flex: 0 0 68px; }
    .ed-byline__caption { margin-top: 0; }
    .ed-byline__since { border: 0; padding-top: 0; margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   9. Una sola voce per i titoli
   Il serif era arrivato solo dove avevo messo mano — apertura, archivio, corpo
   dell'articolo — mentre sidebar, footer, pagine e ricerca continuavano in
   Inter. Risultato: due caratteri diversi per la stessa funzione, a seconda
   della zona. Qui la regola vale per tutti i titoli, con due eccezioni
   dichiarate: il logotipo, che resta il marchio, e i blocchi in monospaziato,
   dove le cifre sono il contenuto.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.post-title, .page-title, .search-title, .privacy-title,
.footer-section h3, .footer-section h4,
.sidebar-widget h3, .ai-widget h3,
.modal-header h3, .ai-message h3,
.related-post-title, .widget-title {
    font-family: var(--ed-serif);
    letter-spacing: -0.01em;
}

/* Titoli di servizio: piccoli, in maiuscoletto spaziato. Sono etichette, non
   testate, e in serif a corpo minuto si leggerebbero peggio. */
.footer-section h3,
.footer-section h4,
.sidebar-widget h3,
.ai-widget h3,
.widget-title {
    font-family: var(--ed-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-text-dim);
}

/* Il logotipo resta il marchio: e' l'unico punto in cui il carattere identifica
   Claira invece di comporre il testo. */
.brand-text .site-title,
.brand-text .site-title a {
    font-family: 'Inter', system-ui, sans-serif !important;
    letter-spacing: -0.02em;
}

/* Dove le cifre sono il contenuto, il monospaziato vince sul serif. */
.ed-dispatch,
.ed-dispatch *,
.ed-entry__date,
.ed-byline__role,
.ed-byline__since,
.ed-lead__meta,
.ed-lead__cta,
.ed-provenance__note,
.load-more-button {
    font-family: var(--ed-mono) !important;
}

/* Il nome nella firma e' un nome proprio: serif, come i titoli. */
.ed-byline__name { font-family: var(--ed-serif) !important; }

/* ---------------------------------------------------------------------------
   10. La colonna dell'articolo deve poter respirare
   .post-content-wrapper aveva colonne fisse in pixel — 540px per il testo e
   300px per la barra laterale — quindi la colonna principale restava larga 540
   qualunque fosse lo spazio disponibile. Su desktop il risultato era un testo
   incolonnato in mezzo al vuoto, e il riquadro promozionale in fondo diventava
   540 x 881: parole a capo ogni tre, illeggibile.
   Con minmax(0, 1fr) la colonna prende quel che resta, e il limite di lettura
   torna a essere quello tipografico (.ed-read, 68 caratteri) invece di un numero
   di pixel deciso una volta per tutte.
   --------------------------------------------------------------------------- */
.post-content-wrapper {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: clamp(2rem, 4vw, 3.5rem) !important;
    align-items: start;
}

.post-content-single { min-width: 0; }

/* Il testo dell'articolo resta sulla misura di lettura; tutto il resto —
   riquadri, tabelle, immagini — puo' usare l'intera colonna. */
.post-content-single > .ed-read { max-width: 72ch; }

@media (max-width: 900px) {
    .post-content-wrapper { grid-template-columns: 1fr !important; }
}

/* Il riquadro in fondo all'articolo: larghezza piena della colonna, testo su una
   misura leggibile e non piu' una guglia di parole spezzate. */
.castaldo-solutions-cta {
    max-width: none;
    margin: 3rem 0 0;
    border-radius: 2px;
}

/* La griglia a tre colonne schiacciava l'ultima — quella con l'invito — a poche
   decine di pixel: il testo usciva incolonnato una parola per riga e sbordava
   dal riquadro. Su una colonna sola il blocco si legge e l'invito sta in fondo,
   dove ci si aspetta di trovarlo. */
.castaldo-solutions-cta .cta-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: none;
}

.castaldo-solutions-cta .cta-content,
.castaldo-solutions-cta .cta-action {
    width: 100%;
    min-width: 0;
}

/* Gli elenchi di servizi erano righe di testo appiccicate: qui diventano voci
   separate, in monospaziato come le altre etichette. */
.castaldo-solutions-cta .cta-features,
.castaldo-solutions-cta .cta-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0;
    list-style: none;
    font-family: var(--ed-mono);
    font-size: 0.7rem !important;
    letter-spacing: 0.06em;
    color: var(--ed-text-dim) !important;
}

.castaldo-solutions-cta .cta-note,
.castaldo-solutions-cta .cta-action p,
.castaldo-solutions-cta em {
    font-family: var(--ed-mono);
    font-size: 0.68rem !important;
    font-style: normal;
    letter-spacing: 0.06em;
    color: var(--ed-text-dim) !important;
    margin: 0.5rem 0 0 !important;
    max-width: none !important;
}

.castaldo-solutions-cta p,
.castaldo-solutions-cta li,
.castaldo-solutions-cta h3,
.castaldo-solutions-cta h4 {
    max-width: 52ch;
}

@media (max-width: 800px) {
    .castaldo-solutions-cta .cta-container {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

/* ---------------------------------------------------------------------------
   11. La fascia sotto la testata
   Mescolava tre caratteri in pochi centimetri: il monospaziato per "Powered by",
   Inter per le etichette e di nuovo il monospaziato per i numeri, con un
   riquadro azzurro pieno in mezzo. E' una barra di servizio: deve stare su un
   registro solo e non competere con il titolo che le sta sotto.
   --------------------------------------------------------------------------- */
.header-bottom,
.header-bottom * {
    font-family: var(--ed-mono) !important;
}

.header-bottom {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-text-dim);
}

.header-bottom .metric-value,
.header-bottom .castaldo-link strong {
    color: var(--ed-text);
    font-weight: 500;
}

.header-bottom .metric-label,
.header-bottom .powered-by {
    color: var(--ed-text-dim);
    font-weight: 400;
}

/* L'etichetta "AI Automation" era un riquadro azzurro pieno, l'elemento piu'
   acceso di tutta la testata per un'informazione secondaria. */
.header-bottom .automation-tag {
    background: none !important;
    border: 1px solid var(--ed-rule) !important;
    border-radius: 2px !important;
    color: var(--ed-text-dim) !important;
    font-size: 0.65rem !important;
    padding: 0.15rem 0.5rem !important;
    box-shadow: none !important;
}

/* Anche il pallino di stato accanto al marchio: era verde acceso, ora e' il
   solito ambra, coerente con "ultima edizione". */
.ai-status-badge {
    background: none !important;
    border: 1px solid var(--ed-rule) !important;
    font-family: var(--ed-mono) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-text-dim) !important;
}

.ai-status-badge .status-indicator {
    background: var(--ed-signal) !important;
    box-shadow: none !important;
}

/* La riga sotto il logo: e' un sottotitolo, non un'etichetta tecnica. */
.brand-text .tagline {
    font-family: var(--ed-mono) !important;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ed-text-dim);
}

/* ---------------------------------------------------------------------------
   12. La cadenza — l'elemento che il sito si porta addosso
   Quarantaquattro tacche, una per edizione, in ordine cronologico: l'altezza e'
   la lunghezza del pezzo. Letta da sinistra a destra e' il battito di una
   redazione che pubblica ogni lunedi' da quasi un anno senza che nessuno prema
   invio — il tratto che nessun altro blog puo' esibire, perche' nessun altro ha
   una macchina che lo fa. E' anche navigazione: ogni tacca porta alla sua
   edizione.
   Qui e' concentrata tutta l'audacia della pagina; per questo il resto — voci
   d'archivio, riquadri, piede — sta zitto.
   --------------------------------------------------------------------------- */
.ed-cadence {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem);
    border-bottom: 1px solid var(--ed-rule);
}

.ed-cadence__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    margin-bottom: 1.6rem;
}

.ed-cadence__title {
    font-family: var(--ed-mono) !important;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-signal);
    margin: 0;
}

.ed-cadence__note {
    font-family: var(--ed-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ed-text-dim);
    margin: 0;
}

.ed-cadence__strip {
    display: flex;
    align-items: flex-end;
    gap: clamp(2px, 0.55vw, 7px);
    height: 84px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--ed-rule);
}

.ed-cadence__week {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.ed-cadence__week a {
    display: block;
    width: 100%;
    height: var(--h, 50%);
    background: var(--ed-rule);
    border-radius: 1px 1px 0 0;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.ed-cadence__week a:hover,
.ed-cadence__week a:focus-visible {
    background: var(--ed-blue);
    transform: scaleY(1.06);
    transform-origin: bottom;
    outline: none;
}

.ed-cadence__week a:focus-visible {
    box-shadow: 0 0 0 2px var(--ed-signal);
}

/* L'ultima edizione e' quella che si sta leggendo in apertura: resta accesa. */
.ed-cadence__week.is-last a {
    background: var(--ed-signal);
}

/* La targhetta compare al passaggio: numero, data e titolo dell'edizione. */
.ed-cadence__tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    background: var(--ed-surface);
    border: 1px solid var(--ed-rule);
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.ed-cadence__week a:hover .ed-cadence__tip,
.ed-cadence__week a:focus-visible .ed-cadence__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ed-cadence__tip-n {
    font-family: var(--ed-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--ed-signal);
}

.ed-cadence__tip-d {
    font-family: var(--ed-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--ed-text-dim);
}

.ed-cadence__tip-t {
    font-family: var(--ed-serif);
    font-size: 0.88rem;
    line-height: 1.3;
    color: var(--ed-text);
}

/* Le prime e le ultime tacche hanno la targhetta contro il bordo. */
.ed-cadence__week:nth-child(-n+4) .ed-cadence__tip { left: 0; transform: translateX(0) translateY(4px); }
.ed-cadence__week:nth-child(-n+4) a:hover .ed-cadence__tip { transform: translateX(0) translateY(0); }
.ed-cadence__week:nth-last-child(-n+4) .ed-cadence__tip { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.ed-cadence__week:nth-last-child(-n+4) a:hover .ed-cadence__tip { transform: translateX(0) translateY(0); }

.ed-cadence__axis {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.7rem;
    font-family: var(--ed-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-text-dim);
}

.ed-cadence__axis-mid { color: var(--ed-rule); }

@media (max-width: 700px) {
    /* Su schermo stretto le tacche diventerebbero fili da un pixel: si mostra
       l'ultimo trimestre, che e' comunque il ritmo. */
    .ed-cadence__strip { height: 58px; }
    .ed-cadence__week:nth-child(-n+31) { display: none; }
    .ed-cadence__axis-mid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ed-cadence__week a,
    .ed-cadence__tip { transition: none; }
    .ed-cadence__week a:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   13. Le cose che vendono stanno al loro posto
   La colonna "Servizi Correlati" partiva alla stessa altezza della prima
   edizione e con lo stesso peso visivo: due voci commerciali che contendevano
   l'attenzione all'articolo piu' recente. Il riquadro in fondo agli articoli
   faceva lo stesso in grande. Restano entrambi — pagano il blog — ma smettono
   di gridare: cornice sottile, niente fondi pieni, corpo minore.
   --------------------------------------------------------------------------- */
.blog-sidebar,
.sidebar-widget,
.related-services {
    background: none !important;
    border: 1px solid var(--ed-rule) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.sidebar-widget {
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

.sidebar-widget h4,
.service-item h4 {
    font-family: var(--ed-serif);
    font-size: 1rem;
    color: var(--ed-text);
    margin: 0 0 0.4rem;
}

.sidebar-widget p,
.service-item p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ed-text-dim);
    margin: 0 0 0.6rem;
}

.sidebar-widget a,
.service-item a {
    font-family: var(--ed-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-signal);
    text-decoration: none;
}

.sidebar-widget a:hover { text-decoration: underline; }

/* Il riquadro in fondo all'articolo: da manifesto azzurro a nota in cornice. */
.castaldo-solutions-cta {
    background: none !important;
    border: 1px solid var(--ed-rule) !important;
    border-left: 2px solid var(--ed-signal) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    padding: 1.5rem !important;
    margin: 3.5rem 0 0 !important;
}

.castaldo-solutions-cta h3,
.castaldo-solutions-cta h4 {
    font-family: var(--ed-serif);
    font-size: 1.1rem !important;
    color: var(--ed-text) !important;
    margin: 0 0 0.5rem !important;
}

.castaldo-solutions-cta p,
.castaldo-solutions-cta li {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: var(--ed-text-dim) !important;
}

.castaldo-solutions-cta .cta-icon,
.castaldo-solutions-cta blockquote { display: none !important; }

.castaldo-solutions-cta .cta-button,
.castaldo-solutions-cta a.cta-button {
    background: none !important;
    border: 1px solid var(--ed-signal) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--ed-signal) !important;
    font-family: var(--ed-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.7rem 1.2rem !important;
}

/* I numeri della redazione nel piede. */
.ed-facts { margin: 0; }

.ed-facts__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--ed-rule);
}

.ed-facts__row:last-child { border-bottom: 0; }

.ed-facts dt {
    font-family: var(--ed-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-text-dim);
}

.ed-facts dd {
    margin: 0;
    font-family: var(--ed-mono);
    font-size: 0.78rem;
    color: var(--ed-text);
}

/* ---------------------------------------------------------------------------
   14. Servizi correlati
   Ogni voce era racchiusa in un riquadro con bordo azzurro e sopra ne aveva un
   altro: cornici dentro cornici, e la linea blu che ne risultava tagliava la
   colonna. Qui le voci sono separate da un filetto sottile e basta — il bordo
   resta solo attorno al blocco.
   --------------------------------------------------------------------------- */
.ed-services {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ed-services__item + .ed-services__item {
    border-top: 1px solid var(--ed-rule);
}

.ed-services__item a {
    display: block;
    padding: 0.95rem 0;
    text-decoration: none;
    border: 0;
}

.ed-services__name {
    display: block;
    font-family: var(--ed-serif);
    font-size: 0.98rem;
    line-height: 1.3;
    color: var(--ed-text);
    margin-bottom: 0.2rem;
    transition: color 0.18s ease;
}

.ed-services__item a:hover .ed-services__name,
.ed-services__item a:focus-visible .ed-services__name {
    color: var(--ed-signal);
}

.ed-services__desc {
    display: block;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ed-text-dim);
}

/* Nessun riquadro annidato dentro la colonna dei servizi: il bordo appartiene
   al blocco, non a ogni voce che contiene. */
.blog-sidebar .sidebar-widget > div,
.blog-sidebar .sidebar-widget > ul,
.related-services,
.service-item {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}