/* Blog REAL FICTION · bozza Parte 7 del design system (26.09.2026).
   Una sola asse sinistra: titolo, testo, foto e tabelle partono dallo stesso bordo.
   Testo 600 px (circa 70 caratteri a 18 px); elementi larghi 896 px, che crescono solo a destra.
   Dal design system: pillola lime con adesivo, titolo Anton su due righe con la seconda fucsia,
   sezioni con pallino numerato (fucsia, lime, indigo), una sola fascia lime per la frase principale.
   Nessun gradiente, nessuna ombra sfocata. */
:root{
  --fuchsia:#FF2E9A;--indigo:#5D00FF;--lime:#CFFF04;
  --bg:#0D0D0D;--card:#1C1C1C;--surface:#262626;--line:rgba(255,255,255,.12);
  --text:#F2F2F2;
  --body:rgba(242,242,242,.85);   /* testo 12,6:1 */
  --lead:rgba(242,242,242,.9);
  --cap:rgba(242,242,242,.72);    /* didascalie 9,2:1 */
  --meta:rgba(242,242,242,.64);   /* date e fonti 7,4:1 */
  --ink:#0D0D0D;
  --display:'Anton',Impact,sans-serif;--sans:'Inter',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--fuchsia) 0 33.33%,var(--indigo) 33.33% 66.66%,var(--lime) 66.66%)}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
img{display:block;max-width:100%}

.wrap{max-width:1180px;margin:0 auto;padding-inline:28px}
.page{max-width:896px;margin-inline:auto}     /* un solo bordo sinistro per tutto */
.col{max-width:600px}                         /* testo: stesso bordo, larghezza di lettura */
@media (max-width:600px){.wrap{padding-inline:16px}}

/* intestazione del sito */
.hdr{border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.mark{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:19px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none}
.mark svg{width:26px;height:26px;flex:none}
.nav{display:flex;gap:24px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.nav a{text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--lime)}
@media (max-width:700px){.nav{display:none}}
.btn{display:inline-flex;align-items:center;border-radius:999px;padding:14px 28px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;background:var(--lime);color:var(--ink);transition:transform .16s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--fuchsia)}
.btn--sm{padding:11px 22px}

/* testata */
.art{padding-block:56px 96px}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:var(--ink);border-radius:999px;padding:8px 16px 8px 10px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.pill svg{width:16px;height:16px;flex:none}
.art h1{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.01em;font-size:90px;margin:24px 0 32px}
.art h1 .l2{color:var(--fuchsia)}
.lead{font-size:20px;line-height:1.5;color:var(--lead);margin-bottom:32px}
.byline{display:flex;align-items:center;gap:16px;margin-bottom:48px}
.byline img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.byline b{display:block;font-size:15px;font-weight:600}
.byline span{display:block;font-size:13px;line-height:20px;color:var(--meta)}

/* indice */
.toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin-bottom:64px}
.toc summary{cursor:pointer;list-style:none;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin-top:16px;display:grid;gap:10px}
.toc a{display:flex;gap:16px;align-items:baseline;text-decoration:none;font-size:16px;line-height:1.4}
.toc a span{font-family:var(--display);font-size:18px;color:var(--lime);width:24px;flex:none}
.toc a:hover{color:var(--lime)}

/* sezioni numerate: pallino + titolo (Parte 1, «Documenti») */
.sez{display:flex;align-items:flex-start;gap:16px;margin:80px 0 24px;scroll-margin-top:24px}
.sez .n{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--display);font-size:18px;line-height:1}
.sez.c1 .n{background:var(--fuchsia);color:var(--ink)}
.sez.c2 .n{background:var(--lime);color:var(--ink)}
.sez.c3 .n{background:var(--indigo);color:#fff}
.sez h2{font-weight:700;text-transform:uppercase;letter-spacing:.015em;font-size:26px;line-height:1.2;padding-top:5px;text-wrap:balance}

/* testo */
.txt>p,.txt>ul>li{font-size:18px;line-height:28px;color:var(--body)}
.txt>p{margin-bottom:24px}
.txt>ul{margin:0 0 24px;padding-left:22px}.txt>ul>li{margin-bottom:8px}
.txt>ul>li::marker{color:var(--lime)}
.txt>p a,.txt>ul a{color:var(--text);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:3px}

/* una sola fascia lime per articolo: la frase principale */
.band{display:flex;align-items:center;gap:20px;background:var(--lime);color:var(--ink);border-radius:20px;padding:28px 32px;margin:40px 0;font-size:19px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.4}
.band svg{width:36px;height:36px;flex:none}

/* foto: ogni lavoro nella sua cornice 3:4, tre per fila */
.works{margin-block:48px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.work{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--surface)}
.work img{width:100%;height:100%;object-fit:cover}
.ai{position:absolute;right:12px;bottom:12px;background:var(--lime);color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 9px}
.works figcaption{font-size:14px;line-height:20px;color:var(--cap);margin-top:12px;max-width:600px}
@media (max-width:600px){
  .row3{grid-template-columns:1fr 1fr;gap:12px}
  .row3 .work:first-child{grid-column:1/-1;aspect-ratio:4/5}
}

/* tabelle: su computer tabella, su telefono schede con etichetta per ogni campo */
.dt{margin-block:32px 16px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dt table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
.dt caption{text-align:left;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--meta);padding:16px 20px 8px}
.dt th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);padding:8px 20px;border-bottom:1px solid var(--line)}
.dt td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--body)}
.dt tr:last-child td{border-bottom:0}
.dt td:first-child{font-weight:700;color:var(--text)}
.dt td:last-child{color:var(--lime);font-weight:700;white-space:nowrap;text-align:right}
.dt th:last-child{text-align:right}
.dt a{color:var(--text);text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:3px}
.note{font-size:13px;line-height:20px;color:var(--meta);margin-bottom:24px}
@media (max-width:600px){
  .dt{border:0;border-radius:0;overflow:visible}
  .dt caption{padding:0 0 12px}
  .dt thead{display:none}
  .dt tr{display:block;background:var(--card);border-radius:14px;padding:16px;margin-bottom:12px}
  .dt td{display:block;border:0;padding:0;white-space:normal!important;text-align:left!important;font-size:16px;line-height:24px}
  .dt td::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin:10px 0 2px}
  .dt td:first-child::before{margin-top:0}
}

/* blocco confronto: numero grande */
.fact{display:grid;grid-template-columns:auto 1fr;gap:12px 40px;align-items:end;background:var(--card);border-radius:18px;padding:40px;margin-block:48px}
.fact .k{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.fact .n{font-family:var(--display);font-size:90px;line-height:.9;color:var(--fuchsia);white-space:nowrap}
.fact p{font-size:16px;line-height:24px;color:var(--body);max-width:36ch}
.fact small{display:block;font-size:13px;color:var(--meta);margin-top:8px}
@media (max-width:760px){.fact{grid-template-columns:1fr;padding:32px 24px}.fact .n{font-size:50px}}

/* fine articolo */
.cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--line);border-radius:18px;padding:32px;margin:80px 0 32px}
.cta p{font-size:18px;line-height:28px;color:var(--body);max-width:520px}
.how{font-size:13px;line-height:20px;color:var(--meta);margin-bottom:48px}
.src{border-top:1px solid var(--line);padding-top:24px;max-width:600px}
.src h2{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--meta);margin-bottom:12px}
.src ol{font-size:14px;line-height:22px;color:var(--meta);padding-left:20px}
.src li{margin-bottom:6px}
.src a{color:var(--cap);text-decoration:underline;text-decoration-color:rgba(242,242,242,.3);text-underline-offset:3px}
.author{display:flex;gap:16px;align-items:flex-start;background:var(--card);border-radius:18px;padding:24px;margin-top:48px;max-width:600px}
.author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.author b{font-size:16px}
.author p{font-size:15px;line-height:1.55;color:var(--cap);margin-top:4px}

/* elenco articoli */
.list{padding-block:56px 96px}
.list h1{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;font-size:90px;margin:24px 0 24px}
.list .lead{max-width:600px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.card{display:flex;flex-direction:column;background:var(--card);border-radius:18px;overflow:hidden;text-decoration:none;border:1px solid transparent;transition:border-color .16s}
.card:hover,.card:focus-visible{border-color:var(--lime)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto}
.card .t{padding:24px}
.card .k{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fuchsia)}
.card h2{font-size:20px;line-height:26px;font-weight:700;margin-top:8px;text-wrap:balance}

.ftr{border-top:1px solid var(--line);padding-block:32px;color:var(--meta);font-size:12px;letter-spacing:.08em}
.ftr .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ftr nav{display:flex;gap:24px;flex-wrap:wrap;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ftr a{text-decoration:none}.ftr a:hover{color:var(--lime)}

@media (max-width:700px){
  .art h1,.list h1{font-size:46px}
  .lead{font-size:18px}
  .txt>p,.txt>ul>li,.cta p{font-size:16px;line-height:26px}
  .sez h2{font-size:22px;padding-top:7px}
  .band{font-size:15px;padding:24px;gap:16px}
  .band svg{width:28px;height:28px}
  .cards{grid-template-columns:1fr}
  .cta{padding:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}