/* ============================================================
   Adaptive Cities — Manifesto di Superurbanity
   Stili statici, mobile-first. Nessuna dipendenza da framework.
   ============================================================ */

:root{
  --bg:#efeadd;
  --ink:#23201b;
  --ink-strong:#1c190f;
  --accent:#b23a26;
  --accent-dark:#8a2c1c;
  --muted:#8a8272;
  --muted2:#615a4d;
  --muted3:#5a5346;
  --faint:#a49a86;
  --rule:rgba(35,32,27,.16);
  --mono:'Courier Prime',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --display:'Special Elite',var(--mono);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
::selection{background:#ffef58;color:var(--ink)}
strong{color:var(--ink-strong)}

/* ---------- Top bar ---------- */
.topbar{
  border-bottom:1px solid var(--rule);
  padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:60;
  background:rgba(239,234,221,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.topbar__logo{height:34px;width:auto}
.topbar__tag{font-size:10px;letter-spacing:1px;color:var(--muted);white-space:nowrap}

/* ---------- Layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.doc{display:block}
.article{padding:30px 0 80px;min-width:0}

/* ---------- Indice (desktop) ---------- */
.toc{display:none}
.toc__label{
  font-family:var(--display);font-size:12px;letter-spacing:3px;
  color:var(--muted);margin-bottom:18px;text-transform:uppercase;
}
.toc__nav{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35}
.toc__link{
  display:flex;gap:9px;padding:5px 8px 5px 10px;
  color:var(--muted2);border-left:2px solid transparent;transition:.15s;
}
.toc__link .n{min-width:26px;color:var(--faint);font-weight:700}
.toc__link.is-active{
  border-left-color:#e3b23c;color:var(--ink-strong);
  background:rgba(227,178,60,.16);font-weight:700;
}

/* ---------- Header articolo ---------- */
.kicker{font-family:var(--display);font-size:12px;letter-spacing:3px;color:var(--muted);margin-bottom:22px}
.title{font-family:var(--display);font-weight:400;font-size:33px;line-height:1.12;letter-spacing:.5px;color:var(--ink-strong);margin:0 0 16px}
.subtitle{font-size:18px;font-style:italic;color:var(--muted3);margin:0 0 22px}
.byline{font-size:14px;color:var(--muted2);border-top:1px solid var(--rule);padding-top:14px;margin:0 0 48px}

/* ---------- Sezioni ---------- */
.section{margin-bottom:44px}
.section:last-of-type{margin-bottom:20px}
.section h2{scroll-margin-top:78px;margin:0 0 22px;display:flex;align-items:baseline;gap:11px}
.section__num{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent)}
.section__ttl{font-family:var(--display);font-size:23px;line-height:1.2;color:var(--ink-strong)}
.section p{margin:0 0 18px}
.section p:last-child{margin-bottom:0}
.lead{font-family:var(--display);color:var(--ink-strong)}

/* ---------- Cards "fronti" (sez. IX) ---------- */
.cards{display:flex;flex-direction:column;gap:14px;margin:0 0 22px}
.card{border-left:3px solid var(--accent);padding:2px 0 2px 16px}

/* ---------- Evidenziazioni ---------- */
.hl{
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:.03em .14em;mix-blend-mode:multiply;
}
.hl-y{background:linear-gradient(101deg,rgba(255,235,64,0) 1.5%,rgba(255,235,64,.85) 3.5%,rgba(255,235,64,.85) 96.5%,rgba(255,235,64,0) 98.5%)}
.hl-g{background:linear-gradient(101deg,rgba(150,235,130,0) 1.5%,rgba(150,235,130,.8) 3.5%,rgba(150,235,130,.8) 96.5%,rgba(150,235,130,0) 98.5%)}
.hl-p{background:linear-gradient(101deg,rgba(255,141,190,0) 1.5%,rgba(255,141,190,.7) 3.5%,rgba(255,141,190,.7) 96.5%,rgba(255,141,190,0) 98.5%)}
.hl-u{background:linear-gradient(transparent 78%,rgba(178,58,38,.5) 78%,rgba(178,58,38,.5) 92%,transparent 92%);padding:0}

/* ---------- Firma ---------- */
.sign{font-family:var(--display);font-size:15px;letter-spacing:1px;color:var(--muted3);margin:0}

/* ============================================================
   Desktop / tablet largo
   ============================================================ */
@media (min-width:900px){
  body{font-size:17px}
  .topbar{padding:16px 34px}
  .topbar__logo{height:43px}
  .topbar__tag{font-size:12px;letter-spacing:2px}
  .wrap{padding:0 34px}
  .doc{
    display:grid;grid-template-columns:236px minmax(0,704px);
    gap:64px;justify-content:center;align-items:start;
  }
  .toc{
    display:block;position:sticky;top:78px;align-self:start;
    max-height:calc(100vh - 100px);overflow:auto;padding:52px 0 40px;
  }
  .article{padding:52px 0 120px}
  .kicker{margin-bottom:26px}
  .title{font-size:52px;line-height:1.08}
  .subtitle{font-size:19px}
  .section h2{gap:14px;scroll-margin-top:90px}
  .section__num{font-size:19px}
  .section__ttl{font-size:29px;line-height:1.15}
}

/* Rispetta chi preferisce meno movimento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .toc__link{transition:none}
}