/* Студия MALAMUT — ночная сцена из заставки: видео во всю ширину, под ним холодная лента работ */
:root {
  --night: #070b12;
  --deep: #0d1420;
  --frost: #dde8f4;
  --mist: #8c9cb0;
  --glow: #9fd4ff;
  --line: #1c2838;
  --danger: #ff9b9b;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Literata", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html { background: var(--night); }
body { background: var(--night); color: var(--frost); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.top { padding-block: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mark { font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: .02em; color: var(--frost); text-decoration: none; }
.mark span { color: var(--glow); }
.nav { display: flex; gap: 22px; font-size: 14px; flex-wrap: wrap; align-items: center; }
.nav a { color: var(--mist); text-decoration: none; letter-spacing: .04em; }
.nav a:hover, .nav a:focus-visible { color: var(--glow); }

.screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 4px; overflow: hidden; background: var(--deep); box-shadow: 0 0 0 1px var(--line), 0 30px 120px -30px rgba(120, 190, 255, .35); }
.screen video { width: 100%; height: 100%; object-fit: cover; display: block; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  font: 500 14px var(--f-body); color: var(--frost);
  background: rgba(7, 11, 18, .66); border: 1px solid rgba(159, 212, 255, .35); border-radius: 999px;
  cursor: pointer; backdrop-filter: blur(6px);
}
.pill:hover { border-color: var(--glow); }
.pill.solid { background: var(--glow); color: var(--night); border-color: var(--glow); font-weight: 600; }
.pill.solid:hover { background: var(--frost); }
.pill:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.pill svg { width: 16px; height: 16px; }
.sound { position: absolute; right: 14px; bottom: 14px; }

.intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; padding-block: 56px 72px; align-items: end; }
.intro > * { min-width: 0; }
.intro h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(34px, 6vw, 68px); line-height: 1.05; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.intro h1 em { font-style: normal; font-weight: 700; color: var(--glow); text-shadow: 0 0 28px rgba(159, 212, 255, .45); }
.intro p { margin: 0; color: var(--mist); max-width: 46ch; font-size: 17px; }

.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-block: 28px 24px; }
.section-head h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 5vw, 52px); line-height: 1; letter-spacing: -.02em; margin: 0; text-transform: uppercase; }
.section-head h2 span { font-weight: 300; color: var(--mist); font-size: .42em; letter-spacing: 0; vertical-align: super; margin-left: .3em; }
.empty { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--line); border-radius: 4px; color: var(--mist); font-size: 15px; }
.works-section { padding-top: 24px; }
.head-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }

.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; padding-bottom: 80px; }
.work { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.thumb { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 3px; background: var(--deep); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.work:hover .thumb img, .work:hover .thumb video { transform: scale(1.04); }
.thumb .textcover { position: absolute; inset: 0; padding: 18px 20px; font-family: var(--f-text); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--frost); overflow: hidden; white-space: pre-line; background: radial-gradient(ellipse at 50% 130%, rgba(159, 212, 255, .14), transparent 70%), var(--deep); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.thumb .doccover { position: absolute; inset: 0; display: grid; place-items: center; background: var(--deep); color: var(--mist); font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; }
.open { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(7, 11, 18, .55), transparent 60%); border: 0; cursor: pointer; color: var(--frost); }
.open span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(221, 232, 244, .6); background: rgba(7, 11, 18, .45); opacity: 0; transition: opacity .25s; }
.open.is-video span, .work:hover .open span, .open:focus-visible span { opacity: 1; }
.open svg { width: 18px; height: 18px; }
.open.is-video svg { margin-left: 3px; }
.meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--mist); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.work h3 { font-family: var(--f-display); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.work p { margin: 0; color: var(--mist); font-size: 15px; overflow-wrap: anywhere; }
.owner-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.thumb .audiocover { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 30% 120%, rgba(159, 212, 255, .22), transparent 60%), radial-gradient(ellipse at 90% -20%, rgba(159, 212, 255, .12), transparent 55%), var(--deep); }
.thumb .audiocover svg { width: 46%; height: auto; opacity: .55; }
.stage audio { width: 100%; }
.lyrics { position: relative; box-sizing: border-box; width: 100%; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-block: 16vh; text-align: center; -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); scrollbar-width: none; }
.lyrics::-webkit-scrollbar { display: none; }
.lyrics p { margin: 0; font: 500 clamp(18px, 3.2vw, 28px) / 1.3 var(--f-display); letter-spacing: -.01em; color: rgba(221, 232, 244, .38); cursor: pointer; transition: color .35s, transform .35s, text-shadow .35s; }
.lyrics p.past { color: rgba(221, 232, 244, .2); }
.lyrics p.now { color: var(--frost); transform: scale(1.07); text-shadow: 0 0 26px rgba(159, 212, 255, .6); }
.lyrics p:hover { color: var(--glow); }
.kedit { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--deep); box-sizing: border-box; }
.kedit textarea { font: 15px/1.5 var(--f-body); color: var(--frost); background: var(--night); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; min-height: 220px; resize: vertical; }
.kedit .k-now { font: 600 clamp(20px, 3.4vw, 30px) / 1.3 var(--f-display); color: var(--frost); min-height: 1.3em; }
.kedit .k-next { color: var(--mist); min-height: 1.4em; }
.kedit .tap { font-size: 18px; padding: 16px 28px; align-self: flex-start; }
.kedit .row { display: flex; gap: 12px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .lyrics p { transition: none; } }
.stage .cover { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; border-radius: 4px; }
.stage .cover.small { max-height: 28vh; }
.guest-note { position: fixed; z-index: 15; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.remove { align-self: flex-start; background: none; border: 0; padding: 0; font: 13px var(--f-body); color: var(--mist); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.remove:hover { color: var(--danger); }
.remove.armed { color: var(--danger); }

footer { border-top: 1px solid var(--line); }
footer .wrap { padding-block: 28px 40px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--mist); font-size: 14px; }

/* Окна поверх страницы */
.layer { position: fixed; inset: 0; z-index: 20; background: var(--night); display: grid; place-items: center; overflow-y: auto; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.layer .close { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); }
.layer.viewer { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: max(12px, env(safe-area-inset-top, 0px)); }
.viewbar { position: sticky; top: 0; z-index: 2; width: min(1100px, 100%); display: flex; padding-block: 4px; }
.back { font-size: 15px; padding: 11px 20px; }
.back-bottom { align-self: flex-start; margin-top: 8px; }
.stage { width: min(1100px, 100%); display: flex; flex-direction: column; gap: 14px; }
.stage video, .stage img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: 4px; background: #000; }
.stage h3 { font-family: var(--f-display); font-weight: 500; font-size: 26px; letter-spacing: -.01em; margin: 0; }
.stage .poem { font-family: var(--f-text); font-style: italic; font-size: 21px; line-height: 1.6; white-space: pre-line; max-width: 60ch; margin: 0; }
.stage p { color: var(--mist); margin: 0; max-width: 65ch; }
.stage a { color: var(--glow); }

.panel { width: min(560px, 100%); background: var(--deep); border: 1px solid var(--line); border-radius: 6px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.panel h3 { font-family: var(--f-display); font-weight: 500; font-size: 26px; letter-spacing: -.01em; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--mist); }
.field input[type=text], .field select, .field textarea { font: 15px var(--f-body); color: var(--frost); background: var(--night); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
.field textarea { min-height: 90px; resize: vertical; }
.field textarea#fBody { min-height: 200px; font-family: var(--f-text); font-style: italic; font-size: 17px; }
.drop { border: 1px dashed rgba(159, 212, 255, .4); border-radius: 4px; padding: 22px; text-align: center; color: var(--mist); font-size: 14px; cursor: pointer; }
.drop.over { border-color: var(--glow); background: rgba(159, 212, 255, .06); }
.drop strong { color: var(--frost); font-weight: 500; display: block; overflow-wrap: anywhere; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hint { font-size: 13px; color: var(--mist); margin: 0; }
.status { font-size: 14px; margin: 0; min-height: 1.4em; color: var(--glow); }
.status.err { color: var(--danger); }
.actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* Заставка при открытии */
.splash { position: fixed; inset: 0; z-index: 40; background: #000; transition: opacity .8s ease, visibility .8s; }
.splash video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-gate { position: absolute; inset: 0; display: grid; justify-items: center; align-content: end; gap: 18px; background: center / cover no-repeat; cursor: pointer; border: 0; padding: 24px 24px calc(10vh + env(safe-area-inset-bottom, 0px)); color: var(--frost); }
.splash-gate::before { content: ""; position: absolute; inset: 0; background: rgba(4, 6, 10, .55); }
.splash-gate > * { position: relative; }
.splash-enter { display: inline-flex; align-items: center; gap: 12px; padding: 16px 34px; border-radius: 999px; background: var(--glow); color: var(--night); font: 700 18px var(--f-display); letter-spacing: .04em; box-shadow: 0 0 60px rgba(159, 212, 255, .55); }
.splash-enter svg { width: 18px; height: 18px; }
.splash-hint { font-size: 14px; color: var(--frost); opacity: .8; }
.splash-gate:focus-visible .splash-enter { outline: 2px solid var(--frost); outline-offset: 4px; }
html.splashing, html.splashing body { overflow: hidden; }
@media (orientation: portrait) { .splash video { object-fit: contain; } }
@media (prefers-reduced-motion: reduce) { .splash { transition: none; } }

@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; gap: 20px; padding-block: 36px 48px; }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .nav { gap: 16px; }
  .works { grid-template-columns: 1fr; }
  .panel { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .thumb img, .thumb video { transition: none; } }

/* Реакции */
.rx { display: flex; gap: 8px; flex-wrap: wrap; }
.rx button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--deep); color: var(--frost); font: 500 14px var(--f-body); cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color .2s, background .2s, transform .15s; }
.rx button:hover { border-color: rgba(159, 212, 255, .5); }
.rx button:active { transform: scale(.94); }
.rx button.mine { border-color: var(--glow); background: rgba(159, 212, 255, .14); }
.rx button:disabled { cursor: default; opacity: .6; }
.rx .e { font-size: 16px; line-height: 1; }
.rx .n { min-width: 1ch; }
.stage .rx button { font-size: 15px; padding: 9px 16px; }
.stage .rx .e { font-size: 19px; }

/* Вход автора */
.foot-link { background: none; border: 0; padding: 0; color: var(--mist); font: 13px var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-link:hover { color: var(--glow); }
.field input[type=password] { font: 15px var(--f-mono); color: var(--frost); background: var(--night); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
.panel ol { margin: 0; padding-left: 20px; color: var(--mist); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.panel a { color: var(--glow); }
.warn { font-size: 14px; color: #ffd38a; margin: 0; }
.owner-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Фото — вертикальные карточки, чтобы портреты не обрезались */
#grid-photo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#grid-photo .thumb { aspect-ratio: 4 / 5; }
#grid-photo .thumb img { object-position: center 30%; }
@media (max-width: 860px) { #grid-photo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { #grid-photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } #grid-photo .work h3 { font-size: 15px; } }

/* Проекты — плакаты, тоже вертикальные карточки */
#grid-projects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#grid-projects .thumb { aspect-ratio: 4 / 5; }
#grid-projects .thumb img { object-position: center top; }
@media (max-width: 860px) { #grid-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { #grid-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } #grid-projects .work h3 { font-size: 15px; } }

/* Образы — вертикальные карточки */
#grid-obrazy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#grid-obrazy .thumb { aspect-ratio: 4 / 5; }
#grid-obrazy .thumb img, #grid-obrazy .thumb video { object-position: center 30%; }
@media (max-width: 860px) { #grid-obrazy { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { #grid-obrazy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } #grid-obrazy .work h3 { font-size: 15px; } }

.section-motto { margin: 0; font-family: var(--f-text); font-style: italic; font-size: clamp(16px, 2vw, 20px); color: var(--mist); flex-basis: 100%; }
.kedit textarea[readonly] { min-height: 160px; font-family: var(--f-mono); font-size: 13px; }