:root, [data-theme="dark"] {
  --bg:#0C0A09; --bg2:#1C1B1A; --bg3:#292524;
  --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);
  --text:#FAF9F6; --muted:#A8A29E; --faint:#44403C;
  --accent:#EA580C; --accent-hover:#F97316;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'DM Mono',monospace;
  color-scheme:dark;
}
[data-theme="light"] {
  --bg:#F5F2ED; --bg2:#EBE7E0; --bg3:#DDD8CF;
  --border:rgba(0,0,0,0.12); --border2:rgba(0,0,0,0.20);
  --text:#1C1917; --muted:#57534E; --faint:#A8A29E;
  --accent:#C2410C; --accent-hover:#B91C1C;
  color-scheme:light;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;transition:background .4s,color .4s}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
::selection{background:rgba(234,88,12,.2)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:64px;transition:background .3s,border-color .3s}
.nav-scrolled{background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-name{font-family:var(--serif);font-size:20px;color:var(--text);text-decoration:none}
.nav-links{display:flex;gap:28px}
.nav-link{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
.nav-link:hover,.nav-link.active{color:var(--text)}
.theme-toggle{width:34px;height:34px;background:var(--bg2);border:1px solid var(--border2);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s}
.theme-toggle:hover{transform:scale(1.08);background:var(--bg3)}
.theme-toggle svg{width:14px;height:14px;color:var(--text)}
.theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* ================================================================
   FEATURED HERO — Articoli in evidenza
   ================================================================ */
.featured {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  margin-top: 64px; /* nav height */
}
.featured-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.featured-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.featured-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s ease-out;
}
.featured-slide.active img {
  transform: scale(1.04);
}

/* Overlay gradient */
.featured-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(12,10,9,0.6) 40%, rgba(12,10,9,0.2) 100%);
  pointer-events: none;
}
[data-theme="light"] .featured-slide::after {
  background: linear-gradient(0deg, var(--bg) 0%, rgba(250,249,246,0.6) 40%, rgba(250,249,246,0.15) 100%);
}

/* Content over image */
.featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 48px 48px;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}
.featured-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.featured-cat span { color: var(--muted); }
.featured-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.3px;
  max-width: 600px;
  margin-bottom: 12px;
}
.featured-title a { color: var(--text); text-decoration: none; transition: color .2s; }
.featured-title a:hover { color: var(--accent); }
.featured-subtitle {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--muted);
  max-width: 500px;
  line-height: 1.6;
}
.featured-read {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color .2s;
}
.featured-read:hover { color: var(--accent-hover); }
.featured-read::after { content: ' →'; }

/* Navigation dots */
.featured-nav {
  position: absolute;
  bottom: 48px;
  right: 48px;
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: center;
}
.featured-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.4;
  cursor: pointer;
  transition: all .3s;
  border: none;
  padding: 0;
}
.featured-dot.active {
  opacity: 1;
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

/* Counter */
.featured-counter {
  position: absolute;
  top: 84px;
  right: 48px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}

/* ================================================================
   LAYOUT
   ================================================================ */
.wrapper{max-width:1100px;margin:0 auto;padding:0 48px}
.home-layout{display:grid;grid-template-columns:1fr 280px;gap:56px;padding:40px 0 120px}
.section-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

/* CARDS */
.card{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;align-items:start;transition:opacity .2s}
.card:hover{opacity:.85}
.card:hover .card-title{color:var(--accent)}
.card-noimg{grid-template-columns:1fr}
.card-img{width:220px;height:150px;object-fit:cover;border-radius:3px;background:var(--bg2)}
.card-body{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.card-meta{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:flex;gap:10px}
.card-cat{color:var(--accent)}
.card-title{font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.25;transition:color .2s}
.card-subtitle{font-family:var(--sans);font-size:13px;color:var(--muted);font-style:italic}
.card-intro{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.7;margin-top:2px}
.card-tags{display:flex;gap:8px;margin-top:6px}
.card-tag{font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.5px}
[data-theme="light"] .card-tag{color:var(--muted)}

/* Card nota */
.card-note{grid-template-columns:1fr;padding-left:20px;border-left:2px solid var(--accent);border-bottom:1px solid var(--border)}
.card-note .card-title{font-size:18px}
.card-note .card-intro{margin-top:6px;font-family:var(--serif);font-size:15px;color:var(--text);font-style:italic;line-height:1.7}

/* SIDEBAR */
.sidebar{padding-top:0}
@media(min-width:901px){.sidebar{padding-left:32px;border-left:1px solid var(--border)}}
.sidebar-section{margin-bottom:32px}
.sidebar-title{font-family:var(--mono);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.sidebar-list{list-style:none}
.sidebar-list a{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-family:var(--sans);font-size:14px;color:var(--text);text-decoration:none;transition:color .2s;border-bottom:1px solid var(--border)}
.sidebar-list a:hover{color:var(--accent)}
.sidebar-count{font-family:var(--mono);font-size:11px;color:var(--muted)}
.sidebar-recent a{display:block;padding:6px 0;font-family:var(--serif);font-size:13px;color:var(--muted);line-height:1.35;text-decoration:none;transition:color .2s;border-bottom:1px solid var(--border)}
.sidebar-recent a:hover{color:var(--text)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:5px}
.tag-chip{font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--muted);border:1px solid var(--border2);padding:3px 9px;border-radius:3px;text-decoration:none;transition:all .2s}
.tag-chip:hover{color:var(--accent);border-color:var(--accent)}

/* FOOTER */
.footer{padding:40px 48px;border-top:1px solid var(--border);max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-name{font-family:var(--serif);font-size:16px;color:var(--text);text-decoration:none}
.footer-links{display:flex;gap:20px}
.footer-link{font-family:var(--mono);font-size:10px;color:var(--muted);text-decoration:none;letter-spacing:1.5px;text-transform:uppercase;transition:color .2s}
.footer-link:hover{color:var(--text)}
.footer-copy{font-family:var(--mono);font-size:11px;color:var(--faint)}

@media(max-width:900px){
  .nav{padding:0 24px}
  .wrapper{padding:0 24px}
  .featured{height:420px;margin-top:64px}
  .featured-content{padding:0 24px 36px}
  .featured-title{font-size:24px}
  .featured-nav{right:24px;bottom:36px}
  .featured-counter{right:24px;top:80px}
  .home-layout{grid-template-columns:1fr;gap:40px}
  .card{grid-template-columns:1fr;gap:12px}
  .card-img{width:100%;height:180px}
  .sidebar{border-top:1px solid var(--border);padding-top:36px}
  .footer{padding:40px 24px;flex-direction:column;align-items:flex-start}
}

/* ================================================================
   FIX — Nav mobile nascosto
   ================================================================ */
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; width: 24px; height: 18px; position: relative; z-index: 101; }
.nav-hamburger span { display: block; width: 100%; height: 1.5px; background: var(--text); position: absolute; left: 0; transition: all .3s; }
.nav-hamburger span:nth-child(1) { top: 0; }
.nav-hamburger span:nth-child(2) { top: 8px; }
.nav-hamburger span:nth-child(3) { top: 16px; }
.nav-hamburger.open span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
.nav-mobile { display: none; position: fixed; inset: 0; z-index: 99; background: var(--bg); flex-direction: column; align-items: center; justify-content: center; gap: 36px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.nav-mobile.open { display: flex; opacity: .98; pointer-events: auto; }
.nav-mobile .nav-link { font-size: 15px; letter-spacing: 3px; }

/* ================================================================
   FIX — Article body: larghezza lettura ottimale
   ================================================================ */
.article-body { max-width: 680px; margin: 0 auto; padding: 48px 24px 80px; }
.article-body h2 { font-family: var(--serif); font-size: 26px; font-weight: 400; margin: 48px 0 16px; }
.article-body h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; margin: 36px 0 12px; }
.article-body p { font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.8; margin-bottom: 24px; }
.article-body ul, .article-body ol { font-family: var(--sans); font-size: 17px; line-height: 1.8; margin-bottom: 24px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { border-left: 3px solid var(--accent); padding: 16px 24px; margin: 32px 0; background: var(--bg2); border-radius: 2px; }
.article-body blockquote p { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--muted); margin-bottom: 0; }
.article-body code { font-family: var(--mono); font-size: 14px; background: var(--bg2); padding: 2px 6px; border-radius: 3px; }
.article-body strong { font-weight: 600; }
.article-body hr { border: none; border-top: 1px solid var(--border); margin: 48px 0; }
.article-body a { color: var(--accent); text-decoration: underline; }
.article-body a:hover { color: var(--accent-hover); }
.article-body em { font-style: italic; }

/* ================================================================
   FIX — Page header per articoli interni
   ================================================================ */
.page-header { padding: 130px 0 40px; }
.page-header h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.2; letter-spacing: -0.3px; }
.page-header .subtitle { font-family: var(--sans); font-size: 17px; color: var(--muted); margin-top: 8px; font-style: italic; }
.page-header .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 1px; margin-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; }
.back-link { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; color: var(--accent); text-decoration: none; margin-bottom: 20px; transition: color .2s; }
.back-link:hover { color: var(--accent-hover); text-decoration: none; }

/* ================================================================
   FIX — Sidebar bordo su desktop
   ================================================================ */
@media (min-width: 901px) {
  .sidebar { padding-left: 32px; border-left: 1px solid var(--border); }
}

/* ================================================================
   FIX — Mobile
   ================================================================ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  .page-header { padding: 110px 0 32px; }
  .article-body { padding: 32px 16px 60px; }
}

/* ================================================================
   ARTICLE HERO — Full-bleed image with title overlay
   ================================================================ */
.article-hero {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  margin-top: 64px;
}
.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(12,10,9,0.55) 50%, rgba(12,10,9,0.15) 100%);
  pointer-events: none;
}
[data-theme="light"] .article-hero-overlay {
  background: linear-gradient(0deg, var(--bg) 0%, rgba(250,249,246,0.55) 50%, rgba(250,249,246,0.15) 100%);
}
.article-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 48px 48px;
  z-index: 2;
  max-width: 800px;
}
.article-hero-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 14px;
  display: inline-block;
  transition: color .2s;
}
.article-hero-cat:hover { color: var(--accent-hover); }
.article-hero-content h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}
.article-hero-sub {
  font-family: var(--sans);
  font-size: 17px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

/* ================================================================
   ARTICLE META BAR — Separates hero from body
   ================================================================ */
.article-meta-bar {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.article-meta-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.article-meta-left {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.article-meta-sep { color: var(--faint); }
.article-meta-tags {
  display: flex;
  gap: 10px;
}
.article-meta-tags a {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  text-decoration: none;
  transition: color .2s;
}
.article-meta-tags a:hover { color: var(--accent); }
[data-theme="light"] .article-meta-tags a { color: var(--muted); }

/* ================================================================
   SERVICE BOX (in article)
   ================================================================ */
.service-box {
  border: 1px solid var(--accent);
  background: var(--bg2);
  padding: 24px 28px;
  border-radius: 4px;
  margin-top: 48px;
}
.service-box-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.service-box a {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
  transition: color .2s;
}
.service-box a:hover { color: var(--accent); }
.service-box a::after { content: ' →'; }

@media (max-width: 900px) {
  .article-hero { height: 360px; }
  .article-hero-content { padding: 0 24px 32px; }
  .article-hero-content h1 { font-size: 24px; }
  .article-meta-inner { flex-direction: column; align-items: flex-start; }
}

/* FIX — Footer copy contrasto */
.footer-copy { color: var(--muted); }

/* FIX — Dots accessibilità: dimensioni touch + aria */
.featured-dot { min-width: 24px; min-height: 24px; padding: 8px; }