:root{
  --ink:#12181f;
  --ink-soft:#1c2530;
  --ink-line:#2b3542;
  --paper:#f2efe7;
  --paper-dim:#c9c3b3;
  --red:#e8542a;
  --display:'Space Grotesk', sans-serif;
  --body:'Public Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.hero-copy{
  position:relative;
  z-index:2;
  padding:clamp(24px,5vw,64px) clamp(20px,6vw,72px) 0;
  max-width:900px;
  pointer-events:none;
}
h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0 0 20px;
}
.hero-sub{
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  color:var(--paper-dim);
  max-width:56ch;
  margin:0 0 8px;
}
.hero-hint{
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--paper-dim);
  opacity:0.8;
}
.hint-landscape{display:none}

/* ---------- Pulsanti indice / manifesto ----------
   Sempre visibili in entrambi i layout: in portrait sono inline
   sotto al testo hero, in landscape diventano una coppia fissa in
   basso a sinistra (vedi media query più sotto). */
.index-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
  pointer-events:auto;
}
.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  background:var(--ink);
  border:2px solid var(--red);
  border-radius:8px;
  color:var(--red);
  font-family:var(--display);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.pill-btn:hover, .pill-btn:focus-visible{
  background:var(--red);
  color:var(--ink);
}
.pill-btn svg{
  width:14px;
  height:14px;
  flex:none;
  transition:transform 0.2s ease;
}
#index-toggle[aria-expanded="true"] svg{
  transform:rotate(180deg);
}

/* ---------- 3D scene ---------- */
#scene-wrap{
  position:relative;
  flex:1;
  min-height:420px;
  touch-action:none;
  cursor:grab;
  /* riempie sempre per intero la sua cella (portrait: la riga
     flex; landscape: la cella di grid) — non viene MAI ridimensionato
     direttamente da JS, così la sua misura è sempre affidabile.
     Il quadrato vero e proprio è #scene-square al suo interno. */
  display:flex;
  align-items:center;
  justify-content:center;
}
#scene-wrap.dragging{cursor:grabbing}
#scene-square{
  position:relative;
  width:100%;
  height:100%;
}
#scene{
  position:absolute;
  inset:0;
}

.face{
  width:150px;
  height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  background:var(--face-color);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  -webkit-user-select:none;
  user-select:none;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.face:hover, .face:focus-visible{
  transform:scale(1.08);
  box-shadow:0 14px 40px rgba(0,0,0,0.5);
}
.face-icon{
  width:38px;
  height:38px;
}
.face-icon svg{
  width:100%;
  height:100%;
  stroke:var(--ink);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.face-label{
  font-family:var(--display);
  font-weight:700;
  font-size:0.85rem;
  text-align:center;
  line-height:1.15;
  padding:0 10px;
}

@media (max-width:640px){
  .face{width:112px;height:112px;border-radius:12px;gap:6px}
  .face-icon{width:26px;height:26px}
  .face-label{font-size:0.68rem}
}

/* ---------- Index / table of contents ---------- */
.index{
  position:relative;
  z-index:2;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(48px,8vw,96px) clamp(20px,6vw,72px);
}
.index-head{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--paper);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  border-bottom:2px solid var(--ink);
  padding-bottom:18px;
  margin-bottom:32px;
  max-width:1100px;
}
.index-head h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.4rem,3vw,2rem);
  margin:0;
}
.index-head-right{
  display:flex;
  align-items:baseline;
  gap:20px;
}
.index-count{
  font-family:var(--mono);
  font-size:0.85rem;
  color:var(--ink);
  opacity:0.6;
  white-space:nowrap;
}
.index-back{
  font-family:var(--mono);
  font-size:0.85rem;
  color:var(--ink);
  background:none;
  border:none;
  border-bottom:1px solid var(--ink);
  padding:0 0 2px;
  cursor:pointer;
  white-space:nowrap;
}
.index-back:hover, .index-back:focus-visible{
  color:var(--red);
  border-color:var(--red);
}
.index-list{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:1100px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
}
.index-item{
  border-bottom:1px solid var(--paper-dim);
}
.index-item a{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 12px;
  text-decoration:none;
}
.index-item:nth-child(odd){border-right:1px solid var(--paper-dim)}
.index-swatch{
  flex:none;
  width:10px;
  height:10px;
  border-radius:2px;
  margin-top:8px;
  background:var(--sw-color);
}
.index-item h3{
  font-family:var(--display);
  font-size:1.02rem;
  margin:0 0 4px;
}
.index-item p{
  margin:0;
  font-size:0.92rem;
  color:var(--ink);
  opacity:0.72;
}
@media (max-width:760px){
  .index-list{grid-template-columns:1fr}
  .index-item:nth-child(odd){border-right:none}
}

footer{
  background:var(--paper);
  color:var(--ink);
  opacity:0.55;
  font-family:var(--mono);
  font-size:0.78rem;
  padding:20px clamp(20px,6vw,72px) 40px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* ============================================================
   LANDSCAPE LARGO — due colonne senza scroll di pagina.
   Soglia: orientation landscape + min-width 700px, per escludere
   telefoni molto stretti ruotati (es. con tastiera aperta) o
   finestre desktop ridotte a metà schermo, dove due colonne
   diventerebbero illeggibili.
   ============================================================ */
@media (orientation: landscape) and (min-width: 700px){
  body.home{
    height:100%;
    overflow:hidden;
  }
  body.home footer{display:none}

  .hero{
    display:grid;
    grid-template-columns:minmax(320px, 38%) 1fr;
    grid-template-rows:minmax(0, 1fr);
    align-items:stretch;
    height:100svh;
    min-height:100svh;
    overflow:hidden;
  }
  .hero-copy{
    max-width:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(24px,4vw,56px) clamp(20px,4vw,48px);
  }
  .hint-portrait{display:none}
  .hint-landscape{display:inline}

  #scene-wrap{
    /* nessun align-self/justify-self qui: deve restare stretch
       (comportamento di default della grid) per riempire l'intera
       cella e dare a JS una misura sempre corretta */
    min-height:0;
    min-width:0;
  }

  .index-actions{
    position:fixed;
    left:clamp(20px,4vw,48px);
    bottom:clamp(24px,4vw,56px);
    z-index:60;
    margin-top:0;
  }

  /* L'indice diventa un pannello overlay che copre tutta l'area
     hero (testo + dodecaedro), non solo il riquadro di testo:
     con 12 voci + descrizioni serve spazio vero, e uno spazio
     ritagliato solo a sinistra sarebbe troppo stretto. */
  .index{
    position:fixed;
    inset:0;
    z-index:50;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .index.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .index-list{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ============================================================
   PROSE — stile condiviso per le pagine di testo generate da
   markdown (info.html e future pagine simili). Riusa gli stessi
   token del resto del sito (colori, font) invece di inventarne
   di nuovi, così le pagine di testo sembrano parte dello stesso
   sito e non un allegato a parte.
   ============================================================ */
.prose-page{
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
}
.prose-nav{
  padding:20px clamp(20px,6vw,72px) 0;
  max-width:720px;
  margin:0 auto;
}
.prose-nav a{
  font-family:var(--mono);
  font-size:0.8rem;
  text-decoration:none;
  color:var(--ink);
  opacity:0.6;
}
.prose-nav a:hover{opacity:1}
.prose{
  max-width:720px;
  margin:0 auto;
  padding:clamp(32px,6vw,64px) clamp(20px,6vw,72px) clamp(64px,10vw,120px);
}
.prose h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 28px;
}
.prose h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.2rem,2.4vw,1.5rem);
  color:var(--ink);
  margin:40px 0 14px;
}
.prose h3{
  font-family:var(--display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  margin:28px 0 10px;
}
.prose p{
  font-size:1.02rem;
  line-height:1.65;
  color:var(--ink);
  margin:0 0 18px;
}
.prose strong{color:var(--ink)}
.prose a{color:var(--red); text-decoration-thickness:1px}
.prose ul, .prose ol{
  margin:0 0 18px;
  padding-left:1.3em;
  line-height:1.65;
}
.prose li{margin-bottom:6px}
.prose code{
  font-family:var(--mono);
  font-size:0.9em;
  background:var(--paper-dim);
  padding:0.1em 0.35em;
  border-radius:4px;
}
.prose pre{
  background:var(--ink);
  color:var(--paper);
  padding:16px;
  border-radius:8px;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:0.85rem;
}
.prose pre code{background:none;padding:0}
.prose blockquote{
  margin:0 0 18px;
  padding-left:16px;
  border-left:3px solid var(--red);
  color:var(--ink);
  opacity:0.8;
  font-style:italic;
}
.prose hr{
  border:none;
  border-top:1px solid var(--paper-dim);
  margin:36px 0;
}