:root {
  --cream: #fff8ef;
  --red: #b70101;
  --deep-red: #980505;
  --u: min(1px, calc(100vw / 1920));
  color: #202020;
  background: var(--cream);
  font-family: Montserrat, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #8d1414; outline-offset: 4px; }
main { max-width: 1920px; margin-inline: auto; }
img { display: block; }
.hero, .section { position: relative; }
.hero { height: min(56.25vw, 100svh); color: white; }
.hero-images { display: grid; grid-template-columns: repeat(2, 1fr); height: 100%; }
.visual { overflow: hidden; position: relative; border-radius: calc(16 * var(--u)); }
.visual picture { display: contents; }
.visual img { width: 100%; height: 100%; object-fit: cover; }
.hero .visual { border-radius: 0; }
.hero .visual img, .videos .visual img, .photo-last img, .course:nth-child(2) .cover img { position: absolute; max-width: none; }
.hero-left img, .hero-right img { inset: 0; object-fit: cover; }
.hero-left img { object-position: center 75%; }
.hero-right img { object-position: center 56%; }
.topbar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12 * var(--u)) calc(260 * var(--u));
  background: #fff8ef1a;
  backdrop-filter: blur(5px);
}
.brand img { width: calc(220 * var(--u)); height: auto; }
.topbar nav { display: flex; gap: calc(24 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; text-transform: uppercase; }
.cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .28em;
  min-height: calc(76 * var(--u));
  padding: .65em 1.2em;
  border-radius: calc(8 * var(--u));
  background: var(--red);
  color: white;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}
.cta:hover { background: var(--deep-red); }
.topbar .cta { min-height: calc(60 * var(--u)); }
.mobile-cta, .dots { display: none; }
.copy { display: grid; gap: calc(32 * var(--u)); }
h2 { font: 400 calc(96 * var(--u))/1 'Cormorant Garamond', Georgia, serif; text-transform: uppercase; }
h2::before { content: ''; display: block; width: calc(240 * var(--u)); height: 1px; background: #b70101; margin-bottom: calc(32 * var(--u)); }
.copy p { font-size: calc(24 * var(--u)); line-height: 1.5; color: #535353; }
.telegram, .music {
  display: grid;
  grid-template-columns: calc(460 * var(--u)) 1fr;
  gap: calc(36 * var(--u)) calc(180 * var(--u));
  align-content: start;
  padding-inline: calc(260 * var(--u));
  min-height: calc(860 * var(--u));
}
.telegram { padding-top: calc(100 * var(--u)); }
.telegram .copy { grid-area: 1 / 2; max-width: calc(720 * var(--u)); align-self: end; padding-top: calc(90 * var(--u)); }
.telegram-phone { grid-area: 1 / 1 / span 3; aspect-ratio: 460 / 660; }
.telegram > .cta { grid-column: 2; width: calc(560 * var(--u)); }
.telegram-phone, .instagram-phone { border-radius: calc(48 * var(--u)); }
.telegram-phone img, .instagram-phone img { position: absolute; object-fit: fill; }
.telegram-phone img { width: 157.8%; height: 100.5%; left: -23.7%; top: 0; }
.youtube { padding: calc(80 * var(--u)) calc(160 * var(--u)) 0; min-height: calc(1000 * var(--u)); }
.youtube .copy { max-width: calc(820 * var(--u)); }
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u)); margin-top: calc(100 * var(--u)); }
.videos .visual { aspect-ratio: 512 / 320; }
.video-one img, .video-three img { width: 109%; left: -2%; object-fit: fill; }
.video-two img { height: 239.97%; top: -102.17%; object-fit: fill; }
.youtube > .cta { display: flex; width: calc(620 * var(--u)); margin: calc(60 * var(--u)) auto 0; }
.courses { min-height: calc(1241 * var(--u)); padding-top: calc(80 * var(--u)); text-align: center; }
.courses .copy { justify-items: center; margin-inline: auto; max-width: calc(820 * var(--u)); }
.courses h2::before { margin-inline: auto; }
.course-track { display: grid; grid-template-columns: 556fr 780fr 556fr; align-items: end; margin: calc(165 * var(--u)) calc(18 * var(--u)) 0; }
.course { min-width: 0; display: grid; gap: calc(40 * var(--u)); font-size: calc(20 * var(--u)); letter-spacing: .25em; text-transform: uppercase; }
.course .cover { aspect-ratio: 556 / 420; box-shadow: 0 12px 32px #98050529; }
.course:nth-child(2) .cover { aspect-ratio: 780 / 440; z-index: 1; }
.course:nth-child(2) .cover img { width: 107.63%; height: 108.22%; top: -8.19%; left: -5.6%; object-fit: fill; }
.courses .cta { width: calc(520 * var(--u)); margin-top: calc(60 * var(--u)); }
.instagram {
  display: grid;
  grid-template-columns: minmax(0, calc(1060 * var(--u))) calc(460 * var(--u));
  align-content: start;
  gap: calc(32 * var(--u)) calc(80 * var(--u));
  padding: calc(90 * var(--u)) calc(160 * var(--u)) 0;
  min-height: calc(1040 * var(--u));
}
.instagram .copy { grid-area: 1 / 1; padding-top: calc(10 * var(--u)); max-width: calc(900 * var(--u)); }
.photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(20 * var(--u)); grid-column: 1; }
.photo { aspect-ratio: 5 / 6; }
.photo-last img { height: 125%; top: -18.68%; object-fit: fill; }
.instagram-phone { grid-area: 1 / 2 / span 4; aspect-ratio: 460 / 860; }
.instagram-phone::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed #d88b95;
  border-radius: inherit;
  pointer-events: none;
}
.instagram-phone img { width: 206.5%; height: 101%; top: 0; left: -43%; }
.instagram > .cta { grid-column: 1; width: calc(520 * var(--u)); }
.music { padding-top: calc(120 * var(--u)); }
.music h2 { grid-area: 1 / 2; }
.music-cover { grid-area: 1 / 1 / span 3; aspect-ratio: 460 / 620; box-shadow: 0 12px 32px #98050529; }
.player { grid-column: 2; display: grid; gap: calc(36 * var(--u)); }
.track { display: flex; gap: calc(24 * var(--u)); align-items: center; }
.track img { width: calc(96 * var(--u)); height: auto; }
.track a:last-child img { width: calc(52 * var(--u)); }
.track strong, .track span { display: block; }
.track strong { font-size: calc(36 * var(--u)); color: var(--deep-red); letter-spacing: .04em; }
.track span { font-size: calc(26 * var(--u)); color: #535353; }
.wave { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.wave i { display: block; width: calc(5 * var(--u)); height: calc(var(--bar) * var(--u)); border-radius: 3px; background: #d1bdb8; }
.progress { display: flex; align-items: center; gap: calc(20 * var(--u)); color: var(--deep-red); font-size: calc(20 * var(--u)); }
.progress i { width: calc(560 * var(--u)); height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--deep-red) 3%, #d9c7c2 3%); }
.player .cta { width: calc(500 * var(--u)); }
@media (max-width: 767px) {
  :root { --u: 1px; }
  .desktop-only, .topbar nav, .topbar .desktop-cta, .hero-right { display: none; }
  .hero { height: min(212.3vw, 100svh); }
  .hero-images { display: block; }
  .hero-left { height: 100%; }
  .hero-left img { width: 106.67%; height: 115.34%; left: -5.38%; top: -15.34%; object-fit: cover; }
  .hero-images::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, #0007); }
  .topbar { height: 72px; padding: 8px 20px; justify-content: center; background: #0001; backdrop-filter: blur(2px); }
  .brand img { width: 147px; }
  .hero .mobile-cta { display: flex; position: absolute; bottom: 9.5%; left: 20px; right: 20px; background: #fff; color: var(--deep-red); width: auto; }
  .section { display: flex; flex-direction: column; gap: 24px; padding: 64px 20px; min-height: 0; }
  .copy { display: grid; gap: 24px; }
  h2 { font-size: 48px; }
  h2::before { width: 120px; margin-bottom: 24px; }
  .copy p { font-size: 18px; }
  .cta, .section .cta { width: 100%; min-height: 60px; margin: 0; font-size: 18px; }
  .telegram .copy, .instagram .copy { align-self: stretch; padding: 0; max-width: none; }
  .telegram-phone { aspect-ratio: 350 / 380; }
  .telegram-phone img { width: 120%; height: 100.5%; left: -15%; }
  .telegram-phone, .instagram-phone { border-radius: 32px; }
  .videos { margin: 0; display: block; }
  .videos .video-one { aspect-ratio: 350 / 280; }
  .videos .video-one img { width: 100%; height: 105.28%; left: 0; top: -2.69%; }
  .video-two, .video-three { display: none; }
  .courses { text-align: left; }
  .courses .copy { margin: 0; justify-items: start; }
  .courses h2::before { margin-inline: 0; }
  .course-track {
    display: flex;
    align-items: start;
    gap: 16px;
    margin: 0 -20px;
    padding: 0 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .course { flex: 0 0 min(310px, calc(100vw - 80px)); gap: 14px; text-align: center; font-size: 16px; scroll-snap-align: start; }
  .course .cover, .course:nth-child(2) .cover { aspect-ratio: 31 / 20; box-shadow: 0 6px 18px #98050529; }
  .course .cover img, .course:nth-child(2) .cover img { position: absolute; width: 124%; height: 109%; left: -12%; top: -9%; object-fit: fill; }
  .dots { position: relative; align-self: center; display: flex; align-items: center; height: 24px; }
  .dots img { position: absolute; inset: 0; margin: auto; pointer-events: none; }
  .dots button { position: relative; width: 20px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .dots[data-active] img { visibility: hidden; }
  .dots[data-active] button::before { content: ''; display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: #d1bdb8; }
  .dots[data-active] button[aria-current="true"]::before { background: var(--red); }
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .photo { border-radius: 12px; aspect-ratio: 169 / 200; }
  .instagram-phone { aspect-ratio: 350 / 420; }
  .instagram-phone img { width: 133%; height: 101%; left: -15%; }
  .music-cover { aspect-ratio: 1; }
  .player { gap: 24px; }
  .track { gap: 12px; }
  .track img { width: 64px; }
  .track a:last-child img { width: 40px; }
  .track strong { font-size: 26px; }
  .track span { font-size: 18px; }
  .wave { gap: 3px; }
  .wave i { width: 4px; height: calc(var(--bar) * .625px); }
  .wave i:nth-child(n+15) { display: none; }
  .progress { gap: 12px; font-size: 15px; }
  .progress i { flex: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (max-width: 767px) {
  .player { grid-template-columns: minmax(0, 1fr); }
  .progress i { width: 0; }
  .wave { min-width: 0; overflow: hidden; }
  .track > a { flex-shrink: 0; }
}
@media (max-width: 375px) {
  h2 { font-size: clamp(32px, 12vw, 45px); }
}

@media (min-width: 768px) {
  .course:not(:nth-child(2)) .cover {
    overflow: visible;
    box-shadow: none;
  }
  .course:not(:nth-child(2)) .cover img {
    filter: drop-shadow(0 12px 16px #98050529);
  }
}