/* ============================================================
   Concorso Leoncavallo — main.css
   Mobile-first. Vanilla CSS with custom properties + nesting.
   ============================================================ */

/* --- 0. Fonts ---------------------------------------------------- */

@font-face {
  font-family: "Bruney";
  src: url("/assets/fonts/Bruney.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeue.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- 1. Tokens --------------------------------------------------- */

:root {
  /* colors */
  --c-bg-cream:    #d4cbba;
  --c-bg-dark:     #2f2f2f;
  --c-bg-darkest:  #000000;
  --c-bg-mid:      #444444;
  --c-bg-light:    #ffffff;

  --c-text-dark:    #2f2f2f;
  --c-text-cream:   #d4cbba;
  --c-text-light:   #ffffff;
  --c-text-muted:   #6e6e6e;
  --c-placeholder:  #d9d9d9;
  --c-border:       rgba(47, 47, 47, 0.18);

  --f-display: "Bruney", "Cormorant Garamond", Georgia, serif;
  --f-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* fluid type scale: clamp(min, preferred, max) */
  --fs-hero:        clamp(2.75rem, 4.5vw + 1rem, 6.25rem);   /* ~44 → 100px */
  --fs-section:     clamp(2.25rem, 3.4vw + 1rem, 5rem);      /* ~36 → 80px  */
  --fs-card-title:  clamp(1.375rem, 0.647vw + 1.223rem, 2rem); /* 22px → 32px @ 1920px */
  --fs-jury-name:   clamp(1.375rem, 1.4vw + 0.9rem, 2.25rem);
  --fs-body-lg:     clamp(1.0625rem, 0.5vw + 0.95rem, 1.5rem); /* ~17 → 24px */
  --fs-body:        clamp(1rem, 0.2vw + 0.9rem, 1.125rem);
  --fs-nav:         clamp(0.9375rem, 0.4vw + 0.78rem, 1.25rem); /* ~15 → 20px */
  --fs-small:       0.875rem;
  --fs-meta:        0.75rem;

  /* spacing — 8 px scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* radius */
  --r-pill: 999px;
  --r-card: 1.25rem;

  /* layout */
  --container-pad: clamp(1.25rem, 3vw, 2.5rem);
  --container-max: 90rem; /* ~1440px */
  --bar-h: clamp(3.5rem, 3.65vw, 4.375rem);   /* 70px @ 1920 */
  --nav-gap: clamp(1.5rem, 3.33vw, 4rem);     /* 64px @ 1920 */
  --marquee-gap: clamp(2rem, 2.5vw, 3rem);

  /* misc */
  --line: 1px solid var(--c-border);

  /* line-heights */
  --lh-extratight: 1.05;
  --lh-tight: 1.1;
  --lh-normal: 1.4;

  /* motion: one curve family + three durations for the whole site */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* same curve as the JS scroll */
  --dur-fast: 200ms;
  --dur: 450ms;
  --dur-slow: 800ms;

}

/* --- 2. Reset / base ------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg-dark);
  color: var(--c-text-dark);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; height: auto; }
img.fade-in { transition: opacity var(--dur-slow) var(--ease-out); }
img.fade-in.is-loading { opacity: 0; }
svg { display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: var(--lh-extratight);
  letter-spacing: -0.005em;
  font-family: var(--f-display);
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--c-text-dark); color: var(--c-bg-cream); }

/* --- 3. Layout primitives -------------------------------------- */

/* anchors land below the sticky header */
[id] { scroll-margin-top: var(--bar-h); }

.container {
  width: 100%;
  /* max-width: var(--container-max); */
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Framed title / framed meta-block (reusable) --------------- */

.framed {
  display: grid;
  gap: var(--sp-4);
  width: 100%;
  margin-bottom: var(--sp-7);
}

.framed__line {
  position: relative;
  display: block;
  height: 1px;
  background: currentColor;
  width: 100%;
}

.framed__title {
  font-family: var(--f-display);
  font-size: var(--fs-section);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
}

.framed--rombi .framed__line::before,
.framed--rombi .framed__line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.framed--rombi .framed__line::before { left: 0; }
.framed--rombi .framed__line::after  { right: 0; }

/* standalone divider — same look as .framed__line, usable anywhere */
.divider {
  position: relative;
  display: block;
  height: 1px;
  background: currentColor;
  width: 100%;
}
.divider--rombi::before,
.divider--rombi::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.divider--rombi::before { left: 0; }
.divider--rombi::after  { right: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.95rem 1.75rem;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.25rem);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); opacity: 1; }

.btn--primary {
  background: var(--c-bg-cream);
  color: var(--c-text-dark);
}
.btn--primary:hover { background: #c2b89e; }

.btn--outline {
  background: var(--c-text-dark);
  color: var(--c-bg-cream);
  border-color: var(--c-text-dark);
}
.btn--outline:hover { background: var(--c-bg-cream); color: var(--c-text-dark); }

/* --- 4. Site header + nav ------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg-darkest);
  color: var(--c-text-cream);
  font-family: var(--f-body);
  font-size: var(--fs-nav);
  text-transform: uppercase;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--bar-h);
}

.site-header__brand[aria-current="page"],
.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* mobile: hamburger + dropdown panel */
.site-header__toggle {
  display: grid;
  gap: 7px;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-3);
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.site-header__toggle-bar {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) { transform: translateY(4px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

.site-nav {
  display: grid;
  gap: var(--sp-6);
  position: absolute;
  inset: 100% 0 auto;
  padding: var(--sp-4) var(--container-pad) var(--sp-6);
  background: var(--c-bg-darkest);
  border-top: 1px solid rgba(212, 203, 186, 0.2);
  /* closed: faded out and slightly raised (animated, unlike display:none) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.site-nav__list { display: grid; }
.site-nav__link {
  display: block;
  padding-block: var(--sp-3);
  border-bottom: 1px solid rgba(212, 203, 186, 0.2);
}

.lang-switcher {
  display: inline-flex;
  gap: var(--sp-3);
  align-items: center;
}
.lang-switcher__item { opacity: 0.6; }
.lang-switcher__item.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@media (min-width: 1024px) {
  .site-header__toggle { display: none; }

  .site-nav,
  .site-nav.is-open {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
    padding: 0;
    background: none;
    border: 0;
  }
  .site-nav__list {
    display: flex;
    gap: var(--nav-gap);
  }
  .site-nav__link {
    padding: 0;
    border: 0;
    white-space: nowrap;
    /* underline drawn left → right on hover */
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size var(--dur) var(--ease-out);
  }
  .site-nav__link:hover { opacity: 1; background-size: 100% 1px; }
  .site-nav__link[aria-current="page"] { background: none; }
}

/* --- 4b. Marquee "Prossimi appuntamenti" ------------------------ */

.marquee {
  /* sticky under the nav; JS adds .is-hidden on scroll down (slides under it) */
  position: sticky;
  top: var(--bar-h);
  z-index: 40;
  transition: transform var(--dur) var(--ease-out);
  display: flex;
  align-items: stretch;
  min-height: var(--bar-h);
  background: var(--c-bg-light);
  color: var(--c-bg-darkest);
  font-family: var(--f-body);
  font-size: var(--fs-nav);
  overflow: hidden;
}

.marquee__label {
  flex: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding-inline: var(--container-pad) var(--sp-4);
  width: min-content; /* mobile: two lines */
  background: var(--c-bg-dark);
  color: var(--c-text-light);
  text-transform: uppercase;
  line-height: 1.15;
}

.marquee__viewport {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: 0.95em;
  padding-inline: var(--sp-5) var(--marquee-gap);
  white-space: nowrap;
}
.marquee__date { opacity: 0.5; }
.marquee__title {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.marquee.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .marquee__label {
    width: auto;
    min-width: clamp(16rem, 17.2vw, 20.625rem); /* 330px @ 1920 */
    white-space: nowrap;
  }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

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

/* --- Home: hero ------------------------------------------------ */

.home-hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 2 * var(--bar-h));
  padding-block: var(--sp-9) var(--sp-6);
  background: var(--c-bg-cream);
  color: var(--c-bg-darkest);
}

.home-hero__head {
  display: grid;
  gap: var(--sp-2);
  margin-block: auto;
  padding-bottom: var(--sp-9);
}

.home-hero__kicker {
  margin: 0;
  padding-inline: var(--container-pad);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.home-hero__title-row {
  display: grid;
  grid-template-columns: minmax(1.25rem, 1fr) auto minmax(1.25rem, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 1.3vw, 1.5rem);
}

.home-hero__lines {
  width: 100%;
  height: 57px;
}

/* ≤ 767px: one group of lines above the title, one below */
@media (max-width: 767px) {
  /* flatten the row so kicker can sit between the top lines and the title */
  .home-hero__title-row { display: contents; }
  .home-hero__lines:first-child { order: -1; margin-bottom: var(--sp-5); }
  .home-hero__lines:last-child  { margin-top: var(--sp-5); }
  .home-hero__title { padding-inline: var(--container-pad); }
}

.home-hero__title {
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.home-hero__info {
  display: grid;
  gap: var(--sp-5);
  color: var(--c-text-dark);
  font-size: var(--fs-nav);
  line-height: 1.1;
}

/* label / value pair, reused by the museum info boxes */
.info-item {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.3rem;
  margin: 0;
}
.info-item dt { font-weight: 700; }
.info-item dd { margin: 0; }
.info-item a { text-decoration: none; }

@media (min-width: 1024px) {
  .home-hero__info {
    grid-template-columns: 1fr auto auto;
    align-items: start;
    column-gap: 1.3rem;
  }
  .info-item { grid-template-columns: auto auto; gap: 1.25rem; }
  .info-item--hours { grid-template-columns: 8.4375rem auto; } /* 135px label @ 1920 */
  .home-hero__info .info-item + .info-item { margin-left: auto; }
}

/* --- Home: compositore + carosello biografia -------------------- */

.composer {
  --fs-text: var(--fs-nav);          /* 20px @ 1920 */
  padding-block: clamp(1.5rem, 2.3vw, 2.75rem) clamp(3rem, 6.25vw, 7.5rem);
  background: var(--c-bg-dark);
  color: var(--c-text-cream);
  font-size: var(--fs-text);
  line-height: 1.4;
}

/* shared: thin rule + big Bruney title opening each home section */
.section-rule {
  display: block;
  height: 1px;
  background: currentColor;
}
.section-title {
  margin-top: clamp(1.5rem, 2.66vw, 3.1875rem);   /* 51px @ 1920 */
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.composer .section-title { margin-top: clamp(2.5rem, 4vw, 4.875rem); }

.composer__intro {
  display: grid;
  gap: var(--sp-6);
  margin-top: clamp(3rem, 12.9vw, 15.4375rem);
}
.composer__text p { margin: 0; }
.composer__portrait {
  width: min(60%, 18.5625rem);
}

@media (min-width: 1024px) {
  .composer__intro {
    /* text 755 | gap | portrait 297 | 112 — at 1920 */
    grid-template-columns: minmax(0, 755fr) minmax(0, 676fr) minmax(0, 297fr) minmax(0, 112fr);
    align-items: end;
    gap: 0;
  }
  .composer__text { grid-column: 1; }
  .composer__portrait { grid-column: 3; width: 100%; }
}

.composer__figure {
  margin: clamp(3rem, 6.25vw, 7.5rem) 0 0;
}
/* Figma: image shown at 2735px on a 1920 page, cropped 253px left / 118px top */
.composer__crop {
  aspect-ratio: 1920 / 1464;
  overflow: hidden;
}
.composer__image {
  width: 142.45%;
  max-width: none;
  margin: -6.15% 0 0 -13.18%;
}
@media (max-width: 767px) {
  .composer__crop { aspect-ratio: auto; }
  .composer__image { width: 100%; margin: 0; }
}
.composer__caption {
  margin-top: 0.7rem;
}

/* --- Carousel (shared: Compositore, Brissago, Museo) ------------ */

.carousel {
  --slide-h: clamp(16rem, 36.67vw, 44rem);   /* photo slides: 704px @ 1920 */
  --slide-gap: clamp(1.5rem, 2.9vw, 3.5rem);
}

.timeline {
  /* dark sections by default; override for light ones */
  --tl-line: var(--c-text-light);
  --tl-dot: #d9d9d9;
  --tl-bg: var(--c-bg-dark);
}
.carousel--light .timeline {
  --tl-line: var(--c-bg-darkest);
  --tl-dot: var(--c-bg-darkest);
  --tl-bg: var(--c-bg-cream);
}
.timeline__dots {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.timeline__dots::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--tl-line);
}
.timeline__dot {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid var(--tl-dot);
  border-radius: 50%;
  background: var(--tl-bg);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.timeline__dot:hover { transform: scale(1.3); }
.timeline__dot::before { content: ""; position: absolute; inset: -10px; } /* bigger hit area */
.timeline__dot[aria-current="true"],
.timeline__dot:hover { background: var(--tl-dot); }

.carousel__viewport {
  position: relative;
  margin-top: clamp(1.75rem, 2.97vw, 3.5625rem);
}
.carousel:not(:has(.timeline)) .carousel__viewport { margin-top: 0; }

.carousel__track {
  --carousel-pad: var(--container-pad);
  display: flex;
  gap: var(--slide-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--carousel-pad);
  padding-inline: var(--carousel-pad);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .carousel__track { cursor: grab; }
  .carousel__track .lightbox-trigger { cursor: zoom-in; }
}
.carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.carousel__track.is-dragging .lightbox-trigger { cursor: grabbing; }

/* slides */
.slide {
  flex: none;
  scroll-snap-align: start;
}
.slide__media { margin: 0; }
.slide__image { display: block; }
.slide__image--placeholder {
  aspect-ratio: 698 / 440;
  background: rgba(217, 217, 217, 0.12);
}
.slide__caption { margin-top: 0.7rem; }
.slide__caption strong { font-weight: 700; }

/* photo slide (no paragraph): same height for all, caption wraps at image width */
.slide--media .slide__media { display: grid; width: max-content; }
.slide--media .slide__image {
  height: min(var(--slide-h), calc(85vw / var(--ar, 1)));
  width: auto;
}
.slide--media .slide__caption { width: 0; min-width: 100%; }

/* slide with paragraph: image + caption left, text right (Figma "biografia") */
.slide--text {
  width: 85vw;
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}
.slide--text .slide__image { width: 100%; height: auto; }
.slide--text.slide--portrait .slide__image { width: 90.3%; }  /* 630 / 698 */

.slide__period,
.slide__title { margin: 0; font-size: inherit; line-height: inherit; }
.slide__title {
  font-family: var(--f-body);
  font-weight: 700;
  letter-spacing: 0;
}
.slide__body > * + .slide__text { margin-top: 1.4em; }   /* gap only after period/title */
.slide__text p { margin: 0 0 1.4em; }

/* invisible click zones at the edges (as in Figma) */
.carousel__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 6.25vw;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.carousel__nav--prev { left: 0;  cursor: w-resize; }
.carousel__nav--next { right: 0; cursor: e-resize; }
.carousel__nav[disabled] { display: none; }
.carousel__nav:focus-visible { outline: 1px solid currentColor; outline-offset: -4px; }

@media (max-width: 1023px) {
  .carousel__nav { display: none; }
}

@media (min-width: 1024px) {
  .slide--text {
    width: 87.24vw;                   /* 1675px @ 1920 */
    /* media 698 | 109 | text 693 | 175 */
    grid-template-columns: 41.67% 6.5% 41.37% 1fr;
    gap: 0;
  }
  .slide--text .slide__media { grid-column: 1; }
  .slide--text .slide__body  { grid-column: 3; }
}

/* biography carousel (Compositore): wide left inset, slides back to back */
.carousel--bio { margin-top: clamp(2.5rem, 4vw, 4.8rem); --slide-gap: 0px; }
.carousel--bio .timeline { padding-inline: clamp(1.25rem, 3.33vw, 4rem) var(--container-pad); }
.carousel--bio .slide--text { padding-right: var(--sp-6); }
@media (min-width: 1024px) {
  .carousel--bio .carousel__track { --carousel-pad: 10.83vw; }  /* 208px @ 1920 */
  .carousel--bio .slide--text { padding-right: 0; }
}

/* while JS animates the scroll (eased), snapping is off */
.carousel__track.is-animating { scroll-snap-type: none; }

/* --- Home: Brissago -------------------------------------------- */

.brissago {
  padding-bottom: clamp(3rem, 8.4vw, 10rem);
  background: var(--c-bg-cream);
  color: var(--c-bg-darkest);
  font-size: var(--fs-nav);
  line-height: 1.4;
}

/* bottom (torn) strip of the stairs photo, same crop logic as the composer image */
.brissago__band {
  aspect-ratio: 2735 / 566;
  overflow: hidden;
}
.brissago__band-image {
  width: 100%;
  max-width: none;
  margin-top: -55.8%;
}
@media (min-width: 768px) {
  .brissago__band { aspect-ratio: 1920 / 569; }
  .brissago__band-image { width: 142.45%; margin: -79.48% 0 0 -13.18%; }
}

.brissago .section-rule { margin-top: clamp(2.5rem, 4.7vw, 5.6rem); }

.brissago__intro {
  display: grid;
  gap: var(--sp-7);
  margin-top: clamp(3rem, 6.7vw, 8rem);
}
.brissago__text p { margin: 0; }

.link-box {
  padding-top: var(--sp-5);
  border-top: 1px solid currentColor;
}
.link-box__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--f-body);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
}
.link-box__list a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  letter-spacing: -0.008em;
}

@media (min-width: 1024px) {
  .brissago__intro {
    /* text 755 @ 40 | box 600 @ 1280 */
    grid-template-columns: minmax(0, 755fr) minmax(0, 485fr) minmax(0, 600fr);
    gap: 0;
    align-items: start;
  }
  .brissago__text { grid-column: 1; padding-top: 1.5rem; }
  .link-box { grid-column: 3; }
}

/* carousel on light background */
.brissago .carousel { margin-top: clamp(3rem, 8.75vw, 10.5rem); }
.brissago .timeline { padding-inline: var(--container-pad) clamp(1.25rem, 3.33vw, 4rem); }
.brissago .slide__caption { color: #1e1e1e; }


/* --- Home: opere selezionate (slider + player) ------------------ */

.works {
  --works-ink: #131313;
  position: relative;
  background: var(--works-ink);
  color: var(--c-text-cream);
  font-size: var(--fs-nav);
  line-height: 1.4;
}

.works__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--container-pad) 0;
}
.works__label {
  grid-column: 1 / -1;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid currentColor;
  font-family: var(--f-body);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
}
.works__nav {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto auto;
  justify-items: center;
  column-gap: clamp(1rem, 1.35vw, 1.625rem);
}
.works__count { grid-column: 1 / -1; margin: 0 0 var(--sp-2); }
.works__arrow {
  padding: var(--sp-2) 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.works__arrow img { width: 2.75rem; height: auto; transition: transform var(--dur) var(--ease-out); }
.works__arrow[data-carousel-prev]:not([disabled]):hover img { transform: translateX(-0.3rem); }
.works__arrow[data-carousel-next]:not([disabled]):hover img { transform: translateX(0.3rem); }
.works__arrow[disabled] { opacity: 0.3; cursor: default; }

/* media column: carousel of media + player, active item centred,
   the neighbours peek at the sides (≈ 1.5 items visible) */
.works__media-col {
  --item-w: 85%;
  min-width: 0;
  background: var(--works-ink);   /* items stay black, so their edges and the gap show */
}
.works__track {
  --slide-gap: clamp(0.75rem, 1.6vw, 2rem);
  padding-inline: calc((100% - var(--item-w)) / 2);
  scroll-padding-inline: 0;
}
.works__media-col {
  display: grid;
  grid-template-rows: 1fr auto;   /* media carousel on top, fixed player bar below */
}
.works__track { align-items: center; }
.work__media {
  flex: none;
  width: var(--item-w);
  scroll-snap-align: center;
  opacity: 0.35;
  transition: opacity var(--dur) var(--ease-out);
  cursor: pointer;
}
.work__media.is-active { opacity: 1; cursor: auto; }
.work__media:not(.is-active) .work__visual > * { pointer-events: none; }   /* side items: click = select */
/* text panels stacked in one cell: the active one fades in, the old fades out */
.works__panels { display: grid; }
.work__info {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.work__info.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 120ms, 120ms, 0s;
}
@media (min-width: 768px) {
  .works__media-col { --item-w: 80%; }
}
/* stacked layout: breathing room between the media and the white player bar */
@media (max-width: 1023px) {
  .works__track { padding-block: var(--sp-5) clamp(1.5rem, 4vw, 2.5rem); }
}

.work__info {
  display: grid;
  align-content: start;
  padding: var(--sp-5) var(--container-pad) var(--sp-8);
}
.work__title {
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
}
.work__period { margin: clamp(2rem, 7.5vw, 9rem) 0 var(--sp-5); }
.work__text { max-width: 55.3125rem; } /* 885px */
.work__text p { margin: 0 0 1.4em; }
.work__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: start;
  margin-top: var(--sp-5);
  font-size: 1.2em;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.work__more img { width: 3rem; height: 3rem; }

.work__visual {
  aspect-ratio: 970 / 748;
  background: var(--c-bg-darkest);
}
.work__visual { position: relative; }
/* embeds take the video's own proportions (from oEmbed): no black bars */
.work__visual.has-video { aspect-ratio: var(--video-ar, 16 / 9); }
.work__visual img { width: 100%; height: 100%; object-fit: cover; }
.work__visual .lightbox-trigger { width: 100%; height: 100%; }
.work__visual .lightbox-trigger img { height: 100%; }
.work__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* the embed doesn't take the mouse: dragging over the video moves the
     carousel, and a click on it plays/pauses through our player */
  pointer-events: none;
}
.work__media.is-active .work__visual:has(.work__embed, audio) { cursor: pointer; }
/* touch devices: browsers (iOS Safari above all) only start an embed when it is
   tapped directly, so there the active video stays tappable; the carousel still
   swipes on the gaps / side items and with the arrows */
@media (hover: none) and (pointer: coarse) {
  .work__media.is-active .work__embed { pointer-events: auto; }
}

/* player under the media (drives the embed / audio) */
.player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--container-pad) var(--sp-7) var(--sp-6);
  min-height: clamp(9rem, 12.1vw, 14.5625rem);   /* 233px @ 1920 */
  background: var(--c-bg-light);
  color: var(--c-bg-darkest);
}
.player {
  --toggle-h: clamp(1.75rem, 1.8vw, 2.25rem);   /* play icon: ~36px tall at 1920 */
  --toggle-hit: 0.6rem;                          /* invisible extra tap area around it */
}
.player__toggle {
  position: relative;
  flex: none;
  width: calc(var(--toggle-h) * 0.67 + 2 * var(--toggle-hit));
  height: calc(var(--toggle-h) + 2 * var(--toggle-hit));
  margin: calc(-1 * var(--toggle-hit));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.player__toggle:hover { transform: scale(1.06); }
.player__toggle:active { transform: scale(0.96); }
/* play ⇄ pause morph: each half is a 4-point shape, so clip-path can animate
   from the two halves of the triangle to the two bars of the pause icon */
.player__toggle::before,
.player__toggle::after {
  content: "";
  position: absolute;
  inset: var(--toggle-hit);
  background: var(--c-bg-darkest);
  transition: clip-path var(--dur) var(--ease-out);
}
.player__toggle::before { clip-path: polygon(0 0, 50% 25%, 50% 75%, 0 100%); }
.player__toggle::after  { clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%); }
.player__toggle[aria-pressed="true"]::before { clip-path: polygon(0 0, 32% 0, 32% 100%, 0 100%); }
.player__toggle[aria-pressed="true"]::after  { clip-path: polygon(68% 0, 100% 0, 100% 100%, 68% 100%); }
/* waiting for the media to start: gentle pulse */
.player.is-buffering .player__toggle { animation: player-wait 1.1s var(--ease-in-out) infinite alternate; }
@keyframes player-wait { to { opacity: 0.35; } }

.player__track { padding-top: calc(var(--toggle-h) / 2); }
/* 20px hit area; the 1px line, elapsed part and knob are drawn centred */
.player__bar {
  position: relative;
  height: 20px;
  margin-block: -10px;
  color: var(--c-bg-darkest);
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  cursor: pointer;
  touch-action: none;
}
.player__bar::before {          /* elapsed */
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: calc(var(--progress) * 100%);
  height: 6px;
  background: currentColor;
}
.player__bar::after {           /* knob */
  content: "";
  position: absolute;
  top: 1px;
  left: calc(var(--progress) * 100% - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}
/* smooth progress while playing (updates come every ~250ms); instant while seeking */
.player.is-playing .player__bar::before { transition: width 0.25s linear; }
.player.is-playing .player__bar::after  { transition: left 0.25s linear, transform var(--dur-fast) var(--ease-out); }
.player.is-seeking .player__bar::before,
.player.is-seeking .player__bar::after { transition: none; }
.player__bar:hover::after,
.player.is-seeking .player__bar::after { transform: scale(1.25); }

/* hover label: time under the pointer */
.player__tip {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: calc(var(--hover, 0) * 100%);
  padding: 0.2rem 0.45rem;
  background: var(--c-bg-darkest);
  color: var(--c-text-light);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(-50%, 0.25rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.player__tip:empty { display: none; }
@media (hover: hover) {
  .player__bar:hover .player__tip,
  .player.is-seeking .player__tip { opacity: 1; transform: translate(-50%, 0); }
}
.player__bar:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.player__caption {
  max-width: 37rem;
  margin: 1.9rem 0 0;
  color: #bebebe;
  font-size: max(0.8em, 0.875rem);
  line-height: 1.125;
}
.player__time {
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* digits don't jitter while counting */
  min-width: 11ch;                      /* room for "00:00 / 00:00": the bar doesn't shrink on play */
  padding-top: max(0px, calc(var(--toggle-h) / 2 - 0.7em));   /* text centred on the bar */
  font-weight: 700;
  text-align: right;
}

.player__total { color: #8a8a8a; font-weight: 400; }
.player--caption-only { grid-template-columns: 1fr; }
.player--caption-only .player__toggle,
.player--caption-only .player__bar,
.player--caption-only .player__time { display: none; }
.player--caption-only .player__track { padding-top: 0; }
.player--caption-only .player__caption { margin-top: 0; }
.player__caption[hidden] { display: none; }

@media (min-width: 1024px) {
  .works {
    display: grid;
    grid-template-columns: 49.48% 1fr;          /* 950 | 970 @ 1920 */
    min-height: clamp(40rem, 51.1vw, 61.3rem);   /* 981px @ 1920 */
  }
  .works__info-col { position: relative; }
  /* header over the text column: label + rule, counter/arrows next to the title */
  .works__head {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto 0;
    padding: clamp(1.25rem, 1.6vw, 1.9375rem) clamp(1rem, 1.3vw, 1.5625rem) 0 var(--container-pad);
    align-items: start;
    pointer-events: none;
  }
  .works__head .works__arrow { pointer-events: auto; }
  .works__label { margin-right: calc(-1 * clamp(1rem, 1.3vw, 1.5625rem)); }
  .works__nav { margin-top: clamp(1rem, 1.2vw, 1.5rem); }
  .work__info { padding-top: clamp(5rem, 5.1vw, 6.125rem); }  /* title at 98px */

  .player { padding-left: clamp(1.5rem, 2.8vw, 3.375rem); column-gap: clamp(1.25rem, 2vw, 3rem); }
}

/* --- Home: shared layout for museo / fondazione / amici ---------- */

/* big title between two rules */
.ruled-title {
  border-block: 1px solid currentColor;
  padding-block: 0.3rem clamp(0.75rem, 0.9vw, 1rem);
}
.ruled-title .section-title { margin: 0; }

/* text column 755 | gap | side column 600  (at 1920) */
.split {
  display: grid;
  gap: var(--sp-7);
  margin-top: clamp(2.5rem, 5.7vw, 6.8rem);
}
.split__main p { margin: 0; }
.split__side { display: grid; align-content: start; }
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 755fr) minmax(0, 485fr) minmax(0, 600fr);
    gap: 0;
  }
  .split__main { grid-column: 1; padding-top: 1.4rem; }
  .split__side { grid-column: 3; }
}

/* box opened by a thin rule (board, vision, mission, membership…) */
.ruled-box {
  padding-block: 1.25rem;
  border-top: 1px solid currentColor;
}
.ruled-box__title {
  margin: 0 0 1.4em;
  font-family: var(--f-body);
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: 0;
}
.ruled-box p { margin: 0; }

/* stacked label/value rows separated by rules (museum info) */
.info-list .info-item {
  padding-block: 1.25rem;
  border-top: 1px solid currentColor;
  grid-template-columns: 7.8rem 1fr;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .info-list .info-item { grid-template-columns: 9.75rem 1fr; gap: 0; }  /* 156px */
}

/* --- Home: museo ------------------------------------------------- */

.museum {
  padding-block: clamp(3rem, 5.2vw, 6.25rem) clamp(4rem, 12.7vw, 15.25rem);
  background: #513426;
  color: var(--c-text-cream);
  font-size: var(--fs-nav);
  line-height: 1.4;
}
.museum .split__main a { text-decoration: underline; text-underline-offset: 0.15em; }
.museum .carousel {
  --slide-h: clamp(16rem, 39.8vw, 47.75rem);   /* 764px @ 1920 */
  margin-top: clamp(3rem, 5.1vw, 6.1rem);
}

/* --- Home: fondazione -------------------------------------------- */

.foundation {
  padding-block: clamp(3rem, 5.3vw, 6.375rem) clamp(4rem, 8.4vw, 10rem);
  background: var(--c-bg-cream);
  color: var(--c-bg-darkest);
  font-size: var(--fs-nav);
  line-height: 1.4;
}
.board li { line-height: 1.2; }
.board strong { font-weight: 700; }

.download-link {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-weight: 700;
}
.download-link img { width: 2.5rem; height: 2.5rem; filter: brightness(0); }

.foundation__photo { margin: clamp(3rem, 5.6vw, 6.75rem) 0 0; }
.foundation__photo img {
  width: 100%;
  aspect-ratio: 1840 / 722;
  object-fit: cover;
}
.foundation__photo figcaption { margin-top: 0.4rem; }

.foundation .split + .foundation__photo + .split,
.foundation .split + .split { margin-top: clamp(2.5rem, 5.6vw, 6.6rem); }

/* --- Home: amici del museo --------------------------------------- */

.support {
  padding-block: clamp(2.5rem, 3.2vw, 3.875rem) clamp(4rem, 6.2vw, 7.5rem);
  background: var(--c-bg-light);
  color: var(--c-bg-darkest);
  font-size: var(--fs-nav);
  line-height: 1.4;
}
.support__title {
  max-width: 96rem;
  font-size: clamp(1.875rem, 4.6vw + 0.75rem, 6.25rem);  /* long words must fit on phones */
  overflow-wrap: break-word;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.support .split { margin-top: clamp(3rem, 5.6vw, 6.7rem); }
.support__tiers { margin: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  margin-top: clamp(3rem, 6.2vw, 7.4rem);
  padding: 0.6rem 2.5rem;
  border-radius: 3.5rem;
  background: var(--c-bg-cream);
  color: var(--c-text-dark);
  font-size: clamp(1.25rem, 1.67vw, 2rem);
  font-weight: 700;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.pill:hover { opacity: 1; background: #c2b89e; }

/* --- Lightbox (click an image → full size over everything) ------ */

.lightbox-trigger {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.lightbox-trigger img { width: 100%; height: auto; }
.lightbox-trigger:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(3.5rem, 6vw, 5rem) var(--container-pad) var(--sp-6);
  border: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-text-cream);
  font-family: var(--f-body);
  font-size: var(--fs-nav);
  line-height: 1.4;
  cursor: zoom-out;
}
.lightbox[open] {
  display: grid;
  place-items: center;
}
.lightbox::backdrop { background: transparent; }

.lightbox__figure {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  max-width: 100%;
}
.lightbox__image {
  cursor: default;
  /* size set by JS: fits the screen, keeps proportions, max 2x the file */
  max-width: 100%;
  height: auto;
}
.lightbox__caption {
  width: 0;
  min-width: 100%;   /* as wide as the image, left-aligned with it */
  text-align: left;
}
.lightbox__caption:empty { display: none; }

.lightbox__close {
  position: absolute;
  top: var(--sp-5);
  right: var(--container-pad);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.lightbox__close::after { transform: rotate(-45deg); }

html.has-lightbox { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-in var(--dur) var(--ease-out); }
  .lightbox[open] .lightbox__figure { animation: lightbox-zoom var(--dur) var(--ease-out); }
  /* closing: JS adds .is-closing, waits for the animation, then closes */
  .lightbox.is-closing { animation: lightbox-out var(--dur-fast) var(--ease-in-out) forwards; }
  .lightbox.is-closing .lightbox__figure { animation: lightbox-zoom-out var(--dur-fast) var(--ease-in-out) forwards; }
  @keyframes lightbox-in { from { opacity: 0; } }
  @keyframes lightbox-out { to { opacity: 0; } }
  @keyframes lightbox-zoom { from { transform: scale(0.96); } }
  @keyframes lightbox-zoom-out { to { transform: scale(0.98); } }
}

/* --- 5. Hero --------------------------------------------------- */

.hero {
  background: var(--c-bg-dark);
  color: var(--c-text-cream);
  padding-block: clamp(3.5rem, 3vw, 3rem) clamp(2rem, 4vw, 3.5rem);
}

.hero__inner {
  display: grid;
  gap: var(--sp-6);
  text-align: center;
  justify-items: center;
}

.hero__title {
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-extratight);
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-10);
  width: 100%;
}

/* hero meta uses .framed.framed--rombi but with no bottom margin */
.hero__meta.framed {
  margin-bottom: 0;
  margin-block: var(--sp-2);
  gap: var(--sp-3);
}

.hero__meta-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--fs-meta);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.hero__meta-items li { padding: 0 var(--sp-2); }

.hero__subtitle {
  font-style: italic;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.5rem);
  margin: 0;
}

.hero__body {
  font-family: var(--f-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  width: 100%;
  max-width: none;
  text-align: left;
}

/* --- 6. Intro boxes -------------------------------------------- */

.intro-boxes {
  background: var(--c-bg-dark);
  color: var(--c-text-cream);
  padding-block: clamp(2rem, 5vw, 4rem);
}

.intro-boxes__list {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

.intro-boxes__item {
  position: relative;
  border-top: 1px solid currentColor;
  padding-top: var(--sp-4);
}
.intro-boxes__item::before,
.intro-boxes__item::after {
  content: "";
  position: absolute;
  top: 0;
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.intro-boxes__item::before { left: 0; }
.intro-boxes__item::after  { right: 0; }

.intro-boxes__title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--fs-card-title);
  margin-bottom: var(--sp-3);
  line-height: 1.15;
}

.intro-boxes__text {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: rgba(212, 203, 186, 0.85);
}

@media (min-width: 720px) {
  .intro-boxes__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
}

/* --- 6b. CTA block (after intro boxes) ------------------------ */

.cta {
  background: var(--c-bg-dark);
  color: var(--c-text-cream);
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
  text-align: center;
}
.cta .container { display: flex; justify-content: center; }

/* --- 7. Jury --------------------------------------------------- */

.jury {
  background: var(--c-bg-cream);
  color: var(--c-text-dark);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.jury__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

.jury-card { display: flex; flex-direction: column; gap: var(--sp-4); }

.jury-card__media {
  margin: 0;
  aspect-ratio: 1 / 1.21;
  background: rgba(47, 47, 47, 0.08);
  overflow: hidden;
  
}
.jury-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1); }
.jury-card__media--empty {}

.jury-card__name {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--fs-jury-name);
  margin-bottom: var(--sp-3);
}
.jury-card__bio {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-text-dark);
}

@media (min-width: 600px) {
  .jury__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
}
@media (min-width: 980px) {
  .jury__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .jury__grid { grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); }
}

/* --- 8. Prizes ------------------------------------------------- */

.prizes {
  background: var(--c-bg-darkest);
  color: var(--c-text-cream);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.prizes__grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.prize-card {
  border-top: 1px solid var(--c-text-cream);
  padding-block: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* .prize-card:last-child { border-bottom: 1px solid var(--c-text-cream); } */

.prize-card__label {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 1vw + 0.95rem, 1.875rem);
  letter-spacing: -0.01em;
  margin: 0;
}
.prize-card__amount {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.5rem);
  letter-spacing: -0.01em;
  margin: 0;
}
.prize-card__note {
  font-size: var(--fs-body);
  color: rgba(212, 203, 186, 0.75);
  margin: var(--sp-2) 0 0;
  max-width: 28ch;
  line-height: 1.5;
}

@media (min-width: 720px) {
  .prizes__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-7);
  }
  .prize-card:nth-child(-n+2):last-child,
  .prize-card { border-bottom: 0; }
}
@media (min-width: 1080px) {
  .prizes__grid { grid-template-columns: repeat(4, 1fr); column-gap: var(--sp-6); }
}

/* --- 9. Program ------------------------------------------------ */

.program {
  background: var(--c-bg-mid);
  color: var(--c-text-light);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.program .section-title { color: var(--c-text-light); }

.program__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  counter-reset: step;
}

.program-card {
  border: 1px solid var(--c-text-light);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: transparent;
}

.program-card__title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--fs-card-title);
  line-height: 1.2;
  margin: 0;
}

.program-card__body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.85);
}

.program-card__body p { white-space: pre-line; }

@media (min-width: 720px) {
  .program__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}
@media (min-width: 1080px) {
  .program__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- 10. Regulations ------------------------------------------- */

.regulations {
  background: var(--c-bg-cream);
  color: var(--c-text-dark);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}

.regulations__bg {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(10%);
  width: clamp(20rem, 90vw, 60rem);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.regulations .container { position: relative; z-index: 1; }

.regulations__intro {
  max-width: 70ch;
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-body-lg);
  line-height: 1.45;
}
.regulations__intro p:first-child strong {
  display: block;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  letter-spacing: 0;
  margin-bottom: var(--sp-2);
}

.regulations__list {
  margin-bottom: var(--sp-7);
  max-width: 60%;
}

.regulations__article {
  border-bottom: 1px solid var(--c-text-dark);
}
.regulations__article:first-child {
  border-top: 1px solid var(--c-text-dark);
}

.regulations__summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  font-size: var(--fs-body);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.regulations__summary::-webkit-details-marker { display: none; }
.regulations__summary::marker { content: ""; }
.regulations__summary:hover { background: rgba(47, 47, 47, 0.06); }

.regulations__num {
  font-weight: 400;
  letter-spacing: 0.04em;
}

.regulations__title-art { font-weight: 500; }

.regulations__arrow {
  position: relative;
  width: 2rem; height: 2rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-out);
  user-select: none;
}
.regulations__arrow::before,
.regulations__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.regulations__arrow::before {
  width: 0.85rem;
  height: 1px;
}
.regulations__arrow::after {
  width: 1px;
  height: 0.85rem;
}
.regulations__article[open] .regulations__arrow {
  transform: rotate(45deg);
}

.regulations__body {
  padding: var(--sp-3) var(--sp-5) var(--sp-6) calc(4rem + var(--sp-3));
  font-size: var(--fs-body);
  line-height: 1.6;
}
.regulations__body p { margin: 0 0 var(--sp-4); }
.regulations__body p:last-child { margin-bottom: 0; }
.regulations__body ul, .regulations__body ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); list-style: revert; }
.regulations__body ul li, .regulations__body ol li { margin-bottom: var(--sp-2); }
.regulations__body h2, .regulations__body h3, .regulations__body h4 { font-family: var(--f-body); font-weight: 700; font-size: var(--fs-body-lg); margin: var(--sp-5) 0 var(--sp-3); letter-spacing: 0; line-height: 1.3; }
.regulations__body a { text-decoration: underline; }
.jury-card__bio ul, .jury-card__bio ol { margin: 0 0 1em; padding-left: 1.25em; list-style: revert; }
.jury-card__bio a { text-decoration: underline; }
.intro-boxes__text ul, .intro-boxes__text ol { margin: 0 0 0.5em; padding-left: 1.25em; list-style: revert; }
.program-card__body ul, .program-card__body ol { margin: 0 0 1em; padding-left: 1.25em; list-style: revert; }

.regulations__actions { text-align: center; margin-top: var(--sp-7); }

.regulations__signoff {
  margin-top: var(--sp-8);
  font-size: var(--fs-small);
  text-align: center;
  opacity: 0.7;
  line-height: 1.6;
  max-width: 60%;
}

@media (max-width: 720px) {
  .regulations__list { max-width: 100%; }
  .regulations__signoff { max-width: 100%; }
}

@media (min-width: 720px) {
  .regulations__summary {
    grid-template-columns: 7rem 1fr auto;
    padding-block: var(--sp-5);
    font-size: var(--fs-body-lg);
  }
  .regulations__body {
    padding: var(--sp-4) var(--sp-6) var(--sp-7) calc(7rem + var(--sp-3));
  }
}

/* --- 10b. Scores ----------------------------------------------- */

.scores {
  background: var(--c-bg-dark);
  color: var(--c-text-cream);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.scores .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scores__intro {
  max-width: 70ch;
  margin: var(--sp-6) auto 0;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  text-align: center;
}

.scores__intro a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.scores__actions {
  margin-top: var(--sp-7);
  text-align: center;
}

@media (max-width: 720px) {
  .scores__intro { text-align: left; }
}

/* --- 11. Sponsors ---------------------------------------------- */

.sponsors {
  background: var(--c-bg-light);
  color: var(--c-text-dark);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  overflow-x: clip;   /* scaled logos must not widen the page */
}

.sponsors__grid {
  display: grid;
  column-gap: var(--sp-5);
  row-gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}

.sponsors__item {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
}
.sponsors__item img { max-width: 80%; max-height: 70%; object-fit: contain; transform: scale(var(--logo-scale, 1)); transform-origin: center; }

.sponsors__item:nth-child(1)  img { --logo-scale: 1; }
.sponsors__item:nth-child(2)  img { --logo-scale: 0.6; }
.sponsors__item:nth-child(3)  img { --logo-scale: 1.3; }
.sponsors__item:nth-child(4)  img { --logo-scale: 0.6; }
.sponsors__item:nth-child(5)  img { --logo-scale: 2.3; }
.sponsors__item:nth-child(6)  img { --logo-scale: 1; }
.sponsors__item:nth-child(7)  img { --logo-scale: 1; }
.sponsors__item:nth-child(9)  img { --logo-scale: 1; }
.sponsors__item:nth-child(10) img { --logo-scale: 1; }
.sponsors__item:nth-child(12) img { --logo-scale: 1; }
.sponsors__item:nth-child(13) img { --logo-scale: 1; }
.sponsors__item:nth-child(14) img { --logo-scale: 1; }
.sponsors__item:nth-child(15) img { --logo-scale: 1; }
.sponsors__name { font-size: 0.95rem; font-weight: 500; text-align: center; padding: 0.5rem; line-height: 1.3; opacity: 0.85; }
.sponsors__item--placeholder {
  background: var(--c-placeholder);
  border-radius: 4px;
}

@media (min-width: 600px) { .sponsors__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
	.sponsors__grid {
		grid-template-columns: repeat(5, 1fr);
		column-gap: var(--sp-5);
		row-gap: var(--sp-3);
	}
}

.sponsors__acknowledgments {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  text-align: center;
}
.sponsors__acknowledgments-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-3);
  opacity: 0.85;
}
.sponsors__acknowledgments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  font-size: 0.95rem;
}
.sponsors__acknowledgments-item {
  display: inline-flex;
  gap: 0.4em;
  align-items: baseline;
}
.sponsors__acknowledgments-location {
  opacity: 0.65;
  font-style: italic;
}
/* --- 12. Footer ------------------------------------------------ */

.site-footer {
  background: var(--c-bg-darkest);
  color: var(--c-text-cream);
  padding-block: clamp(1.5rem, 1.6vw, 1.875rem);
  font-size: var(--fs-nav);
  line-height: 1.4;
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-5);
}

.site-footer__copy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem clamp(1.5rem, 3.3vw, 4rem);
  margin: 0;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--sp-5);
  margin-top: var(--sp-2);
  font-size: 0.85em;
  opacity: 0.8;
}
.site-footer__social { display: flex; gap: var(--sp-4); align-items: center; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.5rem, 2.6vw, 3.125rem);   /* 50px @ 1920 */
  height: clamp(2.5rem, 2.6vw, 3.125rem);
  border-radius: 50%;
  color: var(--c-text-cream);
  border: 1px solid rgba(212, 203, 186, 0.35);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.site-footer__social a:hover { background: var(--c-text-cream); color: var(--c-bg-darkest); border-color: var(--c-text-cream); opacity: 1; }

.site-footer__lines {
  display: grid;
  gap: 1.25rem;   /* 20px between the 5 lines */
  padding-block: 0.25rem;
}
.site-footer__lines .divider::before,
.site-footer__lines .divider::after { width: 5px; height: 5px; }

.site-footer__credits {
  margin: 0;
  color: #545454;
  letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
  .site-footer__inner {
    /* info | social | lines (970 → 1880 @ 1920) */
    grid-template-columns: minmax(0, 620fr) minmax(0, 310fr) minmax(0, 910fr);
    column-gap: 0;
    align-items: start;
  }
  .site-footer__social { align-self: start; }
  .site-footer__lines { grid-column: 3; grid-row: 1; padding-top: 0.75rem; }
  .site-footer__credits { grid-column: 3; text-align: right; }
}

/* --- 13. Print-friendliness / a11y ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}