/* ====================================== */
/* Сайт группы «Альянс». Mobile-first:    */
/* базовые стили — телефон, ≥768 — десктоп */
/* ====================================== */
:root {
    --c-red: #c8323d;
    --c-cream: #fbeedd;
    --c-text: #fff;
    --c-muted: rgba(255, 255, 255, .78);
    --c-wine: #791d23; /* цвет нижнего края баннера — без стыка с фоном */
    --gutter: 16px;
    --font: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--c-wine) 0%, #3a1430 100%) var(--c-wine);
    color: var(--c-text);
    font-family: var(--font);
    line-height: 1.35;
    overflow-x: hidden;
}

main { flex: 1 0 auto; }

/* ---------- Баннер ---------- */
.banner, .banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Афиша (текст + кнопка) ---------- */
.info {
    padding: 20px var(--gutter) 32px;
    text-align: center;
}

.kicker {
    margin: 0 0 8px;
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-cream);
}

h1 {
    margin: 0 0 14px;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.date {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--c-cream);
}

.place {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 10px;
    font-style: normal;
    font-size: 17px;
    color: var(--c-muted);
}

.age {
    display: table; /* отдельной строкой по центру, не рядом с кнопкой */
    margin: 0 auto 22px;
    padding: 1px 8px;
    border: 1px solid var(--c-muted);
    border-radius: 4px;
    font-size: 14px;
    color: var(--c-muted);
}

.btn-tickets {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 16px 24px;
    border-radius: 999px;
    background: var(--c-red);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    transition: background-color .2s, transform .2s;
}
.btn-tickets:hover { background: #e03b47; transform: translateY(-1px); }
.btn-tickets:focus-visible { outline: 3px solid var(--c-cream); outline-offset: 3px; }

/* ---------- Футер ---------- */
.footer {
    padding: 16px var(--gutter);
    text-align: center;
    font-size: 14px;
    color: var(--c-muted);
}

/* ---------- Десктоп ---------- */
@media (min-width: 768px) {
    .info { padding: 32px var(--gutter) 48px; }
    .kicker { font-size: 20px; }
    h1 { font-size: 40px; }
    .date { font-size: 28px; }
    .place { font-size: 19px; }
    .btn-tickets { display: inline-block; width: auto; min-width: 320px; }
}