/* Love'n'Joy — prototype. Цвета взяты с обложки "Half Home".
   Mobile-first: базовые стили для телефонов, дальше расширяем под планшеты и десктоп. */
/* Шрифты (SIL Open Font License / Apache 2.0) — локальные копии Google Fonts */
@font-face {
  font-family: "Reenie Beanie"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/reenie-beanie-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/special-elite-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/special-elite-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #5fbdb6;        /* бирюза */
  --ink: #142624;       /* текст */
  --sun: #ff4b1f;       /* красное солнце */
  --cream: #f6efe2;
  --line: rgba(20, 38, 36, .25);
  --hand: "Reenie Beanie", cursive;
  --type: "Special Elite", "Courier New", monospace;

  /* ширина контента и боковые отступы: на огромных экранах контент центрируется */
  --max: 1400px;
  --gutter: clamp(16px, 5vw, 64px);
  --pad-x: max(var(--gutter), calc((100vw - var(--max)) / 2));
  /* отступы под вырез/«чёлку» на iPhone и Android */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --header-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--ink);
  /* шрифт плавно растёт от телефона до большого монитора */
  font: clamp(15px, 0.9rem + 0.25vw, 19px)/1.6 var(--type);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.menu-open { overflow: hidden; }
img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px dashed var(--sun); outline-offset: 4px; }

/* ховеры только там, где есть мышь — на тач-экранах они «залипают» */
@media (hover: hover) {
  a:hover { color: var(--sun); }
}

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--header-h);
  padding: 12px calc(var(--pad-x) + var(--safe-r)) 12px calc(var(--pad-x) + var(--safe-l));
  background: linear-gradient(var(--bg) 70%, transparent);
}
.logo {
  position: relative; z-index: 2;
  font: clamp(34px, 2rem + 1.5vw, 56px)/1 var(--hand);
  letter-spacing: 2px; white-space: nowrap;
  transform: rotate(-3deg);
}
/* пока большой логотип на главном экране виден, маленький в шапке спрятан (класс ставит script.js) */
.logo { transition: opacity .3s, visibility .3s; }
.top.logo-hidden .logo { opacity: 0; visibility: hidden; }
.top.open .logo { opacity: 1; visibility: visible; }  /* в открытом мобильном меню — всегда виден */

/* телефон: меню на весь экран по кнопке */
.burger {
  position: relative; z-index: 2;
  min-width: 44px; min-height: 44px; padding: 0 14px;   /* удобная зона касания */
  background: none; border: 2px solid var(--ink);
  font: 15px var(--type); color: var(--ink); cursor: pointer;
}
.nav {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: clamp(8px, 2.5vh, 22px);
  padding: var(--header-h) 16px calc(24px + var(--safe-b));
  background: var(--bg);
  font-size: clamp(22px, 7vw, 32px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  overflow-y: auto;
}
.top.open .nav { opacity: 1; visibility: visible; }
.nav a { position: relative; padding: 6px 12px; }

/* ---------- hero ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;            /* учитывает адресную строку мобильных браузеров */
  display: grid; grid-template-columns: 1fr;
  align-content: center; gap: 32px;
  padding: calc(var(--header-h) + 24px) calc(var(--pad-x) + var(--safe-r)) 48px calc(var(--pad-x) + var(--safe-l));
}
.hero { grid-template-areas: "logo" "cover" "text"; }
.hero-logo   { grid-area: logo; margin: 0; }
.hero-cover  { grid-area: cover; }
.hero-text   { grid-area: text; }
.hero-logo img { display: block; width: 100%; max-width: 760px; height: auto; }

.hero-cover {
  width: 100%;
  /* обложка не больше ширины и не выше ~55% экрана — чтобы влезал текст */
  max-width: min(420px, 55svh);
  aspect-ratio: 1; box-shadow: 0 20px 50px rgba(0,0,0,.25); transition: transform .4s;
}
.kicker { opacity: .75; margin-bottom: 8px; }
.falling {
  font: 400 clamp(52px, 10vw + 1rem, 150px)/1 var(--hand);
  display: flex; flex-wrap: wrap;
}
.falling span {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translateY(-40px) rotate(-20deg);
  animation: drop .6s cubic-bezier(.3,1.6,.5,1) forwards;
}
@keyframes drop { to { opacity: 1; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); } }
.cta {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px;
  border-bottom: 2px solid currentColor;
}

/* ---------- обложки ---------- */
.cover { display: block; position: relative; aspect-ratio: 1; overflow: hidden; }

/* ---------- секции ---------- */
.section {
  padding: clamp(48px, 8vw, 112px) calc(var(--pad-x) + var(--safe-r)) clamp(48px, 8vw, 112px) calc(var(--pad-x) + var(--safe-l));
}
.hand {
  font: 400 clamp(48px, 7vw + 1rem, 104px)/1 var(--hand);
  margin-bottom: clamp(20px, 3vw, 40px); transform: rotate(-2deg);
}
.note { margin-top: 20px; font-size: .78em; opacity: .6; }

/* tour: на телефоне дата сверху, площадка и кнопка в строку */
.shows { list-style: none; border-top: 1px solid var(--line); }
.shows li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.date { grid-column: 1 / -1; font-size: 1.15em; }
.venue { min-width: 0; overflow-wrap: anywhere; }
.venue small { display: block; font-size: .82em; opacity: .7; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px;
  border: 2px solid var(--ink); white-space: nowrap;
  transition: background .2s, color .2s;
}
.btn--off { opacity: .45; text-decoration: line-through; }

/* music: 2 колонки на телефоне, дальше по ширине */
.releases {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}
.release .cover { margin-bottom: 10px; }
.release b { display: block; font-weight: 400; line-height: 1.35; }
.release i { font-style: normal; font-size: .82em; opacity: .65; }
.streams { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 36px; }
.streams a { display: inline-flex; align-items: center; min-height: 44px; }
.streams a, .contacts a, .socials a { text-decoration: underline; text-underline-offset: 4px; }

/* merch + плейсхолдеры */
.merch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.ph {
  display: grid; place-items: center; aspect-ratio: 1;
  background: var(--cream); color: rgba(20,38,36,.5);
  border: 2px dashed var(--line); font-size: 14px;
}
.item .ph, .item .cover { margin-bottom: 10px; transition: transform .3s; background: var(--cream); }
.merch-all { margin-top: 32px; }
.item b { display: block; font-weight: 400; line-height: 1.35; }
.item i { font-style: normal; opacity: .65; }

/* about */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.about-grid p { max-width: 65ch; }
.about-grid p + p { margin-top: 16px; }
.ph--photo { aspect-ratio: 4/3; }

/* contact */
.contacts { display: grid; grid-template-columns: 1fr; gap: 2px 24px; }
.contacts dt { opacity: .65; }
.contacts dd { margin-bottom: 14px; overflow-wrap: anywhere; }
.socials { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.socials a { display: inline-block; padding: 8px 0; }

.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 32px calc(var(--pad-x) + var(--safe-r)) calc(32px + var(--safe-b)) calc(var(--pad-x) + var(--safe-l));
  font-size: .82em; opacity: .75;
}

/* реальные обложки и фото */
.cover img { width: 100%; height: 100%; object-fit: cover; }
.hero-note { margin-top: 18px; font-size: .85em; opacity: .7; }
.note a, .mdu a:not(.btn), .featured a, cite a { text-decoration: underline; text-underline-offset: 3px; }

/* videos: 1 колонка на телефоне, 2 — дальше */
.videos { display: grid; grid-template-columns: 1fr; gap: 28px 24px; }
.video { margin: 0; }
.video-play, .video iframe {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; padding: 0; background: #000; cursor: pointer; overflow: hidden;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, opacity .3s; opacity: .9; }
.video-play::after {          /* кнопка ▶ */
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center / 34px no-repeat;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .25s;
}
.video figcaption { margin-top: 10px; }
.video figcaption i { font-style: normal; font-size: .82em; opacity: .65; margin-left: 6px; }

/* about */
.about-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.9); }
.lead { font-size: 1.15em; }
.mdu {
  margin-top: clamp(40px, 6vw, 72px); padding: clamp(20px, 4vw, 40px);
  background: var(--ink); color: var(--cream);
}
.mdu h3 { font: 400 clamp(36px, 4vw + 1rem, 60px)/1 var(--hand); margin-bottom: 16px; color: #ffd84a; }
.mdu p { max-width: 70ch; margin-bottom: 20px; }
.mdu .btn { border-color: #ffd84a; color: #ffd84a; }

.press { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: clamp(40px, 6vw, 72px); }
.press blockquote { border-left: 3px solid var(--sun); padding-left: 18px; }
.press blockquote p { font-size: 1.05em; }
.press cite { display: block; margin-top: 8px; font-style: normal; font-size: .85em; opacity: .75; }
.featured { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 36px; }
.featured span { opacity: .6; width: 100%; }

/* contact */
.contact-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.card { border: 2px solid var(--ink); padding: 18px 20px; overflow-wrap: anywhere; }
.card h3 { font-weight: 400; font-size: .82em; text-transform: uppercase; letter-spacing: .08em; opacity: .65; margin-bottom: 8px; }
.card p { margin-bottom: 4px; }
.card a { text-decoration: underline; text-underline-offset: 4px; }
#contact .socials { margin-top: 32px; }

@media (min-width: 600px) {
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .press { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .featured span { width: auto; }
}
@media (hover: hover) {
  .video-play:hover img { transform: scale(1.04); opacity: 1; }
  .video-play:hover::after { transform: scale(1.1); }
  .mdu .btn:hover { background: #ffd84a; color: var(--ink); }
}

/* появление при скролле */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- очень маленькие телефоны (iPhone SE 1st gen, 320px) ---------- */
@media (max-width: 359px) {
  .releases, .merch { gap: 20px 12px; }
  .shows li { grid-template-columns: 1fr; }
  .shows .btn { justify-self: start; }
}

/* ---------- большие телефоны / маленькие планшеты ---------- */
@media (min-width: 600px) {
  .releases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }  /* 32px — чтобы пластинка не заходила на соседнюю */
  .merch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .shows li { grid-template-columns: 110px 1fr auto; padding: 18px 0; }
  .date { grid-column: auto; }
  .contacts { grid-template-columns: 140px 1fr; gap: 14px 24px; }
  .contacts dd { margin-bottom: 0; }
  .about-grid { grid-template-columns: minmax(0, 2fr) 3fr; gap: 36px; }
}

/* ---------- планшеты и десктоп: обычное меню, двухколоночный hero ---------- */
@media (min-width: 768px) {
  :root { --header-h: 88px; }
  .burger { display: none; }
  .nav {
    position: static; z-index: auto;
    flex-direction: row; gap: clamp(16px, 2.6vw, 44px);
    padding: 0; background: none; font-size: 1em;
    opacity: 1; visibility: visible; overflow: visible;
  }
  .nav a { padding: 8px 0; }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
    height: 2px; background: var(--sun); transition: right .25s;
  }
  .hero {
    grid-template-columns: minmax(0, min(440px, 40vw, 62svh)) 1fr;
    /* обложка слева на всю высоту, справа логотип над текстом */
    grid-template-areas: "cover logo" "cover text";
    align-items: center; align-content: normal;
    column-gap: clamp(32px, 6vw, 112px); row-gap: clamp(16px, 2vw, 28px);
  }
  .hero-logo { align-self: end; }
  .hero-text { align-self: start; }
  .hero-cover { max-width: none; }
}

/* ---------- десктоп ---------- */
@media (min-width: 1100px) {
  .releases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
  .hero { grid-template-columns: minmax(0, min(520px, 62svh)) 1fr; }
}

/* ---------- большие мониторы / 2K / 4K ---------- */
@media (min-width: 1800px) {
  :root { --max: 1640px; --header-h: 104px; }
  .hero { grid-template-columns: minmax(0, min(640px, 62svh)) 1fr; }
  .releases { gap: 48px 40px; }
}

/* ---------- телефон в горизонтальной ориентации (низкий экран) ---------- */
@media (max-height: 540px) and (orientation: landscape) {
  :root { --header-h: 60px; }
  .top { padding-top: 6px; padding-bottom: 6px; }
  .logo { font-size: 32px; }
  .hero {
    grid-template-columns: minmax(0, 62svh) 1fr;
    grid-template-areas: "cover logo" "cover text";
    align-items: center; align-content: normal; gap: 12px 32px;
    padding-top: calc(var(--header-h) + 12px); padding-bottom: 24px;
  }
  .hero-logo { align-self: end; }
  .hero-logo img { width: auto; max-width: 100%; max-height: 30svh; }
  .hero-text { align-self: start; }
  .hero-cover { max-width: none; }
  .falling { font-size: clamp(44px, 12svh, 80px); }
  .section { padding-top: 40px; padding-bottom: 40px; }
}
/* выпадающее меню на низком экране — компактнее */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 767px) {
  .nav { font-size: 22px; gap: 4px; }
}

/* ---------- эффекты при наведении — только для мыши ---------- */
@media (hover: hover) {
  .hero-cover:hover { transform: rotate(-2deg) scale(1.02); }
  .nav a:hover::after { right: 0; }
  a.btn:hover { background: var(--ink); color: var(--bg); }
  .item:hover .ph, .item:hover .cover { transform: rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .falling span, .reveal { opacity: 1; transform: none; }
}

@media print {
  .top, .burger, .note { display: none; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}

/* общая кнопка «Listen / Buy» в разделе Music */
.streams { align-items: center; }
.streams .listen-all { text-decoration: none; margin-right: 8px; }
.release > a:first-child { display: block; }

/* Bandsintown: блок до загрузки виджета */
.bit-consent { max-width: 60ch; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bit-consent p { font-size: .9em; }
.bit-consent .bit-load { margin: 16px 0 12px; background: none; font: inherit; color: inherit; cursor: pointer; }
.bit-consent .bit-load:disabled { opacity: .6; cursor: progress; }
.bit-alt { opacity: .75; }
.bit-alt a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .bit-consent .bit-load:not(:disabled):hover { background: var(--ink); color: var(--bg); }
}

/* Past shows: сворачиваемый список под виджетом */
.past { margin-top: 28px; }
.past summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 44px; padding: 8px 0;
  cursor: pointer; list-style: none; font-size: 1.1em;
}
.past summary::-webkit-details-marker { display: none; }
.past summary::before { content: "+"; display: inline-block; width: 1em; transition: transform .2s; }
.past[open] summary::before { transform: rotate(45deg); }
.past summary span { font-size: .75em; opacity: .65; }
.past .shows { margin-top: 12px; }
.past .shows li { opacity: .85; grid-template-columns: 72px 1fr; padding: 12px 0; }
.past .shows .date { grid-column: auto; font-size: 1em; }
@media (min-width: 600px) { .past .shows li { grid-template-columns: 110px 1fr; } }
.past-year { font-weight: 400; font-size: 1em; opacity: .6; margin: 24px 0 4px; letter-spacing: .08em; }


/* ---------- «Light show» на главном экране ----------
   Пятна — радиальные градиенты (без filter: blur, чтобы не грузить телефоны).
   Анимируется только transform. Цвета — с обложки Half Home + психоделика 60-х. */
.lightshow {
  /* закреплён за экраном, под всем контентом; яркость меняет script.js при прокрутке */
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.lightshow i {
  position: absolute; display: block; border-radius: 50%;
  width: var(--s); height: var(--s); left: var(--x); top: var(--y);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background: radial-gradient(circle closest-side, var(--c), transparent);
  opacity: var(--o, .55);
  mix-blend-mode: var(--blend, normal);
  animation: drift var(--t) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  will-change: transform;
}
/* размер, позиция, цвет, длительность — у каждого пятна свои */
.lightshow i:nth-child(1) { --s: 60vmax; --x: 8%;  --y: 20%; --c: #ffd84a; --t: 23s; --o: .65; }
.lightshow i:nth-child(2) { --s: 48vmax; --x: 62%; --y: 78%; --c: #ff4b1f; --t: 19s; --o: .5;  --d: -6s; }
.lightshow i:nth-child(3) { --s: 55vmax; --x: 88%; --y: 18%; --c: #c66bd9; --t: 27s; --o: .55; --d: -12s; }
.lightshow i:nth-child(4) { --s: 50vmax; --x: 95%; --y: 80%; --c: #e0469a; --t: 31s; --o: .45; --d: -4s; }
.lightshow i:nth-child(5) { --s: 44vmax; --x: 20%; --y: 95%; --c: #ff8a3d; --t: 21s; --o: .45; --d: -15s; }
.lightshow i:nth-child(6) { --s: 52vmax; --x: 48%; --y: 35%; --c: #2a8f87; --t: 25s; --o: .45; --d: -9s; --blend: multiply; }

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(8vmax, -6vmax) scale(1.15) rotate(40deg); }
  66%  { transform: translate(-6vmax, 5vmax) scale(.9) rotate(-25deg); }
  100% { transform: translate(4vmax, 8vmax) scale(1.1) rotate(15deg); }
}
/* разные траектории, чтобы пятна не двигались синхронно */
.lightshow i:nth-child(even) { animation-direction: alternate-reverse; }
.lightshow i:nth-child(3n)   { animation-timing-function: cubic-bezier(.45, 0, .55, 1); }


/* на телефоне пятна поменьше и сдвинуты к обложке */
@media (max-width: 767px) {
  .lightshow i:nth-child(1) { --x: 10%; --y: 12%; }
  .lightshow i:nth-child(2) { --x: 80%; --y: 85%; }
  .lightshow i:nth-child(3) { --x: 95%; --y: 30%; }
  .lightshow i:nth-child(4) { --x: 90%; --y: 95%; }
  .lightshow i:nth-child(6) { --x: 50%; --y: 55%; }
}

/* для тех, у кого в системе отключена анимация, — статичная картинка */
@media (prefers-reduced-motion: reduce) {
  .lightshow i { animation: none !important; }
}
@media print { .lightshow { display: none; } }


/* ---------- Главный экран с логотипом по центру (класс .hero--centered) ----------
   Телефон: логотип → обложка → текст, всё в одну колонку по центру.
   Планшет/десктоп и телефон горизонтально: логотип по центру сверху,
   под ним обложка слева и текст справа — всё помещается в первый экран. */
.hero.hero--centered {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "logo" "cover" "text";
  justify-items: center; align-items: start; align-content: center;
  row-gap: clamp(16px, 3svh, 36px);
  text-align: center;
}
.hero--centered .hero-logo,
.hero--centered .hero-text { align-self: auto; }
.hero--centered .hero-logo img { width: auto; max-width: min(760px, 100%); max-height: 26svh; margin: 0 auto; }
.hero--centered .hero-cover { width: min(440px, 44svh, 100%); max-width: none; }
.hero--centered .falling { justify-content: center; font-size: clamp(52px, 6vw + 1rem, 110px); }

@media (min-width: 768px), (max-height: 540px) and (orientation: landscape) {
  .hero.hero--centered {
    grid-template-columns: minmax(0, min(400px, 40vw, 48svh)) minmax(0, 520px);
    grid-template-areas: "logo logo" "cover text";
    justify-content: center; justify-items: stretch; align-items: center;
    column-gap: clamp(32px, 5vw, 80px);
    text-align: left;
  }
  .hero--centered .hero-logo  { justify-self: center; }
  .hero--centered .hero-cover { width: 100%; }
  .hero--centered .falling    { justify-content: flex-start; }
}


/* ---------- Обложки: пластинка из конверта (+ потёртый конверт у релизов) ----------
   ::before — виниловая пластинка за обложкой (выглядывает справа, при наведении крутится);
              у релизов в Music и у большой обложки на главном экране.
   ::after  — зерно печати на картоне и круглый след от пластинки (только релизы в Music). */
.release .cover, .hero-cover { overflow: visible; }
.hero-cover img { position: relative; z-index: 1; }
.release .cover img {
  position: relative; z-index: 1;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 10px 22px rgba(0,0,0,.2);
}
.release .cover::before, .hero-cover::before {
  content: ""; position: absolute; z-index: 0;
  top: 3%; bottom: 3%; left: 6%; right: 6%; border-radius: 50%;
  background:
    radial-gradient(circle, var(--sun) 0 15%, #111 15.5% 17%, transparent 17.5%),
    repeating-radial-gradient(circle, #1a1a1a 0 2px, #0c0c0c 2px 4px);
  /* в покое выглядывает справа; при наведении выезжает чуть-чуть (остаётся в промежутке
     32px между обложками) и крутится ≈33 об/мин.
     Без курсора вращение на паузе — пластинка останавливается без рывка */
  translate: 14% 0;
  transition: translate .5s cubic-bezier(.2, .8, .2, 1);
  animation: vinyl-spin 1.8s linear infinite;
  animation-play-state: paused;
}
@keyframes vinyl-spin { to { rotate: 360deg; } }
.release .cover::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 43%, rgba(255,255,255,.22) 44%, transparent 47%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .55;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 30px rgba(0,0,0,.18);
  transition: opacity .3s;
}
@media (hover: hover) {
  .release > a:first-child:hover .cover::before,
  .hero-cover:hover::before { translate: 16% 0; animation-play-state: running; }
  .release > a:first-child:hover .cover::after  { opacity: .25; }
}

/* телефон: большая обложка по центру чуть уже, чтобы край пластинки не обрезался экраном */
@media (max-width: 767px) and (orientation: portrait) {
  .hero--centered .hero-cover { width: min(440px, 44svh, 88%); }
}

/* сенсорные экраны (нет наведения): крутится пластинка обложки, ближайшей к середине экрана —
   класс .playing ставит script.js при прокрутке */
@media (hover: none) {
  .release .cover.playing::before,
  .hero-cover.playing::before { translate: 16% 0; animation-play-state: running; }
  .release .cover.playing::after { opacity: .25; }
}

/* ---------- Photos: сетка живых фото + просмотрщик ----------
   Телефон — 2 колонки, планшет/десктоп — 4. Крупные кадры занимают 2×2,
   широкие — 2 колонки, вертикальные — 2 ряда; dense закрывает дырки. */
.gallery-caption { opacity: .7; margin: -16px 0 24px; }
.gallery + .gallery-caption { margin-top: clamp(32px, 5vw, 56px); }  /* подпись второй группы */
.gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(120px, 26vw, 200px); grid-auto-flow: dense;
  gap: 8px;
}
.ph-item { display: block; overflow: hidden; background: rgba(20,38,36,.15); }
.ph-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .5s; }
.ph-big  { grid-column: span 2; grid-row: span 2; }
.ph-wide { grid-column: span 2; }
.ph-tall { grid-row: span 2; }
/* Чтобы в галерее не было дыр, число клеток в каждой группе должно делиться на 4 (десктоп — 4 колонки,
   телефон — 2): обычное фото = 1 клетка, ph-wide = 2, ph-tall = 2, ph-big = 4.
   Сейчас: Band = 16, On stage = 20. Добавляете или убираете фото — пересчитайте. */
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 260px); gap: 12px; }
}
@media (hover: hover) {
  .ph-item:hover img { transform: scale(1.04); filter: saturate(1.15); }
}

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
}
.lightbox::backdrop { background: rgba(10, 18, 17, .92); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox button {
  position: fixed; min-width: 44px; min-height: 44px; padding: 0 14px;
  background: none; border: 2px solid var(--cream); color: var(--cream);
  font: 18px var(--type); cursor: pointer;
}
.lb-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; font-size: 15px; }
.lb-prev, .lb-next { bottom: calc(20px + var(--safe-b)); }
.lb-prev { left: calc(50% - 56px); }
.lb-next { left: calc(50% + 12px); }
@media (hover: hover) {
  .lightbox button:hover { background: var(--cream); color: var(--ink); }
}

/* вращающаяся пластинка при повороте на мгновение выходит габаритами за край экрана —
   обрезаем по горизонтали на краях секций, иначе мобильный браузер расширяет страницу */
.hero, .section { overflow-x: clip; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-links a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Страницы Impressum и Privacy ---------- */
.legal-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px calc(var(--pad-x) + var(--safe-r)) 0 calc(var(--pad-x) + var(--safe-l));
}
.legal-back { text-decoration: underline; text-underline-offset: 3px; }
.legal { max-width: calc(70ch + 2 * var(--pad-x)); margin: 0; }
.legal h2 { font-weight: 400; font-size: 1.05em; margin: 32px 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.legal p { max-width: 70ch; }
.legal p + p { margin-top: 12px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 8px; max-width: 70ch; }
.legal-lead { font-size: 1.1em; }
.legal-date, .legal-more { margin-top: 32px; opacity: .75; }

/* ---------- Music: пока три релиза ----------
   Телефон: первый (Half Home) крупно на всю ширину, два других — в ряд под ним.
   Шире 600px: три колонки; промежуток в % от ширины, чтобы вращающаяся пластинка
   (выезжает примерно на 10% ширины обложки) не заезжала на соседнюю на любом экране. */
.release:first-child { grid-column: 1 / -1; }
.release:first-child .cover { width: 88%; }
@media (min-width: 600px) {
  .releases { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4.5%; }
  .release:first-child { grid-column: auto; }
  .release:first-child .cover { width: 100%; }
}


/* ======================= ЭФФЕКТЫ (включаются словами в data-fx у <html>) ======================= */

/* --- tilt: логотип наклоняется вслед за мышью. Углы --rx/--ry ставит script.js --- */
html[data-fx~="tilt"] .hero-logo { perspective: 900px; }
html[data-fx~="tilt"] .hero-logo img {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
/* сенсорные экраны: мыши нет — логотип медленно покачивается сам */
@media (hover: none) {
  html[data-fx~="tilt"] .hero-logo img { animation: logo-sway 7s ease-in-out infinite alternate; }
}
@keyframes logo-sway {
  from { transform: rotateX(4deg) rotateY(-7deg); }
  to   { transform: rotateX(-3deg) rotateY(7deg); }
}

/* --- duotone: фото тонированы в цвета сайта; при наведении / в центре экрана — цветные --- */
html[data-fx~="duotone"] .ph-item { position: relative; isolation: isolate; }
html[data-fx~="duotone"] .ph-item::before,
html[data-fx~="duotone"] .ph-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transition: opacity .6s ease;
}
/* слой 1: делает фото под собой чёрно-белым и контрастнее */
html[data-fx~="duotone"] .ph-item::before {
  -webkit-backdrop-filter: grayscale(1) contrast(1.15) brightness(1.05);
          backdrop-filter: grayscale(1) contrast(1.15) brightness(1.05);
}
/* слой 2: окрашивает — тени в тёмную бирюзу, светлые места в коралл (цвета Half Home) */
html[data-fx~="duotone"] .ph-item::after {
  background: linear-gradient(135deg, #1f6f6a, #ff6a3d);
  mix-blend-mode: color;
  opacity: .85;
}
html[data-fx~="duotone"] .ph-item.in-color::before,
html[data-fx~="duotone"] .ph-item.in-color::after { opacity: 0; }
@media (hover: hover) {
  html[data-fx~="duotone"] .ph-item:hover::before,
  html[data-fx~="duotone"] .ph-item:hover::after,
  html[data-fx~="duotone"] .ph-item:focus-visible::before,
  html[data-fx~="duotone"] .ph-item:focus-visible::after { opacity: 0; }
}

/* --- scribble: рукописная линия под заголовками разделов (SVG вставляет script.js) --- */
html[data-fx~="scribble"] .section > .hand { display: inline-block; position: relative; }
.scribble {
  position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .32em;
  overflow: visible; pointer-events: none;
}
/* цвет линии — одна переменная: например #142624 (как заголовок), #f6efe2 (кремовый), #ffd84a (жёлтый) */
:root { --scribble: #1f5f5a; }   /* глубокая бирюза — в гамме фона, темнее него */
.scribble path {
  fill: none; stroke: var(--scribble); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;   /* pathLength=1: линия «спрятана» */
}
/* заголовок на экране (класс ставит script.js) — линия рисуется; ушёл с экрана — мгновенно прячется,
   чтобы при следующем появлении нарисоваться заново */
.hand.drawn .scribble path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(.6, .1, .3, 1) .25s;
}

@media (prefers-reduced-motion: reduce) {
  html[data-fx~="tilt"] .hero-logo img { animation: none; transform: none; }
  .scribble path { stroke-dashoffset: 0; transition: none; }
}

/* Соцсети в Contact: иконки вместо текста (кнопка 44×44 — удобно попадать пальцем) */
#contact .socials { gap: 6px 14px; margin-left: -10px; }
#contact .socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; text-decoration: none; color: var(--ink);
  transition: color .2s, transform .2s;
}
#contact .socials svg { width: 26px; height: 26px; fill: currentColor; }
@media (hover: hover) {
  #contact .socials a:hover { color: var(--sun); transform: translateY(-2px); }
}

/* Иконки соцсетей на главном экране, под «New LP coming in 2026».
   Меньше и тише, чем в Contact, чтобы не спорить с «Listen now». По центру на телефоне, слева на десктопе */
.hero-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin-top: 18px; }
.hero-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; text-decoration: none; color: var(--ink); opacity: .75;
  transition: color .2s, opacity .2s, transform .2s;
}
.hero-socials svg { width: 21px; height: 21px; fill: currentColor; }
@media (min-width: 768px), (max-height: 540px) and (orientation: landscape) {
  .hero-socials { justify-content: flex-start; margin-left: -10px; }
}
@media (hover: hover) {
  .hero-socials a:hover { color: var(--sun); opacity: 1; transform: translateY(-2px); }
}