/* THE GLINT — sistema tipografico
   un font, due colori + il logo, filetti pieni, sottolineature */

:root {
  --carta: #ffffff;
  --inchiostro: #0a0a0a;
  --vermiglio: #c63f1e; /* solo logo e selezione */
  --cobalto: #3a3ac8;   /* solo logo */
  --filetto: 1px solid var(--inchiostro);
  --max: 960px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background: var(--vermiglio); color: var(--carta); }

html { scroll-behavior: smooth; }

body {
  font-family: 'Space Mono', monospace;
  background: var(--carta);
  color: var(--inchiostro);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
a:hover { background: var(--inchiostro); color: var(--carta); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; }

.pagina { max-width: var(--max); margin: 0 auto; border-left: var(--filetto); border-right: var(--filetto); min-height: 100vh; }

/* ---------- barra superiore ---------- */
.barra {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 32px; border-bottom: var(--filetto);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  gap: 16px; flex-wrap: wrap;
}
.barra nav { display: flex; gap: 20px; }
.barra a { text-decoration: none; }
.barra a:hover { text-decoration: none; }
.barra .cta { text-decoration: underline; }

/* ---------- testata ---------- */
.testata { text-align: center; padding: 64px 32px 48px; border-bottom: var(--filetto); }
.testata .lockup { display: inline-flex; align-items: center; gap: 22px; }
.testata img { height: 88px; width: auto; }
.testata .nome { font-size: clamp(26px, 4.5vw, 38px); font-weight: 700; letter-spacing: 0.28em; text-align: left; }
.testata .descrittore { font-size: 12px; letter-spacing: 0.44em; text-transform: uppercase; margin-top: 8px; text-align: left; }

/* ---------- manifesto ---------- */
.movimento { padding: 72px 32px 40px; max-width: 720px; }
.numerale { font-size: 13px; margin-bottom: 20px; }
h1, h2 { font-weight: 700; text-transform: uppercase; line-height: 1.3; }
h1 { font-size: clamp(26px, 5vw, 40px); }
h2 { font-size: clamp(20px, 3.4vw, 27px); }
.movimento p.corpo { margin-top: 24px; max-width: 520px; }
.sott { text-decoration: underline; text-underline-offset: 7px; }

.cursore::after {
  content: "▌"; margin-left: 6px;
  animation: batti 1.1s steps(1) infinite;
}
@keyframes batti { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cursore::after { animation: none; }
  html { scroll-behavior: auto; }
}

.filtro {
  margin-top: 28px; font-weight: 700; text-transform: uppercase;
  font-size: 15px; line-height: 1.75; max-width: 560px;
}

/* ---------- figure ---------- */
.figure { padding: 40px 32px; }
.figure .griglia { display: grid; grid-template-columns: 1.4fr 1fr; }
.figura { border: var(--filetto); aspect-ratio: 4 / 3; overflow: hidden; }
.figura + .figura { border-left: none; }
.figura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figura.bn img { filter: grayscale(1) contrast(1.05); } /* opzionale, per foto d'atmosfera */
.figura.vuota { display: flex; align-items: center; justify-content: center; background: var(--inchiostro); color: var(--carta); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; padding: 16px; text-align: center; }
.didascalie { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; text-transform: uppercase; gap: 16px; }

/* ---------- indice lavori ---------- */
.indice { padding: 48px 32px 24px; border-top: var(--filetto); }
.etichetta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.voce {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; padding: 20px 0; border-bottom: var(--filetto);
  text-decoration: none; flex-wrap: wrap;
}
.voce:hover { background: var(--inchiostro); color: var(--carta); }
.voce:hover .num, .voce:hover .meta { color: inherit; }
.voce .sx { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.voce .num, .voce .meta { font-size: 12px; text-transform: uppercase; }
.voce .titolo { font-size: 18px; font-weight: 700; text-transform: uppercase; }
.voce:last-of-type { border-bottom: none; }

/* ---------- journal ---------- */
.journal { margin: 32px; padding: 26px 30px; border: var(--filetto); }
.journal blockquote { font-size: 16px; font-weight: 700; text-transform: uppercase; }
.journal .segue { margin-top: 12px; font-size: 12px; text-transform: uppercase; }

/* ---------- colophon / footer ---------- */
.colophon {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 32px; border-top: var(--filetto);
  font-size: 12px; text-transform: uppercase; gap: 16px; flex-wrap: wrap;
}
.colophon .marchio { display: inline-flex; align-items: center; gap: 10px; }
.colophon img { height: 26px; width: auto; }

/* ---------- trittico del marchio ---------- */
.griglia.tre { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .griglia.tre { grid-template-columns: 1fr; } }

/* ---------- il glint ---------- */
.glint-campo {
  position: relative; overflow: hidden; cursor: crosshair;
  display: flex; align-items: center; justify-content: center;
}
.glint-campo img { height: 62%; width: auto; object-fit: contain; }
.glint-punto {
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--carta); transform: translate(-50%, -50%);
  transition: left 1.1s cubic-bezier(.2,.8,.2,1), top 1.1s cubic-bezier(.2,.8,.2,1);
  animation: respira 3.4s ease-in-out infinite;
}
@keyframes respira {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); opacity: .85; }
  50%      { box-shadow: 0 0 18px 4px rgba(255,255,255,0.35); opacity: 1; }
}
.glint-stella {
  position: absolute; width: 20px; height: 20px;
  background: var(--carta); pointer-events: none;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0; transform: scale(.2) rotate(0deg);
  animation: scintilla 4.6s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes scintilla {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  5%       { opacity: 1; transform: scale(1.1) rotate(35deg); }
  10%      { opacity: 0; transform: scale(.3) rotate(65deg); }
  14%      { opacity: .9; transform: scale(.8) rotate(90deg); }
  19%      { opacity: 0; transform: scale(.2) rotate(120deg); }
}
@media (prefers-reduced-motion: reduce) {
  .glint-punto { animation: none; transition: none; }
  .glint-stella { animation: none; opacity: 0; }
}

/* ---------- pagina progetto ---------- */
.dossier { padding: 64px 32px; max-width: 760px; }
.dossier .protocollo { font-size: 12px; text-transform: uppercase; margin-bottom: 20px; }
.scheda { margin-top: 40px; border-top: var(--filetto); }
.scheda .riga { display: flex; gap: 24px; padding: 12px 0; border-bottom: var(--filetto); font-size: 13px; }
.scheda .campo { width: 160px; flex-shrink: 0; text-transform: uppercase; font-size: 12px; }
.capitolo { padding: 24px 32px 48px; max-width: 760px; }
.capitolo h2 { font-size: 18px; margin-bottom: 18px; }
.figura.piena { aspect-ratio: 16 / 9; }
.torna { padding: 0 32px 64px; font-size: 13px; text-transform: uppercase; }

@media (max-width: 720px) {
  .pagina { border-left: none; border-right: none; }
  .barra nav { display: none; }
  .movimento { padding: 56px 24px 32px; }
  .figure, .indice { padding-left: 24px; padding-right: 24px; }
  .figure .griglia { grid-template-columns: 1fr; }
  .figura + .figura { border-left: var(--filetto); border-top: none; }
  .journal { margin: 24px; }
  .voce { flex-direction: column; gap: 6px; }
}