* { box-sizing: border-box; }

body {
  margin: 0;
  color: #24201b;
  font-family: "Arial Narrow", Arial, sans-serif;
  background: #fffaf0;
}

.page {
  max-width: 1000px;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff url("/images/brochure/Im9.png") center top / 100% auto no-repeat;
}

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

.categories { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 4%; background: #ffd414; }
.top-logo { display: block; width: 52px; height: 52px; flex: none; }
.top-party-name { color: #111; font-size: 13px; font-weight: 700; line-height: 1.05; }
.categories-message { display: flex; align-items: center; gap: 12px; margin-right: auto; color: #a71f22; font-size: clamp(13px, 2vw, 19px); font-weight: 900; line-height: 1.05; text-align: left; text-transform: uppercase; }
.categories-message span + span { padding-left: 12px; border-left: 2px solid #a71f22; }
.categories details { position: relative; }
.categories summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid #9a261b; border-radius: 4px; background: #a71f22; color: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.categories summary:hover { background: #85191c; }
.categories summary::-webkit-details-marker { display: none; }
.categories summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.categories summary:focus-visible { outline: 3px solid #6b2118; outline-offset: 3px; }
.categories ul { position: absolute; top: 100%; right: 0; z-index: 1; min-width: 180px; margin: 0; padding: 12px 12px 12px 32px; border: 1px solid #e8c68a; border-radius: 4px; background: #fffaf0; color: #24201b; font-size: 15px; line-height: 1.8; box-shadow: 0 4px 12px #542a1b33; }

.site-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 2% 4% 0 2%;
}

.left-header { width: 29%; height: auto; }
.header-right { width: 40%; }
.portraits { display: flex; justify-content: flex-end; gap: 1.4%; width: 100%; padding-top: 1%; }
.portraits img { width: 18.5%; aspect-ratio: 1; object-fit: cover; object-position: center top; border: 2px solid white; background: #f5e1bc; }
.portraits .portrait-hemang { object-position: center 27%; }

.hero { position: relative; margin-top: -3%; overflow: hidden; }
.hero-athletes { position: absolute; width: 100%; top: 48%; left: 0; opacity: .11; }
.hero-art { position: relative; width: min(67%, 640px); aspect-ratio: 420 / 570; margin: 0 auto; }
.hero-art img { position: absolute; height: auto; }
.art-map { width: 90%; left: 4%; top: 0; }
.art-athletes { width: 49%; left: 41%; top: 24%; }
.art-cm-banner { width: 68%; left: 26%; top: 28%; }
.art-cm { width: 35%; left: 52%; top: 31%; }
.art-person { width: 44%; left: 8%; top: 25%; }
.art-trophy-banner { width: 100%; left: 0; top: 51%; }
.art-trophy { width: 88%; left: 6%; top: 55%; }
.art-ball { width: 21%; left: 31%; top: 53%; }
.art-version { width: 26%; left: 38%; top: 78%; }

.organiser { display: flex; justify-content: center; align-items: center; gap: 1%; margin: -1% auto 0; padding: 0 15px; }
.organiser img { width: clamp(42px, 7%, 70px); height: auto; }
.organiser p { margin: 0; color: #df4a24; font-size: clamp(14px, 2.5vw, 25px); font-weight: 900; font-style: italic; line-height: 1.05; text-align: center; text-transform: uppercase; }
.registration { padding: 12px 0 0; text-align: right; }
.registration p { margin: 9px 0 0; color: #6f4833; font-size: 13px; }
.registration .mobile-message { display: none; }
.register-button { display: inline-flex; align-items: center; gap: 30px; padding: 14px 28px; border-radius: 4px; background: #ba2c1e; color: white; font-size: 16px; font-weight: 700; text-decoration: none; }
.register-button:hover { background: #8d1c14; }
.register-button:focus-visible, .contact a:focus-visible { outline: 3px solid #6b2118; outline-offset: 3px; }

.contact { padding: 18px 5%; background: #fff7e2; }
.contact h2 { margin: 0 0 6px; color: #24201b; font-size: 16px; text-transform: uppercase; }
.contact a { display: inline-block; padding: 4px 8px; background: #342d26; color: #ffdb2e; font-weight: 700; text-decoration: none; }

@media (max-width: 600px) {
  .top-logo { width: 38px; height: 38px; }
  .top-party-name { display: none; }
  .categories summary { border-color: #d3a33c; background: #ffebaa; color: #81251c; font-size: 14px; }
  .categories summary:hover { background: #ffe294; }
  .categories-message { display: none; }
  .categories details:first-of-type { margin-left: auto; }
  .registration .mobile-message { display: block; color: #9c5e40; font-size: 12px; line-height: 1.4; }
  .site-header { padding: 3% 3% 0; }
  .left-header { width: 33%; }
  .header-right { width: 54%; }
  .portraits { gap: 1%; }
  .portraits img { width: 19%; border-width: 1px; }
  .hero { margin-top: 0; }
  .hero-art { width: 80%; }
}