@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --lime: #a7d935;
  --ink: #111;
  --viola: #502891;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --d: calc((100vw - 2rem) / 14);
  --stagger: clamp(0px, 5vw, 2.5rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
  scrollbar-color: var(--ink) var(--lime);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--lime) url("../assets/grid.svg") 0 0 / 96px 96px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../assets/mappa-lumezzane.png") center / cover no-repeat;
  pointer-events: none;
}

::selection { background: var(--ink); color: var(--lime); }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--lime);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

/* Text boxes: each text run is an inline block of colour, like the printed leaflet */
.blk span, .lead span, .intro span, .claim span, .when span,
.ev span, .steps span, .credit-label span, .social span, .qr figcaption span,
.sub span, .places span, .grp-title span {
  background: var(--ink);
  color: var(--lime);
  padding: .12em .55em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.viola span { background: var(--viola); color: #fff; }
h2.viola span, h3.viola span, h4.viola span { color: var(--lime); }

/* Wordmark */
.rail { padding: 1rem 1rem 0; }

.mark {
  display: flex;
  font-weight: 800;
}
.mark > span { display: block; }
.mark b {
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border: max(1.5px, calc(var(--d) * .06)) solid var(--ink);
  border-radius: 50%;
  font-size: calc(var(--d) * .52);
  font-weight: 800;
  line-height: 1;
}
.mark .plus { background: var(--ink); color: var(--lime); }

/* Page */
.page { padding: 1.75rem 1rem 4rem; }

.hero { padding-bottom: 2rem; }

.claim {
  font-size: clamp(1.75rem, 8.4vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.3;
  display: grid;
  gap: .3rem;
  justify-items: start;
  text-wrap: balance;
}
.claim span { padding: .04em .38em .1em; }
.claim .c2 { margin-left: 1.1ch; }
.claim .c3 { margin-left: .4ch; }
.claim .c4 { margin-left: 2.2ch; }

.when {
  margin-top: 1.5rem;
  display: grid;
  gap: .35rem;
  justify-items: start;
}
.when .w1 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.when .w1, .when .w2 { display: inline-block; line-height: 1.45; }
.when .w2 { margin-left: 1.5rem; font-size: 1rem; font-weight: 500; max-width: calc(100% - 1.5rem); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  min-height: 3rem;
  padding: .7rem 1.35rem .7rem 1.6rem;
  border-radius: 999px;
  background: var(--viola);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.cta:hover { background: var(--ink); color: var(--lime); }
.cta:focus-visible { outline-color: var(--ink); }
.cta svg { flex: none; }

/* Section titles */
.blk {
  font-size: clamp(1.7rem, 6.6vw, 2.9rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.35;
}
.blk span { padding: .04em .4em .1em; }

.sub {
  margin-top: 2.25rem;
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.5;
}

.intro, .lead { margin-top: 1.25rem; max-width: 38rem; }
.lead { font-size: 1.125rem; }
.intro { margin-left: 0; }

/* Programme */
.programme { margin-top: .5rem; }
.events, .grp ol { margin-top: 2rem; display: grid; gap: 2.25rem; }

.ev { max-width: 40rem; }
.ev:nth-child(even) { margin-left: var(--stagger); }

.ev-when, .when .w1 { font-variant-numeric: tabular-nums; }
.ev-when { font-size: .9rem; font-weight: 600; letter-spacing: .01em; line-height: 1.9; }
.ev-title {
  margin: .1rem 0 .15rem calc(var(--stagger) * .5);
  font-size: clamp(1.45rem, 5.6vw, 2.15rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.4;
  text-wrap: balance;
}
.ev-desc { text-wrap: pretty; margin-left: var(--stagger); font-size: 1rem; line-height: 1.8; }

.grp { margin-top: 2.75rem; }
.grp:first-child { margin-top: 2rem; }
.grp-title {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.4;
}
.grp-title span { padding: .05em .55em .1em; }
.grp ol { margin-top: 1.25rem; }
.grp-oggi .grp-title span { background: var(--viola); color: #fff; }
.grp-oggi .ev span { background: var(--viola); color: #fff; }
.grp-oggi .ev-title span { color: var(--lime); }
.grp-fatti .grp-title span,
.grp-fatti .ev span {
  background: var(--lime);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.chiusa {
  margin-top: 2rem;
  max-width: 34rem;
  font-size: 1.125rem;
}
.chiusa span { background: var(--ink); color: var(--lime); padding: .12em .55em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Sections */
.sec { margin-top: clamp(3.5rem, 9vw, 6rem); }

.steps { margin-top: 1.75rem; display: grid; gap: 1.75rem; }
.steps li { max-width: 30rem; }
.steps li:nth-child(even) { margin-left: var(--stagger); }
.steps h3, .steps h4 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.55;
}
.steps h4 { font-size: 1.45rem; }
.steps p { margin-top: .15rem; margin-left: calc(var(--stagger) * .5); font-size: 1rem; line-height: 1.8; }

.places a { color: inherit; text-decoration: none; }
.places a span { display: inline-block; padding: .35em .6em; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.places a:hover span, .social a:hover span { background: var(--viola); color: #fff; }
.places a:focus-visible, .social a:focus-visible { outline-offset: 0; }

.info-row {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: flex-end;
}
.qr { width: min(100%, 13rem); }
.qr img { width: 100%; padding: .9rem; background: #fff; }
.qr figcaption { margin-top: .6rem; font-size: .95rem; line-height: 1.8; }
.social p { margin-top: .5rem; font-size: 1.125rem; font-weight: 600; }
.social .sub { margin-top: 0; }
.social a { color: inherit; text-decoration: none; }
.social a span { display: inline-block; padding: .3em .6em; }
.social a:hover { text-decoration: none; }

/* Credits */
.credits {
  margin-top: clamp(4rem, 10vw, 7rem);
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 4rem;
}
.credit-label { font-size: .95rem; font-weight: 500; }
.logos { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; }
.logos img { height: 3.5rem; width: auto; }
.logos li:not(.comune) img[alt^="DARTS"], .logos li:not(.comune) img[alt^="Fondazione"] { height: 5.5rem; }
.logos .comune span { background: var(--ink); color: var(--lime); padding: .2em .6em; }
.logos .comune { display: flex; align-items: center; gap: .75rem; font-weight: 700; line-height: 1.25; font-size: 1rem; }
.logos .comune img { height: 3.75rem; }

/* Desktop: sticky rail + sticky claim column + scrolling programme */
@media (min-width: 1000px) {
  :root { --d: min(4rem, calc((100svh - 2rem) / 14 - .3rem)); --stagger: 2rem; }

  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    padding: 1rem 0 1rem .75rem;
    z-index: 2;
  }
  .mark { flex-direction: column; justify-content: space-between; height: 100%; }
  .mark > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: calc(var(--d) + 6.25rem);
    --len: 1rem;
  }
  .mark > span:nth-child(3n + 2) { --len: 3.25rem; }
  .mark > span:nth-child(3n) { --len: 5.5rem; }
  .mark > span::before {
    content: "";
    flex: 0 0 var(--len);
    height: .7rem;
    margin-right: .4rem;
    background:
      linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1.4px no-repeat,
      radial-gradient(circle at .35rem 50%, var(--ink) .27rem, transparent .3rem);
  }

  .page {
    padding: 2rem 2.5rem 6rem calc(var(--d) + 7.75rem);
    max-width: 96rem;
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4rem;
    align-items: start;
  }
  .hero { position: sticky; top: 2rem; padding-bottom: 0; }
  .claim { font-size: clamp(2.3rem, 3.7vw, 4.4rem); }
  .when .w2 { font-size: 1.15rem; }
  .programme { margin-top: 0; }
  .programme > .blk { margin-top: 0; }

  .steps { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.5rem 3rem; align-items: start; }
  .steps li { max-width: none; }
  .steps li:nth-child(even) { margin-left: 0; margin-top: 2.5rem; }
  .places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec .lead { margin-left: 3rem; }
}

/* Authored motion: wordmark draws in */
@media (prefers-reduced-motion: no-preference) {
  .mark > span { animation: mark-in .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 45ms); }
  .mark > span::before { transform-origin: right center; animation: line-in .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 45ms + 120ms); }
  .claim span { animation: box-in .6s cubic-bezier(.2, .7, .2, 1) both; }
  .claim .c2 { animation-delay: .12s; }
  .claim .c3 { animation-delay: .24s; }
  .claim .c4 { animation-delay: .36s; }
}
@keyframes mark-in { from { opacity: 0; transform: translateX(-.6rem); } }
@keyframes line-in { from { transform: scaleX(0); } }
@keyframes box-in { from { opacity: 0; transform: translateX(-1rem); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { transition: none; }
}