/* =========================================================================
   Eden Code — base comune (caricata su tutte le pagine)
   Font self-hosted, token, reset, grana, nav, footer, breadcrumb, chip,
   bottoni, card articolo/lavoro, fascia CTA, prose (the_content), reveal.
   Fonte di verità: design/*.dc.html. Riferimento classi: ARCHITETTURA.md
   ========================================================================= */

/* ---------- Font (woff2 self-hosted, latin + latin-ext) ---------- */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin.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;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-latin.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;
}

/* ---------- Token ---------- */
:root {
	--ec-bg: #070806;
	--ec-card: #0b0d09;
	--ec-card-2: #11140d;
	--ec-fg: #f2f4ef;
	--ec-lime: #c8ff2e;
	--ec-lime-ink: #4d6b00;          /* accento su sfondo bianco */
	--ec-fg-70: rgba(242, 244, 239, 0.7);
	--ec-fg-65: rgba(242, 244, 239, 0.65);
	--ec-fg-60: rgba(242, 244, 239, 0.6);
	--ec-fg-55: rgba(242, 244, 239, 0.55);
	--ec-fg-50: rgba(242, 244, 239, 0.5);    /* minimo per il testo piccolo su --ec-bg: 4.9:1 (AA) */
	--ec-fg-45: var(--ec-fg-50);             /* alias storico: a 0.45 il testo piccolo faceva 4.1:1, sotto AA */
	--ec-fg-35: rgba(242, 244, 239, 0.35);   /* solo elementi decorativi (aria-hidden) */
	--ec-line: rgba(242, 244, 239, 0.12);
	--ec-line-2: rgba(242, 244, 239, 0.14);
	--ec-line-3: rgba(242, 244, 239, 0.22);
	--ec-line-media: rgba(242, 244, 239, 0.1);
	--ec-ease: cubic-bezier(.16, 1, .3, 1);
	--ec-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ec-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	--ec-max: 1480px;
	--ec-gutter: 38px;
	--ec-grain: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%22180%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.3%22%20numOctaves=%221%22%20stitchTiles=%22stitch%22/%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22/%3E%3C/filter%3E%3Crect%20width=%22100%25%22%20height=%22100%25%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E');
}

/* ---------- Reset (come l'helmet dei design) ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
/* Pagine interne: l'elemento a fuoco (anche con Shift+Tab) e le ancore non finiscono sotto la nav fissa
   (73px; 105px con la barra di amministrazione). La home, con la nav trasparente, resta come nel design. */
:root:has(body.ec-v-default) { scroll-padding-top: 88px; }
:root:has(body.ec-v-default.admin-bar) { scroll-padding-top: 120px; }
body {
	background: var(--ec-bg);
	color: var(--ec-fg);
	font-family: var(--ec-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
::selection { background: var(--ec-lime); color: var(--ec-bg); }
a { color: inherit; text-decoration: none; }
/* Hover globale delle pagine interne (nei design: a:hover { color:#c8ff2e }). Specificità 0,1,1: le regole dei componenti (0,2,0) vincono. */
:where(body:not(.ec-home)) a:hover { color: var(--ec-lime); }
img, svg, video { max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
ul[class], ol[class] { list-style: none; }
:focus-visible { outline: 2px solid var(--ec-lime); outline-offset: 3px; }

/* Scrollbar personalizzata (solo home, come nel design) */
:root:has(body.ec-home)::-webkit-scrollbar { width: 9px; }
:root:has(body.ec-home)::-webkit-scrollbar-track { background: var(--ec-bg); }
:root:has(body.ec-home)::-webkit-scrollbar-thumb { background: #23271d; border-radius: 0; }
:root:has(body.ec-home)::-webkit-scrollbar-thumb:hover { background: var(--ec-lime); }

/* ---------- Accessibilità ---------- */
.ec-sr,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.ec-skip {
	position: fixed; top: 10px; left: 10px; z-index: 100;
	padding: 12px 20px; border-radius: 100px;
	background: var(--ec-lime); color: var(--ec-bg);
	font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.06em;
	transform: translateY(-160%);
	transition: transform .3s var(--ec-ease);
}
.ec-skip:focus, .ec-skip:focus-visible { transform: none; outline: 2px solid var(--ec-bg); outline-offset: 2px; }
:where(body:not(.ec-home)) .ec-skip:hover { color: var(--ec-bg); }

/* ---------- Grana (overlay SVG fisso) ---------- */
.ec-grain {
	position: fixed; inset: 0; z-index: 60; pointer-events: none;
	opacity: 0.12;
	background-image: var(--ec-grain);
	background-size: 180px 180px;
}
.ec-grain--home { opacity: 0.17; background-repeat: repeat; }

/* ---------- Layout ---------- */
.ec-main { position: relative; z-index: 1; }
.ec-container { max-width: var(--ec-max); margin: 0 auto; padding-left: var(--ec-gutter); padding-right: var(--ec-gutter); }
.ec-section { max-width: var(--ec-max); margin: 0 auto; padding: 0 var(--ec-gutter) 140px; }

/* Intestazione delle pagine (breadcrumb + H1 gigante + intro) */
.ec-head {
	max-width: var(--ec-max); margin: 0 auto;
	padding: 150px var(--ec-gutter) 70px;
	display: flex; flex-direction: column; gap: 40px;
}
.ec-head--cat { padding-bottom: 60px; }
.ec-head--narrow { max-width: 1180px; padding-bottom: 56px; gap: 30px; }
.ec-head--project { padding-bottom: 56px; gap: 34px; }
.ec-head__row {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
	gap: 30px; border-bottom: 1px solid var(--ec-line-2); padding-bottom: 36px;
}
.ec-head__titles { display: flex; flex-direction: column; gap: 18px; }
.ec-head__aside { display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.ec-lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--ec-fg-65); text-wrap: pretty; }
.ec-count { font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ec-lime); text-transform: uppercase; }
.ec-kicker { font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ec-lime); text-transform: uppercase; }

/* Titoli H1 giganti con punto lime: <h1 class="ec-h1">Blog<span class="ec-dot">.</span></h1> */
.ec-h1 {
	font-size: clamp(80px, 15vw, 240px);
	font-weight: 600; letter-spacing: -0.06em; line-height: 0.82;
	overflow-wrap: break-word;
}
.ec-h1--l { font-size: clamp(72px, 14vw, 230px); }
.ec-h1--m { font-size: clamp(64px, 12vw, 200px); line-height: 0.84; text-wrap: balance; }
.ec-h1--article { font-size: clamp(42px, 7vw, 104px); letter-spacing: -0.05em; line-height: 0.94; text-wrap: balance; }
.ec-dot { color: var(--ec-lime); }

/* Intestazione di sezione: H2 a sinistra, etichetta mono a destra, filetto sotto */
.ec-sec-head {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
	border-bottom: 1px solid var(--ec-line-2); padding-bottom: 22px; margin-bottom: 50px;
}
.ec-sec-head--40 { margin-bottom: 40px; }
.ec-sec-head--30 { margin-bottom: 30px; }
.ec-h2 { font-size: clamp(30px, 4vw, 56px); font-weight: 600; letter-spacing: -0.03em; }
.ec-h2--s { font-size: clamp(26px, 3vw, 44px); }
.ec-h2--m { font-size: clamp(34px, 4vw, 60px); letter-spacing: -0.04em; line-height: 0.98; }
.ec-sec-tag { font-family: var(--ec-mono); font-size: 12px; color: var(--ec-lime); text-transform: uppercase; }
.ec-mono-h2 { font-family: var(--ec-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.12em; color: var(--ec-lime); text-transform: uppercase; }
.ec-more-link,
:where(body:not(.ec-home)) .ec-more-link:hover {
	font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ec-lime); text-transform: uppercase;
	white-space: nowrap;
}
/* Sotto 360px "TUTTI GLI ARTICOLI →" su una riga sola esce dalla pagina: può andare a capo. */
@media (max-width: 359px) {
	.ec-more-link,
	:where(body:not(.ec-home)) .ec-more-link:hover { white-space: normal; text-align: right; }
}

/* ---------- Breadcrumb ---------- */
/* Posizionato: la scatola dei glifi dell'H1 gigante che segue (fino a 240px, line-height .82) sporge verso l'alto
   e altrimenti vince l'hit-test, rendendo "Home" non cliccabile col mouse. */
.ec-breadcrumb { position: relative; z-index: 2; }
.ec-breadcrumb ol {
	list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
	font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ec-fg-50);
	text-transform: uppercase;
}
.ec-breadcrumb li { min-width: 0; overflow-wrap: anywhere; }
.ec-breadcrumb [aria-current="page"] { color: var(--ec-fg); }

/* ---------- Chip (categorie, filtri, paginazione) ---------- */
.ec-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.ec-chip {
	display: inline-flex; gap: 8px; align-items: center;
	font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.06em; line-height: normal;
	text-transform: uppercase;
	padding: 10px 18px; border-radius: 100px;
	border: 1px solid var(--ec-line-3); background: transparent; color: var(--ec-fg);
	cursor: pointer;
	transition: border-color .3s, background .3s, color .3s;
}
.ec-chip:hover { border-color: var(--ec-lime); color: var(--ec-lime); }
.ec-chip.is-active,
.ec-chip[aria-current="page"],
.ec-chip[aria-pressed="true"],
.ec-chip.is-active:hover,
.ec-chip[aria-current="page"]:hover,
.ec-chip[aria-pressed="true"]:hover { background: var(--ec-lime); border-color: var(--ec-lime); color: var(--ec-bg); }
.ec-chip__count { opacity: 0.55; }
/* Sul chip attivo (lime) .55 fa 4.3:1: .65 = 6.1:1 (AA) */
.ec-chip.is-active .ec-chip__count,
.ec-chip[aria-current="page"] .ec-chip__count,
.ec-chip[aria-pressed="true"] .ec-chip__count { opacity: 0.65; }

/* Etichetta piena lime ("IN EVIDENZA", categoria dell'articolo) */
.ec-label,
.ec-label:hover {
	display: inline-block; align-self: flex-start;
	font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 4px 10px; background: var(--ec-lime); color: var(--ec-bg);
}
.ec-label--m { padding: 6px 12px; }
/* Tag a pillola con filetto (tipologie del progetto, "archiviato in") */
.ec-tag {
	display: inline-block;
	font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 6px 12px; border: 1px solid var(--ec-line-3); border-radius: 100px; color: rgba(242, 244, 239, 0.8);
}
.ec-tag--link { padding: 8px 14px; color: var(--ec-fg); }

/* Riga meta mono (categoria · data · lettura) */
.ec-meta {
	display: flex; flex-wrap: wrap; gap: 14px;
	font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ec-meta__accent { color: var(--ec-lime); }
.ec-meta__muted { color: var(--ec-fg-50); }

/* ---------- Bottoni a pillola ---------- */
.ec-btn {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 16px 28px; border-radius: 100px;
	font-family: var(--ec-sans); font-size: 16px; font-weight: 500; line-height: normal;
	cursor: pointer;
	transition: gap .35s var(--ec-ease), color .3s, background .3s, border-color .3s;
}
.ec-btn--lg { gap: 14px; padding: 20px 36px; font-size: 18px; }
.ec-btn--xl { gap: 14px; padding: 20px 38px; font-size: 18px; }
.ec-btn--outline { border: 1px solid var(--ec-lime); color: var(--ec-lime); background: transparent; }
.ec-btn--outline:hover,
.ec-btn--outline:focus-visible { background: var(--ec-lime); color: var(--ec-bg); }
.ec-btn--dark { background: var(--ec-bg); color: var(--ec-fg); }
.ec-btn--dark:hover { color: var(--ec-lime); }
.ec-btn--grow:hover { gap: 22px; }
/* Link testuale mono con freccia ("ESPLORA →", "TUTTI GLI ARTICOLI →") */
.ec-arrow-link {
	display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
	font-family: var(--ec-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
	transition: gap .35s var(--ec-ease), color .3s;
}
.ec-arrow-link:hover { gap: 20px; }

/* ---------- Nav fissa (variante default) ---------- */
.ec-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 40;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 18px var(--ec-gutter);
	background: rgba(7, 8, 6, 0.8);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(242, 244, 239, 0.08);
}
.ec-nav__logo,
.ec-nav__logo:hover {
	display: flex; align-items: baseline; gap: 5px;
	font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--ec-fg);
}
.ec-nav__logo span { color: var(--ec-lime); }
.ec-nav__links { display: flex; gap: 30px; font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.02em; }
.ec-nav__link { opacity: 0.7; transition: opacity .3s, color .3s; }
.ec-nav__link:hover { opacity: 1; color: var(--ec-lime); }
.ec-nav__link.is-current { opacity: 1; color: var(--ec-lime); }
.ec-nav__cta {
	font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.06em; line-height: normal;
	padding: 10px 18px; border: 1px solid var(--ec-lime); border-radius: 100px; color: var(--ec-lime);
	white-space: nowrap;
	transition: background .3s, color .3s;
}
.ec-nav__cta:hover,
.ec-nav__cta:focus-visible,
.ec-nav__cta[aria-current="page"] { background: var(--ec-lime); color: var(--ec-bg); }

/* ---------- Nav home: barra di avanzamento, logo separato (senza blend), nav in difference ---------- */
.ec-progress {
	position: fixed; top: 0; left: 0; z-index: 50;
	height: 2px; width: 0%;
	background: var(--ec-lime);
	box-shadow: 0 0 12px rgba(200, 255, 46, 0.7);
	pointer-events: none;
}
.ec-hlogo {
	position: fixed; top: 22px; left: var(--ec-gutter); z-index: 41;
	display: flex; align-items: baseline;
	font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: normal;
}
.ec-hlogo__eden { color: var(--ec-fg); transition: color .35s; }
.ec-hlogo__code { color: var(--ec-lime); margin-left: 5px; transition: color .35s; }
.ec-nav--home {
	gap: 0;
	padding: 22px var(--ec-gutter);
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom: 0;
	mix-blend-mode: difference;
}
.ec-nav__ghost {
	visibility: hidden;
	display: flex; align-items: baseline; gap: 8px;
	font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
}
.ec-nav__ghost span { margin-left: 5px; }
.ec-nav__status { display: flex; align-items: center; gap: 8px; font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; }
.ec-nav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ec-lime); animation: ec-pulse 2s ease-in-out infinite; }
@keyframes ec-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

@media (max-width: 760px) {
	.ec-nav__links { display: none; }
}
/* Barra di amministrazione di WordPress (utenti loggati) */
.admin-bar .ec-nav, .admin-bar .ec-progress { top: 32px; }
.admin-bar .ec-hlogo { top: 54px; }
@media (max-width: 782px) {
	.admin-bar .ec-nav, .admin-bar .ec-progress { top: 46px; }
	.admin-bar .ec-hlogo { top: 68px; }
}

/* ---------- Footer ---------- */
.ec-footer {
	position: relative; z-index: 1;
	max-width: var(--ec-max); margin: 0 auto;
	padding: 40px var(--ec-gutter) 60px;
}
.ec-footer--border { border-top: 1px solid var(--ec-line-2); }
.ec-footer--home { z-index: 10; padding: 0 var(--ec-gutter) 60px; }
.ec-footer--home .ec-footer__row { padding-top: 30px; border-top: 1px solid var(--ec-line-2); }
.ec-footer__row {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
	font-family: var(--ec-mono); font-size: 12px; color: var(--ec-fg-50);
}
.ec-footer__nav { display: flex; flex-wrap: wrap; gap: 24px; }
.ec-footer__nav a { transition: color .3s; }
.ec-footer__nav a:hover { color: var(--ec-lime); }

/* ---------- Fascia CTA lime ---------- */
.ec-cta-band { background: var(--ec-lime); color: var(--ec-bg); }
.ec-cta-band ::selection { background: var(--ec-bg); color: var(--ec-lime); }
.ec-cta-band :focus-visible { outline-color: var(--ec-bg); }
.ec-cta-band__in {
	max-width: var(--ec-max); margin: 0 auto;
	padding: clamp(70px, 10vw, 130px) var(--ec-gutter);
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 30px;
}
.ec-cta-band__copy { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.ec-cta-band__title { font-size: clamp(44px, 7vw, 110px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; max-width: 900px; }
.ec-cta-band__text { font-size: 18px; line-height: 1.5; color: rgba(7, 8, 6, 0.72); }
.ec-cta-band--mt { margin-top: 120px; }
/* Sotto 360px a 44px una parola lunga ("comunicazione.") non entra nei 244px utili: il corpo scala con la finestra. */
@media (max-width: 359px) {
	.ec-cta-band__title { font-size: 11vw; }
}

/* ---------- Corpo delle pagine generiche (page.php / index.php) ---------- */
.ec-page-body { max-width: 1180px; margin: 0 auto; padding: 0 var(--ec-gutter) 120px; }
.ec-page-body--top { padding-top: 80px; }
.ec-prose--page { max-width: 720px; }

/* ---------- Media e segnaposto ---------- */
.ec-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ec-card-2); border: 1px solid var(--ec-line-media); }
.ec-media--21x9 { aspect-ratio: 21 / 9; }
.ec-media--16x9 { aspect-ratio: 16 / 9; }
.ec-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ec-zoom { transition: transform 1.2s var(--ec-ease); }
.ec-zoom:hover { transform: scale(1.04); }
.ec-ph {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
	background-image: repeating-linear-gradient(45deg, rgba(242, 244, 239, 0.05) 0 2px, transparent 2px 11px);
	font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ec-fg-35);
	text-transform: uppercase;
}

/* ---------- Card articolo: griglia (Blog, correlati) ---------- */
.ec-post-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 56px 24px; }
.ec-post-grid--related { gap: 48px 24px; }
.ec-pcard { height: 100%; }
.ec-pcard__link { display: flex; flex-direction: column; gap: 16px; height: 100%; color: var(--ec-fg); transition: color .3s; }
.ec-pcard__link:hover { color: var(--ec-lime); }
.ec-pcard__title { font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
.ec-pcard__desc {
	font-size: 15px; line-height: 1.55; color: rgba(242, 244, 239, 0.58);
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ec-pcard__more { margin-top: auto; font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ec-lime); text-transform: uppercase; }

/* Card articolo: in evidenza (Blog) */
.ec-pfeat__link,
.ec-pfeat__link:hover {
	display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px); align-items: center; color: var(--ec-fg);
}
.ec-pfeat__body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ec-pfeat__cat { color: var(--ec-lime); padding: 4px 0; }
.ec-pfeat__title { font-size: clamp(34px, 4.4vw, 68px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }
.ec-pfeat__desc { font-size: 17px; line-height: 1.6; color: rgba(242, 244, 239, 0.62); text-wrap: pretty; }
.ec-pfeat__info { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ec-fg-50); text-transform: uppercase; }
.ec-pfeat__more { display: inline-flex; gap: 12px; font-family: var(--ec-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ec-lime); text-transform: uppercase; }
@media (max-width: 900px) {
	.ec-pfeat__link { grid-template-columns: minmax(0, 1fr); }
}

/* Card articolo: riga con miniatura (Categoria) */
.ec-post-list { list-style: none; display: flex; flex-direction: column; }
.ec-post-list > li { border-bottom: 1px solid var(--ec-line); }
.ec-prow__link {
	display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px); align-items: center;
	padding: clamp(28px, 4vw, 44px) 0;
	color: var(--ec-fg); transition: color .3s;
}
.ec-prow__link:hover { color: var(--ec-lime); }
.ec-prow__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ec-prow__meta { gap: 16px; }
.ec-prow__title { font-size: clamp(28px, 3vw, 46px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.ec-prow__desc { font-size: 16px; line-height: 1.6; color: var(--ec-fg-60); max-width: 640px; text-wrap: pretty; }
.ec-prow__more { font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ec-lime); text-transform: uppercase; }
@media (max-width: 760px) {
	.ec-prow__link { grid-template-columns: minmax(0, 1fr); }
}

/* Card articolo: compatta numerata (lista "Dal blog" della home) */
.ec-post-compact { list-style: none; display: flex; flex-direction: column; }
.ec-post-compact > li { border-bottom: 1px solid var(--ec-line); }
.ec-pcomp__link,
.ec-pcomp__link:hover {
	display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
	padding: 22px 4px; color: var(--ec-fg);
	transition: padding-left .4s var(--ec-ease), background .3s;
}
.ec-pcomp__link:hover { padding-left: 14px; background: rgba(200, 255, 46, 0.04); }
.ec-pcomp__n { font-family: var(--ec-mono); font-size: 12px; color: var(--ec-lime); padding-top: 5px; }
.ec-pcomp__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ec-pcomp__date { font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ec-fg-50); text-transform: uppercase; }
.ec-pcomp__title { font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.ec-pcomp__desc {
	font-size: 14px; line-height: 1.5; color: var(--ec-fg-55);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Card lavoro: home ("Lavori selezionati") ---------- */
.ec-work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.ec-lcard,
.ec-lcard:hover {
	display: block; padding: 18px; color: var(--ec-fg);
	border: 1px solid var(--ec-line);
	background: rgba(15, 17, 12, 0.4);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: border-color .4s, transform .5s var(--ec-ease), opacity .9s, background .4s;
}
.ec-lcard { position: relative; }
.ec-lcard:hover,
.ec-lcard:focus-within { border-color: var(--ec-lime); background: rgba(20, 24, 12, 0.6); }
.ec-lcard__link,
.ec-lcard__link:hover { display: block; color: inherit; }
/* Tasto "Visita il sito ↗" sopra l'immagine, in alto a destra (18px di padding della card + 12px) */
.ec-lcard__visit {
	position: absolute; top: 30px; right: 30px; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border-radius: 100px;
	font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
	color: var(--ec-lime); background: rgba(7, 8, 6, 0.8); border: 1px solid var(--ec-lime);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background .3s, color .3s, gap .35s var(--ec-ease);
}
.ec-lcard__visit:hover,
.ec-lcard__visit:focus-visible { background: var(--ec-lime); color: var(--ec-bg); gap: 12px; }
.ec-lcard__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; background: var(--ec-card-2); }
.ec-lcard__ph { aspect-ratio: 4 / 3; height: auto; margin-bottom: 18px; }
.ec-lcard__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ec-lcard__title { font-size: 22px; font-weight: 600; }
.ec-lcard__tags { font-family: var(--ec-mono); font-size: 11px; color: var(--ec-fg-50); margin-top: 4px; }
.ec-lcard__year { font-family: var(--ec-mono); font-size: 11px; color: var(--ec-lime); white-space: nowrap; }

/* Card lavoro: masonry con parallasse (Portfolio) */
.ec-masonry { list-style: none; columns: 3 340px; column-gap: 20px; }
.ec-masonry > li { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: clamp(36px, 4vw, 56px); }
.ec-masonry > li[hidden] { display: none; }
.ec-mcard__link { display: flex; flex-direction: column; gap: 18px; color: var(--ec-fg); transition: color .3s; }
.ec-mcard__link:hover { color: var(--ec-lime); }
.ec-mcard__frame { position: relative; overflow: hidden; background: var(--ec-card-2); border: 1px solid var(--ec-line-media); }
.ec-mcard__plx { position: absolute; left: 0; right: 0; top: -25%; height: 150%; will-change: transform; }
.ec-mcard__plx img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ec-ease); }
.ec-mcard__plx img:hover { transform: scale(1.06); }
.ec-mcard__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ec-mcard__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ec-mcard__tags { font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ec-fg-50); text-transform: uppercase; }
.ec-mcard__title { font-size: clamp(26px, 2.4vw, 38px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.ec-mcard__n { font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ec-lime); white-space: nowrap; padding-top: 2px; }

/* Card lavoro: mini ("Altri progetti" nel singolo progetto) */
.ec-mini-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.ec-mini__link,
.ec-mini__link:hover {
	display: flex; flex-direction: column; height: 100%; padding: 18px; color: var(--ec-fg);
	border: 1px solid var(--ec-line); background: rgba(15, 17, 12, 0.4);
	transition: border-color .4s, background .4s;
}
.ec-mini__link:hover { border-color: var(--ec-lime); background: rgba(20, 24, 12, 0.6); }
.ec-mini__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ec-card-2); margin-bottom: 18px; }
.ec-mini__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ec-mini__title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.ec-mini__tags { font-family: var(--ec-mono); font-size: 11px; color: var(--ec-fg-50); margin-top: 6px; }

/* ---------- Prose: contenuto di the_content() (articoli e pagine) ---------- */
.ec-prose { min-width: 0; color: rgba(242, 244, 239, 0.82); }
.ec-prose > :first-child { margin-top: 0; }
.ec-prose p,
.ec-prose li,
.ec-prose dd { font-size: clamp(17px, 1.35vw, 19px); }
.ec-prose p { line-height: 1.75; margin-bottom: 26px; text-wrap: pretty; }
.ec-prose h2 {
	color: var(--ec-fg);
	font-size: clamp(28px, 3vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08;
	margin: 58px 0 22px; scroll-margin-top: 12px; text-wrap: balance; /* + scroll-padding-top 88px = 100px */
}
.ec-prose h3 {
	color: var(--ec-fg);
	font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
	margin: 44px 0 16px; scroll-margin-top: 12px; text-wrap: balance;
}
.ec-prose h4, .ec-prose h5, .ec-prose h6 {
	color: var(--ec-fg); font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.3; margin: 32px 0 12px;
}
.ec-prose ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 30px; }
.ec-prose ul > li { position: relative; padding-left: 28px; line-height: 1.6; }
.ec-prose ul > li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--ec-lime); }
.ec-prose ol { list-style: none; counter-reset: ec-ol; display: flex; flex-direction: column; gap: 12px; margin: 0 0 30px; }
.ec-prose ol > li { position: relative; padding-left: 44px; line-height: 1.6; counter-increment: ec-ol; }
.ec-prose ol > li::before {
	content: counter(ec-ol, decimal-leading-zero);
	position: absolute; left: 0; top: 0.45em;
	font-family: var(--ec-mono); font-size: 12px; line-height: 1; color: var(--ec-lime);
}
.ec-prose li > ul, .ec-prose li > ol { margin: 12px 0 0; }
.ec-prose blockquote { margin: 52px 0; display: flex; flex-direction: column; gap: 10px; color: var(--ec-fg); }
.ec-prose blockquote::before { content: "“"; font-size: 72px; line-height: 0.6; color: var(--ec-lime); font-weight: 600; }
.ec-prose blockquote p {
	font-size: clamp(24px, 2.5vw, 34px); line-height: 1.25; font-weight: 500; letter-spacing: -0.02em;
	text-wrap: balance; margin: 0; color: var(--ec-fg);
}
.ec-prose blockquote cite { font-family: var(--ec-mono); font-size: 12px; font-style: normal; letter-spacing: 0.08em; color: var(--ec-fg-50); text-transform: uppercase; }
.ec-prose a { color: var(--ec-lime); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .3s; }
.ec-prose a:hover { color: var(--ec-fg); }
.ec-prose strong, .ec-prose b { color: var(--ec-fg); font-weight: 600; }
.ec-prose em, .ec-prose i { font-style: italic; }
.ec-prose code, .ec-prose pre { font-family: var(--ec-mono); font-size: 0.88em; }
.ec-prose code { background: var(--ec-card-2); padding: 2px 6px; }
.ec-prose pre { background: var(--ec-card); border: 1px solid var(--ec-line); padding: 18px 20px; overflow-x: auto; margin: 0 0 30px; }
.ec-prose img { max-width: 100%; height: auto; }
.ec-prose figure, .ec-prose .wp-caption { margin: 40px 0; max-width: 100%; }
.ec-prose figcaption, .ec-prose .wp-caption-text { margin-top: 10px; font-family: var(--ec-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ec-fg-50); }
.ec-prose hr { border: 0; border-top: 1px solid var(--ec-line-2); margin: 48px 0; }
.ec-prose table { width: 100%; border-collapse: collapse; margin: 0 0 30px; font-size: 15px; }
.ec-prose th, .ec-prose td { border-bottom: 1px solid var(--ec-line); padding: 12px 10px; text-align: left; vertical-align: top; }
.ec-prose th { font-family: var(--ec-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--ec-fg-50); text-transform: uppercase; }
.ec-prose iframe, .ec-prose video, .ec-prose embed { max-width: 100%; }
.ec-prose .alignleft { float: left; margin: 6px 28px 20px 0; }
.ec-prose .alignright { float: right; margin: 6px 0 20px 28px; }
.ec-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.ec-prose::after { content: ""; display: table; clear: both; }
@media (max-width: 600px) {
	.ec-prose .alignleft, .ec-prose .alignright { float: none; margin: 0 0 20px; }
}

/* Campi dei moduli dentro i contenuti (Contact Form 7, ricerca) */
.ec-prose label { display: block; font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ec-fg-70); }
.ec-prose input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.ec-prose textarea,
.ec-prose select,
.ec-field {
	display: block; width: 100%; margin-top: 8px;
	padding: 14px 16px;
	background: var(--ec-card); color: var(--ec-fg);
	border: 1px solid var(--ec-line-3); border-radius: 0;
	font: inherit; font-size: 16px; line-height: 1.4;
	transition: border-color .3s;
}
.ec-prose input:focus, .ec-prose textarea:focus, .ec-prose select:focus, .ec-field:focus { border-color: var(--ec-lime); outline: none; }
.ec-prose input:focus-visible, .ec-prose textarea:focus-visible, .ec-prose select:focus-visible, .ec-field:focus-visible { outline: 2px solid var(--ec-lime); outline-offset: 2px; }
.ec-prose input[type="checkbox"], .ec-prose input[type="radio"] { accent-color: var(--ec-lime); width: 18px; height: 18px; vertical-align: middle; margin-right: 8px; }
.ec-prose input[type="submit"],
.ec-prose button[type="submit"] {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 16px 28px; border-radius: 100px;
	border: 1px solid var(--ec-lime); background: transparent; color: var(--ec-lime);
	font-family: var(--ec-sans); font-size: 16px; font-weight: 500; cursor: pointer;
	transition: background .3s, color .3s;
}
.ec-prose input[type="submit"]:hover,
.ec-prose button[type="submit"]:hover { background: var(--ec-lime); color: var(--ec-bg); }

/* ---------- Ricerca (form HTML5 di WordPress) ---------- */
.search-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; max-width: 640px; }
.search-form label { flex: 1 1 260px; display: block; }
.search-form .search-field {
	width: 100%; height: 100%; padding: 14px 20px;
	background: var(--ec-card); color: var(--ec-fg);
	border: 1px solid var(--ec-line-3); border-radius: 100px;
	font: inherit; font-size: 16px;
}
.search-form .search-field:focus { border-color: var(--ec-lime); outline: none; }
.search-form .search-submit {
	padding: 14px 26px; border-radius: 100px;
	border: 1px solid var(--ec-lime); color: var(--ec-lime); background: transparent;
	font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
	cursor: pointer; transition: background .3s, color .3s;
}
.search-form .search-submit:hover { background: var(--ec-lime); color: var(--ec-bg); }

/* ---------- Paginazione (the_posts_pagination con class ec-pagination) ---------- */
.ec-pagination { margin-top: 70px; }
.ec-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-pagination .page-numbers {
	display: inline-flex; align-items: center;
	font-family: var(--ec-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 10px 18px; border-radius: 100px;
	border: 1px solid var(--ec-line-3); color: var(--ec-fg);
	transition: border-color .3s, color .3s;
}
.ec-pagination a.page-numbers:hover { border-color: var(--ec-lime); color: var(--ec-lime); }
.ec-pagination .page-numbers.current { background: var(--ec-lime); border-color: var(--ec-lime); color: var(--ec-bg); }
.ec-pagination .page-numbers.dots { border-color: transparent; }

/* ---------- Stato vuoto ---------- */
.ec-empty { padding: 60px 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.ec-empty p { font-size: 20px; color: var(--ec-fg-70); }

/* ---------- Reveal ----------
   [data-reveal="ms"] è animato da home.js (solo transform: salita di 28px, mai l'opacità). Le altre pagine non hanno reveal. */

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.ec-mcard__plx { transform: none !important; }
}