/* Decorative city and regional flags; CSS backgrounds are not announced. */
.places .place-card:is(.place-1,.place-2,.place-3),
.exchange-story article[class*="exchange-city-"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.places .place-card:is(.place-1,.place-2,.place-3)::before,
.exchange-story article[class*="exchange-city-"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: .6rem .4rem .6rem auto;
  width: min(64%, 23rem);
  pointer-events: none;
  background: var(--place-flag) center / contain no-repeat;
  opacity: .12;
}
.places .place-card:is(.place-1,.place-2,.place-3) > *,
.exchange-story article[class*="exchange-city-"] > * {
  position: relative;
  z-index: 1;
}
.places .place-1 { --place-flag: url('/assets/media/flags/milano.webp'); }
.places .place-2 { --place-flag: url('/assets/media/flags/brescia.webp'); }
.places .place-3, .exchange-story .exchange-city-almeria { --place-flag: url('/assets/media/flags/andalusia.svg'); }
.exchange-story .exchange-city-jyvaskyla { --place-flag: url('/assets/media/flags/finland.svg'); }
.exchange-story .exchange-city-zwolle { --place-flag: url('/assets/media/flags/netherlands.svg'); }
.exchange-story article[class*="exchange-city-"]::before {
  width: min(36%, 20rem);
  opacity: .09;
}
.cyber .places .place-card:is(.place-1,.place-2,.place-3)::before,
.cyber .exchange-story article[class*="exchange-city-"]::before { opacity: .14; }
@media (max-width: 620px) {
  .exchange-story article[class*="exchange-city-"]::before { width: min(48%, 14rem); }
}

/* Native disclosures keep every experience independently accessible without JS. */
.place-card .profile-details { width: 100%; margin-top: 1rem; }
.place-card.place-tutor { grid-column: span 12; }
.profile-details summary {
  cursor: pointer;
  font: 700 1.05rem/1.4 Manrope, sans-serif;
  padding: .55rem .2rem;
  border-block: 1px solid currentColor;
}
.profile-details summary:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.profile-details p { max-width: 65ch; margin: .8rem 0; }
.profile-details h5 { margin: 1.3rem 0 .35rem; font: 700 1rem/1.35 "Bricolage Grotesque", sans-serif; }
.profile-details h5 + p { margin-top: .25rem; }
.profile-details a { text-decoration: underline; text-underline-offset: .22em; }
.timeline .profile-details { margin-block: .4rem 1.2rem; }
.timeline .profile-details > :not(summary) { margin-top: .6rem; }