/* ---------- шрифты (лежат локально в /fonts, лицензия OFL) ---------- */
@font-face {
  font-family: "Shantell";
  src: url("fonts/shantell-sans-cyrillic-full-normal.woff2") format("woff2-variations");
  font-weight: 300 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Shantell";
  src: url("fonts/shantell-sans-latin-full-normal.woff2") format("woff2-variations");
  font-weight: 300 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2212;
}

/* ---------- цвета и базовые значения ---------- */
:root {
  --pink: #ffa8d0;        /* основной фон, как жёлтый на плакате */
  --pink-soft: #ffc6e0;   /* бумага формы */
  --green: #0f7a3a;       /* мелок: заголовки, линии, кнопки */
  --green-ink: #0a4f25;   /* мелкий текст на розовом */
  --green-text: #075224;  /* мелкие рукописные подписи, ссылки */
  --forest: #0c5a2c;      /* фон зелёных секций */
  --pink-ink: #ffbddb;    /* текст на зелёном */
  --blue: #74c4ff;        /* редкие акценты */
  --blue-ink: #1f5f9e;
  --paper: #c4e4ff;       /* голубая бумажка анонса */
  --err: #b0122e;

  --hand: "Shantell", "Comic Sans MS", cursive;
  --text: "Shantell", "Comic Sans MS", cursive;
  --text-vars: "INFM" 70, "BNCE" 20;
  --hand-vars: "INFM" 100, "BNCE" 55;

  --gut: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --r-hand: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --r-hand-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pink);
  color: var(--green-ink);
  font: 400 1.0625rem/1.55 var(--text);
  font-variation-settings: var(--text-vars);
  caret-color: var(--green);
  overflow-x: hidden;
}
/* зерно печати поверх всего */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .35  0 0 0 0 .2  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection { background: var(--blue); color: var(--forest); }
html { scrollbar-color: var(--green) var(--pink); }

img, svg { display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; border-radius: 6px; }

/* мелковые фильтры */
.rough { filter: url(#rough); }
.boil { filter: url(#boil); }
@media (prefers-reduced-motion: reduce) {
  .boil, .ico { filter: url(#rough); }
  .ico, .dance .l, .about__art .doodle--note, .al { animation: none; }
  html { scroll-behavior: auto; }
}

/* иконки */
.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  filter: url(#boil);
  animation: wiggle 1.6s steps(1, end) infinite;
}
.ico:nth-of-type(2n) { animation-delay: -.5s; }
.ico:nth-of-type(3n) { animation-delay: -1.1s; }
@keyframes wiggle {
  0%   { rotate: -5deg; }
  25%  { rotate: 4deg; translate: 0 -1px; }
  50%  { rotate: -2deg; }
  75%  { rotate: 6deg; translate: 0 1px; }
}
.btn:hover .ico, .links a:hover .ico, .seg span:hover .ico, .rel-row a:hover .ico { animation-duration: .5s; }
.ico--big { width: 2.4rem; height: 2.4rem; }

/* ---------- шапка ---------- */
.top {
  max-width: var(--max); margin: 0 auto; padding: 1rem var(--gut) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
/* логотип нарисован на зелёной рваной мятой бумажке */
.top__name {
  --lh: clamp(2.6rem, 5vw, 3.6rem);
  display: block; line-height: 0; text-decoration: none;
  padding: calc(var(--lh) * .34) calc(var(--lh) * .46);
  background: url("assets/paper-green.svg") center / 100% 100% no-repeat;
}
.top__logo { display: block; width: auto; height: var(--lh); }
.top__nav { display: flex; gap: clamp(.9rem, 3vw, 2rem); }
.top__nav a {
  font: 500 1.0625rem/1 var(--hand); font-variation-settings: var(--hand-vars);
  color: var(--green-text); text-decoration: none; padding: .35rem 0;
  background: linear-gradient(var(--blue), var(--blue)) 0 88% / 0 .32em no-repeat;
  transition: background-size .35s cubic-bezier(.2,.8,.2,1);
}
.top__nav a:hover { background-size: 100% .32em; }

/* ---------- заголовки ---------- */
.h2 {
  margin: 0;
  font: 800 clamp(2.6rem, 7.5vw, 5.75rem)/.95 var(--hand); font-variation-settings: var(--hand-vars);
  color: var(--green); letter-spacing: -.01em; text-wrap: balance;
}
.h2:not(.boil) { filter: url(#rough); }

/* живые заголовки разделов */
.aw { display: inline-block; white-space: nowrap; }
.al { display: inline-block; animation-play-state: paused; }
.is-on .al { animation-play-state: running; }

/* «обо мне» — волна пробегает по буквам */
[data-anim="wave"] .al { animation: a-wave 2.4s cubic-bezier(.3, 0, .3, 1) infinite; animation-delay: calc(var(--i) * .09s); }
@keyframes a-wave {
  0%, 55%, 100% { transform: none; }
  18% { transform: translateY(-.24em) rotate(-7deg); }
  34% { transform: translateY(.05em) rotate(4deg); }
}

/* «новые релизы» — буквы висят и качаются, как на верёвочке */
[data-anim="swing"] .al { transform-origin: 50% -.2em; animation: a-swing 1.7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.17s); }
@keyframes a-swing {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(10deg); }
}

/* «квартирники и концерты» — буквы вразнобой подпрыгивают, как на танцполе */
[data-anim="jump"] .al { transform-origin: 50% 100%; animation: a-jump 1.9s cubic-bezier(.3, 0, .3, 1) infinite; animation-delay: calc(var(--d) * -.17s); }
@keyframes a-jump {
  0%, 62%, 100% { transform: none; }
  70% { transform: scale(1.14, .82); }
  80% { transform: translateY(-.34em) scale(.9, 1.12) rotate(var(--tilt)); }
  90% { transform: translateY(0) scale(1.08, .92); }
}
.h3 {
  margin: 0 0 1.25rem;
  font: 800 clamp(2.2rem, 6vw, 3.2rem)/1 var(--hand); font-variation-settings: var(--hand-vars);
  color: var(--green); filter: url(#rough);
}
.h3:focus { outline: none; }

/* ---------- первый экран: афиша ---------- */
.hero {
  position: relative; isolation: isolate; overflow-x: clip;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gut) clamp(3.5rem, 7vw, 6rem);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.25rem;
}
.hero__title {
  grid-column: 1 / -1; margin: 0;
  font: 800 clamp(4.1rem, 14.6vw, 12.5rem)/.86 var(--hand);
  font-variation-settings: "INFM" 100, "BNCE" 80;
  text-transform: uppercase; color: var(--green); letter-spacing: -.02em;
}
.hero__title .w { display: block; white-space: nowrap; }
.hero__title .w + .w { padding-left: .42em; }
.l { display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.dance .l { animation: dance .9s cubic-bezier(.5, 0, .5, 1) infinite alternate; animation-delay: calc(var(--i) * -.13s); }
@keyframes dance {
  0%   { transform: translateY(var(--y)) rotate(var(--r)) scale(var(--s)); }
  50%  { transform: translateY(calc(var(--y) - .16em)) rotate(calc(var(--r) * -1.6)) scale(calc(var(--s) * 1.06)); }
  100% { transform: translateY(calc(var(--y) + .04em)) rotate(calc(var(--r) + 6deg)) scale(var(--s)); }
}
.hero__lead {
  grid-column: 1 / span 7; margin: 1.1rem 0 0;
  font: 500 clamp(1.25rem, 2.6vw, 1.9rem)/1.2 var(--hand); font-variation-settings: var(--hand-vars);
  color: var(--green-text);
}
.hero__poster {
  grid-column: 1 / span 8; justify-self: start; max-width: 100%;
  margin-top: clamp(2.25rem, 5vw, 3.75rem);
  /* бумажка с анонсом: голубая, чуть мятая, приклеена скотчем */
  position: relative; z-index: 1;
  padding: clamp(1.6rem, 3.6vw, 2.6rem) clamp(1.3rem, 3.8vw, 2.9rem) clamp(1.8rem, 3.8vw, 2.8rem);
  transform: rotate(-1.2deg);
}
.hero__poster::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.28) 39.5%, transparent 43%),
              linear-gradient(64deg, transparent 61%, rgba(20,70,130,.07) 62%, transparent 66%),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='2.6'%3E%3CfeDistantLight azimuth='40' elevation='58'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.42' intercept='.62'/%3E%3CfeFuncG type='linear' slope='.42' intercept='.62'/%3E%3CfeFuncB type='linear' slope='.42' intercept='.62'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 520px 520px,
              var(--paper);
  background-blend-mode: normal, normal, multiply, normal;
  clip-path: polygon(0 1.5%, 12% 0, 38% .8%, 64% 0, 88% 1.1%, 100% 0, 99.2% 22%, 100% 51%, 99.4% 78%, 100% 100%, 71% 99%, 45% 100%, 19% 98.9%, .6% 100%, 0 74%, .7% 47%, 0 22%);
  filter: url(#paper) drop-shadow(0 10px 14px rgba(10, 60, 40, .22));
}
.hero__poster::after { /* кусочек скотча */
  content: ""; position: absolute; top: -.95rem; left: 50%; width: clamp(96px, 12vw, 140px); height: 2rem;
  transform: translateX(-50%) rotate(3.5deg); pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,250,236,.55));
  box-shadow: 0 1px 3px rgba(10, 60, 40, .12);
  clip-path: polygon(0 8%, 4% 0, 96% 4%, 100% 0, 98% 30%, 100% 55%, 97% 80%, 100% 100%, 3% 96%, 0 100%, 2% 70%, 0 45%, 3% 22%);
}

.poster__line {
  display: block; margin: 0;
  font: 600 clamp(2.1rem, 5.4vw, 4.4rem)/1.02 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 40;
  text-transform: uppercase; color: var(--green); letter-spacing: .01em;
  filter: url(#rough);
}
.poster__line--sub { font-size: clamp(1.4rem, 3.4vw, 2.4rem); font-weight: 500; }
.poster__grid {
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: end;
  gap: 1.4rem clamp(1.5rem, 5vw, 3.5rem); margin-top: 1.6rem;
}
.program { margin: 0; padding: 0; list-style: none; font: 400 .9375rem/1.45 var(--text); text-transform: uppercase; letter-spacing: .04em; }
.program li { display: flex; gap: .7em; align-items: baseline; }
.program b { font-weight: 700; min-width: 1.8em; }

.doodle { position: absolute; z-index: -1; fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.doodle--mic { width: clamp(110px, 17vw, 230px); height: auto; aspect-ratio: 120/200; right: calc(var(--gut) + 1%); bottom: 7%; transform: rotate(14deg); }
.doodle--daisy { width: clamp(90px, 13vw, 170px); aspect-ratio: 120/150; height: auto; right: 24%; top: 47%; stroke: var(--blue); stroke-width: 6; transform: rotate(-12deg); }
.doodle--star { width: clamp(34px, 5vw, 60px); aspect-ratio: 1; height: auto; right: 8%; top: 38%; fill: var(--blue); stroke: var(--green); stroke-width: 4; }
.doodle--star2 { width: clamp(24px, 3vw, 38px); aspect-ratio: 1; height: auto; left: 55%; top: 62%; stroke-width: 5; }
.doodle--note { width: clamp(46px, 6vw, 80px); aspect-ratio: 70/100; height: auto; right: 34%; bottom: 10%; transform: rotate(-8deg); }

/* ---------- кнопки ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .72em 1.35em .78em; border: 0; cursor: pointer;
  background: var(--green); color: var(--pink-soft);
  font: 700 1.3rem/1 var(--hand); font-variation-settings: var(--hand-vars);
  border-radius: var(--r-hand); text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s;
}
.btn::after {
  content: ""; position: absolute; inset: -6px -5px -4px -7px; pointer-events: none;
  border: 3px solid var(--green); border-radius: var(--r-hand-2); filter: url(#rough);
}
.btn:hover { transform: rotate(-2deg) scale(1.03); }
.btn:active { transform: rotate(1deg) scale(.98); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn--wide { width: 100%; }
.btn--ghost { background: transparent; color: var(--green); }
.btn--big { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }

.link-btn {
  display: inline-flex; align-items: center; gap: .45em; border: 0; background: none; cursor: pointer;
  font: 500 1.0625rem/1 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green-text);
  padding: .6rem .2rem; text-decoration: underline; text-underline-offset: .25em;
}

/* ---------- обо мне ---------- */
.about { overflow-x: clip;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--gut) clamp(3rem, 8vw, 7rem);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.25rem; row-gap: 2rem;
  border-top: 3px solid transparent;
}
.about__head { grid-column: 1 / span 5; position: relative; }
.about__body { grid-column: 6 / -1; }
.about__art { position: relative; width: clamp(150px, 18vw, 240px); aspect-ratio: 160/230; margin-top: 1.75rem; }
.doodle--guitar { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; transform: rotate(-16deg); stroke-width: 4.5; }
.doodle--guitar .hole { fill: var(--blue); }
.about__art .doodle--note { position: absolute; width: 26%; height: auto; right: -6%; top: 4%; bottom: auto; z-index: 0; transform: rotate(10deg); animation: float 2.4s ease-in-out infinite; display: block; }
.about__art .doodle--note + .doodle--note { width: 18%; right: 12%; top: -8%; stroke: var(--blue-ink); animation-delay: -1.2s; }
@keyframes float { 50% { translate: 0 -10px; rotate: -8deg; } }
.about__text p { margin: 0 0 1.1em; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.about__doing {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 1.75rem 0 0; padding: 0; list-style: none;
  font: 600 clamp(1.2rem, 2.2vw, 1.55rem)/1.2 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green-text);
}
.about__doing li { display: inline-flex; align-items: center; gap: .45em; }
.about__doing li::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--blue); margin-right: .2em; }

.links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.links a {
  display: inline-flex; align-items: center; gap: .4em; padding: .35rem 0;
  font: 600 1.15rem/1 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green-text);
}
.links a .ico { width: 1.1em; height: 1.1em; }

/* ---------- релизы (зелёная секция) ---------- */
.releases {
  background: var(--forest); color: var(--pink-ink);
  padding: clamp(3rem, 8vw, 7rem) var(--gut);
  position: relative;
}
.releases > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.releases .h2 { color: var(--pink-ink); margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.rel-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.cover { position: relative; aspect-ratio: 1; width: 100%; max-width: 480px; transform: rotate(-2.2deg); }
.cover img, .cover__fake { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-hand); }
.cover::after {
  content: ""; position: absolute; inset: -10px -8px -7px -11px; pointer-events: none;
  border: 3.5px solid var(--pink-ink); border-radius: var(--r-hand-2); filter: url(#rough);
}
.cover__fake {
  display: grid; place-items: center; background: var(--pink); color: var(--green);
  font: 800 clamp(2rem, 6vw, 4rem)/1 var(--hand); font-variation-settings: var(--hand-vars);
  text-transform: uppercase; position: relative; overflow: hidden;
}
.cover__fake svg { position: absolute; width: 22%; height: auto; right: 12%; top: 12%; fill: var(--blue); stroke: var(--green); stroke-width: 4; filter: url(#rough); }
.cover__fake span { filter: url(#rough); }
.rel-feature__title {
  margin: 0; font: 800 clamp(3rem, 9vw, 7rem)/.9 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 70;
  text-transform: uppercase; color: var(--pink-ink); filter: url(#rough);
}
.rel-meta { margin: .9rem 0 0; font: 400 1rem/1.4 var(--text); text-transform: uppercase; letter-spacing: .05em; }
.rel-meta .todo { color: #b5e1ff; }
.tracks { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; font: 600 clamp(1.15rem, 2vw, 1.4rem)/1.25 var(--hand); font-variation-settings: var(--hand-vars); text-transform: uppercase; }
.tracks li { display: flex; gap: .8em; align-items: baseline; }
.tracks b { font-size: .75em; font-weight: 500; opacity: .8; min-width: 1.6em; }
.listen { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.listen .btn { background: var(--pink-ink); color: var(--forest); font-size: 1.15rem; }
.listen .btn::after { border-color: var(--pink-ink); }

.rel-list { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; padding: 0; list-style: none; border-top: 2px solid color-mix(in srgb, var(--pink-ink) 45%, transparent); }
.rel-row {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .5rem 1.2rem; align-items: baseline;
  padding: 1.05rem 0; border-bottom: 2px solid color-mix(in srgb, var(--pink-ink) 45%, transparent);
}
.rel-row__n { font: 700 .9375rem/1 var(--text); letter-spacing: .06em; }
.rel-row__t { font: 700 clamp(1.5rem, 3.4vw, 2.2rem)/1 var(--hand); font-variation-settings: var(--hand-vars); text-transform: uppercase; }
.rel-row__m { display: block; margin-top: .35rem; font: 400 .875rem/1.3 var(--text); text-transform: uppercase; letter-spacing: .05em; }
.rel-row__m .todo { color: #b5e1ff; }
.rel-row a { display: inline-flex; align-items: center; gap: .4em; font: 600 1.1rem/1 var(--hand); font-variation-settings: var(--hand-vars); padding: .5rem 0; }

/* ---------- события ---------- */
.events { overflow-x: clip; max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) var(--gut) clamp(4rem, 9vw, 8rem); }
.events__head .h2 { min-width: 0; }
.events__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.doodle--window { position: relative; z-index: 0; width: clamp(80px, 11vw, 150px); aspect-ratio: 140/160; height: auto; flex: none; transform: rotate(5deg); }
.events__list { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--green); }
.ev {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: 1.25rem clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0; border-bottom: 3px solid var(--green);
}
.ev__date { color: var(--green-text); }
.ev__dm { display: block; font: 800 clamp(3.6rem, 9vw, 7rem)/.9 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 70; filter: url(#rough); }
.ev__wd { display: block; margin-top: .4rem; font: 500 1.35rem/1.1 var(--hand); font-variation-settings: var(--hand-vars); }
.ev__title { margin: 0 0 .35rem; font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.05 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green); }
.ev__about { margin: 0 0 .9rem; }
.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.facts li { display: flex; gap: .6em; align-items: flex-start; font-size: 1rem; line-height: 1.35; }
.facts .ico { color: var(--green); width: 1.3em; height: 1.3em; margin-top: -.05em; }
.facts .todo { color: var(--blue-ink); }
.empty { padding: 2rem 0; font: 500 1.5rem/1.3 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green-text); }

/* ---------- подвал ---------- */
.foot { background: var(--forest); color: var(--pink-ink); padding: clamp(2.5rem, 6vw, 4.5rem) var(--gut) calc(2rem + env(safe-area-inset-bottom)); }
.foot > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.foot__name { margin: 0; font: 800 clamp(2.6rem, 9vw, 6rem)/.95 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 80; text-transform: uppercase; }
.foot__name .w { display: inline-block; white-space: nowrap; margin-right: .3em; }
.links--foot a { color: var(--pink-ink); }
.foot__small { margin-top: 2rem; font-size: .875rem; letter-spacing: .03em; }

/* ---------- окно регистрации ---------- */
.sheet {
  width: min(560px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  padding: 0; border: 0; border-radius: 22px 30px 18px 34px / 30px 18px 34px 22px;
  background: var(--pink-soft); color: var(--green-ink);
  box-shadow: 0 30px 60px -20px rgba(6, 50, 24, .55);
  overflow: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: color-mix(in srgb, var(--forest) 62%, transparent); }
.sheet[open] { animation: sheet-in .42s cubic-bezier(.16,1,.3,1); }
@keyframes sheet-in { from { transform: translateY(24px) rotate(-1.5deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }
.sheet__inner { position: relative; padding: 1.5rem clamp(1.25rem, 5vw, 2.25rem) 2rem; }
.sheet__close {
  position: absolute; top: .75rem; right: .75rem; width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; background: none; color: var(--green); cursor: pointer; border-radius: 50%;
}
.sheet__close .ico { width: 28px; height: 28px; }
.sheet__close:hover { background: color-mix(in srgb, var(--blue) 45%, transparent); }

.steps { display: flex; gap: .4rem; margin: .25rem 3rem 1rem 0; padding: 0; list-style: none; font: 500 1rem/1 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green-ink); }
.steps li { display: flex; align-items: center; gap: .4rem; padding: .3rem 0; }
.steps li + li::before { content: "→"; opacity: .6; display: inline-block; }
.steps li[aria-current="step"] { color: var(--green-text); font-weight: 700; text-decoration: underline wavy var(--blue-ink) 2px; text-underline-offset: .35em; }
.steps li.is-done { color: var(--green-text); }
.sheet__event { margin: 0 0 1.25rem; font: 400 .9375rem/1.4 var(--text); text-transform: uppercase; letter-spacing: .04em; }

.field { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; margin-bottom: .45rem; padding: 0; font: 600 1.2rem/1.2 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green-text); }
.field input[type="text"], .field input[type="number"], .field input[type="email"], .field input[type="tel"] {
  width: 100%; min-height: 52px; padding: .65rem .95rem;
  font: 400 1.125rem/1.2 var(--text); color: var(--green-ink);
  background: #fff3f8; border: 2.5px solid var(--green); border-radius: 14px 20px 12px 22px / 20px 12px 22px 14px;
}
.field input::placeholder { color: color-mix(in srgb, var(--green-ink) 55%, #fff3f8); }
.field input:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: var(--err); }
.field__hint { margin: .4rem 0 0; font-size: .9375rem; }
.field__err { margin: .35rem 0 0; font-size: .9375rem; font-weight: 700; color: var(--err); }
.field__err:empty { display: none; }

.seg { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .7rem; }
.seg label { margin: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: inline-flex; align-items: center; gap: .45em; min-height: 46px; padding: .5rem 1.05rem; cursor: pointer;
  font: 600 1.1rem/1 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green-text);
  border: 2.5px solid var(--green); border-radius: var(--r-hand); background: transparent;
  transition: background-color .15s, color .15s, transform .2s;
}
.seg span:hover { transform: rotate(-1.5deg); }
.seg input:checked + span { background: var(--green); color: var(--pink-soft); }
.seg input:focus-visible + span { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
.money { display: flex; align-items: center; gap: .6rem; }
.money__label { margin: 0 !important; flex: none; font-size: 1.05rem !important; font-weight: 500 !important; }
.money input { max-width: 11rem; }
.money__cur { font: 700 1.3rem/1 var(--hand); color: var(--green-text); }

/* сколько человек */
.count { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.count__btn {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center; cursor: pointer; padding: 0 0 .12em;
  font: 700 1.9rem/1 var(--hand); color: var(--green); background: transparent;
  border: 2.5px solid var(--green); border-radius: var(--r-hand); transition: transform .2s, background-color .15s, color .15s;
}
.count__btn:hover:not(:disabled) { transform: rotate(-4deg); background: var(--green); color: var(--pink-soft); }
.count__btn:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
.count__btn:disabled { opacity: .35; cursor: not-allowed; }
.count__n { min-width: 1.6ch; text-align: center; font: 800 2.2rem/1 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green); font-variant-numeric: tabular-nums; }
.count__word { font: 500 1.05rem/1.2 var(--hand); color: var(--green-text); }
.friends { display: grid; gap: .55rem; }
.nowrap { white-space: nowrap; }

/* перевод по номеру */
.transfer {
  margin: 0 0 1.25rem; padding: 1.1rem 1.1rem 1.2rem;
  background: color-mix(in srgb, var(--blue) 58%, var(--pink-soft));
  border-radius: 18px 24px 16px 26px / 24px 16px 26px 18px;
}
.transfer__lead { margin: 0 0 .7rem; font-size: 1rem; }
.transfer__lead b { white-space: nowrap; }
.transfer__phone { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; }
.transfer__num { font: 800 clamp(1.5rem, 5.5vw, 1.9rem)/1.1 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green); letter-spacing: .01em; overflow-wrap: anywhere; }
.transfer__num .todo { font-size: .9rem; }
.transfer__who { margin: .35rem 0 0; font-weight: 700; }
.transfer__note { margin: .8rem 0 0; font-size: .9375rem; }
.transfer__note:empty { display: none; }
.transfer__qr { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.transfer__qr-img { flex: none; width: 132px; padding: 6px; background: #fff; border-radius: 12px; line-height: 0; }
.transfer__qr-img svg, .transfer__qr-img img { width: 100%; height: auto; display: block; }
.transfer__qr p { margin: 0; font-size: .9375rem; }
.transfer__open { margin-top: 1rem; font-size: 1.1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: .35rem .85rem; cursor: pointer;
  font: 600 1rem/1 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green-text);
  background: #fff3f8; border: 2px solid var(--green); border-radius: var(--r-hand); transition: transform .2s, background-color .15s;
}
.chip .ico { width: 1.1em; height: 1.1em; display: none; }
.chip.is-done { background: var(--green); color: var(--pink-soft); }
.chip.is-done .ico { display: inline-block; }
.chip:hover { transform: rotate(-2deg); }
.chip:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
/* на телефоне QR не нужен — есть кнопка «открыть в банке» */
@media (max-width: 640px) { .transfer__qr { display: none; } }
@media (min-width: 641px) { .transfer__open { display: none; } }

.field--check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.field--check input { width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--green); }
.field--check label { margin: 0; font: 400 .9375rem/1.4 var(--text); color: var(--green-ink); }
.field--check .field__err { grid-column: 2; }

.summary { margin: 0 0 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.2rem; font-size: 1rem; }
.summary dt { font: 400 .8125rem/1.6 var(--text); text-transform: uppercase; letter-spacing: .06em; }
.summary dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.summary .sum { font: 800 1.7rem/1 var(--hand); color: var(--green); }
.safe { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1rem 1.1rem; margin-bottom: 1.25rem; background: color-mix(in srgb, var(--blue) 58%, var(--pink-soft)); border-radius: 18px 24px 16px 26px / 24px 16px 26px 18px; }
.safe p { margin: 0; font-size: .9375rem; }
.safe .ico { color: var(--green); }
.stub { margin: 0 0 1.25rem; padding: 1.1rem 1.1rem 1.25rem; border: 3px dashed var(--green); border-radius: 18px; }
.stub__title { margin: 0 0 .35rem; font: 700 1.3rem/1.2 var(--hand); font-variation-settings: var(--hand-vars); color: var(--green-text); }
.stub p { margin: 0 0 .9rem; font-size: .9375rem; }
.step__actions { display: grid; gap: .5rem; justify-items: center; }

.doodle--heart { position: static; width: 72px; height: 72px; margin: .25rem 0 .75rem; fill: var(--blue); stroke: var(--green); stroke-width: 3.5; }
.done__text { font-size: 1.125rem; margin: 0 0 1.4rem; }

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
  .hero__lead, .hero__poster { grid-column: 1 / -1; }
  .about__head, .about__body { grid-column: 1 / -1; }
  .about__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
  .about__art { margin-top: 0; width: 110px; flex: none; }
  .rel-feature { grid-template-columns: 1fr; }
  .cover { max-width: 420px; }
  .ev { grid-template-columns: 1fr; }
  .ev .btn { justify-self: start; }
  .doodle--daisy { right: 6%; top: 44%; }
  .doodle--note { right: 38%; }
}
@media (max-width: 600px) {
  .top { padding-top: .8rem; }
  .top__nav { width: 100%; justify-content: space-between; gap: .5rem; }
  .hero__title .w + .w { padding-left: 0; }
  .poster__grid { grid-template-columns: 1fr; }
  .poster__grid .btn { width: 100%; }
  .hero__poster { transform: rotate(-.8deg); padding: 1.5rem 1.1rem 1.6rem; }
  .hero__lead { max-width: 15em; }
  .doodle--mic { display: none; }
  .doodle--daisy { width: 54px; right: 12px; top: 1.6rem; }
  .doodle--star { right: 26%; top: 43.5%; width: 26px; }
  .doodle--star2 { display: none; }
  .doodle--window { width: 64px; }
  .doodle--note { display: none; }
  .rel-row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .rel-row > a { grid-column: 2; }
  .ev .btn { width: 100%; }
  .sheet { width: 100%; max-width: none; max-height: none; height: 100dvh; margin: 0; border-radius: 0; }
  .sheet__inner { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  .seg--money span { padding: .5rem .75rem; }
}


/* ---------- курсор-каракуля (рисунок: assets/icons/cursor.svg; кончик — розовый пик) ---------- */
:root { --cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2260 50 310 400%22 width=%2226%22 height=%2232%22%3E%3Cg fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M176 70L234 122L302 150L344 248L338 342L298 410L200 432L128 420L86 368L78 280L102 180L94 150Z%22 fill=%22%23fbd3e4%22 fill-opacity=%22.85%22 stroke=%22%23e5639e%22 stroke-width=%2216%22/%3E%3Cpath d=%22M102 184L172 150L258 148L310 196L322 290L310 360%22 stroke=%22%23ec8ab6%22 stroke-width=%2212%22/%3E%3Cpath d=%22M92 300L96 380L140 424%22 stroke=%22%23ec8ab6%22 stroke-width=%2210%22/%3E%3Cpath d=%22M126 214C168 190 250 188 300 214M116 312C116 258 136 216 178 208M302 236C320 300 314 362 292 404%22 stroke=%22%2372ad88%22 stroke-width=%2212%22/%3E%3Cpath d=%22M146 256C186 224 262 226 294 262C314 320 302 382 262 414C212 426 162 412 146 372C130 322 136 282 168 256C208 238 262 250 272 302C280 352 252 398 212 402C176 400 160 362 166 322C174 290 212 272 238 298C256 330 244 372 214 382%22 stroke=%22%234062c0%22 stroke-width=%2214%22/%3E%3Cpath d=%22M194 236C184 300 188 362 204 424M244 232C252 300 254 362 244 420M170 250C160 310 166 370 180 414%22 stroke=%22%235575cf%22 stroke-width=%2210%22/%3E%3Cpath d=%22M228 312C236 340 236 362 226 380%22 stroke=%22%23e98ab4%22 stroke-width=%2210%22/%3E%3C/g%3E%3C/svg%3E") 10 1; }
html { cursor: var(--cursor), auto; }
a, button, label, summary, select, .btn, .link-btn, .seg span, .sheet__close, .dev summary, [data-register] { cursor: var(--cursor), pointer; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], textarea, pre { cursor: text; }
.btn[disabled] { cursor: not-allowed; }

/* ---------- иконки по рисункам ---------- */
.top__nav a { display: inline-flex; align-items: center; gap: .35em; }
.nav-ico { width: 1.7em; height: 1.7em; margin: -.3em 0; flex: none; overflow: visible; --sw: 2.2; animation: wiggle 1.6s steps(1, end) infinite; }
.nav-ico--rel { animation-delay: -.7s; }
.top__nav a:hover .nav-ico { animation-duration: .5s; }

/* обо мне: зверёк сидит рядом с гитарой */
.about__pals { display: flex; align-items: flex-end; gap: clamp(.25rem, 1.5vw, 1rem); margin-top: 1.75rem; }
.about__pals .about__art { margin-top: 0; }
.doodle--me {
  position: relative; z-index: 1; flex: none; width: clamp(110px, 13vw, 180px); aspect-ratio: 610/580; --sw: 1.3; height: auto;
  transform-origin: 50% 100%; animation: me-hop 3.2s cubic-bezier(.3, 0, .3, 1) infinite;
}
@keyframes me-hop {
  0%, 70%, 100% { transform: none; }
  76% { transform: scale(1.08, .9); }
  84% { transform: translateY(-14%) scale(.94, 1.06) rotate(-4deg); }
  92% { transform: scale(1.05, .95); }
}

/* релизы: нота у заголовка; на зелёном — светлый карандаш */
.releases__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.releases__head .h2 { margin-bottom: 0; min-width: 0; }
.doodle--rel {
  position: relative; z-index: 0; flex: none; width: clamp(70px, 10vw, 140px); aspect-ratio: 1; height: auto;
  --pen: #a9ccff; --pen-2: #d0e3ff; --sw: 1.5;
  transform-origin: 50% 20%; animation: rel-sway 1.7s ease-in-out infinite alternate;
}
@keyframes rel-sway { from { transform: rotate(-7deg); } to { transform: rotate(6deg) translateY(-4px); } }

/* оплата: монетка переворачивается */
.pay-head { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.25rem; }
.pay-head .h3 { margin: 0; }
.doodle--coin { position: relative; z-index: 0; flex: none; width: 84px; aspect-ratio: 420/360; height: auto; --sw: 1.6; animation: coin-flip 3.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes coin-flip {
  0%, 60% { transform: rotateY(0) translateY(0); }
  72% { transform: rotateY(180deg) translateY(-10px); }
  84%, 100% { transform: rotateY(360deg) translateY(0); }
}

/* ---------- ворона гуляет по низу экрана ---------- */
.crow {
  position: fixed; left: 0; bottom: calc(2px + env(safe-area-inset-bottom)); z-index: 55; /* над зерном бумаги, чтобы белый был чистым */
  height: clamp(56px, 11.5vh, 150px); aspect-ratio: 1;
  pointer-events: none; will-change: transform; transform: translate3d(-200px, 0, 0);
}
.crow__turn { width: 100%; height: 100%; transition: transform .5s cubic-bezier(.45, -.35, .5, 1.35); }
.crow.is-left .crow__turn { transform: scaleX(-1); }
.crow__svg { width: 100%; height: 100%; overflow: visible; filter: url(#pen-boil); }
.c-paper { fill: #ffffff; stroke: none; }
.c-ink { fill: none; stroke: #2f6fe0; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.c-soft { stroke: #6f9df0; stroke-width: 10; }
.crow__svg circle { fill: #4f8cf0; stroke: #2f6fe0; }
.c-leg, .c-body, .c-wing { transform-box: view-box; }
.c-leg--a { transform-origin: 122px 388px; animation: c-step .5s ease-in-out infinite alternate; }
.c-leg--b { transform-origin: 205px 390px; animation: c-step .5s ease-in-out -.5s infinite alternate; }
.c-body { animation: c-bob .5s ease-in-out infinite; }
.c-wing { transform-origin: 140px 205px; animation: c-wing 3s ease-in-out infinite; }
@keyframes c-step { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes c-bob { 0%, 100% { transform: none; } 50% { transform: translate(3px, -12px) rotate(-1.5deg); } }
@keyframes c-wing {
  0%, 60%, 100% { transform: none; }
  10%, 30%, 50% { transform: rotate(-6deg); }
  20%, 40% { transform: rotate(3deg); }
  70% { transform: rotate(-32deg) translate(-6px, -4px); }
  76% { transform: rotate(-4deg); }
  82% { transform: rotate(-28deg) translate(-6px, -4px); }
  90% { transform: none; }
}
/* стоит (разворот у края или остановилась осмотреться): лапки ровно, крылом машет */
.crow.is-still .c-leg, .crow.is-still .c-body { animation: none; }
.crow.is-still .c-wing { animation-duration: 1.4s; }
.crow.is-still .c-body { animation: c-look 1.4s ease-in-out infinite; }
@keyframes c-look { 0%, 100% { transform: none; } 40% { transform: rotate(-4deg); } 70% { transform: rotate(2deg) translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .nav-ico, .doodle--me, .doodle--rel, .doodle--coin, .c-leg, .c-body, .c-wing { animation: none !important; }
  .crow__svg { filter: none; }
  .crow__turn { transition: none; }
}
@media print { .crow { display: none; } }
@media (max-width: 900px) {
  .about__pals { margin-top: 0; flex: none; }
  .doodle--me { width: 96px; }
}
@media (max-width: 600px) {
  .about__art { width: 86px; }
  .doodle--me { width: 78px; }
  .nav-ico { --sw: 2.6; }
  .doodle--rel { width: 58px; }
  .top__nav a { gap: .25em; }
  .nav-ico { width: 1.45em; height: 1.45em; }
}

/* квартирники: домик с дымком — в меню и у заголовка (вместо окна) */
.nav-ico--house { width: 1em; height: 2.1em; margin: -.55em 0 -.45em; --sw: 3; animation-delay: -1.1s; }
.doodle--house {
  position: relative; z-index: 0; flex: none; width: clamp(62px, 8.5vw, 124px); aspect-ratio: 385/875; height: auto;
  --sw: 1.9; transform: rotate(3deg); transform-origin: 50% 100%; animation: house-sway 3s ease-in-out infinite alternate;
}
@keyframes house-sway { from { transform: rotate(3deg); } to { transform: rotate(-2deg); } }
.h-smoke { transform-box: view-box; transform-origin: 150px 250px; animation: h-smoke 2.6s ease-in-out infinite; }
@keyframes h-smoke {
  0%, 100% { transform: none; opacity: 1; }
  50% { transform: translate(6px, -18px) rotate(6deg); opacity: .75; }
}
@media (prefers-reduced-motion: reduce) { .doodle--house, .h-smoke { animation: none !important; } }
@media (max-width: 600px) {
  .doodle--house { width: 50px; --sw: 2.3; }
  .nav-ico--house { width: .9em; height: 1.9em; --sw: 3.4; }
}

/* ловушка для спам-ботов в форме — спрятана от людей */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-err:empty { display: none; }
.form-err { margin: 0 0 .75rem; }
#reg-submit[aria-busy="true"] { opacity: .6; pointer-events: none; }