/* 7 Free Songs, Imperial Age. Idea: la serata di un concerto. Locandina in apertura,
   biglietto come modulo, scaletta a pennarello attaccata col nastro, ultima chiamata.
   Font della band (Gravesend Bold/Light + Open Sans), oro sul nero, rosso solo per il timbro.
   I Gravesend stanno sul server della band (cartella fonts/). */
@font-face { font-family:'Gravesend'; font-weight:700; font-display:swap;
  src:url('fonts/gravesend-sans-bold.ttf') format('truetype'); }
@font-face { font-family:'Gravesend'; font-weight:300; font-display:swap;
  src:url('fonts/gravesend-sans-light.ttf') format('truetype'); }

:root {
  --black:#050505; --coal:#0d0d0e; --paper:#efe9dc; --ink:#e9e4d8; --dim:#8f897d;
  --gold:#d4a53c; --gold-lt:#f1cf78; --red:#b8312f;
  --display:'Gravesend', 'Arial Black', Arial, sans-serif;
  --sans:'Open Sans', Arial, sans-serif;
  --marker:'Permanent Marker', 'Comic Sans MS', cursive;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--black); color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; }
em { font-style:italic; color:#fff; }
.wrap { max-width:1180px; margin:0 auto; padding-inline:24px; }

/* grana da pellicola su tutta la pagina */
body:after { content:''; position:fixed; inset:-50%; z-index:50; pointer-events:none; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

.label { font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:.34em; font-size:13px; color:var(--gold); }
h2 { font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:.95; font-size:clamp(36px,5vw,64px); margin-top:14px; }

/* ============ locandina ============ */
.poster { position:relative; min-height:min(100vh,960px); display:flex; flex-direction:column; align-items:center;
  padding:26px 24px 40px; overflow:hidden; isolation:isolate; text-align:center; }
.poster-photo { position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(5,5,5,.78) 0%, rgba(5,5,5,.86) 55%, var(--black) 100%),
    linear-gradient(0deg, var(--black) 2%, rgba(5,5,5,0) 40%),
    url('img/pan.jpg') center 30%/cover no-repeat;
  filter:grayscale(.55) contrast(1.15) brightness(.85); }
.poster-top { width:100%; max-width:1180px; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--display); font-weight:300; letter-spacing:.3em; text-transform:uppercase; font-size:12px; color:var(--ink); }
.poster-top img { height:38px; width:auto; }

.poster-main { width:100%; max-width:1180px; margin-top:auto; padding-top:40px; display:grid; grid-template-columns:1fr 1fr;
  gap:30px; align-items:center; text-align:left; }
.poster-main > * { min-width:0; }
.poster-title { position:relative; }
.band-cut { width:100%; max-width:560px; justify-self:end; border-radius:6px; box-shadow:0 30px 70px rgba(0,0,0,.75); }
.numeral { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:-1;
  font-family:var(--display); font-weight:700; font-size:clamp(220px,34vw,470px); line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:2px rgba(212,165,60,.45); white-space:nowrap; }
.kicker { font-family:var(--display); font-weight:300; letter-spacing:.42em; text-transform:uppercase; font-size:13px; color:var(--gold-lt); }
.poster h1 { font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:.92; letter-spacing:-.01em;
  font-size:clamp(64px,10.5vw,150px); margin-top:18px; color:#fff; text-shadow:0 10px 50px rgba(0,0,0,.7); }
.poster h1 .gold { color:var(--gold); }
.stamp { display:inline-block; margin-top:-6px; transform:rotate(-6deg); font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; font-size:clamp(26px,3.6vw,46px); color:var(--red);
  border:4px solid var(--red); border-radius:6px; padding:4px 22px 2px 26px; background:rgba(5,5,5,.55);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); }
.tagline { margin-top:24px; font-size:clamp(17px,1.8vw,20px); color:var(--ink); }

/* ============ biglietto (modulo) ============ */
.ticket { position:relative; display:flex; width:100%; max-width:900px; margin-top:38px; text-align:left;
  background:var(--paper); color:#141414; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.7); }
/* mezzelune ai lati della perforazione */
.ticket:before, .ticket:after { content:''; position:absolute; left:178px; width:26px; height:26px; border-radius:50%; background:var(--black); }
.ticket:before { top:-13px; } .ticket:after { bottom:-13px; }
.stub { flex:0 0 191px; padding:22px 20px; border-right:2px dashed rgba(20,20,20,.35);
  display:flex; flex-direction:column; justify-content:center; gap:4px; }
.stub span { font-family:var(--display); font-weight:300; letter-spacing:.3em; text-transform:uppercase; font-size:11px; }
.stub b { font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:24px; line-height:1; color:var(--red); }
.stub .tno { display:block; margin-top:12px; padding-top:10px; border-top:1px solid rgba(20,20,20,.18); }
.stub .tno i { display:block; font-style:normal; font-family:var(--display); font-weight:300; letter-spacing:.24em; text-transform:uppercase; font-size:10px; color:#6b655b; }
.stub .tno span { display:block; font-family:var(--sans); font-weight:700; font-size:24px; line-height:1.1; letter-spacing:.01em; color:#141414; margin-top:2px; }

.fields { flex:1; display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; padding:22px 24px; }
.fields label { flex:1 1 180px; }
.fields label span { display:block; font-family:var(--display); font-weight:300; letter-spacing:.24em; text-transform:uppercase; font-size:11px; color:#4b463e; }
.fields input { display:block; width:100%; margin-top:6px; font:inherit; font-size:17px; color:#111; background:transparent;
  border:0; border-bottom:2px solid #141414; padding:8px 2px; border-radius:0; }
.fields input:focus { outline:none; border-bottom-color:var(--red); }
.fields button { flex:0 0 auto; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  font-size:15px; color:var(--gold-lt); background:#111; border:0; border-radius:4px; padding:17px 26px; cursor:pointer;
  transition:background .15s ease, transform .15s ease; }
.fields button:hover { background:var(--red); color:#fff; transform:translateY(-2px); }
.fields button[disabled] { opacity:.6; cursor:wait; transform:none; }
.err { flex-basis:100%; color:var(--red); font-size:14px; font-weight:700; }
.err:empty { display:none; }
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.under { margin-top:22px; font-size:14px; color:var(--dim); }
.under b { color:var(--gold-lt); }

/* ============ nastro ============ */
.marquee { border-block:1px solid rgba(212,165,60,.3); overflow:hidden; padding:18px 0; background:var(--black); }
.marquee .track { display:flex; align-items:center; gap:34px; width:max-content; animation:slide 40s linear infinite; }
.marquee span { font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(28px,4vw,48px);
  white-space:nowrap; color:transparent; -webkit-text-stroke:1px var(--ink); }
.marquee span:nth-of-type(3n+1) { color:var(--ink); -webkit-text-stroke:0; }
.marquee i { font-style:normal; color:var(--gold); font-size:22px; }
@keyframes slide { to { transform:translateX(-50%); } }

/* ============ scaletta ============ */
.setlist-sec { padding:110px 0; background:
  radial-gradient(ellipse at 20% 40%, rgba(212,165,60,.07), rgba(0,0,0,0) 60%), var(--coal); }
.setlist-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.setlist-grid > * { min-width:0; }
.setlist { position:relative; background:#f7f4ec; color:#111; padding:58px 40px 40px; transform:rotate(-2.2deg);
  box-shadow:0 30px 60px rgba(0,0,0,.6), inset 0 0 60px rgba(120,100,60,.12); border-radius:2px; }
.tape { position:absolute; top:-16px; left:50%; width:150px; height:38px; transform:translateX(-50%) rotate(3deg);
  background:rgba(30,30,30,.92); box-shadow:0 3px 8px rgba(0,0,0,.4); }
.sl-head { font-family:var(--display); font-weight:300; letter-spacing:.24em; text-transform:uppercase; font-size:12px;
  color:#5a554c; border-bottom:2px solid #111; padding-bottom:10px; }
.setlist ol { list-style:none; counter-reset:s; margin-top:16px; }
.setlist li { counter-increment:s; font-family:var(--marker); font-size:clamp(23px,2.4vw,30px); line-height:1.25; padding:6px 0; }
.setlist li:before { content:counter(s) '.'; display:inline-block; width:1.5em; color:var(--red); }
.setlist li:nth-child(2) { transform:rotate(.6deg); } .setlist li:nth-child(5) { transform:rotate(-.8deg); }
.sl-foot { font-family:var(--marker); color:var(--red); font-size:20px; margin-top:16px; transform:rotate(-3deg); }
.setlist-copy p { margin-top:18px; color:var(--dim); max-width:52ch; }
.covers { display:flex; gap:16px; margin-top:30px; }
.covers figure { flex:1; max-width:150px; }
.covers img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:3px; box-shadow:0 14px 30px rgba(0,0,0,.55); }
.covers figcaption { font-family:var(--display); font-weight:300; letter-spacing:.12em; text-transform:uppercase; font-size:10px; color:var(--dim); margin-top:10px; }
blockquote { margin-top:34px; font-size:clamp(20px,2.2vw,25px); line-height:1.35; color:#fff; font-style:italic; max-width:30ch; }
blockquote cite { display:block; margin-top:10px; font-style:normal; font-family:var(--display); font-weight:300;
  letter-spacing:.3em; text-transform:uppercase; font-size:12px; color:var(--gold); }

/* ============ Aor e Jane ============ */
.duo { display:grid; grid-template-columns:1fr 1fr; position:relative; background:var(--black); }
.face { position:relative; overflow:hidden; height:clamp(420px,62vw,760px); }
.face img { width:100%; height:100%; object-fit:cover; filter:contrast(1.05) brightness(.92);
  transition:filter .6s ease, transform .8s ease; }
.face:first-child img { object-position:42% center; } .face:nth-child(2) img { object-position:40% center; }
.face:hover img { transform:scale(1.03); }
.face:after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,5,5,.95) 0%, rgba(5,5,5,0) 50%); }
.face figcaption { position:absolute; left:32px; bottom:150px; z-index:1; }
.face b { display:block; font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:.85;
  font-size:clamp(70px,10vw,150px); color:transparent; -webkit-text-stroke:2px var(--gold); }
.face span { font-family:var(--display); font-weight:300; letter-spacing:.3em; text-transform:uppercase; font-size:12px; color:var(--ink); }
.duo-text { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 32px 44px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; }
.duo-text p { color:var(--ink); font-size:16px; max-width:46ch; }
.duo-text .big { font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(22px,2.6vw,34px); line-height:1.05; color:#fff; }

/* ============ ultima chiamata ============ */
.last { position:relative; padding:130px 0 120px; overflow:hidden; isolation:isolate; text-align:center; }
.last-photo { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, var(--black) 0%, rgba(5,5,5,.82) 50%, var(--black) 100%),
    url('img/hero-photo.jpg') center/cover no-repeat; filter:grayscale(.7); }
.last-inner { display:flex; flex-direction:column; align-items:center; }
.last h2 { font-size:clamp(44px,7vw,96px); }

footer { padding:34px 24px 46px; border-top:1px solid rgba(255,255,255,.06); text-align:center; }
footer p { color:#615c53; font-size:13px; margin-top:6px; }

/* ============ telefono ============ */
@media (max-width:860px) {
  body { font-size:17px; }
  .poster { min-height:0; padding:20px 16px 34px; }
  .poster-top img { height:28px; }
  .poster-main { grid-template-columns:1fr; text-align:center; gap:22px; padding-top:44px; }
  .band-cut { justify-self:center; max-width:380px; order:-1; }
  .numeral { font-size:66vw; top:46%; -webkit-text-stroke-width:1.5px; }
  .ticket { flex-direction:column; max-width:420px; margin-top:30px; }
  .ticket:before, .ticket:after { left:auto; right:-13px; top:76px; bottom:auto; }
  .ticket:after { left:-13px; right:auto; }
  .stub { flex:none; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:end; gap:2px 16px;
    border-right:0; border-bottom:2px dashed rgba(20,20,20,.35); padding:16px 20px 18px; }
  .stub span { grid-column:1; grid-row:1; }
  .stub b { grid-column:1; grid-row:2; font-size:22px; }
  .stub .tno { grid-column:2; grid-row:1 / span 2; margin:0; padding:0 0 0 16px; border-top:0; border-left:1px solid rgba(20,20,20,.18); text-align:right; }
  .fields { padding:18px 20px 22px; }
  .fields label { flex-basis:100%; }
  .fields button { flex-basis:100%; }
  .setlist-sec { padding:80px 0; }
  .setlist-grid { grid-template-columns:1fr; gap:60px; }
  .setlist { padding:50px 26px 30px; }
  .duo { grid-template-columns:1fr; }
  .face { height:440px; }
  .face figcaption { bottom:28px; left:20px; }
  .duo-text { position:static; grid-template-columns:1fr; gap:14px; padding:36px 20px 10px; }
  .last { padding:90px 0 80px; }
}
@media (max-width:420px) { .wrap { padding-inline:16px; } }
@media (prefers-reduced-motion:reduce) { body:after, .marquee .track { animation:none; } }