/* ==========================================================================
   CARTOONIZER — carta, inchiostro, retino. Nessun framework.
   ========================================================================== */

/* Font opzionali self-hosted (niente CDN esterni: privacy + CSP).
   Mettere i .woff2 in /assets/fonts/ — se mancano, scattano i fallback di sistema. */
@font-face { font-family: "CZ Display"; src: url("fonts/display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CZ Comic";   src: url("fonts/comic.woff2")   format("woff2"); font-display: swap; }

:root {
  color-scheme: light;
  --paper:  #f2ede3;
  --paper2: #e8e1d2;
  --ink:    #111;
  --pop:    #ffd400;
  --red:    #ff3b1f;
  --blue:   #1f4bff;
  --green:  #00a86b;
  --line:   3px;
  --shadow: 6px 6px 0 var(--ink);
  --f-display: "CZ Display", "Anton", "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --f-comic:   "CZ Comic", "Comic Neue", "Bangers", "Trebuchet MS", system-ui, sans-serif;
  --f-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --f-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  /* retino tipografico */
  background-image: radial-gradient(rgba(17,17,17,.075) 1px, transparent 1.4px);
  background-size: 7px 7px;
  color: var(--ink);
  font: 16px/1.5 var(--f-body);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 0; background: var(--pop); padding: .5em 1em; z-index: 10; }
.skip:focus { left: 8px; }

/* ----------------------------------------------------------------- testata */
.mast {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 5vw, 56px) var(--gutter) 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 24px;
  align-items: end;
  border-bottom: var(--line) solid var(--ink);
}
.mast__logo { text-decoration: none; grid-column: 1 / -1; line-height: .82; }
.mast__word {
  font: 400 clamp(52px, 15vw, 188px)/.82 var(--f-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  display: inline-block;
  text-shadow: 4px 4px 0 var(--pop), 8px 8px 0 var(--ink);
}
.mast__z {
  display: inline-block;
  background: var(--ink);
  color: var(--pop);
  padding: 0 .06em;
  margin-left: .02em;
  transform: skew(-8deg) rotate(-2deg);
  text-shadow: none;
}
.mast__tag { margin: 0; font: 700 clamp(15px, 2.2vw, 20px)/1.2 var(--f-body); max-width: 34ch; }
.mast__clock {
  justify-self: end;
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px;
  font: 600 12px/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 4px 4px 0 var(--red);
}
.mast__clock-val { color: var(--pop); font-size: 18px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- feed */
.feed { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 64px; display: grid; gap: clamp(48px, 9vw, 120px); }
.counter { margin: 0; font: 600 13px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.counter b { background: var(--pop); padding: 0 .3em; font-size: 15px; }
.empty { font: 400 clamp(28px, 6vw, 56px)/1 var(--f-display); text-transform: uppercase; }

/* --------------------------------------------------------------- striscia */
.strip { position: relative; }
.strip__head { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: start; margin-bottom: 18px; }
.strip__no {
  grid-row: span 3;
  font: 400 clamp(34px, 7vw, 76px)/.85 var(--f-display);
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.strip__title { margin: 0; font: 400 clamp(30px, 6vw, 64px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.strip__title a { text-decoration: none; background: linear-gradient(var(--pop), var(--pop)) 0 88% / 0 .32em no-repeat; transition: background-size .35s; }
.strip__title a:hover, .strip__title a:focus-visible { background-size: 100% .32em; }
.strip__sub { margin: 0; font-size: clamp(15px, 1.8vw, 19px); max-width: 60ch; }
.chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 2px solid var(--ink); background: var(--paper);
  padding: 3px 8px; font: 700 11px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
}
.chip--mono { font-weight: 500; }
.chip--area { background: var(--ink); color: var(--paper); }
.chip--live { background: var(--red); color: #fff; border-color: var(--red); animation: blink 1.6s steps(2) infinite; }
.chip--ambiente, .chip--salute { background: var(--green); border-color: var(--green); }
.chip--tecnologia, .chip--scienza { background: var(--blue); border-color: var(--blue); }
.chip--economia, .chip--lavoro { background: var(--pop); color: var(--ink); }
.chip--diritti, .chip--etica { background: var(--red); border-color: var(--red); }

/* ------------------------------------------------------------- tavola */
.board {
  background: #fff;
  border: var(--line) solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  padding: clamp(6px, 1.2vw, 14px);
  display: grid;
  gap: clamp(6px, 1.2vw, 14px);
}
.row { display: grid; gap: clamp(6px, 1.2vw, 14px); }
.row--1 { grid-template-columns: 1fr; }
.row--2 { grid-template-columns: repeat(2, 1fr); }
.row--3 { grid-template-columns: repeat(3, 1fr); }
.row--4 { grid-template-columns: repeat(4, 1fr); }

.panel {
  position: relative;
  margin: 0;
  border: var(--line) solid var(--ink);
  background: var(--paper2);
  overflow: hidden;
  container-type: inline-size;
}
.panel img { width: 100%; height: auto; }

/* --------------------------------------------------------------- balloon */
.b {
  position: absolute;
  margin: 0;
  max-width: 64%;
  font: 700 clamp(11px, 5.2cqi, 21px)/1.18 var(--f-comic);
  z-index: 2;
}
.row--1 .b { max-width: 42%; font-size: clamp(12px, 2.6cqi, 24px); }
.b__who {
  display: block;
  font: 600 .62em/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: .06em;
  opacity: .55; margin-bottom: .3em;
}
.at-tl { top: 4%; left: 4%; }
.at-tc { top: 4%; left: 50%; translate: -50% 0; }
.at-tr { top: 4%; right: 4%; }
.at-ml { top: 50%; left: 4%; translate: 0 -50%; }
.at-mr { top: 50%; right: 4%; translate: 0 -50%; }
.at-bl { bottom: 5%; left: 4%; }
.at-bc { bottom: 5%; left: 50%; translate: -50% 0; }
.at-br { bottom: 5%; right: 4%; }

/* dialogo */
.b--speech {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 1.1em;
  padding: .55em .8em;
}
.b--speech::before, .b--speech::after { content: ""; position: absolute; }
.b--speech::before { width: 1.25em; height: 1em; background: var(--ink); }
.b--speech::after  { width: .85em; height: .72em; background: #fff; }
/* codino verso il basso (balloon in alto o al centro) */
.b--speech:is(.at-tl,.at-tc,.at-tr,.at-ml,.at-mr)::before { top: 100%; left: 24%; margin-top: -1px; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.b--speech:is(.at-tl,.at-tc,.at-tr,.at-ml,.at-mr)::after  { top: 100%; left: calc(24% + 3px); margin-top: -3.5px; clip-path: polygon(0 0, 100% 0, 14% 100%); }
.b--speech:is(.at-tr,.at-mr)::before { left: auto; right: 24%; clip-path: polygon(0 0, 100% 0, 82% 100%); }
.b--speech:is(.at-tr,.at-mr)::after  { left: auto; right: calc(24% + 3px); clip-path: polygon(0 0, 100% 0, 86% 100%); }
/* codino verso l'alto (balloon in basso) */
.b--speech:is(.at-bl,.at-bc,.at-br)::before { bottom: 100%; left: 24%; margin-bottom: -1px; clip-path: polygon(18% 0, 100% 100%, 0 100%); }
.b--speech:is(.at-bl,.at-bc,.at-br)::after  { bottom: 100%; left: calc(24% + 3px); margin-bottom: -3.5px; clip-path: polygon(14% 0, 100% 100%, 0 100%); }
.b--speech.at-br::before { left: auto; right: 24%; clip-path: polygon(82% 0, 100% 100%, 0 100%); }
.b--speech.at-br::after  { left: auto; right: calc(24% + 3px); clip-path: polygon(86% 0, 100% 100%, 0 100%); }

/* pensiero */
.b--thought {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 50% / 46%;
  padding: .9em 1.1em;
  font-style: italic;
  text-align: center;
}
.b--thought::before, .b--thought::after {
  content: ""; position: absolute; background: #fff; border: 2.5px solid var(--ink); border-radius: 50%;
}
.b--thought::before { width: .9em; height: .9em; top: calc(100% + .15em); left: 22%; }
.b--thought::after  { width: .5em; height: .5em; top: calc(100% + 1.15em); left: 16%; }
.b--thought:is(.at-bl,.at-bc,.at-br)::before { top: auto; bottom: calc(100% + .15em); }
.b--thought:is(.at-bl,.at-bc,.at-br)::after  { top: auto; bottom: calc(100% + 1.15em); }

/* didascalia */
.b--caption {
  background: var(--pop);
  border: 2.5px solid var(--ink);
  padding: .45em .65em;
  font: 700 clamp(10px, 3.5cqi, 17px)/1.2 var(--f-mono);
  text-transform: uppercase; letter-spacing: .02em;
  box-shadow: 3px 3px 0 var(--ink);
}
.b--caption:is(.at-tl,.at-tc,.at-tr) { top: 0; border-top: 0; border-left-width: 0; }
.b--caption.at-tl { left: 0; }
.b--caption.at-tr { right: 0; border-left-width: 2.5px; border-right: 0; box-shadow: -3px 3px 0 var(--ink); }

/* onomatopea */
.b--sfx {
  max-width: none;
  font: 400 clamp(22px, 13cqi, 72px)/.9 var(--f-display);
  text-transform: uppercase;
  color: var(--pop);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
  rotate: -9deg;
  letter-spacing: .02em;
}
.b--sfx.at-tr, .b--sfx.at-br, .b--sfx.at-mr { rotate: 8deg; }

/* ------------------------------------------------------------ chiusura */
.strip__foot { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: end; margin-top: 26px; }
.moral {
  position: relative;
  background: var(--ink); color: var(--paper);
  padding: 22px clamp(16px, 3vw, 28px) 18px;
  box-shadow: 6px 6px 0 var(--pop);
}
.moral__label {
  position: absolute; top: -13px; left: 16px;
  background: var(--red); color: #fff;
  font: 700 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em;
  padding: 6px 10px; rotate: -2deg;
}
.moral__text { margin: 0; font: 400 clamp(20px, 3.2vw, 32px)/1.1 var(--f-display); text-transform: uppercase; }
.moral__q { margin: .7em 0 0; font-size: clamp(15px, 1.8vw, 18px); color: var(--pop); }
.moral__q::before { content: "? "; font-weight: 800; }
.strip__actions { display: flex; gap: 10px; }

.btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  background: var(--pop); color: var(--ink);
  border: var(--line) solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 700 13px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn--ghost { background: var(--paper); }
.btn.is-done { background: var(--green); color: #fff; }

.pager { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.sentinel { height: 1px; }
.feed.is-loading .sentinel { height: 80px; background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--pop) 10px 20px); background-size: 200% 100%; animation: slide 1s linear infinite; border: var(--line) solid var(--ink); }

.colophon { max-width: var(--maxw); margin: 0 auto; padding: 28px var(--gutter) 48px; border-top: var(--line) solid var(--ink); font-size: 14px; }

/* ------------------------------------------------------------ cinetica */
.js .strip .panel { opacity: 0; transform: translateY(22px) rotate(var(--r, -0.6deg)) scale(.98); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.9,.25,1.2); }
.js .strip .panel:nth-child(even) { --r: .7deg; }
.js .strip .row:nth-child(2) .panel { transition-delay: .32s; }
.js .strip .row:nth-child(3) .panel { transition-delay: .64s; }
.js .strip .panel:nth-child(2) { transition-delay: .08s; }
.js .strip .panel:nth-child(3) { transition-delay: .16s; }
.js .strip .panel:nth-child(4) { transition-delay: .24s; }
.js .strip.is-in .panel { opacity: 1; transform: none; }
.js .strip .b { opacity: 0; scale: .6; transition: opacity .25s, scale .35s cubic-bezier(.3,1.6,.5,1); transition-delay: inherit; }
.js .strip.is-in .b { opacity: 1; scale: 1; transition-delay: .9s; }
.js .strip.is-in .row:nth-child(2) .b { transition-delay: 1.2s; }
.js .strip.is-in .row:nth-child(3) .b { transition-delay: 1.5s; }

@media (hover: hover) {
  .panel { transition: box-shadow .15s; }
  .strip.is-in .panel:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); z-index: 3; transition-delay: 0s; }
}

@keyframes blink { 50% { opacity: .55; } }
@keyframes slide { to { background-position: -40px 0; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 760px) {
  .row--4 { grid-template-columns: repeat(2, 1fr); }
  .mast { grid-template-columns: 1fr; }
  .mast__clock { justify-self: start; }
  .strip__foot { grid-template-columns: 1fr; }
  .board { box-shadow: 6px 6px 0 var(--ink); }
}
@media (max-width: 540px) {
  .row--3 { grid-template-columns: 1fr; }        /* lettura verticale, stile webtoon */
  .row--3 .b, .row--1 .b { font-size: clamp(13px, 4.6cqi, 19px); max-width: 66%; }
  .strip__head { grid-template-columns: 1fr; }
  .strip__no { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .strip .panel, .js .strip .b { opacity: 1; transform: none; scale: 1; }
}