/* «Vieni a cercarti»: Filippo's headline opens the page, the exhibition identity follows
   in its own band, and his ten typewritten prints turn up between the sections. */

/* Hero: the headline takes the masthead; everything else in the opening stays as approved. */
.hero h1.hero-headline {
  display: block;
  max-width: none;
  white-space: normal;
  text-wrap: balance;
  font: 400 min(8cqw, 4.8svh, 52px)/.98 var(--display);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.hero .hero-invite { margin: 14px 0 0; }
@media (max-height: 800px) and (min-width: 901px) {
  .hero h1.hero-headline { font-size: min(7.4cqw, 4.8svh, 42px); }
  .hero .hero-invite { margin-top: 10px; }
}
@media (max-width: 900px) {
  .hero h1.hero-headline { display: block; font-size: min(8.6cqw, 3.7svh, 36px); line-height: .98; }
  .hero .hero-invite { margin-top: 10px; }
}
@media (max-width: 500px) {
  .hero h1.hero-headline { font-size: min(8.6cqw, 4svh, 34px); }
}
@media (max-width: 500px) and (max-height: 740px) {
  .hero h1.hero-headline { display: block; font-size: min(8cqw, 3.1svh); }
  .hero .hero-invite { margin-top: 4px; }
  .hero .hero-invite strong { font-size: 20px; padding: 6px 9px; }
}
@media (max-width: 360px) and (max-height: 650px) {
  .hero h1.hero-headline { font-size: min(7.8cqw, 2.9svh); }
  .hero .hero-invite { margin-top: 2px; }
  .hero .hero-invite strong { font-size: 18px; padding: 4px 7px; }
}
@media (max-height: 480px) and (min-width: 501px) {
  .hero h1.hero-headline { display: block; font-size: min(7cqw, 5.2svh); line-height: .98; }
  .hero .hero-invite { margin-top: 5px; }
}
@media (max-height: 360px) and (min-width: 501px) {
  .hero h1.hero-headline { font-size: min(7cqw, 5svh); }
  .hero .hero-invite { margin-top: 3px; }
}

/* Identity band: what the headline does not say, said right under it. */
.identity-band { background: black; color: white; }
.identity-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 36px; padding-block: 22px 24px; }
.identity-row .identity-title { margin: 0; font: 400 clamp(30px, 3vw, 46px)/1 var(--display); letter-spacing: -.02em; text-transform: uppercase; color: var(--orange); }
.identity-row .identity-kind { margin: 0; font: 400 clamp(20px, 1.9vw, 28px)/1.05 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.identity-row .identity-subtitle { margin: 0 0 0 auto; font: 400 clamp(14px, 1.15vw, 17px)/1.4 var(--body); color: #cfcfcf; }
@media (max-width: 900px) {
  .identity-row { gap: 6px 24px; padding-block: 20px; }
  .identity-row .identity-subtitle { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 500px) {
  .identity-row { display: grid; gap: 6px; padding-block: 18px 20px; }
  .identity-row .identity-title { font-size: 32px; }
  .identity-row .identity-kind { font-size: 20px; }
  .identity-row .identity-subtitle { font-size: 14px; margin-top: 2px; }
}

/* Loose prints between the sections. The frame and the typewritten words are part of
   each image, so the page adds only paper shadow, a slight tilt and room to breathe. */
.cercati { padding-block: clamp(16px, 2.5vw, 36px) clamp(56px, 6vw, 88px); overflow: hidden; }
.cercati-dark { background: black; padding-top: 4px; }
.cercati-row { display: flex; justify-content: space-evenly; align-items: flex-start; gap: 24px; padding-top: 12px; }
.cercati-print { position: relative; flex: 0 1 clamp(230px, 24vw, 350px); min-width: 0; margin: 0; --tilt: -3deg; --drop: 0px; padding-top: var(--drop); }
.cercati-row .cercati-print:nth-child(2) { --tilt: 2.5deg; --drop: 46px; }
.cercati-row .cercati-print:nth-child(3) { --tilt: -1.5deg; --drop: 14px; }
.cercati-a .cercati-row { justify-content: space-around; }
.cercati-a .cercati-print:nth-child(1) { --tilt: -2.5deg; --drop: 28px; }
.cercati-a .cercati-print:nth-child(2) { --tilt: 3deg; --drop: 0px; }
.cercati-c .cercati-row { justify-content: space-around; }
.cercati-c .cercati-print:nth-child(1) { --tilt: 2deg; --drop: 0px; }
.cercati-c .cercati-print:nth-child(2) { --tilt: -3deg; --drop: 38px; }
.cercati-d .cercati-print:nth-child(1) { --tilt: 2.5deg; --drop: 30px; }
.cercati-d .cercati-print:nth-child(2) { --tilt: -3deg; --drop: 0px; }
.cercati-d .cercati-print:nth-child(3) { --tilt: 2deg; --drop: 40px; }
.cercati-photo {
  display: block;
  color: inherit;
  text-decoration: none;
  transform: rotate(var(--tilt));
  transform-origin: center;
  box-shadow: 0 2px 2px #0004, 0 14px 26px #0003;
  transition: transform .22s ease;
}
.cercati-dark .cercati-photo { box-shadow: 0 2px 2px #0006, 0 16px 30px #000a; }
.cercati-photo img { display: block; width: 100%; height: auto; }
.cercati-photo:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; transform: rotate(0); }
.cercati-print:focus-within { z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .cercati-photo:hover { transform: rotate(0) translateY(-4px); }
}
@media (max-width: 900px) {
  .cercati { padding-block: 8px 44px; overflow: visible; }
  .cercati-dark { padding-top: 0; }
  .cercati-row {
    justify-content: flex-start;
    gap: 16px;
    margin-inline: calc(-1 * var(--gap));
    padding: 14px var(--gap) 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gap);
    scrollbar-width: none;
  }
  .cercati-row::-webkit-scrollbar { display: none; }
  .cercati-row .cercati-print { flex: 0 0 min(76vw, 330px); padding-top: 0; scroll-snap-align: center; --tilt: -1.5deg; }
  .cercati-row .cercati-print:nth-child(2) { --tilt: 1.5deg; }
  .cercati-row .cercati-print:nth-child(3) { --tilt: -1deg; }
  .cercati-row::after { content: ""; flex: 0 0 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .cercati-photo { transition: none; }
}