/* The Sofia 2GO design system (eriversoft/afisha: DESIGN.md, design-system/tokens.css),
   copied by hand rather than linked — the city sites and this page deploy separately. */
:root {
  --background: #FFFFFF; --foreground: #1A1613; --muted: #F4F2EF; --muted-foreground: #645C54;
  --border: #E4E0DA; --input: #8B8279; --primary-ink: #96650A; --ring: #A8710F;
  --gold: #D99A1E; --gold-ink: #1D140C;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0C0B0A; --foreground: #F7F3EC; --muted: #1A1713; --muted-foreground: #A79E92;
    --border: #2C2823; --input: #6F665B; --primary-ink: #EDA92A; --ring: #EDA92A;
    --gold: #EDA92A; --gold-ink: #1A1206;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 400 1rem/1.6 "Golos Text", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Oswald 600, uppercase, and never tighter than 1.25: Й and Ё need it to clear the line above. */
h1, h2 { margin: 0; font-family: Oswald, Haettenschweiler, sans-serif; font-weight: 600; line-height: 1.25; text-transform: uppercase; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
.shell { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
.label { font-size: .6rem; font-weight: 700; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }

header { border-bottom: 1px solid var(--border); }
header .shell { height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.logo { color: var(--foreground); }
.logo:hover { opacity: .8; }
.logo svg { display: block; height: 2rem; width: auto; }
.langs { display: flex; margin-right: -.625rem; }
.langs a { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; font-size: .75rem; font-weight: 600; text-decoration: none; color: var(--muted-foreground); }
.langs a:hover { color: var(--foreground); }
.langs a[aria-current] { color: var(--primary-ink); }

.hero { padding-block: 2rem 2.5rem; }
h1 span { display: block; }
h1 { font-size: clamp(3.5rem, 13vw, 6rem); letter-spacing: -.02em; }
.standfirst { max-width: 36rem; margin-top: .75rem; font-size: 1.125rem; color: var(--muted-foreground); }

/* The cities are a row of posters. Only Sofia has one yet; the rest are blank sheets with a name. */
.cities { padding-bottom: 3rem; }
.cities h2 { margin-bottom: 1rem; }
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; align-items: start; }
.wall .live { grid-column: 1 / -1; margin-bottom: 1rem; }
.live a { display: block; text-decoration: none; }
.poster { display: block; width: 100%; height: auto; border: 1px solid var(--border); }
.go { display: flex; justify-content: space-between; gap: .5rem; margin-top: .5rem; font-weight: 600; color: var(--primary-ink); }
.live a:hover .go span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.soon { container-type: inline-size; aspect-ratio: 2 / 3; display: flex; flex-direction: column; justify-content: space-between; padding: .75rem; background: var(--muted); border: 1px solid var(--border); color: var(--muted-foreground); }
.soon .name { font: 600 19cqi/1.25 Oswald, Haettenschweiler, sans-serif; text-transform: uppercase; }
@media (min-width: 40rem) {
  .wall { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .wall .live { grid-column: auto; margin: 0; }
}

/* The sixteen paints, as on sofia.tuka.events: authored rows on a phone, 24 columns from 64rem. */
.band-title { margin-bottom: .75rem; color: var(--muted-foreground); }
.band { display: grid; border-top: 1px solid var(--border); }
.band .row { display: flex; }
.band a { flex-grow: 1; min-width: 0; min-height: 2.75rem; display: flex; align-items: center; padding: .625rem .75rem; text-decoration: none; transition: filter .15s; }
.band a:hover { filter: brightness(1.1); }
.band a:focus-visible { outline: 3px solid currentColor; outline-offset: -6px; }
@media (min-width: 40rem) { .band { grid-template-columns: repeat(4, 1fr); } .band .row { display: contents; } }
@media (min-width: 64rem) { .band { grid-template-columns: repeat(24, minmax(0, 1fr)); } .band a { grid-column: span var(--span); } }

.about { padding-block: 3rem; }
.about section { display: grid; gap: .75rem 2rem; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--border); }
.about .prose { display: grid; gap: 1rem; max-width: 68ch; }
.about .support { color: var(--muted-foreground); }
@media (min-width: 48rem) { .about section { grid-template-columns: 1fr 2fr; } }

/* 404, as on sofia.tuka.events: the numeral is the loudest thing on the page, then a
   headline, one line, and two ways out. The numeral is written in --primary-ink, not
   filled gold — gold text on white is 2.45:1. */
.nf { padding-block: 3rem 3.5rem; }
.nf .code { font: 600 6rem/1 Oswald, Haettenschweiler, sans-serif; letter-spacing: -.02em; color: var(--primary-ink); }
.nf h1 { margin-top: 1.5rem; font-size: clamp(1.75rem, 4vw, 2.5rem); }
.nf .standfirst { max-width: 28rem; }
/* The notice on the old names (ADR: the-project-moves-to-tuka-events): the new address takes
   the numeral's place, and has to fit a phone. */
.moved .code { font-size: clamp(3rem, 15vw, 6rem); overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { min-height: 2.75rem; display: inline-flex; align-items: center; padding: .75rem 1.5rem; border: 1px solid transparent; border-radius: .1875rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.button.primary { background: var(--gold); color: var(--gold-ink); }
.button.primary:hover { filter: brightness(1.08); }
.button.outline { border-color: var(--input); }
.button.outline:hover { background: var(--muted); }

footer { border-top: 1px solid var(--border); }
footer .shell { padding-block: 1.5rem; font-size: .75rem; color: var(--muted-foreground); }

@media (prefers-reduced-motion: reduce) { .band a { transition: none; } }