:root { --color-fill-base: #948ca0; }
::selection { background: var(--color-accent-soft); color: var(--color-ink); }
.hero-art,.hero-details { display: contents; }
.rail a.brandmark:hover { background: var(--color-surface) url('assets/logo.png') center / contain no-repeat; }
.topnav a { min-width: 44px; justify-content: center; }
.wordmark { position: relative; }
.wordmark::after { content: ''; position: absolute; inset-inline: -3px; top: 50%; height: max(100%,44px); transform: translateY(-50%); }
.section details summary { min-height: 44px; display: flex; align-items: center; gap: 24px; list-style: none; transition: color var(--duration-hover) ease; }
.section details summary::-webkit-details-marker { display: none; }
.section details summary::after { content: ''; width: 8px; height: 8px; flex-shrink: 0; margin-inline-start: auto; margin-inline-end: 4px; border-right: 1.5px solid var(--color-accent-bright); border-bottom: 1.5px solid var(--color-accent-bright); transform: rotate(45deg); transition: transform var(--duration-hover) var(--ease-out); }
.section details[open] summary::after { transform: rotate(225deg); }
.section details summary:hover { color: var(--color-accent-soft); }
.mobile-menu nav a[aria-current='location'] { color: var(--color-accent-soft); background: var(--color-surface); }
.mobile-menu nav { max-height: 55svh; overflow: auto; overscroll-behavior: contain; }
.bkh-language a[aria-current='page']:hover { color: var(--color-ink); background: var(--color-accent-soft); }
.event-countdown { padding-inline: clamp(28px,4vw,64px); }
.content > .section:first-child { border-top: 0; }
.bkh-language { left: 5px; flex-direction: column; }
.bkh-page .rail__bottom { margin-bottom: 132px; }
.js-pintar .fill-word { color: var(--color-text); color: color-mix(in srgb,var(--color-fill-base),var(--color-text) var(--word-fill,0%)); }
.bkh-page main { overflow-wrap: anywhere; scrollbar-color: var(--color-border) var(--color-canvas); scrollbar-width: thin; }
.intro-layout > *,.candidacy > *,.prize > *,.audience-groups > * { min-width: 0; }
.facts div { grid-template-columns: minmax(0,1fr); }

/* The artwork stays proportional; the information below it can grow. */
@media(max-width:959px) {
  .event-countdown { padding-inline: 28px; }
  .bkh-page { height: 100dvh; overflow: hidden; display: grid; grid-template-rows: minmax(0,1fr) auto; }
  .bkh-page main { grid-row: 1; min-height: 0; overflow: auto; scroll-behavior: smooth; }
  .bkh-language { position: static; grid-row: 2; flex-direction: row; margin: 0; padding: 8px 12px max(8px,env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--color-border-subtle); border-radius: 0; box-shadow: none; background: var(--color-canvas); }
  .poster { aspect-ratio: auto; min-height: 142.1875cqw; padding-bottom: 20px; }
  .hero-details { display: flex; flex-direction: column; width: 90%; margin-inline: auto; padding-top: 87.3cqw; }
  .hero-subtitle { position: static; width: 100%; max-width: none; }
  .hero-subtitle strong,.hero-subtitle span { white-space: normal; overflow-wrap: anywhere; }
  .hero-date { position: static; margin-top: 3cqw; }
  .hero-date span { white-space: normal; }
  .hero-date .fx-curtain { max-width: 100%; }
  .signup-panel { position: static; width: 100%; margin-top: 6cqw; }
  .signup-panel .button { height: auto; min-height: 44px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .mobile-brandmark { width: max(44px,var(--mark-size)); height: max(44px,var(--mark-size)); background-size: var(--mark-size); }
  .hero-tags { max-width: 90%; }
  .facts div { grid-template-columns: 90px minmax(0,1fr); }
}

/* Extra-large text gets a separate art panel instead of overlapping it. */
.text-expanded .poster { container-type: inline-size; display: block; height: auto; min-height: 0; padding: 0 0 32px; --hero-lift: 0px; --art-width: 100cqw; --art-height: 55.8139535cqw; --art-left: 0px; }
.text-expanded .masthead { position: relative; min-height: var(--header-height); height: auto; padding-block: 16px; flex-wrap: wrap; }
.text-expanded .brand-copy { max-width: none; }
.text-expanded .topnav { display: none; }
.text-expanded .mobile-menu { display: block; position: relative; margin-left: auto; }
.text-expanded .mobile-menu summary { display: flex; align-items: center; min-height: 44px; }
.text-expanded .mobile-menu nav { position: absolute; right: 0; top: 100%; display: grid; width: min(320px,80vw); max-height: 65svh; overflow: auto; padding: 12px; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 12px; }
.text-expanded .mobile-menu nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; white-space: normal; }
.text-expanded .hero-art { display: block; position: relative; padding-top: 55.8139535cqw; }
.text-expanded .poster__art { top: 0; height: 55.8139535cqw; object-fit: fill; }
.text-expanded .hero-title { top: calc(var(--art-height) * .227); }
.text-expanded .hero-tags { position: static; display: flex; flex-wrap: wrap; width: 90%; max-width: none; margin: 20px auto; }
.text-expanded .hero-tags .chip { white-space: normal; }
.text-expanded .hero-details { display: flex; flex-direction: column; width: 90%; margin: 24px auto 0; padding: 0; gap: 24px; }
.text-expanded .hero-subtitle,.text-expanded .hero-date,.text-expanded .signup-panel { position: static; width: 100%; max-width: none; margin: 0; }
.text-expanded .hero-subtitle strong,.text-expanded .hero-subtitle span,.text-expanded .hero-date span { white-space: normal; overflow-wrap: anywhere; }
.text-expanded .signup-panel .button { height: auto; white-space: normal; overflow-wrap: anywhere; }
.text-expanded .js-countdown { flex-wrap: wrap; }
@media(max-width:959px) {
  .text-expanded .hero-art { padding-top: 142.1875cqw; }
  .text-expanded .poster__art { height: 142.1875cqw; }
  .text-expanded .hero-title { top: 0; }
}
@media(prefers-reduced-motion:reduce) { html,.bkh-page main { scroll-behavior: auto; } }
