/* Марк Авагян — сайт-портфолио. Мир: сцена и обложка «Лови волну» — ультрамарин + солнечно-жёлтый на холодной белой бумаге. */
:root{
  --paper:#F3F5FB;   /* холодный белый, фон */
  --ink:#0D1B3D;     /* текст, тёмно-синий */
  --wave:#2348FF;    /* ультрамарин «Лови волну» — главный цвет блоков */
  --sun:#FFD84D;     /* жёлтый — только кнопки действия */
  --mist:#D9E0F3;    /* подложки, линии */
  --ink-soft:#43507A;
  --on-wave:#E6EBFF; /* вторичный текст на синем */
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --text:"Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:14px;
  --gap:clamp(16px,3vw,32px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--text)}
::selection{background:var(--sun);color:var(--ink)}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--wave);outline-offset:3px;border-radius:6px}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
h2{font-weight:800;font-size:clamp(34px,6vw,64px);line-height:1.02;letter-spacing:-.02em}
h3{font-weight:500;font-size:20px;line-height:1.2}
p{text-wrap:pretty;margin:0}
.small{font-size:14px;color:var(--ink-soft)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font:600 16px/1 var(--text);text-decoration:none;border:2px solid transparent;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-sun{background:var(--sun);color:var(--ink)}
.btn-sun:hover{background:#FFE27A}
.btn-line{border-color:currentColor}
.btn-small{min-height:40px;padding:0 16px;font-size:15px}

/* шапка */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;padding:12px var(--gap);background:rgba(243,245,251,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--mist)}
.logo{font:800 17px/1 var(--display);text-decoration:none;letter-spacing:-.01em}
.menu{display:flex;gap:18px;margin-left:auto}
.menu a{text-decoration:none;font-weight:600}
.menu a:hover{text-decoration:underline}
@media (max-width:640px){.menu{display:none}.top .btn{margin-left:auto}}

/* герой */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--gap);align-items:end;padding:clamp(24px,5vw,64px) var(--gap) clamp(32px,5vw,64px);max-width:1280px;margin:0 auto}
.name{font-weight:800;font-size:clamp(56px,11vw,150px);line-height:.9;letter-spacing:-.035em;color:var(--wave);display:flex;flex-direction:column}
.name span:last-child{color:var(--ink)}
.name span{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.name span:last-child{animation-delay:.12s}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.who{margin-top:22px;font:500 clamp(19px,2.2vw,24px)/1.3 var(--display)}
.lead{margin-top:14px;max-width:56ch;color:var(--ink-soft)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-video{position:relative;margin:0;justify-self:end;width:min(100%,380px)}
.hero-video video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);background:var(--ink)}
.hero-video figcaption{margin-top:10px;font-size:14px;color:var(--ink-soft)}
.sound{position:absolute;left:12px;top:12px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:var(--sun);color:var(--ink);font:600 14px/1 var(--text);cursor:pointer}
@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero-video{justify-self:start;width:min(100%,340px)}
}

/* афиша — синий бэнд */
.afisha{background:var(--wave);color:#fff;padding:clamp(40px,6vw,80px) var(--gap)}
.afisha>*{max-width:1280px;margin-left:auto;margin-right:auto}
.dates{list-style:none;padding:0;margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.dates li{border-top:2px solid var(--sun);padding-top:14px}
.dates time{display:block;font:800 clamp(20px,2.4vw,28px)/1.1 var(--display);color:var(--sun)}
.dates p{margin-top:10px;color:var(--on-wave)}
.also{list-style:none;padding:0;margin-top:40px;columns:2;column-gap:var(--gap)}
.also li{break-inside:avoid;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.25);color:var(--on-wave)}
@media (max-width:820px){.dates{grid-template-columns:1fr}.also{columns:1}}

/* разделы */
.block{padding:clamp(48px,7vw,96px) var(--gap)}
.block>*{max-width:1280px;margin-left:auto;margin-right:auto}
.block-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--gap);align-items:end;margin-bottom:36px}
.block-head p{max-width:60ch;color:var(--ink-soft)}
@media (max-width:820px){.block-head{grid-template-columns:1fr}}
.block-blue{background:var(--ink);color:#fff}
.block-blue h2{color:var(--sun)}
.block-blue .block-head p,.block-blue figcaption{color:var(--on-wave)}

.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start}
.reel{margin:0}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);background:var(--ink)}
figcaption{margin-top:10px;font-size:15px;color:var(--ink-soft)}
.song{display:flex;flex-direction:column;gap:16px}
.song img{border-radius:var(--r);aspect-ratio:9/16;object-fit:cover;width:100%}
.song-text{display:grid;gap:10px;justify-items:start}
@media (max-width:820px){.reels{grid-template-columns:repeat(2,minmax(0,1fr))}.song{grid-column:1/-1;flex-direction:row;align-items:center}.song img{width:40%}}
@media (max-width:480px){.reels{grid-template-columns:1fr}.reel video{max-height:70vh}.song{flex-direction:column;align-items:stretch}.song img{width:100%;max-height:60vh}}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 25%;border-radius:var(--r)}
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap)}
.wide{margin:0}
.wide video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:#000}
@media (max-width:700px){.pair{grid-template-columns:1fr}}

/* пригласить */
.invite{background:var(--sun);color:var(--ink);padding:clamp(48px,7vw,96px) var(--gap)}
.invite>*{max-width:1280px;margin-left:auto;margin-right:auto}
.invite-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gap);margin-top:32px;align-items:start}
.offers{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px var(--gap)}
.offers p{margin-top:6px}
.contact{display:grid;gap:16px;justify-items:start;font-size:19px}
.invite .btn-sun{background:var(--ink);color:#fff}
.invite .btn-sun:hover{background:var(--wave)}
@media (max-width:820px){.invite-grid{grid-template-columns:1fr}}
@media (max-width:480px){.offers{grid-template-columns:1fr}}

.foot{padding:28px var(--gap);display:grid;gap:6px;max-width:1280px;margin:0 auto;font-size:15px}

/* телефон: ролики лентой со свайпом, чтобы страница не тянулась на десять экранов */
@media (max-width:480px){
  .reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:calc(-1*var(--gap));padding-right:var(--gap);flex-wrap:nowrap}
  .reels .reel{flex:0 0 72%;scroll-snap-align:start}
  .reels .song{flex:0 0 72%;scroll-snap-align:start;flex-direction:column}
  .reels .song img{width:100%;max-height:none}
}
.phone{font:800 clamp(22px,3vw,30px)/1.1 var(--display);text-decoration:none}
.phone:hover{text-decoration:underline}