/* Николай Хондзинский — вёрстка по макету KHO_WEB_07.pdf.
   Макет 1440px: контейнер 1160, три колонки по 362 с зазором 38. */

:root{
  --bg:#181313;
  --card:#221e1e;
  --card-hover:#2a2525;
  --ink:#e8e4e4;
  --ink-dim:#a89e9e;
  --ink-muted:#786d6d;
  --accent:#6075d6;
  --line:rgba(120,109,109,0.45);
  --col:362px;
  --gap:38px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  font-weight:300;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

/* 1202 + по 20px паддинга = контент 1162px, как в макете (139…1301). */
.inner{max-width:1202px;margin:0 auto;padding:0 20px;}

/* ---------- Шапка ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:22px 0;
  transition:background .25s;
}
.header.scrolled{background:rgba(24,19,19,0.92);backdrop-filter:blur(8px);}
.header-inner{display:flex;align-items:center;gap:44px;padding:0 60px;}
.logo{font-size:19px;font-weight:300;color:var(--ink);white-space:nowrap;}
.nav{display:flex;gap:36px;flex:1;}
.nav a{font-size:17px;font-weight:300;color:var(--accent);transition:color .15s;}
.nav a:hover{color:#8b9ce6;}
.nav a.is-active{color:var(--ink);}
/* На внутренних страницах шапка всегда на тёмном фоне. */
.inner-page .header{background:var(--bg);}
.socials{display:flex;align-items:center;gap:18px;}
/* По макету: иконки приглушены, при наведении загораются фирменным цветом. */
.socials a{color:#6f6666;transition:color .18s;}
.socials svg{width:22px;height:22px;fill:currentColor;}
.socials a[aria-label="Telegram"]:hover{color:#2aabee;}
.socials a[aria-label="Facebook"]:hover{color:#1877f2;}
.socials a[aria-label="Instagram"]:hover{color:#e1306c;}
.socials a[aria-label="SoundCloud"]:hover{color:#ff5500;}
.socials a[aria-label="YouTube"]:hover{color:#ff0000;}

/* ---------- Первый экран ---------- */
.hero{height:862px;background:url('../img/hero.jpg') center/cover no-repeat;}

/* ---------- Заголовок внутренней страницы ---------- */
.page-head{padding:150px 0 60px;}
/* «Эхо» из копий заголовка со смещением вниз — как в макете. */
.page-title{position:relative;height:180px;}
.page-title span{
  position:absolute;left:0;top:0;
  font-size:120px;font-weight:200;line-height:1;
  color:var(--accent);white-space:nowrap;
}
.page-title span:nth-child(1){opacity:.28;transform:translateY(-32px);}
.page-title span:nth-child(2){opacity:.45;transform:translateY(-16px);}
.page-title span:nth-child(3){opacity:1;}
.page-title span:nth-child(4){opacity:.45;transform:translateY(16px);}
.page-title span:nth-child(5){opacity:.28;transform:translateY(32px);}

/* ---------- Биография ---------- */
.bio-hero{position:relative;min-height:862px;}
.bio-hero__photo{
  position:absolute;left:0;top:0;width:760px;height:862px;object-fit:cover;object-position:top center;
}
/* Растворение фото вправо и вниз — как в макете. */
.bio-hero::after{
  content:'';position:absolute;left:0;top:0;width:900px;height:862px;pointer-events:none;
  background:
    linear-gradient(to right,rgba(24,19,19,0) 40%,var(--bg) 88%),
    linear-gradient(to bottom,rgba(24,19,19,0) 60%,var(--bg) 100%);
}
.bio-hero__inner{position:relative;z-index:2;padding-top:300px;}
.bio-hero__title{font-size:120px;font-weight:200;line-height:1;color:var(--accent);text-align:right;}
.bio-hero__quote{margin-top:210px;text-align:left;padding-left:400px;}
.bio-hero__quote .quote-author{text-align:right;margin-top:6px;}
.bio-lead{font-size:24px;font-weight:300;color:var(--ink-dim);line-height:1.5;max-width:1160px;margin:70px auto 0;}

.year{font-size:90px;font-weight:200;color:var(--accent);line-height:1;margin-bottom:26px;}
.bio-block{margin:96px 0;}
.bio-block__text{font-size:20px;color:var(--ink-dim);line-height:1.55;max-width:760px;}
.bio-block--center{text-align:center;}
.bio-block--center .bio-block__text{margin:0 auto;text-align:left;max-width:700px;}
.bio-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.bio-quote{font-size:56px;font-weight:200;line-height:1.1;color:var(--ink-muted);}
.bio-quote-author{margin-top:18px;font-size:22px;color:var(--accent);text-align:right;font-style:italic;}
.bio-photo{width:100%;object-fit:cover;}
.bio-photo--wide{width:100%;max-height:715px;}

/* ---------- Страница проектов ---------- */
.project-block{margin-bottom:130px;}
.project-block__top{display:grid;grid-template-columns:400px 1fr;gap:var(--gap);align-items:start;}
.project-block__name{font-size:90px;font-weight:200;line-height:0.98;color:var(--accent);}
.project-block__kind{
  font-size:15px;letter-spacing:0.1em;line-height:1.5;color:var(--ink);
  text-transform:uppercase;margin-top:22px;
}
.project-block__hero{width:100%;height:715px;object-fit:cover;}
.project-block__bottom{display:grid;grid-template-columns:var(--col) 1fr;gap:var(--gap);margin-top:40px;align-items:start;}
.project-block__text{font-size:20px;color:var(--ink);line-height:1.55;}
.project-block__text + .project-block__text{margin-top:26px;color:var(--ink-dim);}
.project-block__text i{color:var(--ink-dim);}
.project-block__logo{max-width:310px;margin-left:auto;}
.project-block__photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:40px;}
.project-block__photos img{width:100%;height:300px;object-fit:cover;}

/* ---------- Контакты ---------- */
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.contacts-grid .contact-line b{font-size:32px;}
.contacts-map{width:100%;height:420px;object-fit:cover;}

/* ---------- Закрытые концерты ---------- */
.concert{background:var(--card);display:grid;grid-template-columns:1fr 1fr;margin-bottom:38px;}
.concert--reverse .concert__side{order:2;}
.concert__side{position:relative;padding:36px 40px 44px;display:flex;flex-direction:column;}
.concert__collage{display:flex;gap:0;margin-bottom:-40px;}
.concert__collage img{width:50%;height:190px;object-fit:cover;}
.concert__name{font-size:64px;font-weight:200;line-height:1.02;color:var(--accent);position:relative;z-index:2;}
.concert__tagline{font-size:26px;font-weight:300;color:var(--ink);margin-top:8px;}
.concert__more{margin:34px 0 26px;font-size:17px;color:var(--accent);text-align:center;}
.concert__photo{width:100%;height:100%;object-fit:cover;min-height:560px;}
.concert .btn-ghost{margin:0 auto;}

/* ---------- Пожертвование ---------- */
.donate{display:grid;grid-template-columns:var(--col) 1fr;gap:var(--gap);align-items:start;}
.donate__title{font-size:65px;font-weight:200;color:var(--ink-muted);line-height:1.05;}
.donate__text{font-size:20px;color:var(--ink-dim);line-height:1.5;margin:26px 0 34px;}
.sums{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:30px;}
.sum{
  border:1px solid var(--ink-muted);color:var(--ink);
  font-size:22px;font-weight:200;padding:14px 34px;transition:border-color .15s,color .15s;
}
.sum:hover,.sum.is-active{border-color:var(--accent);color:var(--accent);}
.ways{display:grid;grid-template-columns:repeat(3,var(--col));gap:var(--gap);margin-top:70px;}
.way{background:var(--card);padding:40px 30px;text-align:center;transition:background .2s;}
.way:hover{background:var(--card-hover);}
.way__title{font-size:28px;font-weight:300;color:var(--ink);margin-bottom:18px;}

/* ---------- Медиа ---------- */
.media-layout{display:grid;grid-template-columns:560px 560px;gap:var(--gap);justify-content:space-between;align-items:start;}
.media-col{display:flex;flex-direction:column;gap:var(--gap);}
.media-side .page-title{height:150px;}
.tags{margin:40px 0 0;text-align:center;}
.tags__label{font-size:15px;letter-spacing:0.12em;color:var(--ink-dim);margin-bottom:16px;}
.tags a{display:block;font-size:17px;letter-spacing:0.1em;color:var(--ink);margin-bottom:6px;}
.tags a:hover{color:var(--accent);}
.mcard{background:var(--card);display:flex;flex-direction:column;transition:background .2s;}
.mcard:hover{background:var(--card-hover);}
.mcard__head{display:flex;align-items:baseline;gap:14px;padding:24px 28px 0;}
.mcard__kind{font-size:38px;font-weight:300;color:var(--accent);}
.mcard__new{font-size:52px;font-weight:500;color:var(--ink);letter-spacing:-0.02em;}
.mcard__body{padding:14px 28px 0 70px;}
.mcard__pre{font-size:17px;color:var(--ink-dim);}
.mcard__title{font-size:26px;font-weight:200;color:var(--ink);line-height:1.15;margin:2px 0 4px;}
.mcard__src{font-size:17px;color:var(--ink-dim);}
.mcard__date{font-size:15px;font-style:italic;color:var(--ink-muted);margin-top:6px;}
.mcard__go{padding:26px 28px;font-size:17px;color:var(--accent);}
.mcard__go:hover{color:#8b9ce6;}
.mcard__img{width:100%;object-fit:cover;}

.grid-3{display:grid;grid-template-columns:repeat(3,var(--col));gap:56px var(--gap);justify-content:center;}
.row-sep{display:flex;justify-content:center;gap:14px;margin:34px 0;}
.row-sep i{width:9px;height:9px;background:var(--accent);transform:rotate(45deg);display:block;}

/* ---------- Цитаты ---------- */
.quote{font-size:65px;font-weight:200;line-height:1.08;color:var(--ink-muted);letter-spacing:-0.01em;}
.quote-author{font-size:24px;font-weight:200;color:var(--accent);line-height:1.2;}

.intro{padding:60px 0 0;}
.intro-grid{display:grid;grid-template-columns:var(--col) 1fr;gap:var(--gap);align-items:start;}
/* Текст начинается на уровне пятой строки цитаты — как в макете. */
.intro-left{padding-top:255px;}
/* Шире колонки и мельче — текст укладывается в меньшее число строк. */
.intro-text{font-size:19px;font-weight:300;color:var(--ink-dim);line-height:1.5;width:400px;max-width:100%;}
.intro-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
.intro-right .quote{width:100%;}
.diamonds{display:flex;gap:14px;margin-bottom:26px;}
.diamonds i{width:9px;height:9px;background:var(--accent);transform:rotate(45deg);display:block;}

/* ---------- Биография ---------- */
.bio{padding:56px 0 0;}
.bio-row{display:grid;grid-template-columns:var(--col) 1fr;gap:var(--gap);align-items:start;margin-bottom:66px;}
.bio-row--wide{grid-template-columns:702px 1fr;gap:38px;align-items:center;}
.bio-copy{font-size:22px;font-weight:300;color:var(--ink-dim);line-height:1.5;}
.bio-copy u{text-decoration:none;border-bottom:1px solid var(--ink-muted);}
.link-more{
  display:inline-block;margin-top:22px;
  font-size:20px;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:2px;
}
.link-more:hover{color:#8b9ce6;border-color:#8b9ce6;}

.intro-photo{margin-top:44px;width:560px;}

/* Цитата по центру полосы */
.quote-block{padding:40px 0 56px;}
.diamonds--center{justify-content:center;}
.quote--center{width:1000px;max-width:100%;margin:0 auto;}
.quote-author--right{text-align:right;width:1000px;max-width:100%;margin:6px auto 0;font-style:normal;}
.quote-author--right i{font-style:italic;}

/* ---------- Секции ---------- */
.section{padding:56px 0 0;}
.rule{border-top:1px dotted var(--line);margin:0 auto;max-width:1160px;}
.section-head{display:flex;align-items:baseline;gap:44px;margin:44px 0 40px;}
.section-head h2{font-size:65px;font-weight:200;color:var(--ink-muted);letter-spacing:-0.01em;line-height:1.1;}
.section-head .link-more{margin-top:0;font-size:24px;}

/* ---------- Карусели ---------- */
.carousel{position:relative;}
.carousel-track{
  display:flex;gap:var(--gap);
  overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;padding-bottom:4px;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:80px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--ink-muted);z-index:5;
}
.carousel-btn:hover{color:var(--ink-dim);}
.carousel-btn svg{width:30px;height:56px;stroke:currentColor;fill:none;stroke-width:1.2;}
.carousel-btn--prev{left:-58px;}
.carousel-btn--next{right:-58px;}

/* ---------- Карточка афиши ---------- */
.event{
  flex:0 0 var(--col);width:var(--col);
  background:var(--card);display:flex;flex-direction:column;
  transition:background .2s;
}
.event:hover{background:var(--card-hover);}
.event__img{width:100%;height:263px;object-fit:cover;}
/* Дата почти вплотную к краю, остальной текст с отступом 81px — как в макете. */
.event__body{padding:16px 4px 26px 80px;display:flex;flex-direction:column;flex:1;}
/* Дата заходит на нижнюю часть фото — как в макете. */
.event__date{display:flex;align-items:baseline;gap:12px;margin:-64px 0 14px -78px;position:relative;z-index:2;}
.event--photo-bottom .event__date{margin-top:6px;}
.event__img--inline{height:auto;margin:14px 0 0 -60px;width:341px;}
.event__day{font-size:90px;font-weight:500;line-height:0.86;color:var(--ink);letter-spacing:-0.03em;}
.event__time{font-size:36px;font-weight:500;color:var(--accent);}
.event__place{font-size:18px;color:var(--ink-dim);line-height:1.3;margin-bottom:4px;}
.event__title{font-size:28px;font-weight:200;color:var(--ink);line-height:1.08;margin-bottom:8px;}
.event__title i{font-style:italic;font-weight:200;}
.event__cast{font-size:18px;color:var(--ink-dim);line-height:1.32;}
.event__kind{font-size:14px;font-style:italic;color:var(--ink-muted);margin-top:5px;}
/* Прижаты к низу карточки, поэтому у всех событий стоят на одной линии. */
.event__more{margin:22px 0 20px;font-size:18px;color:var(--accent);}
.event__more{margin-top:auto;}
.event__more:hover{color:#8b9ce6;}
.btn-ghost{
  display:block;text-align:center;
  border:1px solid var(--ink-muted);color:var(--ink);
  font-size:24px;font-weight:200;padding:11px 10px;
  width:240px;margin:0 0 0 -20px;
  transition:border-color .15s,color .15s;
}
.btn-ghost:hover{border-color:var(--ink);color:#fff;}

/* ---------- Проекты ---------- */
.projects-grid{display:grid;grid-template-columns:repeat(3,var(--col));gap:var(--gap);}
.projects-col{display:flex;flex-direction:column;gap:var(--gap);}
.project{background:var(--card);transition:background .2s;}
.project:hover{background:var(--card-hover);}
.project__pad{padding:30px 26px 26px;display:flex;flex-direction:column;align-items:center;gap:26px;}
.project__name{font-size:27px;font-weight:400;color:var(--ink-dim);text-align:center;line-height:1.15;}
.project__logo{max-height:120px;width:auto;}
.arrows{font-size:18px;letter-spacing:0.35em;color:var(--accent);}
.project img.project__photo{width:100%;object-fit:cover;}

/* ---------- Публикации ---------- */
.media{
  flex:0 0 var(--col);width:var(--col);
  background:var(--card);display:flex;flex-direction:column;
  transition:background .2s;
}
.media:hover{background:var(--card-hover);}
.media__kind{font-size:38px;font-weight:300;color:var(--accent);padding:22px 24px 0;}
.media__body{padding:8px 24px 0 60px;}
.media__title{font-size:26px;font-weight:200;color:var(--ink);line-height:1.15;}
.media__src{font-size:16px;color:var(--ink-dim);margin-top:8px;line-height:1.3;}
.media__img{width:100%;height:250px;object-fit:cover;margin-top:auto;}
.media__more{padding:18px 24px 22px;font-size:16px;color:var(--accent);}
.media--photo-top{flex-direction:column;}
.media--photo-top .media__img{margin-top:0;order:-1;}

/* ---------- Поддержка ---------- */
.support-grid{display:grid;grid-template-columns:var(--col) var(--col) var(--col);gap:var(--gap);align-items:start;}
.support-text{font-size:20px;color:var(--ink-dim);line-height:1.5;}
.support-card{background:var(--card);display:flex;flex-direction:column;transition:background .2s;}
.support-card:hover{background:var(--card-hover);}
.support-card__pad{padding:34px 26px 28px;display:flex;flex-direction:column;align-items:center;gap:20px;flex:1;justify-content:center;}
.support-card__logo{max-width:320px;}
.support-card__title{font-size:27px;font-weight:300;color:var(--ink);text-align:center;line-height:1.2;}
.support-card__img{width:100%;height:200px;object-fit:cover;}
.support-quote{margin:76px 0 0;display:flex;align-items:flex-end;gap:40px;}
.support-quote .quote{max-width:760px;}

/* ---------- Партнёры ---------- */
.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:46px 40px;align-items:center;margin-bottom:20px;}
.partners img{max-height:74px;width:auto;margin:0 auto;filter:grayscale(1) opacity(.85);transition:filter .2s;}
.partners img:hover{filter:none;}

/* ---------- Подвал ---------- */
.footer{margin-top:80px;background:#1b1616;padding:56px 0 0;}
.footer-grid{display:grid;grid-template-columns:240px 360px 1fr;gap:38px;}
.footer-name{font-size:22px;font-weight:200;color:var(--ink-muted);line-height:1.25;}
.footer-nav{display:flex;flex-direction:column;gap:8px;}
.footer-nav .up{color:var(--ink-dim);font-size:18px;}
.footer-nav a{font-size:19px;color:var(--accent);}
.footer-nav a:hover{color:#8b9ce6;}
.footer-socials{display:flex;gap:34px;margin-bottom:32px;}
.footer-socials svg{width:50px;height:50px;fill:#4a4444;transition:fill .18s;}
.footer-socials a[aria-label="Telegram"]:hover svg{fill:#2aabee;}
.footer-socials a[aria-label="Facebook"]:hover svg{fill:#1877f2;}
.footer-socials a[aria-label="Instagram"]:hover svg{fill:#e1306c;}
.footer-socials a[aria-label="SoundCloud"]:hover svg{fill:#ff5500;}
.footer-socials a[aria-label="YouTube"]:hover svg{fill:#ff0000;}
.contact-line{margin-bottom:22px;}
.contact-line b{
  display:inline-block;font-size:27px;font-weight:300;color:var(--ink);
  border-bottom:1px solid var(--ink-muted);padding-bottom:2px;
}
.contact-line span{display:block;margin-top:8px;font-size:17px;color:var(--accent);}
.footer-bottom{
  margin-top:52px;padding:20px 0;
  border-top:1px solid rgba(120,109,109,0.2);
  display:flex;gap:120px;
  font-size:17px;color:var(--ink-dim);
}

/* ---------- Адаптив ---------- */
@media (max-width:1320px){
  .carousel-btn--prev{left:-6px;}
  .carousel-btn--next{right:-6px;}
}
@media (max-width:1100px){
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .support-grid{grid-template-columns:1fr 1fr;}
  .bio-row,.bio-row--wide,.intro-grid{grid-template-columns:1fr;}
  .partners{grid-template-columns:repeat(3,1fr);}
  .quote{font-size:46px;}
  .section-head h2{font-size:40px;}
}
@media (max-width:760px){
  .nav,.socials{display:none;}
  .hero{height:70vh;}
  .projects-grid,.support-grid,.partners{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .quote{font-size:32px;}
  .section-head{flex-direction:column;gap:10px;}
  .section-head h2{font-size:32px;}
  .footer-bottom{flex-direction:column;gap:10px;}
}