/* Responsive overrides: original colors and desktop composition retained. */
* { box-sizing: border-box; }
#wrapper { width: min(750px, calc(100% - 32px)); }
#top h1 { font-size: clamp(28px, 6.5vw, 50px); line-height: 1.15; }
#top h2 { line-height: 1.5; }
#content { width: auto; min-width: 0; overflow-wrap: anywhere; }
#content img { max-width: calc(100% - 16px); height: auto; }
#content p, #content li { font-size: 15px; line-height: 1.6; }
#leftnav li:empty { display: none; }
#leftnav li { line-height: 1.5; }
#leftnav a { display: block; padding: 10px 2px; min-height: 44px; }
a:focus-visible, button:focus-visible { outline: 2px solid #00ccff; outline-offset: 3px; }
#subtext { height: auto; overflow: visible; padding: 20px 0; }
.announcement { font-size: 16px; line-height: 1.5; }
#slider { width: calc(100% - 190px); height: auto; aspect-ratio: 550 / 414; margin-left: 190px; padding: 0; }
#sliderContent { width: 100%; height: 100%; margin: 0; }
#slider .sliderImage { position: absolute; inset: 0; float: none; }
#slider .sliderImage img { display: block; width: 100%; height: 100%; object-fit: contain; }
#slider .clear { display: none !important; }
#slider .sliderImage span { left: 0; max-width: 100%; pointer-events: none; }
#gallery { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; padding: 10px; }
#gallery a { display: flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 0; max-width: 100%; }
#content #gallery img { box-sizing: content-box; max-width: calc(100% - 12px); width: auto; height: auto; margin: 0; padding: 5px; }
/* Original reset sets dialog to display:block; closed dialogs must stay hidden. */
.art-dialog:not([open]) { display: none; }
.art-dialog { width: min(1100px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 12px; border: 1px solid #888; background: #000; color: #e4e4e4; }
.art-dialog::backdrop { background: rgb(0 0 0 / .9); }
.art-dialog img { display: block; max-width: 100%; max-height: calc(100dvh - 190px); width: auto; height: auto; margin: 0 auto; }
.art-dialog p { color: #e4e4e4; font-size: 15px; line-height: 1.4; margin: 12px 0; }
.art-controls { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.art-controls button { min-height: 44px; padding: 8px 12px; background: #222; border: 1px solid #888; color: #fff; font: 14px Arial, sans-serif; cursor: pointer; }
body.art-open { overflow: hidden; }
@media (max-width: 640px) {
  #top { padding: 20px 0 24px; }
  #leftnav { float: none; clear: none; width: 100%; margin-bottom: 24px; }
  #leftnav ul { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  #leftnav li { padding: 0; }
  #leftnav li:not(:has(a)) { width: 100%; margin-top: 8px; }
  #leftnav li a { padding: 10px 0; }
  #content, #banner { margin-left: 0; width: 100%; }
  #slider { width: 100%; margin-left: 0; }
  #subbanner { margin-top: 24px; height: 16px; }
  #picture { float: none; padding-right: 0; }
  #contatti h3, #contatti p { padding-left: 0; }
  #gallery { padding: 0; }
  #footer { padding: 24px 0; }
}

/* Navigation: restrained charcoal panel with cyan active state. */
#leftnav { padding: 12px; border: 1px solid #292929; border-radius: 10px; background: #101010; }
#leftnav ul.menu-list { display: grid; gap: 4px; background: transparent; }
#leftnav .menu-list li { width: auto; margin: 0; padding: 0; }
#leftnav .menu-list a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 6px; color: #d8d8d8; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
#leftnav .menu-list a:hover { background: #242424; color: #fff; }
#leftnav .menu-list a[aria-current="page"] { background: #15282d; color: #67dfff; box-shadow: inset 3px 0 #00ccff; font-weight: 700; }
#leftnav .menu-gallery { margin: 8px 0; padding: 12px 0; border-top: 1px solid #292929; border-bottom: 1px solid #292929; }
#leftnav .menu-heading { display: block; padding: 0 12px 8px; color: #999; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
#leftnav ul.menu-sublist { display: grid; gap: 2px; background: transparent; }
#leftnav .menu-sublist a { padding-left: 18px; font-size: 13px; }
@media (max-width: 640px) {
  #leftnav { padding: 10px; }
  #leftnav ul.menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  #leftnav .menu-gallery { grid-column: 1 / -1; margin: 4px 0; padding: 12px 0; }
  #leftnav ul.menu-sublist { display: flex; flex-wrap: wrap; gap: 4px; }
  #leftnav .menu-sublist li { flex: 1 1 120px; }
  #leftnav .menu-sublist a { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #leftnav .menu-list a { transition: none; }
}

/* Clearly defined navigation buttons. */
#leftnav ul.menu-list { gap: 8px; }
#leftnav .menu-list a {
  border: 1px solid #484848;
  background: linear-gradient(180deg, #303030, #202020);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 2px 3px rgb(0 0 0 / .25);
  color: #ededed;
  font-weight: 600;
}
#leftnav .menu-list a:hover {
  border-color: #00a9d4;
  background: #293b40;
  color: #fff;
}
#leftnav .menu-list a:active { background: #17292e; box-shadow: inset 0 2px 4px rgb(0 0 0 / .4); }
#leftnav .menu-list a[aria-current="page"] {
  border-color: #00ccff;
  background: #173943;
  color: #a4edff;
  box-shadow: inset 3px 0 #00ccff;
}
#leftnav ul.menu-sublist { gap: 7px; }
#leftnav .menu-sublist a { background: #202020; border-color: #3e3e3e; }
@media (max-width: 640px) {
  #leftnav ul.menu-list { gap: 8px; }
  #leftnav ul.menu-sublist { gap: 8px; }
}

/* Compact mobile navigation, retaining clear button boundaries. */
@media (max-width: 640px) {
  #leftnav { padding: 8px; margin-bottom: 16px; }
  #leftnav ul.menu-list, #leftnav ul.menu-sublist { gap: 5px; }
  #leftnav .menu-list a, #leftnav .menu-sublist a {
    min-height: 20px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
  }
  #leftnav .menu-gallery { margin: 2px 0; padding: 8px 0; }
  #leftnav .menu-heading { padding: 0 10px 5px; }
}