/* Стандартная точка перехода «мобильный / планшет и выше» (как Tailwind `md`) */
:root {
  --bp-desktop: 768px;
  --bg: #f7d679;
  --accent: #c45333;
  --text: #14110d;
  --shell-bg: #000;
  --shell-shadow: -24px 0 48px -6px rgba(255, 255, 255, 0.14),
    24px 0 48px -6px rgba(255, 255, 255, 0.14),
    -8px 0 20px -4px rgba(255, 248, 220, 0.22),
    8px 0 20px -4px rgba(255, 248, 220, 0.22);
  --font-sans: "Inter", system-ui, sans-serif;
  /* Название группы: Cormorant (Google Fonts, OFL, кириллица) на всех системах */
  --font-band-name: "Cormorant", Georgia, "Times New Roman", serif;
  --band-shell-max: 72rem;
}

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

html {
  scroll-behavior: smooth;
  background: var(--shell-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  height: 100%;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--shell-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
}

.site {
  width: 100%;
  max-width: var(--band-shell-max);
  margin-inline: auto;
  min-height: 100vh;
  box-shadow: var(--shell-shadow);
}

/* ——— Block: band ——— */
.band {
  min-height: 100vh;
  height: 100%;
  position: relative;
  padding-bottom: calc(var(--base) * 203);
  background: var(--bg);
}

/* ——— Block: hero ——— */
.hero {
  width: calc(var(--base) * 842);
  position: relative;
  padding-bottom: calc(var(--base) * 100);
  margin-bottom: calc(var(--base) * 100);
  display: flex;
  flex-direction: column;
}

.hero__frame {
  position: relative;
  width: 100%;
}

.hero__photo {
  position: relative;
  aspect-ratio: 1024 / 682;
  width: 100%;
  overflow: hidden;
}

.hero__socials {
  position: absolute;
  top: calc(var(--base) * 18);
  left: calc(var(--base) * 12);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--base) * 8);
}

.hero__social {
  display: block;
  padding: calc(var(--base) * 4);
  text-decoration: none;
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-tap-highlight-color: transparent;
}

.hero__social-icon {
  display: block;
  width: calc(var(--base) * 40);
  height: calc(var(--base) * 40);
  filter: drop-shadow(0 0 calc(var(--base) * 8) rgba(0, 0, 0, 0.2));
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.hero__social:hover .hero__social-icon,
.hero__social:focus-visible .hero__social-icon {
  transform: scale(1.06);
  opacity: 0.92;
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.clip {
  clip-path: polygon(24.59% 0.00%, 65.65% 0.00%, 82.14% 0.00%, 98.62% 0.00%, 100.00% 0.00%, 100.00% 27.29%, 100.00% 54.57%, 100.00% 72.26%, 97.97% 74.09%, 95.40% 76.22%, 92.82% 78.35%, 90.79% 80.18%, 88.95% 81.55%, 85.54% 84.30%, 83.61% 85.67%, 79.65% 88.57%, 76.52% 90.70%, 72.84% 93.14%, 69.15% 95.12%, 66.11% 96.65%, 62.43% 98.02%, 58.84% 99.09%, 55.43% 99.70%, 51.93% 100.00%, 50.83% 98.78%, 48.53% 95.73%, 45.12% 91.46%, 42.54% 88.41%, 39.13% 84.76%, 35.54% 81.40%, 32.87% 79.27%, 30.39% 77.44%, 27.26% 75.61%, 24.40% 74.24%, 20.90% 73.17%, 18.05% 72.71%, 14.92% 72.56%, 11.14% 72.87%, 7.27% 73.93%, 4.14% 75.46%, 1.66% 77.13%, 0.09% 78.51%, 0.00% 75.76%, 0.00% 48.48%, 0.00% 13.34%, 0.83% 13.87%, 1.98% 14.63%, 3.92% 15.47%, 5.89% 15.93%, 7.83% 16.00%, 9.53% 15.86%, 11.51% 15.32%, 13.21% 14.56%, 14.60% 13.72%, 15.79% 12.80%, 17.08% 11.59%, 18.05% 10.52%, 18.97% 9.38%, 19.84% 8.23%, 20.72% 6.93%, 21.45% 5.79%, 22.56% 3.96%, 23.43% 2.44%, 24.08% 1.15%);
  /* clip-path: polygon(65.65% 0%, 82.14% 0%, 98.62% 0%, 99.91% 0%, 100% 1.07%, 100% 28.35%, 100% 55.64%, 100% 72.26%, 99.72% 72.71%, 99.08% 73.17%, 98.43% 73.78%, 97.33% 74.7%, 96.22% 75.61%, 95.12% 76.52%, 94.01% 77.44%, 92.91% 78.35%, 91.8% 79.27%, 90.7% 80.18%, 90.06% 80.64%, 88.95% 81.55%, 88.03% 82.32%, 87.38% 82.77%, 86.65% 83.38%, 86% 83.84%, 84.81% 84.76%, 83.79% 85.52%, 82.78% 86.28%, 81.95% 86.89%, 81.12% 87.5%, 80.02% 88.26%, 79.19% 88.87%, 78.27% 89.48%, 77.16% 90.24%, 76.06% 91.01%, 75.14% 91.62%, 73.94% 92.38%, 72.74% 93.14%, 72.19% 93.45%, 71.18% 94.05%, 70.26% 94.51%, 69.24% 95.12%, 68.23% 95.58%, 67.13% 96.19%, 66.3% 96.49%, 65.29% 96.95%, 64.09% 97.41%, 63.26% 97.71%, 61.88% 98.17%, 60.5% 98.63%, 59.12% 98.93%, 58.1% 99.24%, 57.09% 99.39%, 56.26% 99.54%, 55.06% 99.7%, 53.87% 99.85%, 52.12% 100%, 51.66% 99.85%, 51.1% 99.09%, 50.46% 98.32%, 49.82% 97.41%, 49.17% 96.65%, 48.53% 95.73%, 48.07% 95.12%, 47.61% 94.51%, 46.96% 93.75%, 46.22% 92.84%, 45.49% 91.92%, 44.84% 91.16%, 44.11% 90.24%, 43.55% 89.63%, 42.63% 88.57%, 41.71% 87.5%, 41.16% 86.89%, 40.61% 86.28%, 39.69% 85.37%, 38.95% 84.6%, 38.03% 83.69%, 36.92% 82.62%, 36.28% 82.16%, 35.54% 81.4%, 34.9% 80.95%, 33.79% 80.03%, 32.69% 79.12%, 32.04% 78.66%, 31.03% 77.9%, 30.02% 77.29%, 28.82% 76.52%, 27.72% 75.91%, 26.98% 75.46%, 25.69% 74.85%, 24.68% 74.39%, 23.39% 73.93%, 22.47% 73.63%, 21.36% 73.32%, 19.98% 73.02%, 18.23% 72.71%, 17.4% 72.71%, 16.57% 72.56%, 13.44% 72.56%, 12.62% 72.71%, 11.14% 72.87%, 10.04% 73.17%, 9.21% 73.32%, 8.29% 73.63%, 6.91% 74.09%, 5.52% 74.7%, 4.33% 75.3%, 3.41% 75.91%, 2.67% 76.37%, 1.66% 77.13%, 0.55% 78.05%, 0.09% 78.51%, 0% 77.44%, 0% 50.15%, 0% 26.68%, 0.37% 26.83%, 1.47% 27.59%, 2.3% 28.2%, 3.04% 28.66%, 4.05% 29.27%, 4.79% 29.57%, 5.89% 30.18%, 6.81% 30.49%, 7.55% 30.79%, 8.56% 31.1%, 9.67% 31.4%, 11.23% 31.71%, 12.43% 31.86%, 14% 32.01%, 16.85% 32.01%, 17.68% 31.86%, 19.06% 31.71%, 20.17% 31.4%, 21.09% 31.25%, 21.92% 30.95%, 23.02% 30.64%, 24.03% 30.18%, 24.86% 29.88%, 25.78% 29.42%, 26.7% 28.96%, 27.81% 28.35%, 29.01% 27.59%, 30.02% 26.83%, 30.66% 26.37%, 31.77% 25.46%, 32.6% 24.7%, 33.7% 23.63%, 34.44% 22.87%, 35.17% 22.1%, 35.73% 21.49%, 36.46% 20.58%, 37.02% 19.97%, 37.75% 19.05%, 38.67% 17.84%, 39.13% 17.23%, 39.69% 16.46%, 40.24% 15.7%, 41.07% 14.48%, 41.99% 13.11%, 42.54% 12.2%, 43.09% 11.28%, 43.65% 10.37%, 44.2% 9.45%, 44.75% 8.54%, 45.21% 7.93%, 45.49% 7.32%, 46.04% 6.4%, 46.59% 5.34%, 47.15% 4.27%, 47.61% 3.35%, 48.07% 2.44%, 48.53% 1.52%, 48.99% 0.61%, 49.17% 0.15%); */
}

.hero__line {
  width: 100%;
  position: absolute;
  bottom: calc(var(--base) * -100);
  aspect-ratio: 2.37;
  background-color: var(--accent);
  clip-path: polygon(16.55% 0%, 17.63% 0.19%, 19.71% 0.56%, 21.22% 1.12%, 22.59% 1.68%, 24.24% 2.62%, 25.4% 3.36%, 26.83% 4.49%, 27.91% 5.42%, 28.92% 6.36%, 30.43% 7.85%, 31.51% 8.97%, 32.95% 10.65%, 33.96% 11.96%, 34.96% 13.27%, 36.33% 15.14%, 37.48% 16.82%, 38.49% 18.32%, 39.42% 19.81%, 40.22% 21.12%, 41.01% 22.43%, 41.87% 23.93%, 42.73% 25.42%, 43.45% 26.73%, 44.17% 28.04%, 44.96% 29.53%, 45.76% 31.03%, 46.69% 32.9%, 47.48% 34.39%, 48.27% 36.07%, 48.92% 37.38%, 49.57% 38.69%, 50.29% 40.19%, 50.94% 41.5%, 51.87% 43.55%, 52.66% 45.23%, 53.45% 46.92%, 54.24% 48.6%, 55.04% 50.28%, 55.83% 51.96%, 56.62% 53.64%, 57.34% 55.14%, 58.13% 56.82%, 58.92% 58.5%, 59.57% 59.81%, 60.36% 61.5%, 61.15% 63.18%, 61.8% 64.49%, 62.59% 66.17%, 63.24% 67.48%, 64.03% 69.16%, 64.75% 70.65%, 65.61% 72.34%, 66.33% 73.64%, 67.05% 74.95%, 67.91% 76.45%, 68.85% 77.94%, 69.86% 79.44%, 71.44% 81.5%, 72.59% 82.8%, 73.88% 84.11%, 75.54% 85.42%, 76.69% 86.17%, 78.13% 86.92%, 79.57% 87.48%, 81.22% 87.85%, 82.88% 88.04%, 85.54% 88.04%, 86.62% 87.85%, 88.35% 87.48%, 90.22% 86.92%, 92.16% 86.17%, 93.88% 85.42%, 95.04% 84.86%, 96.76% 83.93%, 98.56% 82.8%, 99.93% 81.87%, 100% 84.3%, 100% 97.2%, 99.42% 97.76%, 98.27% 98.13%, 96.91% 98.69%, 95.11% 99.25%, 93.53% 99.63%, 91.15% 100%, 87.48% 100%, 85.83% 99.63%, 84.03% 99.07%, 82.37% 98.32%, 81.22% 97.57%, 79.86% 96.64%, 78.13% 95.14%, 76.83% 93.83%, 75.54% 92.34%, 73.96% 90.28%, 72.73% 88.41%, 72.01% 87.29%, 71.22% 85.98%, 70.58% 84.86%, 69.71% 83.36%, 68.99% 82.06%, 67.84% 79.81%, 67.19% 78.5%, 66.4% 76.82%, 65.76% 75.51%, 64.82% 73.46%, 64.24% 72.15%, 63.67% 70.84%, 63.17% 69.72%, 62.59% 68.41%, 61.94% 66.92%, 61.29% 65.42%, 60.72% 64.11%, 59.93% 62.24%, 59.21% 60.56%, 58.49% 58.88%, 57.77% 57.2%, 57.12% 55.7%, 56.47% 54.21%, 55.76% 52.52%, 55.04% 50.84%, 54.39% 49.35%, 53.88% 48.22%, 53.31% 46.92%, 52.59% 45.42%, 51.58% 43.18%, 50.79% 41.5%, 50% 39.81%, 49.35% 38.5%, 48.63% 37.01%, 47.99% 35.7%, 47.34% 34.39%, 46.55% 32.9%, 45.68% 31.21%, 44.89% 29.72%, 44.17% 28.41%, 43.31% 26.92%, 42.45% 25.42%, 41.44% 23.74%, 40.43% 22.06%, 39.57% 20.75%, 38.71% 19.44%, 37.27% 17.38%, 35.97% 15.7%, 34.96% 14.39%, 34.17% 13.46%, 32.88% 11.96%, 31.94% 11.03%, 30.58% 9.72%, 29.06% 8.41%, 27.41% 7.29%, 25.83% 6.36%, 24.32% 5.61%, 22.52% 4.86%, 20.58% 4.3%, 18.2% 3.93%, 14.82% 3.93%, 13.38% 4.3%, 11.44% 4.86%, 10% 5.61%, 8.63% 6.36%, 7.05% 7.48%, 6.12% 8.22%, 4.53% 9.72%, 3.17% 11.21%, 2.01% 12.71%, 1.44% 13.46%, 0.29% 15.14%, 0% 15.51%, 0% 9.53%, 0.5% 8.6%, 1.29% 7.66%, 2.01% 6.73%, 2.88% 5.79%, 4.39% 4.3%, 6.12% 2.99%, 7.34% 2.24%, 8.71% 1.5%, 10.72% 0.75%, 12.16% 0.37%, 13.6% 0.19%);
}

.hero__logo {
  width: calc(var(--base) * 88.6);
  height: calc(var(--base) * 88.6);
  position: absolute;
  bottom: calc(var(--base) * 124);
  right: calc(var(--base) * 124);
  background-image: url("./images/logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hero__brand {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 0 calc(var(--base) * 40) 0 calc(var(--base) * 50);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--base) * 24);
}

.hero__circle {
  display: none;
}

.hero__titles {
  width: 50%;
  text-align: right;
}

.hero__kicker,
.concert__label {
  margin: 0;
  font-size: calc(var(--base) * 24);
  line-height: calc(var(--base) * 24 * 0.9);
  font-weight: 400;
  letter-spacing: calc(var(--base) * 0.02);
}

.hero__name {
  margin: 0;
  font-family: var(--font-band-name);
  font-weight: 600;
  font-size: calc(var(--base) * 58);
  line-height: calc(var(--base) * 58 * 0.9);
  letter-spacing: calc(var(--base) * 0.02);
}

.concert {
  flex: 1 1 50%;
  max-width: 50%;
  transform: translateY(calc(var(--base) * 52));
  text-align: left;
}

.concert__place,
.concert__link {
  font-family: var(--font-sans);
  font-size: calc(var(--base) * 18);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: calc(var(--base) * 0.02);
}

.concert__label {
  margin-bottom: calc(var(--base) * 10);
  color: var(--text);
}

.concert__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--base) * 8);
}

.concert__date,
.concert__place,
.concert__link {
  margin: 0;
}

.concert__date {
  font-family: var(--font-band-name);
  font-weight: 600;
  font-size: calc(var(--base) * 48);
  line-height: 1.1;
  letter-spacing: calc(var(--base) * 0.02);
  color: var(--accent);
}

.concert__place {
  color: var(--text);
}

.concert__link {
  color: var(--accent);
  text-decoration: none;
  -webkit-user-select: auto;
  user-select: auto;
}

.concert__link:hover,
.concert__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: calc(var(--base) * 4);
}

.footer {
  width: 100%;
  height: calc(var(--base) * 203);
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.footer__image {
  width: calc(var(--base) * 406);
  height: calc(var(--base) * 406);
  position: absolute;
  bottom: calc(var(--base) * -203);
  background-image: url("./images/circle.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}