/* ============================================================
   Groov-illa · pillar-v5.css
   Usa solo i token di homepage-v5.css — nessun nuovo colore o font
   ============================================================ */

.pillar-page{ background: var(--cream); }

/* ── Hero ─────────────────────────────────────────────────── */
.pillar-hero{
  position: relative; background: var(--ink); overflow: hidden;
}
.pillar-hero-img{
  width: 100%; aspect-ratio: 21/8; object-fit: cover;
  display: block; opacity: .42;
}
@media(max-width:720px){ .pillar-hero-img{ aspect-ratio: 16/9; } }
.pillar-hero-body{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px,5vw,72px) clamp(20px,5vw,80px);
  background: linear-gradient(to top, oklch(0.22 0.025 50 / .82) 0%, transparent 60%);
}
.pillar-hero-cats{
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.pillar-hero-cat{
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream); padding: 4px 10px;
  border: 1px solid oklch(0.962 0.014 80 / .35);
}
.pillar-hero-title{
  font-family: var(--serif-display); font-weight: 400; font-style: italic;
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: .96; letter-spacing: -.018em;
  color: var(--cream); margin: 0 0 20px;
  max-width: 18ch; text-wrap: balance;
}
.pillar-hero-meta{
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: oklch(0.962 0.014 80 / .85);
}
.pillar-hero-meta .sep{ opacity: .4; }

/* ── Disclosure affiliati ─────────────────────────────────── */
.pillar-disclosure{
  background: var(--cream-2); border-bottom: 1px solid var(--hair);
  padding: 14px clamp(20px,5vw,80px);
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-3); display: flex; gap: 10px; align-items: flex-start;
}
.pillar-disclosure::before{
  content: "›"; font-style: normal; font-family: var(--serif);
  font-size: 16px; color: var(--rust); flex-shrink: 0; margin-top: -1px;
}

/* ── Layout: sidebar + corpo ──────────────────────────────── */
.pillar-layout{
  max-width: 1320px; margin: 0 auto;
  padding: 64px clamp(20px,5vw,80px);
  display: grid; grid-template-columns: 200px 1fr;
  gap: 56px; align-items: start;
}
@media(max-width:768px){
  .pillar-layout{ grid-template-columns: 1fr; gap: 32px; }
}

/* ── TOC sidebar ──────────────────────────────────────────── */
.pillar-toc{ position: sticky; top: 24px; }
.pillar-toc-label{
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--rust);
  display: block; padding-bottom: 12px;
  border-bottom: 1px solid var(--ink); margin-bottom: 0;
}
.pillar-toc-list{ list-style: none; margin: 0; padding: 0; }
.pillar-toc-list li{ border-bottom: 1px solid var(--hair); }
.pillar-toc-list a{
  display: block; padding: 9px 0;
  font-family: var(--serif); font-size: 13.5px; line-height: 1.35;
  color: var(--ink-2); text-decoration: none; transition: color .15s, padding-left .15s;
}
.pillar-toc-list a:hover,
.pillar-toc-list a.active{ color: var(--rust); padding-left: 6px; }
.pillar-toc-list li.sub a{
  font-size: 12.5px; color: var(--ink-3); padding-left: 14px;
}
.pillar-toc-list li.sub a:hover{ color: var(--rust); padding-left: 20px; }

/* ── Corpo articolo ───────────────────────────────────────── */
.pillar-body h1{
  font-family: var(--serif-display); font-weight: 400; font-style: italic;
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.014em;
  color: var(--ink); margin: 0 0 22px; text-wrap: balance;
}
.pillar-body .intro{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55;
  color: var(--ink-2); margin: 0 0 44px; max-width: 62ch;
  padding-bottom: 28px; border-bottom: 1px solid var(--hair);
}
.pillar-body h2{
  font-family: var(--serif-display); font-weight: 400; font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.01em;
  color: var(--ink); margin: 68px 0 18px;
  padding-top: 20px; border-top: 1px solid var(--hair-strong);
  scroll-margin-top: 32px;
}
.pillar-body h3{
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
  margin: 40px 0 12px; scroll-margin-top: 32px;
}
.pillar-body p{
  font-family: var(--serif); font-size: 18px; line-height: 1.72;
  color: var(--ink); margin: 0 0 1.4em; text-wrap: pretty;
}
.pillar-body a{ color: var(--rust); border-bottom: 1px solid oklch(0.56 0.165 42 / .3); }
.pillar-body a:hover{ border-bottom-color: var(--rust); }
.pillar-body strong{ font-weight: 600; }
.pillar-body em{ font-style: italic; }
.pillar-body ul, .pillar-body ol{
  font-family: var(--serif); font-size: 17.5px; line-height: 1.68;
  color: var(--ink); padding-left: 1.5em; margin: 0 0 1.4em;
}
.pillar-body li{ margin-bottom: .45em; }
.pillar-body hr{ border: 0; border-top: 1px solid var(--hair); margin: 48px 0; }

/* Callout */
.pillar-body .callout{
  background: var(--cream-2); border-left: 2px solid var(--rust);
  padding: 16px 20px; margin: 28px 0;
  font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink);
}

/* Cluster correlati */
.pillar-cluster{
  margin: 56px 0; padding: 26px 28px;
  background: var(--cream-2); border-top: 1px solid var(--hair-strong);
}
.pillar-cluster-label{
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--rust);
  display: block; margin-bottom: 14px;
}
.pillar-cluster-list{ list-style: none; padding: 0; margin: 0; }
.pillar-cluster-list li{
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--hair);
}
.pillar-cluster-list li:last-child{ border-bottom: 0; }
.pillar-cluster-list a{
  font-family: var(--serif); font-size: 15.5px; color: var(--ink);
  text-decoration: none; border-bottom: 0;
}
.pillar-cluster-list a:hover{ color: var(--rust); }
.pillar-cluster-arrow{ font-family: var(--serif); font-size: 16px; color: var(--ink-3); }

/* Mobile */
@media(max-width:768px){ .pillar-toc{ position: static; } }
@media(max-width:720px){
  .pillar-layout{ padding-top: 40px; padding-bottom: 48px; }
  .pillar-body h2{ margin-top: 48px; }
  .pillar-body p{ font-size: 17px; }
  .pillar-hero-title{ font-size: clamp(28px, 7vw, 48px); }
}