:root {
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --acc: #e0681f;
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

html[data-tema="light"] {
  --bg: #fbfaf8;
  --fg: #1b1a17;
  --muted: #75706a;
  --line: #e7e2da;
  --ph-bg: #efece5;
  --ph-fg: #aaa499;
  --hover: #f4f0e9;
}
html[data-tema="dark"] {
  --bg: #141311;
  --fg: #f0ede7;
  --muted: #948e84;
  --line: #2b2825;
  --ph-bg: #1d1b18;
  --ph-fg: #5f5a52;
  --hover: #1c1a16;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body {
  font-family: var(--font-body);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--acc); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--pad) 0; }

/* ───────── Header ───────── */
.head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px 24px;
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.head-nome {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 5.5vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.head-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 10px;
  text-transform: uppercase;
}
.head-right { display: flex; align-items: center; gap: 10px; }
.head-link, .tema-btn {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  white-space: nowrap;
}
.head-link:hover { border-color: var(--acc); color: var(--acc); }
.tema-btn { display: inline-flex; align-items: center; gap: 8px; }
.tema-btn:hover { border-color: var(--fg); }
.tema-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--acc);
  box-shadow: inset 0 0 0 2px var(--bg);
}
.head-bio {
  grid-column: 1 / -1;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 17px);
  margin-top: 4px;
  text-wrap: pretty;
}

main { padding: clamp(40px, 6vw, 72px) 0; }

/* ───────── Tag / meta condivisi ───────── */
.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.arr { color: var(--acc); }

/* ───────── Carosello ───────── */
.carosello {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ph-bg);
  border: 1px solid var(--line);
}
.carosello-track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.carosello-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; }

.car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--fg);
  backdrop-filter: blur(6px);
  font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
  opacity: 0; transition: opacity .2s, background .2s;
}
.car-prev { left: 10px; }
.car-next { right: 10px; }
.carosello:hover .car-arrow { opacity: 1; }
.car-arrow:hover { background: var(--bg); }
.car-dots {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
}
.car-dot {
  width: 6px; height: 6px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: color-mix(in srgb, var(--fg) 35%, transparent);
  transition: background .2s, width .2s;
}
.car-dot.is-on { background: var(--acc); width: 16px; border-radius: 999px; }

/* ───────── Placeholder a righe ───────── */
.ph { position: absolute; inset: 0; }
.ph-stripes {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px,
      color-mix(in srgb, var(--ph-fg) 22%, transparent) 11px 12px);
}
.ph-meta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; font-family: var(--font-mono); color: var(--ph-fg);
  text-align: center; padding: 12px;
}
.ph-tag { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.ph-name { font-size: 13px; color: color-mix(in srgb, var(--ph-fg) 80%, var(--fg)); }
.ph-count { font-size: 10px; opacity: .7; }

/* ════════════ A · GRIGLIA ════════════ */
.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(36px, 4vw, 54px) clamp(28px, 3vw, 40px);
}
.card { display: flex; flex-direction: column; }
.card-body { padding-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-titolo {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -0.015em; line-height: 1.1;
}
.card-anno { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.card .tag { align-self: flex-start; }
.card-desc { color: var(--muted); font-size: 14.5px; text-wrap: pretty; }
.card-url {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--fg);
  margin-top: 2px; transition: color .2s;
}
.card:hover .card-titolo { color: var(--acc); }
.card:hover .card-url { color: var(--acc); }

/* ════════════ B · INDICE ════════════ */
.indice { display: flex; flex-direction: column; }
.riga {
  display: grid;
  grid-template-columns: 42px minmax(150px, 1fr) 1.3fr 180px 120px;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  transition: background .2s;
}
.indice .riga:last-child { border-bottom: 1px solid var(--line); }
.riga-num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.riga-titolo {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -0.015em; line-height: 1.08;
}
.riga-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.riga-anno { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.riga-desc { color: var(--muted); font-size: 14.5px; text-wrap: pretty; }
.riga-thumb { transition: transform .3s ease; }
.riga-url { font-family: var(--font-mono); font-size: 12.5px; text-align: right; transition: color .2s; }
.riga:hover { background: var(--hover); }
.riga:hover .riga-titolo { color: var(--acc); }
.riga:hover .riga-url { color: var(--acc); }
.riga:hover .riga-thumb { transform: scale(1.03); }

/* ════════════ C · EDITORIALE ════════════ */
.editoriale { display: flex; flex-direction: column; }
.spread {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(40px, 6vw, 80px) 0;
  border-top: 1px solid var(--line);
}
.editoriale .spread:last-child { border-bottom: 1px solid var(--line); }
.spread-rev .spread-media { order: 2; }
.spread-indice { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.spread-titolo {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.025em; line-height: 1.02;
  margin: 16px 0 18px;
}
.spread-desc { color: var(--muted); font-size: clamp(15px, 1.7vw, 18px); max-width: 42ch; text-wrap: pretty; }
.spread-url { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.spread-link { font-family: var(--font-mono); font-size: 13.5px; transition: color .2s; }
.spread:hover .spread-titolo { color: var(--acc); }
.spread:hover .spread-link { color: var(--acc); }

/* ───────── Footer ───────── */
.piede {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.piede a:hover { color: var(--acc); }

/* ───────── Responsive ───────── */
@media (max-width: 760px) {
  .head { grid-template-columns: 1fr; }
  .head-right { justify-content: flex-start; }

  .riga {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 0;
  }
  .riga-thumb { order: -1; }
  .riga-num { display: none; }
  .riga-desc { font-size: 14px; }
  .riga-url { text-align: left; }

  .spread { grid-template-columns: 1fr; gap: 22px; padding: 40px 0; }
  .spread-rev .spread-media { order: 0; }
  .spread-titolo { margin: 12px 0 14px; }

  .car-arrow { opacity: 1; width: 30px; height: 30px; font-size: 17px; }
}
@media (max-width: 460px) {
  .griglia { grid-template-columns: 1fr; }
}