/*
Theme Name: Talk About Design
Theme URI: https://talkaboutdesign.it
Author: Talk About Design
Description: Dark editorial magazine theme — variant-0 design system.
Version: 3.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: talkaboutdesign
Tags: magazine, blog, dark, custom-menu, featured-images, gutenberg
*/

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
::selection { background: var(--accent); color: var(--bg); }

/* ── ACCESSIBILITÀ — skip link ── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--bg);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.15s ease;
}
.skip-to-content:focus { top: 0; }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Focus visibile da tastiera */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── DESIGN SYSTEM TOKENS ─────────────────────────────────────
   Unica fonte di verità per tutta la codebase.
   Palette forzata light — dark mode disabilitata.
   --muted: #6b6058 su #faf7f2 = 5.2:1 (WCAG AA ✓)
───────────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --bg:        #faf7f2;
  --fg:        #1a1714;
  --accent:    #e87962;
  --accent-strong: #d4614c; /* accent hover/pressed */
  --accent2:   #f5c842;
  --muted:     #6b6058;
  --border:    rgba(26, 23, 20, 0.14);
  --surface:   #f0ebe3;
  --surface2:  #e8e3db;

  /* Struttura */
  --radius:    3px;
  --header-h:  72px;

  /* Alias FP (homepage) */
  --fp-orange: #e87962;
  --fp-cream:  #faf7f2;
  --fp-navy:   #1a1714;
  --fp-sand:   #f0ebe3;
  --fp-yellow: #f5c842;
  --fp-radius: 16px;
}

/* ── BASE ── */
html, body { height: 100%; }

/* Evita lo scroll orizzontale causato dagli elementi full-bleed (100vw) */
html { overflow-x: clip; }

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  /* transition rimossa: dark mode disabilitato */
}

/* Noise grain overlay — variant-0 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ── CANVAS ── */
#bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── PAGE WRAPPER ── */
.page-wrap {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 60px);
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ── SITE HEADER ── */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(20px, 4vw, 40px) 0;
  border-bottom: 1px solid var(--border);
  gap: 24px;
  /* Sticky with glassmorphism on scroll */
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg);
  transition: background 0.4s ease, backdrop-filter 0.4s ease,
              -webkit-backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

.site-header.is-scrolled {
  background: rgba(250, 247, 242, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--border);
}

.site-logo {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.2s;
}

.site-logo:hover { color: var(--accent); }

.header-center { flex: 1; display: flex; justify-content: center; }

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* ── PRIMARY NAV ── */
.primary-nav ul {
  display: flex;
  list-style: none;
  gap: 0;
  align-items: center;
}

/* Separatore — linea verticale sottile, meno invasiva del punto */
.primary-nav li + li::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
  opacity: 0.6;
  vertical-align: middle;
}

/* Nasconde il separatore accanto alla voce attiva */
.primary-nav .current-menu-item + li::before,
.primary-nav li:has(+ .current-menu-item)::before {
  opacity: 0;
  width: 0;
  margin: 0;
}

.primary-nav a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  position: relative;
  padding: 7px 13px;
  border-radius: var(--radius);
  transition: background 0.22s ease, color 0.22s ease, transform 0.18s ease;
  white-space: nowrap;
}

/* Hover: sfondo warm + colore accent */
.primary-nav a:hover {
  color: var(--accent);
  background: var(--surface2);
  transform: translateY(-1px);
}

.primary-nav a::after { display: none; }

/* Voce attiva: pill piena con ombra interna morbida */
.primary-nav .current-menu-item > a {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 3px rgba(224,92,58,0.28);
  letter-spacing: 0.14em;
}

.primary-nav .current-menu-item > a:hover {
  background: var(--accent);
  color: #fff;
  transform: none;
}

.primary-nav .current-menu-item > a::after { display: none; }

/* ── HAMBURGER BUTTON (mobile nav trigger) ── */
.hamburger {
  display: none; /* shown at ≤768px via media query */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 9px;
  transition: border-color 0.2s;
  flex-shrink: 0;
}

.hamburger:hover { border-color: var(--accent); }

.hamburger-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--fg);
  border-radius: 1px;
  transition: transform 0.28s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* Animated X state when mobile nav is open */
body.nav-open .hamburger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .hamburger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/*
 * FIX: lock body scroll when mobile nav overlay is open.
 * Without overflow: hidden, the page content scrolls behind the fixed
 * overlay, which is disorienting especially on iOS (where -webkit-overflow-
 * scrolling creates a secondary scroll context inside the overlay).
 */
body.nav-open { overflow: hidden; }

/* ── MOBILE NAV OVERLAY ── */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9990;
  display: flex;
  flex-direction: column;
  padding: clamp(72px, 14vh, 120px) clamp(24px, 5vw, 60px) clamp(40px, 8vh, 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav[hidden] { display: none; }

.mobile-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.mobile-nav a {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(32px, 8vw, 56px);
  letter-spacing: -0.03em;
  color: var(--fg);
  text-decoration: none;
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
  line-height: 1.1;
}

.mobile-nav a:hover,
.mobile-nav .current-menu-item > a { color: var(--accent); }

.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: clamp(24px, 5vw, 60px);
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
  line-height: 1;
}

.mobile-nav-close:hover { border-color: var(--accent); color: var(--accent); }

/* ── SHARED UTILITIES ── */
.category-pill {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 5px 11px;
  border-radius: 50px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.category-pill:hover {
  background: var(--accent);
  color: var(--bg);
}

.post-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--muted);
}

/* Reading time badge */
.read-time {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(56px, 8vh, 96px) 0 clamp(32px, 5vh, 52px);
}

.section-line { flex: 1; height: 1px; background: var(--border); }

/* Short accent dash on the left, long rule on the right */
.section-header > .section-line:first-child {
  flex: 0 0 28px;
  height: 2px;
  background: var(--accent);
}

.section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

/* ── HERO ── */
.hero {
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* Hero split: brand (left) + cover article (right) */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 40%;
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
  padding: clamp(48px, 9vh, 110px) 0 clamp(40px, 6vh, 72px);
}

.hero-brand { /* left: typographic */ }

.hero-feature {
  display: block;
  color: inherit;
}

.hero-cover-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 16px;
}

.hero-feature-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
  position: relative;
  margin-bottom: 20px;
  border-top: 3px solid var(--accent);
}

.hero-feature-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-feature-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,23,20,0.45) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-feature:hover .hero-feature-image img { transform: scale(1.04); }
.hero-feature:hover .hero-feature-image::after { opacity: 1; }

.hero-feature-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.hero-feature-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--fg);
  transition: color 0.25s;
}

.hero-feature:hover .hero-feature-title { color: var(--accent); }

.hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(20px, 3vh, 32px);
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.hero-headline {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(52px, 9.5vw, 140px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: clamp(24px, 4vh, 44px);
}

.hero-headline .italic-line {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
  font-size: 0.93em;
}

.hero-headline .accent-word { color: var(--accent); }

.hero-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vh, 32px);
}

.hero-meta-item {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-meta-item strong { color: var(--fg); font-weight: 400; }

.hero-meta-sep { width: 1px; height: 16px; background: var(--border); }

.hero-subtext {
  max-width: 520px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.8;
  color: var(--fg);
  margin-bottom: clamp(28px, 4vh, 48px);
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  padding: 14px 28px 14px 24px;
  border-radius: var(--radius);
  border: none;
  transition: background 0.3s ease, gap 0.25s;
}

.read-more::after {
  content: '→';
  transition: transform 0.3s ease;
}

.read-more:hover {
  background: var(--accent);
  color: #faf7f2;
  gap: 18px;
}
.read-more:hover::after { transform: translateX(4px); }

/* ── CARD IMAGE WRAP ── */
.card-image-wrap {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
  display: block;
  margin-bottom: 18px;
}

.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(232, 121, 98, 0.32) 0%,
    rgba(26, 23, 20, 0.42) 28%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.card:hover .card-image-wrap img { transform: scale(1.05); }
.card:hover .card-image-wrap::after { opacity: 1; }

.card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 90px);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--surface2);
  line-height: 1;
  user-select: none;
}

/* ── ARTICLE CARD ── */
.card { display: flex; flex-direction: column; }

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.card-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(15px, 1.55vw, 21px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.card:hover .card-title { color: var(--accent); }
.card-title a { color: inherit; }

.card-excerpt {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 14px;
  flex: 1;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--muted);
  text-transform: uppercase;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* Large card variant — editorial overlay (testo sull'immagine) */
.card--large {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card--large .card-image-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  margin-bottom: 0;
  z-index: 0;
}

.card--large .card-image-wrap::after {
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.97) 0%,
    rgba(10, 8, 6, 0.72) 30%,
    rgba(10, 8, 6, 0.30) 58%,
    transparent 80%
  );
  opacity: 1;
}

.card--large:hover .card-image-wrap img { transform: scale(1.05); }

/* Testo sovrapposto all'immagine — sempre in primo piano */
.card--large .card-meta,
.card--large .card-title,
.card--large .card-excerpt,
.card--large .card-footer {
  position: relative;
  z-index: 2;
  padding-left: clamp(24px, 3vw, 40px);
  padding-right: clamp(24px, 3vw, 40px);
}

.card--large .card-meta {
  margin-bottom: 12px;
}

.card--large .card-title {
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  color: #faf7f2;
}

.card--large .card-title a { color: #faf7f2; }

.card--large:hover .card-title,
.card--large:hover .card-title a { color: var(--accent2); }

.card--large .card-excerpt {
  font-size: 14px;
  line-height: 1.78;
  color: rgba(240, 235, 227, 0.68);
  opacity: 1;
  margin-bottom: 16px;
}

.card--large .card-footer {
  border-top: 1px solid rgba(240, 235, 227, 0.14);
  padding-top: 14px;
  padding-bottom: clamp(24px, 3vw, 40px);
  color: rgba(240, 235, 227, 0.44);
  margin-top: 0;
}

.card--large .category-pill {
  border-color: rgba(240, 235, 227, 0.28);
  color: rgba(240, 235, 227, 0.88);
  background: transparent;
}

.card--large .category-pill:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7f2;
}

.card--large .post-date,
.card--large .read-time { color: rgba(240, 235, 227, 0.44); }

/* Small card in stack */
.card--small {
  padding: clamp(22px, 3vh, 32px) 0;
  border-bottom: 1px solid var(--border);
}
.card--small:last-child { border-bottom: none; }
.card--small .card-image-wrap {
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
}
.card--small .card-title {
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.card--small .card-excerpt { display: none; }
.card--small .card-footer { border-top: none; padding-top: 6px; }

/* Horizontal list card
   Layout: CSS grid con immagine che occupa entrambe le righe a sinistra.
   Precedentemente era flex-row: card-meta e card-title erano figli diretti
   dell'article, perciò finivano entrambi in fila accanto all'immagine invece
   di impillarsi verticalmente. Il grid risolve senza toccare il markup. */
.card--list {
  display: grid;
  grid-template-columns: clamp(100px, 14vw, 148px) 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(20px, 2.5vw, 32px);
  row-gap: 0;
  align-items: start;
  padding: clamp(24px, 3.5vh, 36px) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background 0.3s;
}

.card--list:last-child { border-bottom: none; }

/* Numero progressivo — fluttua sopra all'immagine in basso a sx */
.card--list .card-image-wrap {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: clamp(100px, 14vw, 148px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  margin-bottom: 0;
  align-self: stretch;
  overflow: hidden;
  position: relative;
}

.card--list .card-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card--list:hover .card-image-wrap img { transform: scale(1.06); }

/* Index number watermark in basso a sx sull'immagine */
.card--list .card-image-wrap::before {
  content: attr(data-index);
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  color: #faf7f2;
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* Scuro in basso sull'immagine per leggere il numero */
.card--list .card-image-wrap::after {
  background: linear-gradient(to top, rgba(10,8,6,0.55) 0%, transparent 45%);
  opacity: 1;
}

.card--list .card-meta {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.card--list .category-pill {
  border: none;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: transparent;
  border-radius: 0;
}
.card--list .category-pill:hover { background: transparent; opacity: 0.75; }

.card--list .post-date {
  font-size: 11px;
  color: var(--muted);
}

.card--list .card-title {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
  color: var(--fg);
  transition: color 0.25s;
}
.card--list .card-title a { color: inherit; }
.card--list:hover .card-title { color: var(--accent); }

.card--list .card-excerpt {
  grid-column: 2;
  grid-row: 3;
  display: block;
  font-size: 13px;
  line-height: 1.72;
  color: var(--muted);
  margin-bottom: 12px;
}

.card--list .card-footer {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--muted);
  text-transform: uppercase;
}

.card-footer-sep {
  opacity: 0.4;
  font-style: normal;
}

/* ── FEATURED GRID ── */
.featured-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: clamp(36px, 5.5vw, 80px);
  align-items: start;
  padding-bottom: clamp(40px, 6vh, 64px);
  border-bottom: 1px solid var(--border);
}

.card-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 3px solid var(--accent);
  padding-left: clamp(28px, 3vw, 48px);
}

/* ── POSTS GRID — card con bordo navy (coerente con homepage) ── */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  background: transparent;
  border: none;
  margin-bottom: clamp(40px, 6vh, 60px);
  counter-reset: article-num;
}

.posts-grid .card {
  background: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--accent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 52%, var(--bg));
  transition: transform 0.24s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.24s cubic-bezier(0.22,1,0.36,1);
  counter-increment: article-num;
}

.posts-grid .card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 62%, var(--bg));
  background: #fff;
}

.posts-grid .card .card-meta,
.posts-grid .card .card-title,
.posts-grid .card .card-excerpt,
.posts-grid .card .card-footer {
  padding-left: clamp(16px, 2vw, 24px);
  padding-right: clamp(16px, 2vw, 24px);
}

.posts-grid .card .card-meta  { padding-top: 16px; }
.posts-grid .card .card-footer { padding-bottom: 20px; }

/* Lead story: prima card a 2 colonne, layout orizzontale */
.posts-grid .card:first-child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 5fr 4fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 0;
  align-items: start;
}

.posts-grid .card:first-child .card-image-wrap {
  grid-column: 1;
  grid-row: 1 / -1;
  aspect-ratio: unset;
  height: 100%;
  min-height: 280px;
  margin-bottom: 0;
  align-self: stretch;
}

.posts-grid .card:first-child .card-meta {
  grid-column: 2;
  grid-row: 1;
}

.posts-grid .card:first-child .card-title {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}

.posts-grid .card:first-child .card-excerpt {
  grid-column: 2;
  grid-row: 3;
  display: block;
  font-size: 14px;
  line-height: 1.78;
}

.posts-grid .card:first-child .card-footer {
  grid-column: 2;
  grid-row: 4;
}

/* Numerazione accent — non sulla lead story */
.posts-grid .card:not(:first-child) .card-image-wrap {
  aspect-ratio: 16 / 10;
}

/* ── TWO-COL CONTENT+SIDEBAR ── */
.content-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(48px, 8vh, 80px);
}

/* ── PILLARS ROW ── */
.pillars-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0;
}

.pillar {
  padding: clamp(36px, 5.5vh, 64px) clamp(28px, 3vw, 44px) clamp(32px, 5vh, 56px);
  background: var(--bg);
  position: relative;
  overflow: hidden;
  transition: background 0.5s ease;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.pillar:last-child { border-right: none; }

/* Hover: leggero warmth sul fondo */
.pillar:hover { background: var(--surface); }

/* Overlay gradient accent al hover */
.pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.pillar:hover::after { opacity: 1; }

/* Barra accent top — sempre visibile a bassa opacità, piena al hover */
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0.18);
  transform-origin: left;
  opacity: 0.45;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity  0.5s ease;
}

.pillar:hover::before {
  transform: scaleX(1);
  opacity: 1;
}

/* Numero — decorativo, grande, posizionato in alto a destra */
.pillar-number {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(80px, 9vw, 128px);
  line-height: 0.9;
  color: var(--fg);
  opacity: 0.07;
  position: absolute;
  top: clamp(16px, 2.5vh, 28px);
  right: clamp(16px, 2vw, 28px);
  transition: opacity 0.5s ease, color 0.5s ease;
  user-select: none;
  pointer-events: none;
}

.pillar:hover .pillar-number {
  opacity: 0.16;
  color: var(--accent);
}

/* Spacer per il numero assoluto */
.pillar-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: clamp(20px, 3vh, 36px);
}

/* Label */
.pillar-label {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 18px;
  display: block;
  position: relative;
  transition: color 0.35s;
}

/* Sottile underline che si espande al hover */
.pillar-label::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  height: 1px;
  width: 24px;
  background: var(--accent);
  transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pillar:hover .pillar-label::after { width: 100%; }

.pillar-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.82;
  color: var(--fg);
  opacity: 0.58;
  flex: 1;
  margin-bottom: 28px;
  transition: opacity 0.35s;
}

.pillar:hover .pillar-desc { opacity: 0.78; }

/* Freccia — sempre visibile a bassa opacità, anima al hover */
.pillar-arrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.45;
  transform: translateX(0);
  transition: opacity 0.35s ease, transform 0.35s ease, letter-spacing 0.35s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  align-self: flex-start;
}

.pillar:hover .pillar-arrow {
  opacity: 1;
  transform: translateX(4px);
  letter-spacing: 0.14em;
}

/* ── MANIFESTO BLOCK ── */
.manifesto-block {
  background: var(--accent);
  padding: clamp(72px, 11vh, 128px) clamp(32px, 7vw, 100px);
  margin: 0 calc(-1 * clamp(24px, 5vw, 60px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  position: relative;
  overflow: hidden;
}

/* Gigantic decorative opening quote — purely atmospheric */
.manifesto-block::before {
  content: '\201C';
  position: absolute;
  top: -0.12em;
  left: clamp(24px, 6vw, 80px);
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(280px, 30vw, 520px);
  line-height: 1;
  color: rgba(250, 247, 242, 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.manifesto-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.65);
  position: relative;
  z-index: 1;
}

.manifesto-quote {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(30px, 4.8vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #faf7f2;
  max-width: 980px;
  position: relative;
  z-index: 1;
}

.manifesto-source {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.52);
  position: relative;
  z-index: 1;
}

/* CTA link inside manifesto block */
.manifesto-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.70);
  border-bottom: 1px solid rgba(250, 247, 242, 0.28);
  padding-bottom: 3px;
  margin-top: 8px;
  position: relative;
  z-index: 1;
  transition: color 0.25s, gap 0.25s, border-color 0.25s;
}

.manifesto-cta:hover {
  color: #faf7f2;
  border-color: rgba(250, 247, 242, 0.65);
  gap: 14px;
}

/* ── SIDEBAR ── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Separatore tra widget + respiro verticale */
.sidebar > * {
  padding-top: clamp(32px, 4vh, 48px);
  padding-bottom: clamp(32px, 4vh, 48px);
  border-bottom: 1px solid var(--border);
}

.sidebar > *:last-child { border-bottom: none; }
.sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.widget-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.widget-title::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

/* About widget */
.widget-about p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.78;
  color: var(--fg);
  opacity: 0.68;
  margin-bottom: 20px;
}

/* Statistiche compatte sotto il testo */
.about-stats {
  display: flex;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.about-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-stat-num {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
}

.about-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Link "Scopri chi siamo" */
.about-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  transition: color 0.2s, gap 0.2s;
}

.about-link:hover { color: var(--accent); gap: 10px; }

/* Newsletter widget */
.widget-newsletter.widget {
  border-bottom: 1px solid var(--border);
}

.newsletter-inner {
  display: flex;
  flex-direction: column;
}

.newsletter-widget-title {
  color: var(--fg);
}

.widget-newsletter p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg);
  opacity: 0.68;
  margin-bottom: 16px;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 13px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--fg);
  outline: none;
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.newsletter-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 121, 98, 0.15);
}

.newsletter-input::placeholder { color: var(--muted); }

.newsletter-btn {
  width: 100%;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #faf7f2;
  padding: 13px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.25s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.newsletter-btn:hover  { background: var(--accent-strong); }
.newsletter-btn:active { transform: scale(0.98); }

/* Categories widget */
.widget-categories ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.widget-categories li {
  border-bottom: 1px solid var(--border);
}

.widget-categories a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color 0.25s;
  position: relative;
}

/* Barra progress proporzionale al count — max presunto 20 articoli */
.widget-categories a::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  width: 100%;
  background: var(--border);
}

.widget-categories a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  width: calc(var(--cat-pct, 20) * 1%);
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.35s ease, width 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}

.widget-categories a:hover { color: var(--accent); }
.widget-categories a:hover::after { opacity: 1; }

.cat-count {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--muted);
  line-height: 1;
  transition: color 0.25s;
}

.widget-categories a:hover .cat-count { color: var(--accent); }

/* Recent posts widget */
.widget-recent-posts {}

/* Tags widget */
.widget-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.tag-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 50px;
  transition: color 0.2s, border-color 0.2s;
}

.tag-link:hover { color: var(--accent); border-color: var(--accent); }

/* ── SINGLE POST ── */
.single-header {
  padding: clamp(48px, 8vh, 100px) 0 clamp(24px, 4vh, 48px);
  max-width: 900px;
}

.single-eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(20px, 3vh, 36px);
}

.single-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(32px, 5.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: clamp(20px, 3vh, 36px);
  text-wrap: balance;
}

.author-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: clamp(20px, 3vh, 32px);
  border-bottom: 1px solid var(--border);
}

.author-byline strong { color: var(--fg); font-weight: 400; }

.author-byline::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.single-featured-image {
  width: 100%;
  margin-bottom: clamp(32px, 5vh, 64px);
}

.single-featured-image img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
  background: var(--surface);
  border: 2.5px solid var(--fp-navy);
  border-radius: var(--fp-radius);
  box-shadow: 8px 8px 0 var(--accent);
}

.single-featured-caption {
  margin-top: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ── ARTICLE BODY ── */
.entry-content {
  max-width: 720px;
  padding-bottom: clamp(48px, 8vh, 100px);
}

.entry-content p {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.9;
  margin-bottom: 1.6em;
  color: var(--fg);
  hyphens: auto;
  overflow-wrap: break-word;
}

.entry-content h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 2em 0 0.6em;
  color: var(--fg);
}

.entry-content h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 800;
  text-transform: uppercase;
  margin: 1.6em 0 0.5em;
  color: var(--fg);
}

.entry-content blockquote {
  border-left: 2px solid var(--accent);
  padding: 16px 0 16px 32px;
  margin: 2em 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--fg);
}

.entry-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content img { width: 100%; margin: 1.5em 0; }

.entry-content ul, .entry-content ol { padding-left: 1.5em; margin-bottom: 1.6em; }

.entry-content li {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.9;
  margin-bottom: 0.4em;
  color: var(--muted);
}

/* ── ARCHIVE PAGE ── */
.archive-header {
  padding: clamp(48px, 8vh, 100px) 0 clamp(24px, 4vh, 40px);
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(32px, 5vh, 60px);
}

.archive-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.archive-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--accent);
}

.archive-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ── STATIC PAGE ── */
.page-header {
  padding: clamp(48px, 8vh, 100px) 0 clamp(24px, 4vh, 48px);
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(32px, 5vh, 60px);
}

.page-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ── 404 ── */
.not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 60vh;
  padding: clamp(48px, 10vh, 100px) 0;
}

.not-found-number {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: clamp(80px, 20vw, 200px);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--border);
  margin-bottom: 16px;
  display: block;
}

.not-found-msg {
  font-family: 'Fraunces', serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  color: var(--fg);
  margin-bottom: 32px;
}

/* ── SITE FOOTER ── */
.site-footer {
  background: var(--bg);
  color: var(--fg);
  border-top: none;
  margin-top: 0;
  /* Padding diretto: funziona sia dentro page-wrap paddato (inner pages)
     che in homepage dove page-wrap ha padding:0 */
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}

/* Striscia arancione superiore — connette il footer al contenuto sopra */
.site-footer::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--accent);
  margin-left: calc(-1 * clamp(20px, 4vw, 56px));
  margin-right: calc(-1 * clamp(20px, 4vw, 56px));
  margin-bottom: 0;
}

/* Sulle pagine interne il page-wrap ha già padding: evita doppio margine */
body:not(.home) .site-footer {
  padding-left: 0;
  padding-right: 0;
}
body:not(.home) .site-footer::before {
  margin-left: calc(-1 * clamp(20px, 4vw, 56px));
  margin-right: calc(-1 * clamp(20px, 4vw, 56px));
}

/* [rimosso: ::before ridefinita sopra] */

/* Footer editorial: chiaro, pieno in larghezza, senza box pesanti */
.site-footer {
  width: 100vw;
  max-width: none;
  margin-top: clamp(28px, 5vh, 56px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 clamp(24px, 5vw, 64px);
  background: var(--bg);
  border-top: 1px solid var(--border);
  transform: none;
}

body:not(.home) .site-footer {
  margin-top: clamp(20px, 3vh, 34px);
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}

.site-footer::before,
body:not(.home) .site-footer::before {
  height: 3px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  background: var(--accent);
}

/* Minimal footer inspired by the launch reference */
.site-footer.site-footer--minimal,
body:not(.home) .site-footer.site-footer--minimal {
  width: 100vw;
  max-width: none;
  margin: clamp(34px, 6vh, 72px) calc(50% - 50vw) 0;
  padding: clamp(76px, 9vw, 126px) clamp(24px, 6vw, 72px) clamp(68px, 8vw, 104px);
  background: color-mix(in srgb, var(--fp-sand) 72%, #fff);
  color: #2a2420;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fp-navy) 10%, transparent);
}

.site-footer.site-footer--minimal::before,
body:not(.home) .site-footer.site-footer--minimal::before {
  display: none;
}

.footer-minimal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3vw, 36px);
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.footer-minimal-brand {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(34px, 5.8vw, 78px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2a2420;
  text-decoration: none;
  transform: scaleX(1.18);
  transform-origin: center;
  transition: opacity 0.2s ease;
}

.footer-minimal-brand:hover {
  color: var(--accent-strong);
  opacity: 0.82;
}

.footer-minimal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(22px, 3.2vw, 44px);
}

.footer-minimal-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, #2a2420 88%, var(--muted));
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-minimal-links a:hover {
  color: var(--accent);
}

.footer-minimal-copy {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.8;
  text-transform: uppercase;
  color: color-mix(in srgb, #2a2420 42%, var(--muted));
}

.footer-minimal-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.footer-minimal-legal a {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, #2a2420 55%, var(--muted));
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-minimal-legal a:hover {
  color: var(--accent);
}

@media (max-width: 640px) {
  .site-footer.site-footer--minimal,
  body:not(.home) .site-footer.site-footer--minimal {
    padding-top: 62px;
    padding-bottom: 58px;
  }

  .footer-minimal-brand {
    font-size: clamp(30px, 11vw, 48px);
    line-height: 0.94;
    transform: scaleX(1.04);
  }

  .footer-minimal-links {
    gap: 18px 24px;
  }

  .footer-minimal-copy {
    max-width: 280px;
  }
}


/* ── PAGINATION ── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: clamp(24px, 4vh, 48px) 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.page-numbers:hover { color: var(--fg); border-color: var(--fg); }

.page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* Empty-state message (no articles found) */
.no-posts {
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  padding: clamp(32px, 6vh, 64px) 0;
}

/* Optional intro copy on static pages (page-contatti, page templates) */
.page-content {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.8;
  color: var(--fg);
  max-width: 720px;
  margin-bottom: clamp(32px, 5vh, 56px);
}

/* ── GUTENBERG: alignment support ── */
.alignwide  { margin-left: calc(-1 * clamp(24px, 5vw, 60px)); margin-right: calc(-1 * clamp(24px, 5vw, 60px)); }
.alignfull  { margin-left: calc(-1 * clamp(24px, 5vw, 60px)); margin-right: calc(-1 * clamp(24px, 5vw, 60px)); width: auto; }
.alignleft  { float: left; margin-right: 1.5em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1em; }
.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }

/* Gutenberg: block gap normalization */
.entry-content .wp-block-image img { max-width: 100%; height: auto; }
.entry-content .wp-block-quote {
  border-left: 2px solid var(--accent);
  padding: 16px 0 16px 32px;
  margin: 2em 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.4;
}
.entry-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5em auto;
  max-width: 120px;
}

/* ── CUSTOM CURSOR (pointer devices only) ── */
@media (hover: hover) and (pointer: fine) {
  body, a, button, [role="button"] { cursor: none; }
}

.cursor,
.cursor-ring {
  position: fixed;
  left: 0; top: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cursor, .cursor-ring { display: block; }
}

.cursor {
  width: 8px;
  height: 8px;
  background: var(--accent);
  transition: width 0.18s ease, height 0.18s ease;
}

.cursor-ring {
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent);
  z-index: 9998;
  opacity: 0.38;
  transition: width 0.24s ease, height 0.24s ease, opacity 0.24s ease;
}

.cursor.expand     { width: 5px; height: 5px; }
.cursor-ring.expand { width: 48px; height: 48px; opacity: 0.14; }

/* ── PAGE LOAD PROGRESS BAR ── */
#tad-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 9990;
  transition: opacity 0.5s ease;
}

/* ── TAG TICKER ── */
.tag-ticker {
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--fp-navy) 18%, var(--fp-cream));
  border-bottom: 1px solid color-mix(in srgb, var(--fp-navy) 18%, var(--fp-cream));
  padding: 14px 0;
  margin-bottom: 0;
  background: color-mix(in srgb, var(--fp-sand) 58%, #fff);
}

.tag-ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}

/* Pause on hover — allows reading a tag before clicking */
.tag-ticker:hover .tag-ticker-track { animation-play-state: paused; }

.tag-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
}

.tag-ticker-item a,
.tag-ticker-text {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(15px, 1.25vw, 18px);
  letter-spacing: 0.07em;
  color: color-mix(in srgb, var(--fp-navy) 78%, var(--muted));
  text-decoration: none;
  transition: color 0.2s;
}

.tag-ticker-item a:hover { color: var(--accent); }

.tag-ticker-sep {
  font-size: 10px;
  color: var(--accent);
  opacity: 0.82;
  line-height: 1;
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── PER-LINE HEADLINE REVEAL ── */
.hero-headline .hl-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hero-headline .hl-text {
  display: block;
  transform: translateY(110%);
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-headline .hl-line:nth-child(1) .hl-text { animation-delay: 0.28s; }
.hero-headline .hl-line:nth-child(2) .hl-text { animation-delay: 0.46s; }
.hero-headline .hl-line:nth-child(3) .hl-text { animation-delay: 0.64s; }

@keyframes slideUp {
  to { transform: translateY(0); }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate,
  .hero-headline .hl-text {
    opacity: 1 !important;
    transform: none !important;
  }
  .tag-ticker-track { animation: none; }
}

/* ── ANIMATIONS ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate { opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.7s; }
.delay-6 { animation-delay: 0.85s; }

/* ── PAGE HERO (Chi Siamo, Contatti, pagine generiche) ── */
.page-hero {
  padding: clamp(56px, 9vh, 120px) 0 clamp(40px, 6vh, 72px);
  border-bottom: 1px solid var(--border);
  max-width: 900px;
}

.page-hero .hero-eyebrow {
  margin-bottom: clamp(16px, 2vh, 24px);
}

.page-hero-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 100px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--fg);
}

.page-hero-title em {
  font-style: italic;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
}

.page-divider {
  height: 1px;
  background: var(--border);
  margin: clamp(40px, 6vh, 72px) 0;
}

/* ── CHI SIAMO ── */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  padding: clamp(48px, 7vh, 88px) 0 0;
}

.about-intro-text p {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.82;
  color: var(--fg);
  opacity: 0.78;
  margin-bottom: 1.4em;
}

.about-intro-text p:last-child { margin-bottom: 0; }

.about-intro-aside {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: clamp(24px, 3vw, 40px);
  border-left: 2px solid var(--accent);
  align-self: start;
  position: sticky;
  top: 80px;
}

.about-founded-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 24px;
}

.about-founded-label:first-child { margin-top: 0; }

.about-founded-year {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.04em;
  color: var(--fg);
  line-height: 1;
}

/* About manifesto grid */
.about-manifesto {
  padding: clamp(48px, 7vh, 88px) 0 0;
}

.about-manifesto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: 0;
}

.about-pillar {
  padding: clamp(24px, 3vh, 36px);
  background: #fff;
  border: 2px solid var(--fg);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--fg);
  position: relative;
  overflow: hidden;
  transition: transform 0.24s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.24s cubic-bezier(0.22,1,0.36,1);
}

.about-pillar:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--fg);
}

.about-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 4px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.about-pillar:hover::before { width: 100%; }

.about-pillar-num {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
  display: block;
  margin-bottom: 16px;
}

.about-pillar-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}

.about-pillar p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: var(--fg);
  opacity: 0.65;
}

/* Chi Siamo — hero in stile homepage (banda arancione) */
.about-page .page-hero {
  max-width: none;
  margin-top: clamp(28px, 4vh, 52px);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 72px);
  background: var(--fp-orange);
  color: #fff;
  border: 2.5px solid var(--fp-navy);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--fp-navy);
  overflow: hidden;
  position: relative;
}

.about-page .page-hero::before {
  content: '';
  position: absolute;
  top: -18%;
  right: -6%;
  width: clamp(220px, 30vw, 460px);
  aspect-ratio: 1;
  background: var(--fp-yellow);
  border-radius: 50%;
  opacity: 0.18;
  pointer-events: none;
  animation: hero-shape-drift 14s ease-in-out infinite;
}

.about-page .page-hero::after {
  content: '';
  position: absolute;
  right: clamp(-80px, -5vw, -32px);
  bottom: clamp(-90px, -7vw, -42px);
  width: clamp(160px, 22vw, 360px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  pointer-events: none;
  animation: hero-shape-drift-alt 18s ease-in-out infinite;
}

.about-page .page-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.30);
  padding: 8px 16px;
  border-radius: 50px;
  margin-bottom: clamp(18px, 2.6vh, 30px);
}

.about-page .page-hero-title {
  max-width: 980px;
  font-size: clamp(40px, 7vw, 100px);
  color: #fff;
  position: relative;
  z-index: 1;
}

.about-page .page-hero-title em {
  color: var(--fp-yellow);
  -webkit-text-stroke: 0;
  opacity: 1;
}

.page-hero-deck {
  max-width: 720px;
  margin-top: clamp(22px, 3vh, 34px);
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.75;
  color: var(--fg);
  opacity: 0.72;
}

/* Movimento lento dei cerchi decorativi negli hero */
@keyframes hero-shape-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-4%, 6%) scale(1.06); }
  66%      { transform: translate(3%, -4%) scale(0.97); }
}

@keyframes hero-shape-drift-alt {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(5%, -6%) scale(1.08); }
  70%      { transform: translate(-3%, 3%) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .page-hero::before,
  .about-page .page-hero::after,
  .contact-page .page-hero::before,
  .contact-page .page-hero::after,
  .fp-hero::before,
  .fp-hero::after {
    animation: none;
  }
}

.about-page .page-hero-deck,
.contact-page .page-hero-deck {
  color: #fff;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

.about-editorial-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(28px, 4vh, 48px);
  border: 2px solid var(--fg);
  border-radius: 16px;
  background: #fff;
  box-shadow: 6px 6px 0 var(--accent);
  overflow: hidden;
}

.about-strip-item {
  padding: clamp(24px, 3vw, 38px);
  border-right: 1px solid var(--border);
  position: relative;
}

.about-strip-item:last-child { border-right: 0; }

.about-strip-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.about-strip-item strong {
  display: block;
  margin-bottom: 12px;
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.about-strip-item p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
  opacity: 0.66;
}

.about-page .about-intro {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  padding: clamp(34px, 5vh, 64px) 0 0;
}

.about-page .about-intro-text {
  background: #fff;
  border: 2px solid var(--fg);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--accent);
  padding: clamp(28px, 4vw, 54px);
}

.about-page .about-intro-text p {
  opacity: 0.76;
  max-width: 760px;
}

.about-page .about-intro-text p:first-child {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  opacity: 1;
}

.about-page .about-intro-aside {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-left: 0;
  border-left: 0;
}

.about-page .about-founded-label,
.about-page .about-founded-year {
  margin: 0;
}

.about-page .about-founded-label {
  align-self: end;
  color: var(--accent);
}

.about-page .about-founded-year {
  font-size: clamp(46px, 6vw, 76px);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--fg);
}

.about-page .page-divider {
  height: 5px;
  background: var(--accent);
  margin: clamp(40px, 6vh, 72px) 0 0;
}

.about-page .about-manifesto {
  padding: clamp(34px, 5vh, 64px) 0 clamp(54px, 7vh, 88px);
}

.about-page .about-section-label {
  display: inline-flex;
  margin-bottom: clamp(24px, 3vh, 40px);
  color: var(--accent);
}

.about-page .about-manifesto-grid {
  gap: clamp(18px, 2.4vw, 34px);
}

.about-page .about-pillar {
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--accent);
}

.about-page .about-pillar:hover {
  box-shadow: 8px 8px 0 var(--accent);
}

.about-page .about-pillar-num {
  color: var(--fg);
  opacity: 1;
  font-size: clamp(42px, 5vw, 68px);
}

.about-page .about-pillar-title {
  font-size: clamp(22px, 2.2vw, 32px);
}

.about-page .about-pillar p {
  font-size: 15px;
  opacity: 0.72;
}

/* ── CONTATTI ── */
.contact-page .page-hero {
  max-width: none;
  margin-top: clamp(28px, 4vh, 52px);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 72px);
  background: var(--fp-orange);
  color: #fff;
  border: 2.5px solid var(--fp-navy);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--fp-navy);
  overflow: hidden;
  position: relative;
}

.contact-page .page-hero::before {
  content: '';
  position: absolute;
  top: -18%;
  right: -6%;
  width: clamp(220px, 30vw, 460px);
  aspect-ratio: 1;
  background: var(--fp-yellow);
  border-radius: 50%;
  opacity: 0.18;
  pointer-events: none;
  animation: hero-shape-drift 14s ease-in-out infinite;
}

.contact-page .page-hero::after {
  content: '';
  position: absolute;
  right: clamp(22px, 5vw, 80px);
  bottom: clamp(-80px, -6vw, -36px);
  width: clamp(170px, 22vw, 360px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  pointer-events: none;
  animation: hero-shape-drift-alt 18s ease-in-out infinite;
}

.contact-page .page-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.30);
  padding: 8px 16px;
  border-radius: 50px;
}
.contact-page .page-hero-title { max-width: 960px; color: #fff; position: relative; z-index: 1; }
.contact-page .page-hero-title em { color: var(--fp-yellow); -webkit-text-stroke: 0; opacity: 1; }

.contact-page-content {
  margin-top: clamp(30px, 5vh, 58px);
  max-width: 780px;
}

.contact-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(30px, 5vh, 58px);
}

.contact-path-card {
  min-height: 230px;
  padding: clamp(24px, 3vw, 36px);
  background: #fff;
  border: 2px solid var(--fg);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--accent);
  display: flex;
  flex-direction: column;
}

.contact-path-num {
  margin-bottom: auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.contact-path-card h2 {
  margin: 28px 0 12px;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.contact-path-card p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.68;
  color: var(--fg);
  opacity: 0.68;
}

/* Pannello contatti unificato */
.contact-panel {
  margin: clamp(30px, 5vh, 58px) 0 clamp(48px, 7vh, 80px);
  background: #fff;
  border: 2px solid var(--fg);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--accent);
  overflow: hidden;
}

.contact-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}

.contact-panel-grid .contact-info-block {
  padding: clamp(26px, 3.5vw, 42px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-panel-grid .contact-info-block:last-child { border-right: 0; }

.contact-panel-note {
  margin: 0;
  padding: clamp(16px, 2.4vh, 24px) clamp(26px, 3.5vw, 42px);
  border-top: 1px solid var(--border);
  background: var(--fp-cream);
}

.contact-panel-note p {
  margin: 0 0 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg);
  opacity: 0.68;
}

.contact-panel-note p:last-child { margin-bottom: 0; }

/* Info column */
.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-info-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-info-value {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  color: var(--fg);
  transition: color 0.2s;
}

.contact-info-value:hover { color: var(--accent); }

.contact-socials {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-social-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.contact-social-link:hover { color: var(--accent); border-color: var(--accent); }

/* ── PAGE TITLE (generico) ── */

/* ── PAGE TITLE (generico) ── */
.page-header {
  padding: clamp(48px, 8vh, 100px) 0 clamp(24px, 4vh, 48px);
  border-bottom: 1px solid var(--border);
}

.page-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(32px, 5.5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-feature { display: none; }
  .featured-grid { grid-template-columns: 1fr; }
  .card-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 32px; }
  .pillars-row { grid-template-columns: 1fr 1fr; }
  .pillars-row .pillar:nth-child(even) { border-right: none; }
  .pillars-row .pillar:nth-child(odd):not(:last-child) { border-right: 1px solid var(--border); }
  .content-sidebar { grid-template-columns: 1fr; }
  .about-intro { grid-template-columns: 1fr; }
  .about-intro-aside { position: static; border-left: none; border-top: 2px solid var(--accent); padding-left: 0; padding-top: 24px; flex-direction: row; flex-wrap: wrap; gap: 24px; }
  .about-editorial-strip { grid-template-columns: 1fr; }
  .about-strip-item { border-right: 0; border-bottom: 1px solid var(--border); }
  .about-strip-item:last-child { border-bottom: 0; }
  .contact-paths { grid-template-columns: 1fr; }
  .contact-panel-grid { grid-template-columns: 1fr; }
  .contact-panel-grid .contact-info-block { border-right: 0; border-bottom: 1px solid var(--border); }
  .contact-panel-grid .contact-info-block:last-child { border-bottom: 0; }
}

@media (max-width: 768px) {
  .posts-grid {
    grid-template-columns: 1fr 1fr;
    background: var(--bg);
    border: none;
    gap: clamp(20px, 3vw, 32px);
  }
  .posts-grid .card {
    padding: 0;
    background: var(--bg);
  }
  /* Lead story: torna a layout verticale su tablet */
  .posts-grid .card:first-child {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
  }
  .posts-grid .card:first-child .card-image-wrap {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: unset;
    margin-bottom: 16px;
  }
  .hamburger { display: flex; }
  .primary-nav { display: none; }
  .header-center { display: none; }
  .manifesto-block { margin: 0 -24px; }
  .about-manifesto-grid { grid-template-columns: 1fr; }
  .about-page .page-hero { padding: clamp(34px, 7vw, 56px) clamp(22px, 5vw, 36px); }
  .about-page .about-intro { grid-template-columns: 1fr; }
  .about-page .about-intro-aside { grid-template-columns: 1fr 1fr; }
  .about-page .about-manifesto-grid { grid-template-columns: 1fr; }
  .contact-page .page-hero { padding: clamp(34px, 7vw, 56px) clamp(22px, 5vw, 36px); }
  .contact-path-card { min-height: 0; }
}

@media (max-width: 520px) {
  .posts-grid { grid-template-columns: 1fr; }
  .posts-grid .card:first-child { grid-column: span 1; }
  .pillars-row { grid-template-columns: 1fr; }
  .pillars-row .pillar { border-right: none; }
  .card-stack { grid-template-columns: 1fr; gap: 0; }
  .site-footer { padding-left: 20px; padding-right: 20px; }
  .about-page .about-intro-aside { grid-template-columns: 1fr; }
  .about-page .about-founded-year { font-size: clamp(40px, 14vw, 62px); }
  .page-hero-deck { font-size: 15px; line-height: 1.62; }
  .about-editorial-strip,
  .contact-path-card { border-radius: 12px; }
}

/* ══════════════════════════════════════════════════════════
   ENHANCED UI — v3.1 additions
   Scroll-reveal, magnetic buttons, spotlight section,
   ToC sidebar, drop cap, animated counters, text-reveal
   ══════════════════════════════════════════════════════════ */

/* ── SCROLL REVEAL — intersection observer driven ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.is-visible { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.is-visible { opacity: 1; transform: none; }

/* Stagger delays for children */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children > *:nth-child(6) { transition-delay: 400ms; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── HERO HEADLINE — text reveal line by line ── */
.hl-line {
  display: block;
  overflow: hidden;
}
.hl-text {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero.is-loaded .hl-text { transform: translateY(0); }
.hero.is-loaded .hero-line-2 { transition-delay: 0.1s; }
.hero.is-loaded .hero-line-3 { transition-delay: 0.2s; }
.hero.is-loaded .hero-eyebrow,
.hero.is-loaded .hero-meta,
.hero.is-loaded .hero-subtext,
.hero.is-loaded .hero-cta-wrap {
  opacity: 1;
  transform: translateY(0);
}
.hero-eyebrow,
.hero-meta,
.hero-subtext,
.hero-cta-wrap {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.hero-eyebrow   { transition-delay: 0.55s; }
.hero-meta      { transition-delay: 0.65s; }
.hero-subtext   { transition-delay: 0.75s; }
.hero-cta-wrap  { transition-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) {
  .hl-text { transform: none; }
  .hero-eyebrow, .hero-meta, .hero-subtext, .hero-cta-wrap { opacity: 1; transform: none; }
}

/* ── MAGNETIC BUTTON ── */
.read-more,
.manifesto-cta,
.newsletter-btn {
  will-change: transform;
}
/* The actual magnetic offset is applied via JS inline style */

/* ── SCROLL PROGRESS BAR — refined ── */
#tad-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(to right, var(--accent), var(--accent2));
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* ── CUSTOM CURSOR — refined ── */
.cursor {
  position: fixed;
  left: 0; top: 0;           /* posizione gestita via JS transform */
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  will-change: transform;    /* hint al browser: layer compositor dedicato */
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease;
  mix-blend-mode: normal;
}
.cursor-ring {
  position: fixed;
  left: 0; top: 0;           /* posizione gestita via JS transform */
  width: 36px; height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  will-change: transform;    /* hint al browser: layer compositor dedicato */
  opacity: 0.5;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              border-color 0.3s ease;
}
.cursor.expand     { width: 0; height: 0; background: transparent; }
.cursor-ring.expand { width: 56px; height: 56px; opacity: 0.28; border-color: var(--accent); }

/* ── SPOTLIGHT SECTION ── */
.spotlight-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  margin-bottom: 0;
  overflow: hidden;
}

.spotlight-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}

.spotlight-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.spotlight-section:hover .spotlight-visual img { transform: scale(1.04); }

.spotlight-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(224,92,58,0.35) 100%);
  pointer-events: none;
}

.spotlight-tag {
  position: absolute;
  top: 28px; left: 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #faf7f2;
  background: var(--accent);
  padding: 6px 14px;
  border-radius: 50px;
}

.spotlight-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 80px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  position: relative;
}

.spotlight-content::before {
  content: '"';
  font-family: 'Fraunces', serif;
  font-size: clamp(120px, 14vw, 200px);
  font-style: italic;
  font-weight: 300;
  line-height: 0.7;
  color: var(--accent);
  opacity: 0.1;
  position: absolute;
  top: 32px; left: 36px;
  pointer-events: none;
  user-select: none;
}

.spotlight-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.spotlight-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.spotlight-quote {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 32px;
}

.spotlight-author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.spotlight-author-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}

.spotlight-author-role {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.spotlight-author-sep { width: 1px; height: 28px; background: var(--border); }

.spotlight-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.25s, gap 0.25s;
}
.spotlight-link:hover { color: var(--accent); gap: 16px; }

@media (max-width: 900px) {
  .spotlight-section { grid-template-columns: 1fr; }
  .spotlight-visual { aspect-ratio: 16 / 9; }
  .spotlight-content { border-left: none; border-top: 1px solid var(--border); }
}

/* ── NUMBERS BAND — animated stat counters ── */
.numbers-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-top: none;
  overflow: hidden;
}

.number-cell {
  padding: clamp(32px, 5vh, 56px) clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.number-cell:last-child { border-right: none; }

.number-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.number-cell.is-visible::before { transform: scaleX(1); }

.number-value {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.number-suffix {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.5em;
  color: var(--accent);
}
.number-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 768px) {
  .numbers-band { grid-template-columns: 1fr 1fr; }
  .number-cell:nth-child(2) { border-right: none; }
  .number-cell:nth-child(3) { border-top: 1px solid var(--border); }
  .number-cell:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
}
@media (max-width: 480px) {
  .numbers-band { grid-template-columns: 1fr; }
  .number-cell { border-right: none; border-top: 1px solid var(--border); }
  .number-cell:first-child { border-top: none; }
}

/* ── TABLE OF CONTENTS (single post) ── */
.single-layout {
  display: grid;
  grid-template-columns: 1fr clamp(200px, 18vw, 260px);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
  position: relative;
}

.toc-sidebar {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: clamp(32px, 4vh, 48px);
}

.toc-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.toc-title::before {
  content: '';
  width: 20px; height: 1.5px;
  background: var(--accent);
  flex-shrink: 0;
}

.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--border);
}

.toc-list li a {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--fg);
  opacity: 0.72;
  padding: 9px 0 9px 16px;
  border-left: 2px solid transparent;
  margin-left: -1.5px;
  transition: color 0.22s, border-color 0.22s, opacity 0.22s;
  text-decoration: none;
}
.toc-list li a:hover,
.toc-list li.is-active a {
  color: var(--fg);
  opacity: 1;
  border-left-color: var(--accent);
}
.toc-list li.is-active a { font-weight: 600; }

@media (max-width: 1024px) {
  .single-layout { grid-template-columns: 1fr; }
  .toc-sidebar { display: none; }
}

/* Contenuto articolo — flusso editoriale libero, senza box */
.single-layout .entry-content {
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* ── DROP CAP ── */
.entry-content.has-drop-cap > p:first-of-type::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 5.2em;
  line-height: 0.78;
  float: left;
  margin: 0.06em 0.1em 0 0;
  color: var(--accent);
  text-transform: uppercase;
}

/* ── PULL QUOTE ── */
.entry-content .wp-block-pullquote,
.entry-content .pullquote {
  border: none;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
  margin: 2.5em 0;
  padding: 28px 0;
  text-align: left;
}
.entry-content .wp-block-pullquote p,
.entry-content .pullquote p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.3;
  color: var(--fg);
  margin-bottom: 0;
}

/* ── ARTICLE SHARE STRIP (single) ── */
.share-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 2.4vh, 24px) 0;
  margin: clamp(32px, 5vh, 56px) 0;
  flex-wrap: wrap;
}
.share-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-right: 8px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  border: 1.5px solid var(--fg);
  padding: 8px 16px;
  border-radius: 50px;
  cursor: pointer;
  background: none;
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s;
  text-decoration: none;
}
.share-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7f2;
  transform: translateY(-1px);
}
.share-btn svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

/* ── READING PROGRESS INLINE ── */
.reading-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.reading-progress-track {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.reading-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.1s linear;
  border-radius: 2px;
}

/* ── HORIZONTAL SCROLL TRACK — mobile cards ── */
.scroll-track-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 calc(-1 * clamp(24px, 5vw, 60px));
  padding: 0 clamp(24px, 5vw, 60px);
}
.scroll-track-wrap::-webkit-scrollbar { display: none; }

.scroll-track {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  padding-bottom: 20px;
}
.scroll-track .card {
  flex: 0 0 clamp(260px, 32vw, 360px);
}

/* ── FOOTER ENHANCED ── */
.footer-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* ── HOVER IMAGE REVEAL (nav items) ── */
.primary-nav li {
  position: relative;
}

/* ── SECTION NUMBER — decorative aside label ── */
.section-num {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(80px, 10vw, 140px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--border);
  user-select: none;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}

/* ── ANIMATED UNDERLINE LINKS ── */
.underline-grow {
  position: relative;
  display: inline;
}
.underline-grow::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0%; height: 1px;
  background: var(--accent);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.underline-grow:hover::after { width: 100%; }

/* ── FILTER BAR (archive) ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: clamp(20px, 3vh, 28px) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(32px, 5vh, 52px);
}
.filter-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 7px 16px;
  border-radius: 50px;
  cursor: pointer;
  background: none;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
  text-decoration: none;
}
.filter-pill:hover,
.filter-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7f2;
}

/* ── GLITCH EFFECT — easter egg on logo ── */
@keyframes glitch-clip-1 {
  0%, 100% { clip-path: inset(0 0 85% 0); transform: translate(-3px, 0); }
  20%  { clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); }
  40%  { clip-path: inset(25% 0 50% 0); transform: translate(-2px, 0); }
  60%  { clip-path: inset(75% 0 5%  0); transform: translate(2px, 0); }
  80%  { clip-path: inset(15% 0 65% 0); transform: translate(-3px, 0); }
}
@keyframes glitch-clip-2 {
  0%, 100% { clip-path: inset(45% 0 30% 0); transform: translate(3px, 0); }
  20%  { clip-path: inset(10% 0 70% 0); transform: translate(-3px, 0); }
  40%  { clip-path: inset(80% 0 5%  0); transform: translate(2px, 0); }
  60%  { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 0); }
  80%  { clip-path: inset(5%  0 85% 0); transform: translate(3px, 0); }
}

.site-logo {
  position: relative;
}

.site-logo::before,
.site-logo::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  color: var(--accent);
  background: var(--bg);
  pointer-events: none;
  opacity: 0;
}
.site-logo:hover::before {
  opacity: 0.7;
  animation: glitch-clip-1 0.4s steps(1) forwards;
}
.site-logo:hover::after {
  opacity: 0.5;
  animation: glitch-clip-2 0.4s steps(1) 0.04s forwards;
  color: var(--accent2);
}

/* ── MARQUEE ENHANCED ── */
.tag-ticker {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  position: relative;
}
.tag-ticker::before,
.tag-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 6vw, 80px);
  z-index: 2;
  pointer-events: none;
}
.tag-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.tag-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

/* ── MOBILE NAV — slide in from right ── */
.mobile-nav {
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-nav:not([hidden]) {
  transform: translateX(0);
}
/* Keep hidden attribute working */
.mobile-nav[hidden] {
  display: flex !important; /* override default hidden so transition works */
  visibility: hidden;
  pointer-events: none;
}
.mobile-nav:not([hidden]) {
  visibility: visible;
  pointer-events: auto;
}

/* Elementor full-width front page */
.elementor-front-main {
  padding: 0;
  max-width: none;
  width: 100%;
}

/* ── ELEMENTOR COMPATIBILITY ── */

/*
 * Su pagine costruite con Elementor, il plugin gestisce il titolo
 * tramite widget heading propri — nasconde il .page-header del tema
 * per evitare duplicazioni.
 */
.elementor-page .page-header { display: none; }

/*
 * Lascia che Elementor controlli larghezza e padding del contenuto.
 * Il wrapper .entry-content non deve limitare le sezioni Elementor.
 */
.elementor-page .entry-content {
  padding: 0;
  max-width: none;
}

/*
 * "Stretch Section" di Elementor: le sezioni estese al viewport devono
 * uscire dal contenitore .page-wrap. Elementor calcola left/right via JS;
 * overflow: visible garantisce che non vengano tagliate.
 */
.elementor-page .page-wrap { overflow: visible; }

.elementor-section.elementor-section-stretched {
  left: 0 !important;
  right: 0 !important;
  max-width: none !important;
}

/*
 * Template "Elementor Full Width": rimuove il padding laterale di
 * .page-wrap in modo che le sezioni raggiungano i bordi del viewport.
 */
.elementor-template-full-width .page-wrap,
.elementor-template-full-width main {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/*
 * Impedisce che la font-family del tema sovrascriva il font scelto
 * dall'utente nel widget Heading di Elementor.
 */
.elementor-widget-heading .elementor-heading-title { font-family: inherit; }

/*
 * Nella modalità editor di Elementor, abbassa lo z-index dello
 * sticky site-header in modo che non copra la toolbar del builder.
 */
.elementor-editor-active .site-header { z-index: 90; }

/* ── PRINT ── */
@media print {
  body::before,
  #bg-canvas,
  .skip-to-content,
  .site-header,
  .hamburger,
  .mobile-nav,
  .sidebar,
  .site-footer { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
    line-height: 1.6;
  }

  a { color: #000; text-decoration: underline; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  a[href^='#']::after,
  a[href^='javascript:']::after { content: ''; } /* suppress anchors and JS */

  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 100% !important; page-break-inside: avoid; }

  .entry-content { max-width: 100%; }
}


/* ══════════════════════════════════════════════════════════


/* ══════════════════════════════════════════════════════════
   HOMEPAGE POP v5.0 — Ispirazione CodiceVisibile
   Palette chiara · Arancione accent · Card con bordo navy
   NO dark mode · Box-in-box fix
   ══════════════════════════════════════════════════════════ */

/* ── FIX BOX-IN-BOX: sulla homepage il page-wrap non vincola ── */
.home .page-wrap {
  padding: 0;
  max-width: none;
  width: 100%;
}

/* l'header deve mantenere il suo padding interno */
.home .site-header {
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

/* forza tema chiaro — no dark mode */
/* (variabili già consolidate nel :root principale) */

/* ── HOMEPAGE WRAPPER ── */
.fp-main {
  overflow-x: hidden;
  background: var(--fp-cream);
}

/* ── INNER PAGE-WRAP per sezioni chiare ── */
.fp-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* ══ HERO: sfondo arancio, testo bianco ═══════════════════ */
.fp-hero {
  background: var(--fp-orange);
  color: #fff;
  padding: clamp(56px, 8vw, 100px) 0 0;
  position: relative;
  overflow: hidden;
}

/* cerchi decorativi tipo CodiceVisibile */
.fp-hero::before,
.fp-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.18;
}
.fp-hero::before {
  width: clamp(300px, 40vw, 560px);
  height: clamp(300px, 40vw, 560px);
  background: var(--fp-yellow);
  top: -15%;
  right: -8%;
  animation: hero-shape-drift 14s ease-in-out infinite;
}
.fp-hero::after {
  width: clamp(160px, 22vw, 300px);
  height: clamp(160px, 22vw, 300px);
  background: #fff;
  bottom: 5%;
  left: 2%;
  animation: hero-shape-drift-alt 18s ease-in-out infinite;
}

.fp-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) clamp(56px, 7vw, 88px);
}

/* Badge eyebrow */
.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.30);
  padding: 8px 16px;
  border-radius: 50px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.fp-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--fp-yellow);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* Headline: bianca, mix pieno / outline */
.fp-hed {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-size: clamp(64px, 11vw, 148px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(28px, 3.5vw, 48px);
}

.fp-hed-line { display: block; }

.fp-hed-fill {
  font-weight: 900;
  color: #fff;
}

.fp-hed-outline {
  font-weight: 900;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  opacity: 0.65;
}

.fp-hed-accent {
  font-weight: 900;
  color: var(--fp-yellow);
}

.fp-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.80;
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  max-width: 440px;
  margin-bottom: clamp(32px, 4vw, 52px);
}

/* CTA: pill bianco su orange */
.fp-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--fp-orange);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 50px;
  border: 2px solid #fff;
  transition: background 0.22s, color 0.22s, transform 0.15s;
}

.fp-hero-cta:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-2px);
}

/* Cover articolo hero (destra) — card con bordo navy */
.fp-hero-cover {
  position: relative;
  display: block;
  border-radius: var(--fp-radius);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 3 / 4;
  border: 2.5px solid var(--fp-navy);
  box-shadow: 6px 6px 0 var(--fp-navy);
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.28s cubic-bezier(0.22,1,0.36,1);
}

.fp-hero-cover:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--fp-navy);
}

.fp-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}

.fp-hero-cover:hover img { transform: scale(1.04); }

.fp-hero-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,23,20,0.80) 0%, transparent 55%);
  pointer-events: none;
}

.fp-hero-cover-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fp-hero-cover-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.20;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.fp-hero-cover-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ── PILL BADGES ── */
.fp-pill {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  text-decoration: none;
  background: var(--fp-orange);
  color: #fff;
}

.fp-pill--outline {
  background: transparent;
  color: var(--fp-orange);
  border: 1.5px solid var(--fp-orange);
}

.fp-pill--light {
  background: #fff;
  color: var(--fp-navy);
  border: 1.5px solid #fff;
}

.fp-pill--navy {
  background: var(--fp-navy);
  color: #fff;
}

/* ── PLACEHOLDER ── */
.fp-placeholder {
  width: 100%; height: 100%;
  background: var(--fp-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 64px;
  color: var(--fp-orange);
  letter-spacing: -0.05em;
}

/* ══ TICKER ══════════════════════════════════════════════ */
/* Usa già stili base del tema */

/* ══ SECTION HEADERS ═════════════════════════════════════ */
.fp-section {
  padding: clamp(56px, 8vw, 96px) 0;
}

.fp-section-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.fp-section-num {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(52px, 6.5vw, 88px);
  line-height: 1;
  color: var(--fp-orange);
  opacity: 0.20;
  flex-shrink: 0;
  letter-spacing: -0.05em;
  user-select: none;
}

.fp-section-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  margin: 0;
  white-space: nowrap;
}

.fp-section-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 40px;
}

/* ══ BENTO GRID ══════════════════════════════════════════ */
.fp-bento-section { background: var(--fp-cream); }

.fp-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(440px, 1fr);
  column-gap: clamp(28px, 3.2vw, 48px);
  row-gap: clamp(24px, 3vw, 40px);
  align-items: start;
  padding-right: 14px;
  padding-bottom: 14px;
}

/* LEAD card — bordo navy + shadow offset (stile CodiceVisibile) */
.fp-bento-lead {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--fp-radius);
  aspect-ratio: 16 / 10;
  text-decoration: none;
  border: 2.5px solid var(--fp-navy);
  box-shadow: 8px 8px 0 var(--fp-orange);
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.28s cubic-bezier(0.22,1,0.36,1);
}

.fp-bento-lead:hover {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--fp-orange);
}

.fp-bento-lead img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}

.fp-bento-lead:hover img { transform: scale(1.04); }

.fp-bento-lead-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,23,20,0.78) 0%, transparent 55%);
  pointer-events: none;
}

.fp-bento-lead-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fp-bento-lead-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}

.fp-bento-lead-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}

/* SMALL CARDS GRID */
.fp-bento-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2vw, 28px);
}

.fp-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border-radius: var(--fp-radius);
  overflow: hidden;
  border: 2px solid var(--fp-navy);
  box-shadow: 6px 6px 0 var(--fp-orange);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
}

.fp-bento-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--fp-orange);
}

.fp-bento-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.fp-bento-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}

.fp-bento-card:hover .fp-bento-card-img img { transform: scale(1.05); }

.fp-bento-card-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.fp-bento-card-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--fp-navy);
  margin: 0;
  flex: 1;
}

.fp-bento-card-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ══ MANIFESTO — band arancio chiaro con testo navy ═══════ */
.fp-manifesto {
  background: var(--fp-orange);
  color: #fff;
  padding: clamp(56px, 8vw, 96px) 0;
  position: relative;
  overflow: hidden;
}

/* cerchio decorativo */
.fp-manifesto::after {
  content: '"';
  position: absolute;
  top: -0.2em;
  right: -0.05em;
  font-family: 'Fraunces', serif;
  font-size: clamp(220px, 28vw, 380px);
  font-weight: 900;
  font-style: italic;
  color: rgba(255,255,255,0.10);
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

.fp-manifesto-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.fp-manifesto-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  margin-bottom: clamp(20px, 3vw, 36px);
}

.fp-manifesto-quote {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 50px);
  line-height: 1.30;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 clamp(28px, 4vw, 48px);
  max-width: 880px;
  border: none;
  padding: 0;
}

.fp-manifesto-foot {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.fp-manifesto-source {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
}

.fp-manifesto-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.55);
  padding: 12px 28px;
  border-radius: 50px;
  transition: background 0.22s, border-color 0.22s;
}

.fp-manifesto-cta:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

/* ══ PILLARS ════════════════════════════════════════════ */
.fp-pillars-section { background: var(--fp-sand); }

.fp-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.fp-pillar {
  --pillar-color: var(--fp-orange);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.5vw, 30px);
  text-decoration: none;
  border: 1px solid var(--border);
  margin-right: -1px;
  margin-bottom: -1px;
  overflow: hidden;
  background: #fff;
  transition: background 0.25s ease, transform 0.25s;
}

.fp-pillar:hover {
  background: var(--fp-cream);
  transform: translateY(-4px);
  z-index: 1;
  box-shadow: 0 8px 28px rgba(26,23,20,0.10);
}

/* barra colorata superiore */
.fp-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--pillar-color, var(--fp-orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}

.fp-pillar:hover::before { transform: scaleX(1); }

.fp-pillar-label {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -0.025em;
  color: var(--fp-navy);
}

.fp-pillar-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 1.1vw, 14px);
  line-height: 1.72;
  color: var(--fp-navy);
  opacity: 0.60;
  margin: 0;
  flex: 1;
}

.fp-pillar-arrow {
  font-size: 18px;
  color: var(--pillar-color, var(--fp-orange));
  margin-top: auto;
  display: block;
  transition: transform 0.22s;
}

.fp-pillar:hover .fp-pillar-arrow { transform: translateX(6px); }

/* ══ LATEST GRID ═════════════════════════════════════════ */
.fp-latest-section { background: var(--fp-cream); }

.fp-latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 30px);
  margin-bottom: clamp(40px, 5vw, 56px);
}

.fp-latest-card {
  --card-accent: var(--fp-orange);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border-radius: var(--fp-radius);
  overflow: hidden;
  border: 2px solid var(--fp-navy);
  box-shadow: 6px 6px 0 var(--fp-orange);
  position: relative;
  isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
}

.fp-latest-card:nth-child(3n + 1),
.fp-latest-card:nth-child(3n + 2),
.fp-latest-card:nth-child(3n + 3) {
  --card-accent: var(--fp-orange);
}

.fp-latest-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--fp-orange);
}

.fp-latest-card .fp-pill--outline {
  color: color-mix(in srgb, var(--fp-navy) 78%, var(--card-accent));
  border-color: color-mix(in srgb, var(--card-accent) 42%, var(--fp-cream));
  background: color-mix(in srgb, var(--card-accent) 8%, #fff);
}

.fp-latest-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--fp-radius) - 1px) calc(var(--fp-radius) - 1px) 0 0;
}

.fp-latest-card-img img,
.fp-latest-card-img .fp-placeholder {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}

.fp-latest-card:hover .fp-latest-card-img img { transform: scale(1.04); }

.fp-latest-card-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.fp-latest-card-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--fp-navy);
  margin: 0;
  flex: 1;
}

.fp-latest-card-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: auto;
}

/* CTA sfoglia tutti — pill stile CodiceVisibile */
.fp-latest-cta-wrap { text-align: center; }

.fp-latest-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fp-navy);
  background: #fff;
  border: 2.5px solid var(--fp-navy);
  box-shadow: 4px 4px 0 var(--fp-navy);
  padding: 14px 36px;
  border-radius: 50px;
  transition: transform 0.22s, box-shadow 0.22s, background 0.22s;
}

.fp-latest-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--fp-navy);
  background: var(--fp-cream);
}

/* ══ NUMBERS BAND: orange accent ══════════════════════════ */
.fp-numbers {
  background: var(--fp-orange);
  padding: clamp(40px, 5vw, 64px) 0;
  position: relative;
  overflow: hidden;
}

.fp-numbers::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 20px,
    rgba(255,255,255,0.04) 20px,
    rgba(255,255,255,0.04) 21px
  );
  pointer-events: none;
}

.fp-numbers-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.fp-number-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 clamp(24px, 4vw, 60px);
  text-align: center;
  min-width: clamp(150px, 18vw, 240px);
}

.fp-number-value-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  min-width: 3.15ch;
}

.fp-number-val {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  display: inline-block;
  min-width: 3.15ch;
  text-align: center;
}

.fp-number-plus {
  position: absolute;
  left: calc(100% + 0.08em);
  top: 0.1em;
  margin-left: 0;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 32px);
  line-height: 1;
  color: rgba(255,255,255,0.65);
  transform: translateY(0.1em);
}

.fp-number-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}

.fp-number-sep {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,0.22);
  flex-shrink: 0;
}

/* ══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .fp-hero-inner { grid-template-columns: 1fr; }
  .fp-hero-cover { display: none; }
  .fp-pillars { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .fp-bento { grid-template-columns: 1fr; }
  .fp-bento-lead { aspect-ratio: 16 / 9; }
  .fp-bento-cards { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .fp-latest-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .fp-latest-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .fp-hed { font-size: clamp(52px, 16vw, 90px); }
  .fp-bento-cards { grid-template-columns: 1fr; }
  .fp-latest-grid { grid-template-columns: 1fr; }
  .fp-pillars { grid-template-columns: 1fr; }
  .fp-numbers-inner { flex-direction: column; gap: 24px; }
  .fp-number-sep { display: none; }
  .fp-manifesto-quote { font-size: clamp(20px, 6vw, 32px); }
}

/* ══════════════════════════════════════════════════════════
   COERENZA SITO — tutte le pagine usano lo stesso stile POP
   Card con bordo navy · Pill arancione · Tipografia uniforme
   ══════════════════════════════════════════════════════════ */

/* ── CARD UNIVERSALI: bordo navy + shadow offset ── */
.card {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--fg);
  box-shadow: 4px 4px 0 var(--fg);
  transition: transform 0.24s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.24s cubic-bezier(0.22,1,0.36,1);
  background: #fff;
}

.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--fg);
}

.card-image-wrap {
  border-radius: 0;
  margin-bottom: 0;
}

/* ── CATEGORY PILLS: stile outline arancione ── */
.category-pill,
.card-category,
.post-category {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.category-pill:hover,
.card-category:hover { background: var(--accent); color: #fff; }

/* ── READ MORE / CTA buttons: pill arancione ── */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  border: 2px solid var(--fg);
  box-shadow: 3px 3px 0 var(--fg);
  padding: 12px 28px;
  border-radius: 50px;
  transition: transform 0.22s, box-shadow 0.22s, background 0.22s, color 0.22s;
}

.read-more:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--fg);
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  gap: 14px;
}

/* ── SECTION HEADERS nelle pagine interne: coerenza con homepage ── */
.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 48px);
  margin-top: clamp(40px, 6vw, 72px);
}

.section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.section-line {
  flex: 1;
  height: 2px;
  background: var(--accent);
  opacity: 0.30;
}

/* ── SPOTLIGHT: armonizzato ── */
.spotlight-section {
  border-radius: 12px;
  border: 2px solid var(--fg);
  box-shadow: 5px 5px 0 var(--fg);
  overflow: hidden;
}

.spotlight-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  border: 2px solid var(--fg);
  box-shadow: 3px 3px 0 var(--fg);
  padding: 10px 24px;
  border-radius: 50px;
  margin-top: 8px;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.spotlight-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--fg);
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── NUMBERS BAND nelle pagine interne (se presente) ── */
.numbers-band {
  display: flex;
  gap: 0;
  background: var(--accent);
  padding: clamp(32px, 4vw, 52px) 0;
  flex-wrap: wrap;
  justify-content: center;
}

.number-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(24px, 4vw, 56px);
  text-align: center;
}

.number-value {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}

.number-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}

/* ── POSTS GRID (archivi): card con bordo ── */
.posts-grid {
  gap: clamp(16px, 2vw, 24px);
}

/* ── MANIFESTO BLOCK nelle pagine interne ── */
.manifesto-block {
  background: var(--accent);
  color: #fff;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.manifesto-quote {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 2.8vw, 38px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #fff;
  border: none;
  padding: 0;
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.manifesto-source {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 20px;
}

.manifesto-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.55);
  padding: 10px 24px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.manifesto-cta:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* ── TAG TICKER: fascia editoriale leggera ── */
.tag-ticker {
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  padding: 10px 0;
}

.tag-ticker::before {
  background: linear-gradient(to right, color-mix(in srgb, var(--surface) 70%, var(--bg)), transparent);
}

.tag-ticker::after {
  background: linear-gradient(to left, color-mix(in srgb, var(--surface) 70%, var(--bg)), transparent);
}

.tag-ticker-item {
  gap: 14px;
  padding-right: 14px;
}

.tag-ticker-item a,
.tag-ticker-text {
  color: color-mix(in srgb, var(--fp-navy) 82%, var(--muted));
  font-weight: 800;
  font-size: clamp(15px, 1.25vw, 18px);
  letter-spacing: 0.06em;
}

.tag-ticker-item a:hover { color: var(--accent); }
.tag-ticker-sep { color: var(--accent) !important; opacity: 0.82 !important; }

/* Stability patch: keep mobile header compact and premium-safe */
.site-logo::before,
.site-logo::after,
.cursor,
.cursor-ring {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body,
  a,
  button,
  [role="button"] {
    cursor: auto;
  }
}

@media (max-width: 900px) {
  .site-header,
  .home .site-header {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
    gap: 16px;
  }

  .site-logo {
    max-width: calc(100vw - 100px);
    font-size: clamp(18px, 4.8vw, 30px);
    line-height: 1;
    white-space: normal;
  }

  .hamburger {
    width: 46px;
    height: 46px;
    padding: 12px;
    flex: 0 0 46px;
  }
}

@media (max-width: 520px) {
  .site-logo {
    max-width: calc(100vw - 88px);
    font-size: clamp(17px, 5.4vw, 23px);
  }

  .hamburger {
    width: 42px;
    height: 42px;
    padding: 11px;
    flex-basis: 42px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ARCHIVI / CATEGORIE — card flat editoriali
   Immagine sopra, testo sotto: niente box né bordi. Applicato
   a tutte le griglie .posts-grid (archivio, categoria, tag,
   ricerca, articoli correlati).
═══════════════════════════════════════════════════════════ */
.posts-grid .card {
  position: static;
  overflow: visible;
  aspect-ratio: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: none;
}

.posts-grid .card:hover {
  transform: none;
  box-shadow: none;
}

.posts-grid .card .card-image-wrap {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: 16px;
  border-radius: 0;
  z-index: auto;
}

.posts-grid .card .card-image-wrap::after { display: none; }

.posts-grid .card .card-meta,
.posts-grid .card .card-title {
  position: static;
  padding-left: 0;
  padding-right: 0;
}

.posts-grid .card .card-meta { margin-bottom: 8px; }

.posts-grid .card .card-title {
  color: var(--fg);
  margin-bottom: 10px;
}

.posts-grid .card:hover .card-title { color: var(--accent); }

.posts-grid .card .post-date,
.posts-grid .card .read-time {
  color: var(--muted);
}

/* Categoria: label minimale color accento, senza pill */
.posts-grid .card .category-pill {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--accent);
}

.posts-grid .card .category-pill:hover {
  background: transparent;
  color: var(--fg);
}

/* Estratto visibile, footer nascosto */
.posts-grid .card .card-excerpt { display: block; }
.posts-grid .card .card-footer { display: none; }

/* Neutralizza il vecchio layout "lead story" della prima card:
   tutte le card della griglia sono uguali */
.posts-grid .card:first-child {
  grid-column: auto;
  display: flex;
  grid-template-columns: none;
  grid-template-rows: none;
}

.posts-grid .card:first-child .card-image-wrap {
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  align-self: auto;
  margin-bottom: 16px;
}

.posts-grid .card:first-child .card-title {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin-bottom: 10px;
}

.posts-grid .card:first-child .card-excerpt {
  font-size: inherit;
  line-height: inherit;
}

/* Read more: nascosto di default (visibile solo negli archivi lista) */
.card-readmore { display: none; }

/* ═══════════════════════════════════════════════════════
   PAGINA CATEGORIA (e tag) — lista orizzontale editoriale
   Immagine a sinistra, meta + titolo + estratto + read more a
   destra, articoli separati da hairline.
═══════════════════════════════════════════════════════ */
.category .posts-grid,
.tag .posts-grid {
  display: block;
}

.category .posts-grid .card,
.tag .posts-grid .card {
  display: grid;
  grid-template-columns: minmax(240px, 420px) 1fr;
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
  padding: clamp(28px, 4vh, 48px) 0;
}

.category .posts-grid .card + .card,
.tag .posts-grid .card + .card {
  border-top: 1px solid var(--border);
}

.category .posts-grid .card .card-image-wrap,
.tag .posts-grid .card .card-image-wrap {
  grid-column: 1;
  grid-row: 1 / -1;
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
}

.category .posts-grid .card .card-meta,
.category .posts-grid .card .card-title,
.category .posts-grid .card .card-excerpt,
.category .posts-grid .card .card-readmore,
.tag .posts-grid .card .card-meta,
.tag .posts-grid .card .card-title,
.tag .posts-grid .card .card-excerpt,
.tag .posts-grid .card .card-readmore {
  grid-column: 2;
}

.category .posts-grid .card .card-title,
.tag .posts-grid .card .card-title {
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.14;
  margin-bottom: 14px;
}

.category .posts-grid .card .card-excerpt,
.tag .posts-grid .card .card-excerpt {
  font-size: clamp(14px, 1.2vw, 16px);
  max-width: 640px;
  flex: none;
  margin-bottom: 20px;
}

/* Read more — pill con freccia in cerchio */
.category .posts-grid .card .card-readmore,
.tag .posts-grid .card .card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  border: 1.5px solid var(--fg);
  border-radius: 50px;
  padding: 8px 8px 8px 20px;
  transition: color 0.2s, border-color 0.2s;
}

.category .posts-grid .card .card-readmore-arrow,
.tag .posts-grid .card .card-readmore-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--fg);
  color: #fff;
  border-radius: 50%;
  transition: background 0.2s, transform 0.2s;
}

.category .posts-grid .card .card-readmore:hover,
.tag .posts-grid .card .card-readmore:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.category .posts-grid .card .card-readmore:hover .card-readmore-arrow,
.tag .posts-grid .card .card-readmore:hover .card-readmore-arrow {
  background: var(--accent);
  transform: rotate(45deg);
}

/* Mobile: torna in colonna */
@media (max-width: 720px) {
  .category .posts-grid .card,
  .tag .posts-grid .card {
    grid-template-columns: 1fr;
  }

  .category .posts-grid .card .card-image-wrap,
  .tag .posts-grid .card .card-image-wrap {
    grid-row: 1;
    grid-column: 1;
    margin-bottom: 16px;
  }

  .category .posts-grid .card .card-meta,
  .category .posts-grid .card .card-title,
  .category .posts-grid .card .card-excerpt,
  .category .posts-grid .card .card-readmore,
  .tag .posts-grid .card .card-meta,
  .tag .posts-grid .card .card-title,
  .tag .posts-grid .card .card-excerpt,
  .tag .posts-grid .card .card-readmore {
    grid-column: 1;
  }
}

/* ── Home: "Ultimi articoli" ── */
.fp-latest-card {
  aspect-ratio: 4 / 3;
  background: var(--fp-navy);
  justify-content: flex-end;
}

.fp-latest-card .fp-latest-card-img {
  position: absolute;
  inset: 0;
  aspect-ratio: unset;
  border-radius: 0;
  z-index: 0;
}

.fp-latest-card .fp-latest-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.92) 0%,
    rgba(10, 8, 6, 0.62) 34%,
    rgba(10, 8, 6, 0.22) 62%,
    transparent 82%
  );
  pointer-events: none;
}

.fp-latest-card-body {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 0 18px 18px;
  background: transparent;
}

.fp-latest-card-title { color: #fff; flex: 0 0 auto; }

.fp-latest-card-meta { color: rgba(255, 255, 255, 0.78); margin-top: 0; }

.fp-latest-card .fp-pill--outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

/* ── Home: bento small cards ── */
.fp-bento-card {
  aspect-ratio: 1 / 1;
  background: var(--fp-navy);
  justify-content: flex-end;
}

.fp-bento-card .fp-bento-card-img {
  position: absolute;
  inset: 0;
  aspect-ratio: unset;
  z-index: 0;
}

.fp-bento-card .fp-bento-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.92) 0%,
    rgba(10, 8, 6, 0.60) 36%,
    rgba(10, 8, 6, 0.20) 64%,
    transparent 84%
  );
  pointer-events: none;
}

.fp-bento-card-body {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 0 14px 14px;
}

.fp-bento-card-title { color: #fff; flex: 0 0 auto; }

.fp-bento-card-date { color: rgba(255, 255, 255, 0.78); }

.fp-bento-card .fp-pill--outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

/* ═══════════════════════════════════════════════════════════
   SINGLE — HERO EDITORIALE FLAT
   Immagine in alto a tutto campo, sotto categoria, titolo e
   byline — senza box né cornici. Sfondo decorativo intatto.
═══════════════════════════════════════════════════════════ */
.single-hero-card {
  max-width: 1000px;
  margin: clamp(40px, 7vh, 88px) auto clamp(16px, 2vh, 24px);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.single-hero-media {
  margin: 0;
  border-bottom: none;
}

.single-hero-media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
  background: var(--surface);
}

.single-hero-body {
  padding: clamp(24px, 3.5vw, 44px) 0 0;
}

/* Corpo articolo allineato alla stessa colonna centrata dell'hero.
   L'indice (ToC) vive FUORI dalla colonna, a destra, solo su
   schermi molto larghi: il testo usa tutta la larghezza. */
.single-layout {
  display: block;
  position: relative;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.single-layout .toc-sidebar {
  display: none;
  position: absolute;
  left: calc(100% + clamp(32px, 4vw, 64px));
  top: 0;
  bottom: 0;
  width: 230px;
  padding-top: 0;
}

.single-layout .toc-inner {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
}

@media (min-width: 1480px) {
  .single-layout .toc-sidebar { display: block; }
}

.single-hero-body .single-eyebrow {
  margin-bottom: clamp(14px, 2vh, 22px);
}

.single-hero-body .single-title {
  font-size: clamp(28px, 4.2vw, 56px);
  margin-bottom: clamp(14px, 2vh, 22px);
}

.single-hero-body .author-byline {
  padding-bottom: 0;
  border-bottom: none;
}

/* Didascalia immagine sotto il box */
p.single-featured-caption {
  max-width: 1000px;
  margin: 0 auto clamp(24px, 4vh, 48px);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

@media (max-width: 768px) {
  .single-hero-media img { aspect-ratio: 16 / 10; }
}

/* ═══════════════════════════════════════════════════════════
   CLEANUP — rimozione ombre offset salmone dietro box/card
═══════════════════════════════════════════════════════════ */
.posts-grid .card,
.posts-grid .card:hover,
.single-featured-image img,
.about-editorial-strip,
.about-page .about-intro-text,
.about-page .about-pillar,
.about-page .about-pillar:hover,
.contact-path-card,
.contact-path-card:hover,
.contact-panel,
.single-layout .entry-content,
.fp-bento-lead,
.fp-bento-lead:hover,
.fp-bento-card,
.fp-bento-card:hover,
.fp-latest-card,
.fp-latest-card:hover,
.single-hero-card {
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   HOME — RESTYLE EDITORIALE MINIMAL (ispirazione designboom)
   Sfondo bianco, niente cornici/ombre/raggi, griglie flat,
   tipografia editoriale, hairline sottili. Palette come accento.
═══════════════════════════════════════════════════════════ */

/* ── Fondo: trasparente per lasciar vedere il canvas animato ── */
.home .fp-main,
.home .fp-bento-section,
.home .fp-latest-section,
.home .fp-pillars-section {
  background: transparent;
}

/* ── HERO: flat, testo navy, niente cerchi CSS (c'è il canvas) ── */
.home .fp-hero {
  background: transparent;
  color: var(--fp-navy);
}

.home .fp-hero::before,
.home .fp-hero::after {
  display: none;
}

.home .fp-badge {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--muted);
}

.home .fp-hed-fill { color: var(--fp-navy); }

.home .fp-hed-outline {
  -webkit-text-stroke: 2px var(--fp-navy);
  opacity: 0.30;
}

.home .fp-hed-accent { color: var(--fp-orange); }

.home .fp-hero-sub { color: var(--muted); }

.home .fp-hero-cta {
  background: transparent;
  color: var(--fp-navy);
  border: none;
  border-bottom: 2px solid var(--fp-navy);
  border-radius: 0;
  padding: 0 0 6px;
}

.home .fp-hero-cta:hover {
  background: transparent;
  color: var(--fp-orange);
  border-color: var(--fp-orange);
  transform: none;
}

/* Cover hero: immagine flat, senza cornice */
.home .fp-hero-cover {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.home .fp-hero-cover:hover {
  transform: none;
  box-shadow: none;
}

/* ── TICKER: attaccato all'header, hairline solo sotto ── */
.home .tag-ticker {
  background: transparent;
  border-top: none;
  border-bottom: 1px solid var(--border);
  margin: 0;
}

/* ── SECTION HEAD: titolo grande nero uppercase ── */
.home .fp-section-title {
  text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: -0.02em;
  color: var(--fp-navy);
}

/* ── BENTO LEAD: flat come le card piccole (immagine sopra,
      testo sotto) ma in formato grande ── */
.home .fp-bento-lead {
  position: static;
  display: flex;
  flex-direction: column;
  overflow: visible;
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
}

.home .fp-bento-lead:hover { transform: none; }

.home .fp-bento-lead img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.home .fp-bento-lead-overlay { display: none; }

.home .fp-bento-lead-body {
  position: static;
  padding: 16px 0 0;
  gap: 8px;
}

.home .fp-bento-lead-title {
  color: var(--fp-navy);
  font-size: clamp(22px, 2.6vw, 34px);
}

.home .fp-bento-lead-date { color: var(--muted); }

.home .fp-bento-lead .fp-pill--light {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--fp-orange);
}

/* ── CARD FLAT (bento small + ultimi articoli):
      immagine sopra, testo sotto su bianco, nessun box ── */
.home .fp-bento-card,
.home .fp-latest-card {
  background: transparent;
  border: none;
  border-radius: 0;
  aspect-ratio: auto;
  overflow: visible;
  justify-content: flex-start;
}

.home .fp-bento-card:hover,
.home .fp-latest-card:hover {
  transform: none;
}

.home .fp-bento-card .fp-bento-card-img,
.home .fp-latest-card .fp-latest-card-img {
  position: static;
  inset: auto;
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
}

.home .fp-bento-card .fp-bento-card-img::after,
.home .fp-latest-card .fp-latest-card-img::after {
  display: none;
}

.home .fp-bento-card-body,
.home .fp-latest-card-body {
  position: static;
  padding: 14px 0 0;
}

.home .fp-bento-card-title,
.home .fp-latest-card-title {
  color: var(--fp-navy);
}

.home .fp-bento-card-date,
.home .fp-latest-card-meta {
  color: var(--muted);
}

/* Categoria: da pill a label minimale color accento */
.home .fp-bento-card .fp-pill--outline,
.home .fp-latest-card .fp-pill--outline {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--fp-orange);
}

/* ── MANIFESTO: bianco, testo navy, hairline ── */
.home .fp-manifesto {
  background: #fff;
  color: var(--fp-navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.home .fp-manifesto::after { color: rgba(26, 23, 20, 0.05); }

.home .fp-manifesto-label { color: var(--fp-orange); }

.home .fp-manifesto-quote { color: var(--fp-navy); }

.home .fp-manifesto-source { color: var(--muted); }

.home .fp-manifesto-cta {
  color: var(--fp-navy);
  border: none;
  border-bottom: 2px solid var(--fp-navy);
  border-radius: 0;
  padding: 0 0 6px;
}

.home .fp-manifesto-cta:hover {
  background: transparent;
  color: var(--fp-orange);
  border-color: var(--fp-orange);
}

/* ── PILLARS: colonne flat con hairline superiore ── */
.home .fp-pillars-section {
  padding-bottom: clamp(24px, 3vw, 40px);
}

.home .fp-latest-section {
  padding-top: clamp(24px, 3vw, 40px);
}

.home .fp-pillars {
  gap: 0 clamp(24px, 3vw, 40px);
}

.home .fp-pillar {
  background: transparent;
  border: none;
  border-top: 2px solid var(--fp-navy);
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.home .fp-pillar:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

/* ── NUMBERS: banda bianca con hairline ── */
.home .fp-numbers {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.home .fp-numbers::before { display: none; }

.home .fp-number-val { color: var(--fp-navy); }

.home .fp-number-plus { color: var(--fp-orange); }

.home .fp-number-label { color: var(--muted); }

.home .fp-number-sep { background: var(--border); }

/* ── CTA "Tutti gli articoli": link minimale ── */
.home .fp-latest-cta {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--fp-navy);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 6px;
  color: var(--fp-navy);
}

.home .fp-latest-cta:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
  color: var(--fp-orange);
  border-color: var(--fp-orange);
}

/* ═══════════════════════════════════════════════════════════
   CHI SIAMO + CONTATTI — allineamento al design editoriale flat
   Niente box/bande colorate: hero bianco, hairline, testo navy.
═══════════════════════════════════════════════════════════ */

/* ── HERO delle due pagine: da banda arancione a flat ── */
.about-page .page-hero,
.contact-page .page-hero {
  background: transparent;
  color: var(--fg);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

.about-page .page-hero::before,
.about-page .page-hero::after,
.contact-page .page-hero::before,
.contact-page .page-hero::after {
  display: none;
}

.about-page .page-hero .hero-eyebrow,
.contact-page .page-hero .hero-eyebrow {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--muted);
}

.about-page .page-hero-title,
.contact-page .page-hero-title {
  color: var(--fg);
}

.about-page .page-hero-title em,
.contact-page .page-hero-title em {
  color: var(--fp-orange);
  -webkit-text-stroke: 0;
  opacity: 1;
}

.about-page .page-hero-deck,
.contact-page .page-hero-deck {
  color: var(--muted);
  opacity: 1;
}

/* ── CHI SIAMO ── */
.about-page .about-intro-text {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.about-editorial-strip {
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.about-page .page-divider {
  height: 1px;
  background: var(--border);
}

.about-pillar,
.about-page .about-pillar {
  background: transparent;
  border: none;
  border-top: 2px solid var(--fp-navy);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

.about-pillar:hover,
.about-page .about-pillar:hover {
  transform: none;
  box-shadow: none;
}

.about-pillar::before { display: none; }

.about-page .about-founded-year {
  border-bottom: 1px solid var(--border);
}

/* ── CONTATTI ── */
.contact-path-card {
  background: transparent;
  border: none;
  border-top: 2px solid var(--fp-navy);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.contact-panel {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Blocchi info: stesso sfondo del resto della pagina */
.contact-panel-grid .contact-info-block:nth-child(even) {
  background: transparent;
}

.contact-panel-note {
  background: transparent;
}

/* Pannello email subito dopo l'hero: blocchi in verticale */
.contact-page .contact-panel {
  margin-top: clamp(24px, 4vh, 44px);
  margin-bottom: 0;
}

.contact-page .contact-panel-grid {
  grid-template-columns: 1fr;
}

.contact-page .contact-panel-grid .contact-info-block {
  border-right: 0;
  border-bottom: 1px solid var(--border);
  padding: clamp(20px, 2.6vh, 30px) 0;
}

.contact-page .contact-panel-grid .contact-info-block:last-child {
  border-bottom: 0;
}

/* Nota in fondo alla pagina, fuori dal pannello */
.contact-page .contact-panel-note {
  margin: clamp(30px, 5vh, 58px) 0 clamp(48px, 7vh, 80px);
  padding: clamp(16px, 2.4vh, 24px) 0 0;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════
   MENU — voci bold pesanti (stile grotesque nero)
═══════════════════════════════════════════════════════ */

/* Logo: più grande e pesante — deve dominare la testata */
.site-logo {
  font-weight: 900;
  font-size: clamp(20px, 1.9vw, 28px);
  letter-spacing: 0.02em;
}

.primary-nav ul {
  gap: clamp(12px, 1.4vw, 24px);
}

.primary-nav li + li::before { display: none; }

.primary-nav a {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
}

.primary-nav a:hover {
  color: var(--accent);
  background: transparent;
  transform: none;
}

.primary-nav .current-menu-item > a {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  letter-spacing: 0.015em;
}

.primary-nav .current-menu-item > a:hover {
  background: transparent;
  color: var(--accent);
}

.mobile-nav a {
  font-family: 'DM Sans', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}