/* ==========================================================
   BAR CROAZIA — foglio di stile unico del sito
   Grafica ricavata dal wireframe: fondo bianco, un solo arancio,
   nero per testi e bordi, carattere Fake Receipt (monospaziato da
   scontrino), barre "*** sezione ***", cornici arancioni con stelle.
   Misure in rem: 1rem = 16px su computer; su schermi stretti la base
   scende e tutto si riduce in proporzione.
   ========================================================== */

@font-face{
  font-family:'Fake Receipt';
  src:url('assets/fonts/fakereceipt-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
/* lettere dell'esperanto che il font non ha (ĉ ĝ ĥ ĵ ŝ), ricostruite dalle sue */
@font-face{
  font-family:'Fake Receipt';
  src:url('assets/fonts/fakereceipt-eo.woff2') format('woff2');
  unicode-range:U+0108-0109, U+011C-011D, U+0124-0125, U+0134-0135, U+015C-015D;
  font-display:swap;
}
/* alfabeto etrusco (lingua "Etrusco"): Noto Sans Old Italic, licenza OFL */
@font-face{
  font-family:'Fake Receipt';
  src:url('assets/fonts/notosans-olditalic.woff2') format('woff2');
  unicode-range:U+10300-1032F;
  font-display:swap;
}

:root{
  --orange:#e83d0f;
  --orange-dark:#c9340c;
  --ink:#000000;
  --paper:#ffffff;
  --col:62.5rem;          /* colonna centrale: 1000px */
  --head:70.5rem;         /* intestazione, un po' più larga */
  --frame:24.3rem;        /* cornici arancioni */
  --fs-body:1.03rem;      /* testi */
  --fs-big:1.28rem;       /* barre, pulsanti, titoli */
  --lh:1.6;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Fake Receipt', 'Courier New', monospace;
  font-size:var(--fs-body);
  line-height:var(--lh);
  text-transform:uppercase;
  letter-spacing:-0.01em;
}

a{ color:inherit; }
img{ display:block; max-width:100%; }
p{ margin:0 0 1.6em; }
p:last-child{ margin-bottom:0; }
.o{ color:var(--orange); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- scritte verticali ai lati ---------- */
body{ position:relative; }
.side-tape{
  position:absolute;
  top:var(--tape-top, 29rem);
  z-index:1;
  display:none;
  overflow:hidden;
  pointer-events:none;
  color:var(--orange);
  font-size:1.05rem;
  line-height:1;
  white-space:nowrap;
  writing-mode:vertical-rl;
}
.side-tape.left{ left:calc(50% - var(--col) / 2 - 4.4rem); transform:rotate(180deg); }
.side-tape.right{ right:calc(50% - var(--col) / 2 - 4.4rem); }
@media(min-width:1200px){ .side-tape{ display:block; } }

/* ---------- intestazione ---------- */
.site-head{
  width:min(var(--head), calc(100% - 2rem));
  margin:0 auto;
  padding-top:0.9rem;
}

.topline > span:first-child{ white-space:nowrap; }
.topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.6rem;
  font-size:1rem;
  margin-bottom:0.55rem;
}

.ticker{
  position:relative;
  overflow:hidden;
  border:1px solid var(--orange);
  border-left:0;
}
/* asticella fissa a sinistra, come quella che chiude la fila a destra */
.ticker::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  z-index:1;
  border-left:1px solid var(--orange);
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:ticker 40s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

.ticker .t{
  display:block;
  padding:0.1rem 0.6rem 0;
  border-left:1px solid var(--orange);
  color:var(--orange);
  font-size:1.14rem;
  line-height:1.9;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  background:none;
  font-family:inherit;
  text-transform:uppercase;
  letter-spacing:inherit;
  border-top:0; border-bottom:0; border-right:0;
}
.ticker .t:hover,
.ticker .t:focus-visible{ background:var(--orange); color:var(--paper); outline:none; }

@media(prefers-reduced-motion:reduce){
  .ticker{ overflow-x:auto; }
  .ticker-track{ animation:none; }
}

.logo{
  display:block;
  width:19.75rem;
  max-width:70%;
  margin:2.9rem auto 2.5rem;
}
.logo img{ width:100%; height:auto; }

/* ---------- pulsanti ---------- */
.btn{
  display:inline-block;
  padding:0.08rem 0.95rem 0;
  border:1px solid var(--ink);
  background:var(--orange);
  color:var(--paper);
  font-family:inherit;
  font-size:var(--fs-big);
  line-height:1.8;
  letter-spacing:0;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:background-color .06s ease, transform .06s ease, box-shadow .06s ease;
}
/* ombra piena come un tasto di cassa: al passaggio si scurisce, al clic
   si abbassa e l'ombra sparisce */
.btn:hover,
.back-btn:hover{ background:var(--orange-dark); color:var(--paper); }
.btn:active,
.back-btn:active{ transform:translate(4px, 4px); box-shadow:0 0 0 var(--ink); }
.btn:focus-visible,
.back-btn:focus-visible{ outline:2px dashed var(--ink); outline-offset:4px; }
.btn[aria-expanded="true"]{
  background:var(--paper);
  color:var(--orange);
}

.main-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.9rem 1.1rem;
  width:min(var(--head), calc(100% - 2rem));
  margin:0 auto;
}

/* ---------- colonna e sezioni ---------- */
main{
  width:min(var(--col), calc(100% - 2rem));
  margin:6.6rem auto 0;
}

.section{ margin-bottom:5.2rem; scroll-margin-top:1rem; }

.bar{
  margin:0 0 2.2rem;
  padding:0.1rem 0.5rem 0;
  border:1px solid var(--ink);
  background:var(--orange);
  color:var(--paper);
  font-size:var(--fs-big);
  font-weight:400;
  line-height:1.75;
  text-align:center;
}
.bar{ position:relative; }
.bar::before{ content:"*** "; }
.bar::after{ content:" ***"; }

.dots{
  height:0;
  margin:1.6rem 0;
  border:0;
  border-top:2px dotted var(--ink);
}

.row-btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:0.9rem 1.5rem;
}
.row-btns.center{ justify-content:center; }

/* riga con puntini guida: "fanzine di bar croazia ...... 2025–2026" */
.leader{
  display:flex;
  align-items:baseline;
  gap:0.5rem;
  font-size:var(--fs-big);
  margin-bottom:1.4rem;
}
.leader .fill{
  flex:1;
  border-bottom:1.5px dotted var(--ink);
  transform:translateY(-0.28em);
}

.big{ font-size:var(--fs-big); }
.center{ text-align:center; }
.justify{ text-align:justify; }

/* ---------- cornici arancioni con le stelle ---------- */
.frame{
  position:relative;
  width:var(--frame);
  height:20rem;
  padding:0.9rem;
  border:1px solid var(--ink);
  background:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
}
.frame img[data-zoom]{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:cover;
  border:2px solid var(--ink);
  cursor:zoom-in;
}
.frame.fill{ padding:1.45rem; }
.frame.fill img[data-zoom]{ width:100%; }
.bw{ filter:grayscale(1) contrast(1.1); }

/* contenitore della stella: posizione, misura ed eventuale rotazione fissa */
.star{
  display:block;
  position:absolute;
  z-index:2;
  width:4.2rem;
  height:4.2rem;
  border:0;
  pointer-events:none;
}

/* coppie testo | immagine */
.pair{
  display:grid;
  grid-template-columns:minmax(0, 1fr) var(--frame);
  gap:1.9rem;
  align-items:start;
}
.pair.img-left{ grid-template-columns:var(--frame) minmax(0, 1fr); }

/* ---------- eventi ---------- */
.meta{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.3rem 1.5rem;
  padding:0 2.2rem;
  font-size:var(--fs-big);
  line-height:1.4;
}
.ev-title{
  margin:0.3rem 0 0;
  font-size:var(--fs-big);
  font-weight:400;
  line-height:1.4;
  color:var(--orange);
  text-align:center;
}
.ev-title::before{ content:"*** "; }
.ev-title::after{ content:" ***"; }

.names{ margin:0; }
.names-label{ margin-bottom:0; }
.after-names{ margin-top:0; }
.names .line{ display:flex; align-items:baseline; gap:0.3rem; color:var(--orange); }
.names .line .fill{ flex:1; border-bottom:1.5px dotted var(--orange); transform:translateY(-0.1em); min-width:1.5rem; }
.names .line.single{ justify-content:flex-start; }

.ev-item[hidden], .fz-item[hidden], .call-item[hidden]{ display:none; }

#eventi .frame{ margin-top:0.4rem; }
#eventi .star.a{ top:0.6rem; right:0.9rem; width:3.4rem; height:3.4rem; transform:rotate(12deg); }
#eventi .star.b{ bottom:3.3rem; left:1.9rem; width:4.9rem; height:4.9rem; transform:rotate(-8deg); }

/* ---------- chi siamo ---------- */
.claim{
  position:relative;
  font-size:var(--fs-big);
  line-height:1.45;
  text-align:center;
}
#chi-siamo .star.a{ top:-1.4rem; left:10.8rem; width:5.2rem; height:5.2rem; }
#chi-siamo .frame{ height:23rem; margin-top:0.4rem; }
#chi-siamo .pair{ gap:2.6rem; }

/* ---------- fanzine ---------- */
.fz-num{ color:var(--orange); margin-bottom:1.6rem; }
#fanzine .pair{ gap:4rem; }
#fanzine .star.a{ top:0.4rem; right:-0.6rem; width:5.2rem; height:5.2rem; }
#fanzine .star.b{ bottom:1.5rem; left:1.6rem; width:4.8rem; height:4.8rem; }

/* ---------- open call ---------- */
#call .pair{ gap:1.3rem; }
#call .star.a{ top:1.3rem; right:2.3rem; }
#call .star.b{ bottom:0.6rem; left:1.9rem; width:4.8rem; height:4.8rem; }

/* ---------- archivio ---------- */
.subtitle{ font-size:var(--fs-big); text-align:center; margin:-0.2rem 0 1.4rem; }
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 16.4rem);
  justify-content:center;
  gap:1.2rem 3.1rem;
}
.shot{ margin:0; text-align:center; }
.shot .cap{ display:flex; align-items:flex-end; justify-content:center; min-height:2.6em; color:var(--orange); font-size:0.88rem; line-height:1.3; margin-bottom:0.5rem; }
.shot .frame{ width:100%; height:19.9rem; padding:0.9rem; }

.shot figcaption{ margin-top:0.7rem; }
.shot-crop{ width:100%; height:100%; overflow:hidden; border:2px solid var(--ink); cursor:zoom-in; }
.shot-crop{ position:relative; }
.shot-crop img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  transform:scale(1.16);
  opacity:0;
  pointer-events:none;
  transition:opacity 1.2s ease;
}
.shot-crop img.on{ opacity:1; pointer-events:auto; }

/* ---------- su di noi (blog) ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:2.6rem 2.6rem;
}
.card{
  display:block;
  border:1.5px solid var(--ink);
  color:var(--ink);
  text-decoration:none;
  background:var(--paper);
}
.card-img{
  height:15.5rem;
  padding:0.65rem 1.5rem 0.6rem 1.75rem;
  background:var(--orange);
  border-bottom:1.5px solid var(--ink);
}
.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  border:2px solid var(--ink);
}
.card-body{ padding:0.6rem 0.8rem 1.2rem; }
.tag{
  display:inline-block;
  margin-bottom:1.4rem;
  padding:0.05rem 0.55rem 0;
  border:1px solid var(--orange);
  color:var(--orange);
  line-height:1.8;
}
.card-title{ font-size:var(--fs-big); line-height:1.05; }
.card-src{ color:var(--orange); line-height:1.4; margin-top:0.2rem; }
.card:hover .card-title{ color:var(--orange); }
.card:hover .card-img{ background:var(--ink); }

/* ---------- ultime cose ---------- */
.stack{
  position:relative;
  width:min(25.4rem, 100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}
.stack .btn{ text-align:center; width:100%; }
.stack .star{ width:2.5rem; height:2.5rem; }
.stack .star.a{ top:-0.9rem; left:-0.8rem; }
.stack .star.b{ bottom:-1rem; right:-0.8rem; }

.panel{ margin-top:2rem; }
.panel[hidden]{ display:none; }
.panel-head{ color:var(--orange); text-align:center; font-size:var(--fs-big); margin-bottom:1.2rem; }
.panel-head::before{ content:"*** "; }
.panel-head::after{ content:" ***"; }

.links{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.9rem 1.5rem; }
.links a{
  display:flex;
  justify-content:space-between;
  padding:0.4rem 0.8rem 0.3rem;
  border:1px solid var(--orange);
  color:var(--ink);
  text-decoration:none;
}
.links a span:last-child{ color:var(--orange); }
.links a:hover{ background:var(--orange); color:var(--paper); }
.links a:hover span:last-child{ color:var(--paper); }

.map{
  width:100%;
  height:22rem;
  border:0;
  outline:1px solid var(--ink);
  outline-offset:0;
  display:block;
}
.map-wrap{ padding:0.9rem; background:var(--orange); border:1px solid var(--ink); }

/* ---------- footer ---------- */
.site-foot{
  width:min(var(--col), calc(100% - 2rem));
  margin:0 auto;
  /* sotto i numeri del codice a barre solo mezzo rem: la pagina finisce
     dove finiscono le scritte laterali */
  padding:1.8rem 0 0.5rem;
  text-align:center;
  font-size:var(--fs-big);
  line-height:1.5;
}
.site-foot .logo{ width:10rem; margin:0 auto 1.7rem; }
.site-foot > p:first-of-type{ margin:0; }
main > .section:last-child{ margin-bottom:2.4rem; }
.barcode{
  display:flex;
  justify-content:center;
  gap:2px;
  height:5.6rem;
  width:min(29.6rem, 100%);
  margin:1.4rem auto 0;
}
.barcode span{ background:var(--ink); flex:0 0 auto; }

/* ---------- ingrandimento foto ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:500;
  display:none;
  background:rgba(0,0,0,0.9);
  overflow:hidden;
}
.lightbox.open{ display:block; }
.lb-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 4.5rem;
}
.lb-img{
  max-width:100%;
  max-height:92vh;
  border:2px solid var(--paper);
  cursor:zoom-in;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .25s ease;
}
.lightbox.zoomed .lb-img{ cursor:grab; }
.lightbox.dragging .lb-img{ transition:none; }
.lightbox.zoomed .lb-img:active{ cursor:grabbing; }
.lightbox button{
  position:absolute;
  z-index:2;
  border:1px solid var(--paper);
  background:var(--orange);
  color:var(--paper);
  font:inherit;
  font-size:1.4rem;
  line-height:1;
  padding:0.4rem 0.7rem 0.3rem;
  cursor:pointer;
}
.lightbox button:hover{ background:var(--paper); color:var(--orange); }
.lightbox .lb-close{ top:1rem; right:1rem; }
.lightbox .lb-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:1rem; top:50%; transform:translateY(-50%); }
.lightbox button[hidden]{ display:none; }
.lightbox .lb-count{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:1rem;
  transform:translateX(-50%);
  padding:0.15rem 0.6rem 0;
  border:1px solid var(--paper);
  background:var(--ink);
  color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.lightbox .lb-count[hidden]{ display:none; }
.shot-crop:focus-visible{ outline:2px dashed var(--ink); outline-offset:4px; }
@media(max-width:760px){ .lb-stage{ padding:4rem 0.6rem; } }

/* ==========================================================
   SOTTOPAGINE (elenco fanzine, archivio, articoli)
   ========================================================== */
.sub-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:min(var(--head), calc(100% - 2rem));
  margin:0 auto;
  padding:0.9rem 0 0;
  font-size:1rem;
}
.back-btn{
  display:inline-block;
  padding:0.08rem 0.8rem 0;
  border:1px solid var(--ink);
  background:var(--orange);
  color:var(--paper);
  text-decoration:none;
  line-height:1.8;
}
.back-btn{ box-shadow:4px 4px 0 var(--ink); transition:background-color .06s ease, transform .06s ease, box-shadow .06s ease; }

.subpage .page{ width:min(var(--col), calc(100% - 2rem)); margin:3.4rem auto 0; }
.sub-hero{ margin-bottom:2.2rem; }
.sub-hero .tag{ display:none; }
.sub-hero h1{
  margin:0 0 1.6rem;
  padding:0.1rem 0.5rem 0;
  border:1px solid var(--ink);
  background:var(--orange);
  color:var(--paper);
  font-size:var(--fs-big);
  font-weight:400;
  line-height:1.75;
  text-align:center;
}
.sub-hero h1::before{ content:"*** "; }
.sub-hero h1::after{ content:" ***"; }
.sub-hero p{ margin:0; text-align:center; }
.article-meta{ display:flex; justify-content:center; gap:0.4rem 2rem; flex-wrap:wrap; color:var(--orange); }
.article-meta .article-outlet{ order:1; flex-basis:100%; text-align:center; color:var(--ink); }

.zine-section{ margin:0; }

/* fanzine */
.issue-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:2.2rem; }
.issue-card{ border:1.5px solid var(--ink); cursor:pointer; }
.issue-cover{ height:20rem; padding:0.9rem; background:var(--orange); border-bottom:1.5px solid var(--ink); }
.issue-cover img{ width:100%; height:100%; object-fit:cover; object-position:top; border:2px solid var(--ink); }
.issue-info{ padding:0.7rem 0.8rem 1rem; display:flex; flex-direction:column; align-items:flex-start; gap:0.3rem; }
.issue-title{ font-size:var(--fs-big); }
.issue-date{ color:var(--orange); }
.issue-more{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.issue-card.open .issue-more{ max-height:120rem; margin-top:0.6rem; }
.issue-more p{ margin:0 0 0.9em; text-align:justify; }
.issue-more strong{ font-weight:400; color:var(--orange); }
.issue-credits{ margin:0; }
.issue-credits dt{ margin-top:0.55rem; }
.issue-credits dt:first-child{ margin-top:0; }
.issue-credits dd{ margin:0; color:var(--orange); }
.buy-btn{
  margin-top:0.8rem;
  padding:0.08rem 0.8rem 0;
  border:1px solid var(--ink);
  background:var(--orange);
  color:var(--paper);
  font:inherit;
  text-transform:uppercase;
  line-height:1.8;
  cursor:pointer;
  display:inline-block;
  text-decoration:none;
}
.buy-btn:hover{ background:var(--orange-dark); }
.buy-btn:focus-visible{ outline:2px dashed var(--ink); outline-offset:3px; }

/* archivio eventi */
.event-tile-list{ display:flex; flex-direction:column; gap:1.6rem; }
.event-tile{ display:grid; grid-template-columns:12rem minmax(0, 1fr); border:1.5px solid var(--ink); }
.event-tile-photo{
  position:relative;
  min-height:13rem;
  border-right:1.5px solid var(--ink);
  background-color:var(--orange);
  box-shadow:inset 0 0 0 0.9rem var(--orange), inset 0 0 0 calc(0.9rem + 2px) var(--ink);
}
/* la foto in bianco e nero dentro la cornice arancione */
.event-tile-photo .ph{
  position:absolute;
  inset:calc(0.9rem + 2px);
  background-size:cover;
  background-position:center;
  filter:grayscale(1) contrast(1.1);
  opacity:0;
  transition:opacity 1.2s ease;
}
.event-tile-photo .ph.on{ opacity:1; }
.event-tile-info{ padding:0.9rem 1rem; display:flex; flex-direction:column; justify-content:center; gap:0.4rem; }
.event-tile-title{ font-size:var(--fs-big); }
.event-tile-date{ color:var(--orange); }
button.event-tile-photo{ display:block; width:100%; padding:0; border:0; border-right:1.5px solid var(--ink); cursor:zoom-in; font:inherit; }
button.event-tile-photo:focus-visible{ outline:2px dashed var(--ink); outline-offset:-6px; }
.event-tile-more{
  align-self:flex-start;
  margin-top:0.4rem;
  padding:0.15rem 0.6rem 0;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.event-tile-more:hover, .event-tile.open .event-tile-more{ background:var(--ink); color:var(--paper); }
.event-tile-more:focus-visible{ outline:2px dashed var(--ink); outline-offset:3px; }
/* elenco delle foto di un evento */
.event-grid{ grid-column:1 / -1; border-top:1.5px solid var(--ink); padding:0.9rem 1rem 1rem; }
.event-grid[hidden]{ display:none; }
.event-grid-hint{ margin:0 0 0.7rem; color:var(--orange); }
.event-grid-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(6.4rem, 1fr));
  gap:0.5rem;
  max-height:27rem;
  overflow-y:auto;
  padding:0.25rem;
}
.event-thumb{ display:block; padding:0; border:2px solid var(--ink); background:var(--orange); cursor:zoom-in; aspect-ratio:1; overflow:hidden; }
.event-thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); transition:filter .2s ease; }
.event-thumb:hover img, .event-thumb:focus-visible img{ filter:none; }
.event-thumb:hover, .event-thumb:focus-visible{ border-color:var(--orange); outline:2px solid var(--ink); outline-offset:0; }
.no-foto .event-tile-photo{ display:flex; align-items:center; justify-content:center; }
.no-foto .event-tile-photo span{ padding:0.15rem 0.5rem 0; background:var(--paper); border:1px solid var(--ink); font-size:0.85rem; }

/* elenco articoli: stesse schede della home */
.subpage .post-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2.6rem; }
.post-card{ display:flex; flex-direction:column; border:1.5px solid var(--ink); color:var(--ink); text-decoration:none; }
.post-photo{ height:15.5rem; padding:0.65rem 1.5rem 0.6rem 1.75rem; background:var(--orange); border-bottom:1.5px solid var(--ink); }
.post-photo img{ width:100%; height:100%; object-fit:cover; border:2px solid var(--ink); }
.post-info{ padding:0.6rem 0.8rem 1.2rem; display:flex; flex-direction:column; align-items:flex-start; }
.post-date{ order:-1; margin-bottom:1.4rem; padding:0.05rem 0.55rem 0; border:1px solid var(--orange); color:var(--orange); line-height:1.8; }
.post-title{ font-size:var(--fs-big); line-height:1.05; }
.post-author{ color:var(--orange); margin-top:0.2rem; }
.post-card:hover .post-title{ color:var(--orange); }

.call-dots{ display:flex; justify-content:center; gap:0.55rem; margin:-1.3rem 0 1.5rem; }
.call-dot{ width:0.6rem; height:0.6rem; padding:0; border:1px solid var(--ink); border-radius:50%; background:var(--paper); cursor:pointer; transition:background-color .2s ease; }
.call-dot.on{ background:var(--orange); border-color:var(--orange); }
.call-dot:hover{ background:var(--ink); }
.call-dot.on:hover{ background:var(--orange); }
.call-dot:focus-visible{ outline:2px dashed var(--ink); outline-offset:3px; }

/* riquadro con l'indirizzo email (tasti che mandano una mail) */
.mail-pop{ position:fixed; inset:0; z-index:520; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.55); }
.mail-pop[hidden]{ display:none; }
.mail-pop-box{ position:relative; width:min(34rem, 100%); padding:2.2rem 1.6rem 1.6rem; background:var(--paper); border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--ink); text-align:center; }
.mail-pop-title{ margin:0 0 0.8rem; color:var(--orange); }
.mail-pop-title::before{ content:"*** "; }
.mail-pop-title::after{ content:" ***"; }
.mail-pop-addr{ margin:0; font-size:var(--fs-big); word-break:break-all; user-select:all; }
.mail-pop-subj{ margin:0.5rem 0 0; }
.mail-pop-subj:empty{ display:none; }
.mail-pop-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:1.4rem; }
.mail-pop-close{ position:absolute; top:0.4rem; right:0.5rem; border:0; background:none; font:inherit; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--ink); }
.mail-pop-close:hover{ color:var(--orange); }
.mail-pop-open-page{ overflow:hidden; }

/* chi siamo: foto che si alternano */
.cs-frame{ display:block; }
.cs-crop{ position:relative; width:100%; height:100%; overflow:hidden; border:2px solid var(--ink); background:var(--ink); }
.frame .cs-crop img[data-zoom]{ position:absolute; inset:0; width:100%; height:100%; max-width:none; border:0; object-fit:cover; opacity:0; pointer-events:none; transition:opacity 1.2s ease; }
.frame .cs-crop img.on{ opacity:1; pointer-events:auto; }

/* open call: locandina e testo completo */
.oc-meta{ flex-direction:column; align-items:center; gap:0.15rem; text-align:center; }
.oc-layout{ display:grid; grid-template-columns:minmax(0, 21rem) minmax(0, 1fr); gap:2.6rem; align-items:start; }
.oc-posters{ display:flex; flex-direction:column; gap:1.2rem; position:sticky; top:1.5rem; }
.oc-posters .article-photo{ padding:1rem; }
.oc-text{ line-height:1.6; }
.oc-text p{ margin:0 0 1rem; }
.oc-text ul{ margin:-0.4rem 0 1rem; padding-left:1.4rem; }
.oc-text li{ margin-bottom:0.25rem; }
.oc-text a:not(.btn){ color:var(--orange); }
.oc-text .oc-lead{ color:var(--orange); font-size:var(--fs-big); line-height:1.35; }
.oc-actions{ margin-top:1.8rem; }
@media(max-width:760px){
  .oc-layout{ grid-template-columns:minmax(0, 1fr); gap:1.8rem; }
  .oc-posters{ position:static; max-width:22rem; margin:0 auto; }
  .oc-actions{ text-align:center; }
}

/* articolo */
.article-photo-wrap{ display:flex; flex-direction:column; align-items:center; }
.article-photo{ padding:1.45rem; background:var(--orange); border:1px solid var(--ink); cursor:zoom-in; max-width:44rem; }
.article-photo img{ border:2px solid var(--ink); }
.article-photo-hint{ display:block; margin-top:0.8rem; text-align:center; color:var(--orange); }

.subpage footer{
  width:min(var(--col), calc(100% - 2rem));
  margin:4rem auto 0;
  padding:1.6rem 0 4rem;
  border-top:2px dotted var(--ink);
  text-align:center;
}

/* ---------- telefono e tablet ---------- */
@media(max-width:1060px){
  html{ font-size:15px; }
  /* tablet: le tre anteprime dell'archivio non escono dallo schermo */
  .gallery{ grid-template-columns:repeat(3, minmax(0, 16.4rem)); gap:1.2rem clamp(1rem, 3vw, 3.1rem); }
}

@media(max-width:760px){
  html{ font-size:14px; }
  :root{ --frame:100%; }
  .pair, .pair.img-left{ grid-template-columns:minmax(0, 1fr); gap:1.6rem; }
  .pair.img-left > .frame, .pair.img-left > figure{ order:-1; }
  .frame{ height:auto; aspect-ratio:auto; min-height:18rem; }
  /* solo le foto dirette della cornice: non le stelle né i caroselli (.shot-crop, .cs-crop) */
  .frame > img{ height:auto; max-height:26rem; width:auto; }
  .frame.fill img{ width:100%; max-height:none; }
  #chi-siamo .frame{ height:auto; }
  #chi-siamo .cs-crop{ height:auto; aspect-ratio:3 / 2; }
  .meta{ padding:0; justify-content:center; text-align:center; }
  .row-btns{ justify-content:center; }
  .gallery{ grid-template-columns:minmax(0, 1fr); max-width:30rem; margin:0 auto; gap:2rem; }
  .cards, .subpage .post-grid{ grid-template-columns:minmax(0, 1fr); }
  .links{ grid-template-columns:minmax(0, 1fr); }
  .justify{ text-align:left; }
  main{ margin-top:4rem; }
  .event-tile{ grid-template-columns:minmax(0, 1fr); }
  .event-tile-photo, button.event-tile-photo{ border-right:0; border-bottom:1.5px solid var(--ink); }
  .event-grid-list{ grid-template-columns:repeat(auto-fill, minmax(4.6rem, 1fr)); max-height:22rem; }
  .leader{ flex-wrap:wrap; }
  #chi-siamo .star.a{ left:0.4rem; }
  .names .line{ flex-direction:column; gap:0; margin-bottom:0.3rem; }
  .names .line .fill{ display:none; }
  .leader{ font-size:var(--fs-body); }
  .leader > span:first-child{ flex-basis:100%; }
  .claim .star{ top:-1.6rem !important; }
  /* archivio in home: cornice con le proporzioni delle foto (3:2), foto centrata e piena */
  .shot .frame{ display:block; height:auto; min-height:0; }
  .shot-crop{ height:auto; aspect-ratio:3 / 2; }
  .shot-crop img{ transform:none; object-position:center; }
}

/* ---------- stelle nere (la "pazza stellina") che ballano ----------
   ritardo (--d) e durata (--t) diversi per ogni stella, impostati in
   script.js al caricamento */
.stella{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  animation:pazza var(--t, 2.6s) cubic-bezier(.45,.05,.35,1) var(--d, 0s) infinite;
  transform-origin:50% 50%;
  user-select:none;
  -webkit-user-drag:none;
}
@keyframes pazza{
  0%, 100%{ transform:rotate(0deg)   scale(1)    translate(0, 0); }
  18%     { transform:rotate(16deg)  scale(1.14) translate(2%, -4%); }
  32%     { transform:rotate(-9deg)  scale(0.9)  translate(-2%, 2%); }
  50%     { transform:rotate(7deg)   scale(1.07) translate(1%, -2%); }
  68%     { transform:rotate(-4deg)  scale(0.96) translate(-1%, 1%); }
  84%     { transform:rotate(2deg)   scale(1.02) translate(0, 0); }
}
@media(prefers-reduced-motion:reduce){
  .stella{ animation:none; }
  .frame .cs-crop img[data-zoom]{ transition:none; }
  .event-tile-photo .ph{ transition:none; }
  .shot-crop img{ transition:none; }
}

/* ---------- numeri sotto il codice a barre ---------- */
.barcode-num{
  margin-top:0.35rem;
  font-size:0.78rem;
  letter-spacing:0.55em;
  padding-left:0.55em;
}

.panel .mail{ margin-top:1.2rem; }
.panel .mail a{ color:var(--orange); }
.panel .mail a:hover{ color:var(--ink); }

/* ---------- conto alla rovescia nel ticker (non cliccabile) ---------- */
.ticker .t-static{ cursor:default; font-variant-numeric:tabular-nums; }

/* ---------- citazione battuta a macchina ---------- */
.quote{
  width:min(var(--col), calc(100% - 2rem));
  margin:5.2rem auto 0;
  text-align:center;
}
.tw{ position:relative; margin:0; }
.tw-text{
  margin:0;
  font-size:1.9rem;
  line-height:1.35;
}
/* il testo vero resta al suo posto (invisibile) e tiene l'altezza;
   sopra, la copia che si scrive lettera per lettera */
.tw.tw-on .tw-text{ visibility:hidden; }
.tw-vis{
  position:absolute;
  inset:0;
  font-size:1.9rem;
  line-height:1.35;
}
.tw-rest{ visibility:hidden; }
.tw-cur{
  display:inline-block;
  width:0.55em;
  height:0.95em;
  margin-left:0.06em;
  vertical-align:-0.12em;
  background:var(--orange);
  animation:cur-blink 1s steps(2, start) infinite;
}
@keyframes cur-blink{ to{ visibility:hidden; } }
.quote-note{
  margin:0.7rem 0 0;
  text-align:right;
  font-size:0.95rem;
  opacity:0;
  transition:opacity .6s ease;
}
.quote-note.on{ opacity:1; }
.quote-note b{ font-weight:700; }
main{ margin-top:4.6rem; }

/* ---------- verso nascosto nel codice a barre ---------- */
.barcode{ cursor:pointer; }
.barcode:focus-visible{ outline:2px dashed var(--ink); outline-offset:6px; }
/* vuoto non occupa spazio; quando compare il verso le scritte laterali
   si ricalcolano per finire alla sua altezza (script.js) */
.barcode-verse:empty{ display:none; }
.barcode-verse{
  margin:0.6rem 0 0;
  color:var(--orange);
  font-size:var(--fs-big);
  font-variant-numeric:tabular-nums;
}

/* ---------- scia di stelline dietro il cursore (sotto il lightbox) ---------- */
.scia-stelle{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:450;
}

@media(max-width:760px){
  .tw-text, .tw-vis{ font-size:1.45rem; }
  .quote{ margin-top:3.8rem; }
  main{ margin-top:4.4rem; }
}
@media(prefers-reduced-motion:reduce){
  .tw-cur{ animation:none; }
  .quote-note{ transition:none; }
  .btn, .back-btn{ transition:none; }
}

/* ---------- effetti (effetti.js) ---------- */
/* titoli battuti a macchina */
.bar.typing{ color:transparent; }
.bar-tw{ position:absolute; inset:0; padding:0.1rem 0.5rem 0; color:var(--paper); text-align:center; white-space:pre-wrap; }
.bar-rest{ visibility:hidden; }
.bar-cur{ display:inline-block; width:0.55em; height:0.95em; margin-right:-0.55em; vertical-align:-0.12em; background:var(--paper); animation:cur-blink 1s steps(2, start) infinite; }
/* linea rossa del lettore sul codice a barre: passa ogni tanto */
.barcode{ position:relative; }
.barcode .barcode-laser{ position:absolute; left:-6%; right:-6%; top:0; height:2px; background:var(--orange); box-shadow:0 0 0 1px rgba(232,61,15,.25); opacity:0; pointer-events:none; animation:lettore 7s ease-in-out 1.5s infinite; }
@keyframes lettore{
  0%   { top:0;    opacity:0; }
  4%   { opacity:1; }
  22%  { top:calc(100% - 2px); opacity:1; }
  40%  { top:0;    opacity:1; }
  44%  { opacity:0; }
  100% { top:0;    opacity:0; }
}
.barcode:hover .barcode-laser{ animation-duration:2.4s; }
/* tasti: ondeggiano e le lettere saltano una dopo l'altra */
.btn .ch{ display:inline-block; }
.btn:hover{ animation:tasto-ondeggia .45s ease-in-out; }
.btn:hover .ch{ animation:lettera-salta .4s ease calc(var(--i) * 30ms); }
@keyframes tasto-ondeggia{ 25%{ transform:rotate(-3deg); } 50%{ transform:rotate(2.5deg); } 75%{ transform:rotate(-1deg); } }
@keyframes lettera-salta{ 40%{ transform:translateY(-6px); } }
.btn:active{ animation:none; }
.stellina-burst{ position:fixed; z-index:600; width:24px; height:24px; pointer-events:none; background:center / contain no-repeat; }
/* eventi: il testo è uno scontrino che pende da una fessura nera, con il
   bordo strappato in fondo; entrando nello schermo (e al cambio evento)
   esce a scatti dalla fessura (effetti.js) */
.scontrino{ position:relative; }
.scontrino .fessura{ display:block; position:relative; z-index:2; height:12px; margin:0 -0.7rem; border-radius:3px; background:var(--ink); }
.scontrino .carta-box{ overflow:hidden; padding:0 1px 12px; margin:0 0 -12px; }
.scontrino .carta{
  position:relative;
  padding:1.1rem 1.3rem 1.2rem;
  background:var(--paper);
  border:1px solid var(--ink);
  border-top:0;
  border-bottom:0;
}
/* bordo strappato: denti di carta con il filo nero sotto */
.scontrino .carta::after{
  content:""; position:absolute; left:-1px; right:-1px; top:100%; height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M0 0L7 8L14 0Z' fill='%23fff'/%3E%3Cpath d='M0 0L7 8L14 0' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / auto 9px round no-repeat;
  background-repeat:round no-repeat;
}
.scontrino .carta > p:first-child{ margin-top:0; }
.scontrino .carta > :last-child{ margin-bottom:0; }
.scontrino .sc-head{ text-align:center; margin:0; }
.scontrino .sc-foot{ text-align:center; }
.scontrino .sc-hr{ border:0; border-top:1.5px dashed var(--ink); margin:0.9rem 0; }
.scontrino .sc-hr + p{ margin-top:0; }
.scontrino.stampa .carta{ animation:scontrino 2s steps(16, end) both; }
@keyframes scontrino{ from{ transform:translateY(calc(-100% - 12px)); } to{ transform:translateY(0); } }
/* scritte laterali che scorrono lentissime (script.js) */
.side-tape span{ display:inline-block; }
.side-tape span.scorre{ animation:nastro 60s linear infinite; }
@keyframes nastro{ to{ transform:translateY(calc(-1 * var(--passo, 0px))); } }
@media(prefers-reduced-motion:reduce){
  .barcode-laser, .btn:hover, .btn:hover .ch, .side-tape span.scorre, .bar-cur, .scontrino .carta{ animation:none; }
}

/* ---------- selettore della lingua (lingue.js) ---------- */
.lingua{ display:inline-flex; align-items:center; gap:0.4rem; margin-left:0.9rem; color:var(--ink); }
.lingua-nome{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.lingua select{
  font:inherit; text-transform:uppercase; color:var(--orange); background:var(--paper);
  border:1px solid var(--ink); border-radius:0; padding:0.05rem 1.4rem 0 0.45rem; line-height:1.5; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:calc(100% - 0.75rem) 55%, calc(100% - 0.45rem) 55%;
  background-size:0.3rem 0.3rem; background-repeat:no-repeat;
}
.lingua select:hover{ background-color:var(--orange); color:var(--paper); }
.lingua select:focus-visible{ outline:2px dashed var(--ink); outline-offset:2px; }
/* telefono: data, Bologna e lingua stanno sulla stessa riga */
@media(max-width:480px){
  .topline{ font-size:0.85rem; }
  .lingua{ margin-left:0; }
  .lingua select{ max-width:9rem; text-overflow:ellipsis; }
}

/* pannello foto dell'archivio: su computer "Chiudi" non serve (si chiude dal tasto della scheda) */
.event-grid-close{ display:none; }
.btn .parola{ white-space:nowrap; }

/* ==========================================================
   TELEFONO: aree tattili comode (almeno 44×44 px), tasti che
   vanno a capo invece di uscire dallo schermo, archivio leggibile
   ========================================================== */
@media(max-width:760px){
  /* tasti arancioni: alti 44 px, il testo lungo va a capo tra le parole */
  .btn{ white-space:normal; max-width:100%; min-height:44px; padding:0.42rem 0.95rem 0.3rem; line-height:1.45; text-align:center; }
  .back-btn{ display:inline-flex; align-items:center; flex-shrink:0; min-height:44px; padding:0.1rem 0.9rem 0; white-space:nowrap; }
  /* sottopagine: "Bar Croazia · Bologna" sopra, lingua sotto, a destra del tasto Indietro */
  .sub-topline{ gap:0.8rem; align-items:flex-start; }
  .sub-topline > span:last-child{ display:flex; flex-direction:column; align-items:flex-end; gap:0.35rem; text-align:right; }
  .sub-topline .lingua{ margin-left:0; }
  .buy-btn{ min-height:44px; padding:0.1rem 1rem 0; }
  .ticker .t{ line-height:2.75; }
  .lingua select{ min-height:44px; }
  /* pallini: il punto resta piccolo, ma l'area da toccare è 44×44 */
  .call-dots{ gap:0; margin:-2.3rem 0 0.4rem; }
  .call-dot, .call-dot:hover, .call-dot.on, .call-dot.on:hover{ position:relative; width:44px; height:44px; border:0; border-radius:0; background:none; }
  .call-dot::before{ content:""; position:absolute; left:50%; top:50%; width:0.6rem; height:0.6rem; transform:translate(-50%, -50%); border:1px solid var(--ink); border-radius:50%; background:var(--paper); }
  .call-dot.on::before{ background:var(--orange); border-color:var(--orange); }

  /* archivio eventi: scheda leggibile, tasto che può andare a capo */
  .event-tile-info{ padding:1rem 1rem 1.1rem; }
  .event-tile-more{ display:inline-flex; align-items:center; gap:0.4rem; min-height:44px; max-width:100%; padding:0.35rem 0.9rem 0.25rem; white-space:normal; text-align:left; line-height:1.35; }
  /* pannello delle foto: niente scroll dentro lo scroll (la pagina scorre
     normalmente), intestazione con "Chiudi" che resta in vista, 3 colonne */
  .event-grid{ padding:0 0.8rem 1rem; }
  .event-grid-head{ position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:0.8rem; margin:0 0 0.8rem; padding:0.6rem 0; background:var(--paper); border-bottom:2px dotted var(--ink); }
  .event-grid-head .event-grid-hint{ margin:0; }
  .event-grid-close{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0.15rem 1rem 0; border:1px solid var(--ink); background:var(--orange); color:var(--paper); font:inherit; text-transform:uppercase; cursor:pointer; box-shadow:3px 3px 0 var(--ink); }
  .event-grid-close:active{ transform:translate(3px, 3px); box-shadow:none; }
  .event-grid-close:focus-visible{ outline:2px dashed var(--ink); outline-offset:3px; }
  .event-grid-list{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.55rem; max-height:none; overflow:visible; padding:0; }
  /* miniatura quadrata: la foto è posata dentro in assoluto, così il
     quadrato non dipende dalle misure della foto (anche su Safari) */
  .event-thumb{ position:relative; width:100%; aspect-ratio:1 / 1; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .event-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }

  /* foto ingrandita: a tutto schermo, frecce e chiusura grandi in basso/in alto */
  .lb-stage{ padding:3.8rem 0.5rem 5rem; }
  .lb-img{ max-height:calc(100vh - 9rem); max-height:calc(100dvh - 9rem); }
  .lightbox button{ min-width:48px; min-height:48px; font-size:1.7rem; padding:0.2rem 0.6rem 0; }
  .lightbox .lb-close{ top:0.6rem; right:0.6rem; }
  .lightbox .lb-prev, .lightbox .lb-next{ top:auto; bottom:0.9rem; transform:none; }
  .lightbox .lb-prev{ left:0.8rem; }
  .lightbox .lb-next{ right:0.8rem; }
  .lightbox .lb-count{ bottom:1.55rem; font-size:1.1rem; padding:0.2rem 0.7rem 0; }
}

/* telefono: il codice a barre resta dentro lo schermo (linea del lettore compresa) */
@media(max-width:760px){
  .barcode .barcode-laser{ left:-0.5rem; right:-0.5rem; }
}
@media(max-width:400px){
  .barcode{ gap:1.5px; }
}
/* telefono e tablet: le stelle che ballano vicino al bordo non fanno scorrere la pagina di lato */
@media(max-width:1060px){
  body{ overflow-x:clip; }
}
@media(max-width:760px){
  #fanzine .star.a{ right:0.2rem; }
}
@media(max-width:760px){
  .stack .star.b{ right:-0.2rem; }
  .stack .star.a{ left:-0.2rem; }
}
@media(max-width:760px){
  /* link dentro il testo: area da toccare più alta, senza spostare le righe */
  .oc-text a:not(.btn){ padding:0.95em 0; }
}
/* tablet e schermi touch più larghi: stesse aree tattili, impaginazione invariata
   (con il mouse non cambia niente) */
@media(pointer:coarse) and (min-width:761px){
  .btn{ min-height:44px; padding-top:0.32rem; padding-bottom:0.22rem; }
  .back-btn{ display:inline-flex; align-items:center; min-height:44px; }
  .buy-btn{ min-height:44px; }
  .lingua select{ min-height:44px; }
  .event-tile-more{ display:inline-flex; align-items:center; gap:0.4rem; min-height:44px; }
  .call-dots{ gap:0; margin:-2.3rem 0 0.4rem; }
  .call-dot, .call-dot:hover, .call-dot.on, .call-dot.on:hover{ position:relative; width:44px; height:44px; border:0; border-radius:0; background:none; }
  .call-dot::before{ content:""; position:absolute; left:50%; top:50%; width:0.6rem; height:0.6rem; transform:translate(-50%, -50%); border:1px solid var(--ink); border-radius:50%; background:var(--paper); }
  .call-dot.on::before{ background:var(--orange); border-color:var(--orange); }
  .lightbox button{ min-width:48px; min-height:48px; }
  .oc-text a:not(.btn){ padding:0.95em 0; }
}
@media(max-width:1060px){
  #fanzine .star.a{ right:0.2rem; }
}

/* ==========================================================
   TELEFONO (home): foto prima del testo, come su Instagram;
   menu in due colonne; scritte laterali; ticker più piccolo
   ========================================================== */
@media(max-width:760px){
  /* margini laterali un po' più larghi per far posto alle scritte laterali */
  .site-head, .main-nav, main, .quote, .site-foot{ width:calc(100% - 3.4rem); }
  .side-tape{ display:block; z-index:3; font-size:0.7rem; }   /* sopra le stelle che ballano: la scritta resta leggibile */
  .side-tape.left{ left:0.45rem; }
  .side-tape.right{ right:0.45rem; }
  .scontrino .fessura{ margin:0 -0.35rem; }
  .barcode .barcode-laser{ left:-0.3rem; right:-0.3rem; }

  /* foto prima, poi le scritte: eventi, fanzine e open call (dentro ogni
     scheda) e chi siamo (subito sotto il titolo della sezione) */
  .ev-item:not([hidden]), .fz-item:not([hidden]), .call-item:not([hidden]){ display:flex; flex-direction:column; }
  .ev-item .pair, .fz-item .pair, .call-item .pair, #chi-siamo .pair{ display:contents; }
  .ev-item .pair > .frame, .fz-item .pair > .frame, .call-item .pair > .frame{ order:-1; margin:0 0 1.4rem; }
  #chi-siamo{ display:flex; flex-direction:column; }
  #chi-siamo > .bar{ order:-2; }
  #chi-siamo .pair > .frame{ order:-1; margin:0 0 1.6rem; }
  /* la stellina del motto sta sopra le scritte, non sopra le lettere */
  #chi-siamo .claim{ padding-top:2.6rem; }
  #chi-siamo .claim .star.a{ top:-0.3rem !important; left:1rem; width:3.4rem; height:3.4rem; }

  /* menu: due colonne allineate verso l'esterno, tasti della stessa colonna
     larghi uguali; "Canale Telegram" al centro sotto */
  .main-nav{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.85rem 1.1rem; max-width:25rem; }
  .main-nav .btn{ width:100%; font-size:min(1.1rem, 3.9vw); padding-left:0.5rem; padding-right:0.5rem; }
  .main-nav .btn:last-child{ grid-column:1 / -1; justify-self:center; width:auto; margin-top:0.35rem; }

  /* ticker un po' più piccolo */
  .ticker .t{ font-size:0.98rem; line-height:2.45; padding:0.05rem 0.5rem 0; }
}
@media(max-width:350px){
  .topline{ font-size:0.74rem; }
  .lingua select{ max-width:6.8rem; }
}

/* autore della citazione: centrato sotto, in arancione */
.quote-note{ text-align:center; color:var(--orange); }
/* tasti e righe che esistono solo su telefono o solo su computer */
.solo-telefono, .sc-meta, .sc-hr-meta{ display:none; }

/* ==========================================================
   TELEFONO: ordine titolo → foto → resto, come uno scontrino
   (margini bianchi larghi con le scritte laterali, contenuti più stretti)
   ========================================================== */
@media(max-width:760px){
  .solo-computer{ display:none; }

  /* margini da scontrino: scritte laterali più grandi, aria bianca
     ai lati, contenuti più stretti al centro */
  .site-head, .main-nav, main, .quote, .site-foot{ width:calc(100% - 2 * max(2.9rem, 12.5vw)); }
  .side-tape{ font-size:0.84rem; }
  .side-tape.left{ left:max(0.7rem, 3.4vw); }
  .side-tape.right{ right:max(0.7rem, 3.4vw); }
  .barcode{ gap:1px; }

  /* eventi: titolo, foto, scontrino con data e luogo, tasti */
  .ev-item > .meta, .ev-item > hr.dots{ display:none; }
  .ev-item .ev-title{ order:-2; margin:0 0 1.2rem; }
  .sc-meta{ display:block; margin:0; text-align:center; }
  .sc-meta span{ display:block; }
  .sc-hr-meta{ display:block; }
  /* fanzine, open call, chi siamo: titolo, foto, resto */
  .fz-item .fz-num{ order:-2; text-align:center; }
  .call-item > .leader{ order:-2; }
  #chi-siamo > .bar{ order:-3; }
  #chi-siamo > .claim{ order:-2; margin-bottom:1.6rem; }
  /* dicono di noi: titolo, foto, data e testata */
  .card{ display:flex; flex-direction:column; }
  .card-body{ display:contents; }
  .card-title{ order:-1; padding:0.75rem 0.8rem 0.65rem; }
  .card-img{ border-top:1.5px solid var(--ink); }
  .card .tag{ align-self:flex-start; margin:0.75rem 0.8rem 0.35rem; }
  .card-src{ padding:0 0.8rem 1rem; }

  /* righe-titolo con i puntini (fanzine, open call): sul telefono come
     gli altri titoli, centrate, senza puntini */
  .leader{ display:block; text-align:center; font-size:var(--fs-body); margin-bottom:1.4rem; }
  .leader .fill{ display:none; }
  .leader > span{ display:block; }
  .leader > span:first-child{ color:var(--orange); font-size:var(--fs-big); line-height:1.35; }
  .leader > span:first-child::before{ content:"*** "; }
  .leader > span:first-child::after{ content:" ***"; }
  .leader > span:last-child{ margin-top:0.25rem; }

  /* tasti: testo centrato in altezza, con lo stesso spazio sopra e sotto */
  /* alto 44 px (bordo compreso) con il testo esattamente in mezzo */
  .btn, .btn.solo-telefono{ display:inline-block; min-height:0; line-height:1.3; padding:calc((44px - 1.3em - 2px) / 2 + 0.4px) 0.85rem calc((44px - 1.3em - 2px) / 2 - 0.4px); }
  .btn.solo-computer{ display:none; }
  .main-nav .btn{ width:100%; font-size:min(1.05rem, 3.6vw); padding-left:0.4rem; padding-right:0.4rem; }
  .main-nav .btn:last-child{ width:auto; padding-left:0.85rem; padding-right:0.85rem; }
  .topline{ font-size:0.74rem; }
  .lingua select{ max-width:6.8rem; }
}

/* elemento che entra scivolando quando si scorre col dito (script.js) */
.entra-dx{ animation:entra-dx .35s ease-out; }
.entra-sx{ animation:entra-sx .35s ease-out; }
@keyframes entra-dx{ from{ opacity:0; transform:translateX(36px); } to{ opacity:1; transform:none; } }
@keyframes entra-sx{ from{ opacity:0; transform:translateX(-36px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .entra-dx, .entra-sx{ animation:none; } }

@media(max-width:760px){
  /* menu: tasti più grandi; le colonne seguono la lunghezza delle parole
     (a destra le più lunghe), sempre allineate verso l'esterno */
  .main-nav{ grid-template-columns:minmax(0, 6fr) minmax(0, 9fr); gap:0.85rem 0.85rem; }
  .main-nav .btn{ font-size:min(1.2rem, 4.35vw); padding-left:0.3rem; padding-right:0.3rem; }

  /* stelle: sugli angoli delle cornici, mai in mezzo alla foto */
  #eventi .star.a, #eventi .star.b, #fanzine .star.a, #fanzine .star.b, #call .star.a, #call .star.b{ width:2.9rem; height:2.9rem; }
  #eventi .star.a, #fanzine .star.a, #call .star.a{ top:-1.1rem; right:-0.9rem; left:auto; bottom:auto; }
  #eventi .star.b, #fanzine .star.b, #call .star.b{ bottom:-1.1rem; left:-0.9rem; right:auto; top:auto; }
  /* chi siamo: niente stellina sul motto */
  #chi-siamo .claim .star{ display:none; }
  #chi-siamo .claim{ padding-top:0; }

  /* chi siamo: ogni foto intera e centrata nella cornice (anche quelle in verticale) */
  .frame .cs-crop img[data-zoom]{ object-fit:contain; object-position:center; }

  /* un divisore tra una sezione e l'altra */
  .section{ margin-bottom:0; }
  main > .section + .section::before{
    content:""; display:block; order:-10;
    margin:2.4rem 0 2.4rem; border-top:2px dashed var(--ink);
  }
  main > .section:last-child{ margin-bottom:0; }
  .site-foot{ margin-top:2.4rem; padding-top:2.4rem; border-top:2px dashed var(--ink); }
}
@media(max-width:760px){
  /* citazione esattamente a metà tra "Canale Telegram" e la sezione Eventi */
  .quote{ margin-top:60px; }
  main{ margin-top:54.8px; }
}

/* computer: nella sezione eventi la cornice arancione si allunga fino
   all'altezza del testo (niente vuoti), e la locandina resta al centro */
@media(min-width:761px){
  #eventi .pair{ align-items:stretch; }
  #eventi .pair > .frame{ height:auto; min-height:20rem; align-self:stretch; }
  #eventi .pair > .frame img[data-zoom]{ height:calc(20rem - 1.8rem - 2px); }
}

@media(max-width:760px){
  /* chi siamo: foto centrata, bordo arancione uguale su tutti i lati */
  #chi-siamo .frame.cs-frame{ min-height:0; height:auto; padding:0.9rem; }
  #chi-siamo .cs-crop{ height:auto; aspect-ratio:3 / 2; }
  .frame .cs-crop img[data-zoom]{ object-fit:cover; }

  /* divisori: solo puntini, mai due di fila */
  /* il divisore è il puntinato in fondo a ogni sezione, dopo i suoi tasti */
  main > .section + .section::before{ content:none; display:none; }
  .section > hr.dots:last-child{ margin:1.8rem 0 2.4rem; }
  #blog .cards{ margin-bottom:1.6rem; }
  .site-foot{ border-top:0; margin-top:0; padding-top:1.6rem; }
}

/* divisori in fondo alle sezioni, dopo i tasti (su computer e telefono) */
.section > .row-btns{ margin-top:2rem; }
.section > hr.dots:last-child{ margin:2rem 0 0; }
.section{ margin-bottom:3.6rem; }
main > .section:last-child{ margin-bottom:2.4rem; }
@media(max-width:760px){
  .section{ margin-bottom:0; }
  .section > hr.dots:last-child{ margin:1.8rem 0 2.4rem; }
  main > .section:last-child{ margin-bottom:0; }
  .section > .row-btns{ margin-top:1.8rem; }
}

/* contatti: il testo arancione a destra (anche quando ci sono due versioni) */
.links a span + span{ color:var(--orange); }
.links a:hover span + span{ color:var(--paper); }
@media(max-width:760px){
  /* telefono: "Il nostro canale" al posto di "Duo Cane Raw Poetry" */
  .links a .solo-telefono{ display:inline; }
}
@media(max-width:760px){
  /* contatti: nome e indirizzo sempre distanziati, su una riga quando c'è posto */
  .links a{ flex-wrap:wrap; align-items:center; gap:0.2rem 0.7rem; min-height:44px; font-size:0.92rem; }
  .links a span{ white-space:nowrap; }
  .links a span + span{ margin-left:auto; }
}