/* in.poi36 · каталог выставки: бумага, чернила, лайм из логотипа как единственный акцент */

:root {
  --paper: #edeae2;
  --paper-2: #e3dfd4;
  --ink: #0b0b0a;
  --ink-2: #2a2926;
  --mute: #7d796f;
  --line: rgba(11, 11, 10, 0.16);
  --lime: #b6ef26;
  --lime-ink: #3f5a00;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --logo: "Poppins", "Manrope", sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--lime); color: var(--ink); }

/* языки: оба текста в разметке, показываем один */
html[data-lang="ru"] [lang="en"]:not(html) { display: none !important; }
html[data-lang="en"] [lang="ru"]:not(html) { display: none !important; }

/* бумажное зерно поверх всего, очень тихое */
.grain {
  position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.serif { font-family: var(--serif); }

/* ── шапка */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  color: var(--ink);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.top.scrolled {
  background: rgba(237, 234, 226, 0.86);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .eye { width: 30px; height: 30px; }
.wordmark { font-family: var(--logo); font-weight: 600; font-size: 19px; letter-spacing: 0.01em; }
.wordmark b { font-weight: 600; color: var(--lime-ink); }
.player .wordmark b, .method .wordmark b { color: var(--lime); }
.top nav { display: flex; gap: clamp(14px, 2.4vw, 32px); align-items: center; }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lang { display: flex; gap: 2px; }
.lang button { padding: 4px 6px; opacity: 0.5; }
.lang button[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--lime); }
@media (max-width: 760px) { .top nav .hide-m { display: none; } }

/* глаз из логотипа */
.eye .iris { fill: var(--lime); }
.eye .pupil { fill: var(--ink); transition: transform 0.25s var(--ease); }

/* ── первый экран */
.hero {
  position: relative; min-height: 100svh;
  padding: 120px var(--gutter) 48px;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-content: end;
}
.hero .kicker { grid-column: 1 / 7; align-self: start; margin-bottom: 4vh; color: var(--mute); }
.hero h1 {
  grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 3; margin: 0;
  font: italic 300 clamp(4.2rem, 13.2vw, 15.5rem)/0.84 var(--serif);
  letter-spacing: -0.035em; pointer-events: none;
  mix-blend-mode: difference; color: #f4f1ea;
}
.hero h1 .l2 { display: block; padding-left: 1.05em; }
.reel-frame {
  grid-column: 6 / -1; grid-row: 2; align-self: center; position: relative; z-index: 1;
  aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; cursor: pointer;
  margin-top: -4vh;
}
.reel-frame video, .reel-frame img { width: 100%; height: 100%; object-fit: cover; }
.reel-frame .play {
  position: absolute; left: 16px; bottom: 14px; color: #fff; display: flex; gap: 10px; align-items: center;
}
.reel-frame .play i {
  width: 11px; height: 11px; border-radius: 50%; background: var(--lime); display: inline-block;
  animation: blink 1.6s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
.reel-frame:hover video { filter: brightness(1.08); }
.hero .lead {
  grid-column: 1 / 6; grid-row: 3; margin: 5vh 0 0; max-width: 40ch;
  font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--ink-2);
}
.hero .facts { grid-column: 7 / -1; grid-row: 3; margin-top: 5vh; display: flex; flex-wrap: wrap; gap: 10px 28px; align-self: end; color: var(--mute); }
.hero .facts span b { color: var(--ink); font-weight: 500; }
/* на телефоне рил вертикальный, показываем его кадром 4:5, чтобы под ним было видно текст */
@media (max-width: 760px) {
  .reel-frame { aspect-ratio: 4 / 5; }
}
@media (max-width: 900px) {
  .hero { align-content: start; padding-top: 96px; }
  .hero .kicker { grid-column: 1 / -1; }
  .hero h1 { grid-row: 2; }
  .reel-frame { grid-column: 1 / -1; grid-row: 3; margin: 24px calc(-1 * var(--gutter)) 0; }
  .hero .lead { grid-column: 1 / -1; grid-row: 4; }
  .hero .facts { grid-column: 1 / -1; grid-row: 5; }
}

/* ── оглавление */
.index {
  padding: 12vh var(--gutter) 10vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px;
  border-top: 1px solid var(--line);
}
.index h2 { grid-column: 1 / 5; margin: 0; font: italic 300 clamp(2.4rem, 5vw, 4.6rem)/1 var(--serif); }
.index ol { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; }
.index li a {
  display: grid; grid-template-columns: 3.2em 1fr auto; align-items: baseline; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: padding 0.4s var(--ease);
}
.index li a:hover { padding-left: 14px; }
.index li a:hover .t { font-style: italic; }
.index .n { font-family: var(--mono); font-size: 0.75rem; color: var(--mute); }
.index .t { font: 400 clamp(1.4rem, 2.6vw, 2.2rem)/1.1 var(--serif); }
.index .c { font-family: var(--mono); font-size: 0.72rem; color: var(--mute); letter-spacing: 0.1em; white-space: nowrap; }
@media (max-width: 760px) { .index li a { grid-template-columns: 2.4em 1fr auto; gap: 10px; } .index .c { font-size: 0.62rem; letter-spacing: 0.04em; } }
@media (max-width: 760px) { .index h2, .index ol { grid-column: 1 / -1; } .index h2 { margin-bottom: 24px; } }

/* ── главы */
.chapter { padding: 14vh var(--gutter) 6vh; position: relative; }
.chapter-head {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: end;
  margin-bottom: 9vh;
}
.chapter-head .num {
  grid-column: 1 / 4; font: italic 300 clamp(5rem, 14vw, 13rem)/0.8 var(--serif); color: transparent;
  -webkit-text-stroke: 1px var(--ink); letter-spacing: -0.02em;
}
.chapter-head h2 { grid-column: 4 / 9; margin: 0; font: italic 400 clamp(2.6rem, 6vw, 5.6rem)/0.95 var(--serif); letter-spacing: -0.02em; }
.chapter-head p { grid-column: 9 / -1; margin: 0; max-width: 34ch; color: var(--ink-2); font-size: 0.98rem; }
@media (max-width: 900px) {
  .chapter-head .num { grid-column: 1 / -1; }
  .chapter-head h2 { grid-column: 1 / -1; margin-top: 8px; }
  .chapter-head p { grid-column: 1 / -1; margin-top: 18px; }
}

.hang { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 12vh; align-items: start; }
.work { grid-column: var(--col, auto); margin-top: var(--shift, 0); }
@media (max-width: 900px) {
  .hang { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 64px; }
  .work { grid-column: span 2 !important; margin-top: 0 !important; }
  .work.pair { grid-column: span 1 !important; }
  .work.pair .label p { display: none; }
}

.frame {
  position: relative; display: block; width: 100%; overflow: hidden; background: var(--ink);
  aspect-ratio: var(--ar, 9 / 16); cursor: pointer; border: 0; padding: 0;
}
.frame img, .frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.5s var(--ease), transform 1.2s var(--ease);
}
.frame video { opacity: 0; }
.frame.playing video { opacity: 1; }
.frame:hover img, .frame:hover video { transform: scale(1.025); }
.frame .dur {
  position: absolute; right: 10px; top: 10px; z-index: 2; color: #fff; padding: 4px 7px;
  background: rgba(11, 11, 10, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.frame .open {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 14px 12px;
  color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  opacity: 0; transform: translateY(8px); transition: 0.4s var(--ease);
  display: flex; align-items: center; gap: 10px;
}
.frame .open::before { content: ""; width: 0; height: 0; border-left: 9px solid var(--lime); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.frame:hover .open, .frame:focus-visible .open { opacity: 1; transform: none; }
@media (hover: none) { .frame .open { opacity: 1; transform: none; } }
.frame:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

/* музейная этикетка */
.label { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
.label .no { font-family: var(--mono); font-size: 0.72rem; color: var(--mute); padding-top: 0.55em; }
.label h3 { margin: 0; font: italic 400 clamp(1.5rem, 2.2vw, 2.1rem)/1.05 var(--serif); letter-spacing: -0.01em; }
.label .kind { grid-column: 2; margin-top: 6px; color: var(--mute); }
.label .kind .hot { color: var(--ink); background: var(--lime); padding: 1px 6px; }
.label p { grid-column: 2; margin: 12px 0 0; max-width: 38ch; font-size: 0.93rem; color: var(--ink-2); }
.label .tags { grid-column: 2; margin-top: 12px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--mute); }

/* аниме-серия: лента, на телефоне листается вбок */
.strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.strip .work:nth-child(2) { margin-top: 9vh; }
.strip .work:nth-child(3) { margin-top: 3vh; }
.strip .work:nth-child(4) { margin-top: 13vh; }
@media (max-width: 900px) {
  .strip {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scrollbar-width: none;
  }
  .strip::-webkit-scrollbar { display: none; }
  .strip .work { flex: 0 0 72%; scroll-snap-align: start; margin-top: 0 !important; }
}

.pull {
  grid-column: 8 / -1; align-self: center; margin: 0;
  font: italic 300 clamp(1.8rem, 3.2vw, 3rem)/1.1 var(--serif); color: var(--ink-2);
}
.pull small { display: block; margin-top: 18px; font: 400 0.72rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 900px) { .pull { grid-column: 1 / -1; } }

/* ── метод (тёмная вставка) */
.method { background: var(--ink); color: var(--paper); padding: 16vh var(--gutter) 14vh; margin-top: 12vh; position: relative; }
.method .mono { color: #9c978b; }
.method h2 { margin: 0 0 10vh; font: italic 300 clamp(2.8rem, 7vw, 6.8rem)/0.95 var(--serif); max-width: 14ch; letter-spacing: -0.02em; }
.method h2 em { font-style: normal; color: var(--lime); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.cols h3 { margin: 14px 0 12px; font: italic 400 2rem/1 var(--serif); }
.cols p { margin: 0; color: #cfcabe; max-width: 36ch; font-size: 0.97rem; }
.stack { margin-top: 12vh; display: grid; grid-template-columns: 10rem 1fr; gap: 14px 32px; border-top: 1px solid rgba(237, 234, 226, 0.18); padding-top: 32px; }
.stack dt { color: #9c978b; }
.stack dd { margin: 0; font-family: var(--mono); font-size: 0.8rem; line-height: 1.7; color: #e8e4da; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; gap: 40px; } .stack { grid-template-columns: 1fr; gap: 4px; } .stack dd { margin-bottom: 14px; } }

/* ── до AI */
.classic { padding: 16vh var(--gutter) 8vh; }
.classic .chapter-head { margin-bottom: 7vh; }
.classic-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* первый ролик крупно на две колонки: пять работ ложатся в два ряда без сирот */
.classic-row > :first-child { grid-column: span 2; }
@media (max-width: 1100px) { .classic-row { grid-template-columns: repeat(2, 1fr); } }
.classic-row .frame { aspect-ratio: 16 / 9; }
.classic-row .frame img { filter: grayscale(1) contrast(1.05); }
.classic-row .frame:hover img { filter: none; }
.classic-row .label { grid-template-columns: 1fr; }
.classic-row .label h3 { font-size: 1.4rem; }
.classic-row .label .tags, .classic-row .label .kind { grid-column: 1; }
.more { display: inline-flex; gap: 10px; margin-top: 7vh; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.more:hover { border-bottom-color: var(--lime); box-shadow: inset 0 -6px 0 var(--lime); }
@media (max-width: 760px) { .classic-row { grid-template-columns: 1fr; } .classic-row > :first-child { grid-column: auto; } }

/* ── контакты */
.contact { padding: 18vh var(--gutter) 10vh; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; position: relative; overflow: hidden; }
.contact .big-eye { position: absolute; right: -8vw; top: 8vh; width: clamp(220px, 34vw, 560px); height: auto; opacity: 0.95; }
.contact h2 { grid-column: 1 / 9; margin: 0; font: italic 300 clamp(3.4rem, 10vw, 10rem)/0.85 var(--serif); letter-spacing: -0.03em; position: relative; z-index: 1; }
.contact h2 a { text-decoration: none; background: linear-gradient(var(--lime), var(--lime)) 0 88% / 0 0.12em no-repeat; transition: background-size 0.6s var(--ease); }
.contact h2 a:hover { background-size: 100% 0.12em; }
.contact .lines { grid-column: 1 / 7; margin-top: 8vh; position: relative; z-index: 1; }
.contact .lines a { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 400 clamp(1.15rem, 1.8vw, 1.5rem)/1.2 var(--serif); }
.contact .lines a span:last-child { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--mute); align-self: center; }
.contact .lines a:hover span:first-child { font-style: italic; }
.contact .side { grid-column: 8 / -1; margin-top: 8vh; position: relative; z-index: 1; align-self: end; }
.contact .side p { margin: 0 0 18px; max-width: 34ch; color: var(--ink-2); }
@media (max-width: 900px) {
  .contact h2, .contact .lines, .contact .side { grid-column: 1 / -1; }
  .contact .big-eye { right: -30vw; top: 4vh; opacity: 0.9; }
}

footer { padding: 28px var(--gutter) 36px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; color: var(--mute); border-top: 1px solid var(--line); }

/* ── плеер */
dialog.player {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(11, 11, 10, 0.96); color: var(--paper);
}
dialog.player::backdrop { background: rgba(11, 11, 10, 0.9); }
dialog.player[open] { display: grid; grid-template-rows: auto 1fr auto; animation: fadein 0.35s var(--ease); }
@keyframes fadein { from { opacity: 0; } }
.player-top { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gutter); gap: 16px; }
.player-top .close { color: var(--paper); padding: 8px 0; }
.player-top .close:hover { color: var(--lime); }
.player-stage { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); }
.player-stage video { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; background: #000; }
.player-cap { padding: 14px var(--gutter) 22px; display: flex; gap: 8px 24px; flex-wrap: wrap; align-items: baseline; }
.player-cap h3 { margin: 0; font: italic 400 1.8rem/1 var(--serif); }
.player-cap .mono { color: #9c978b; }

/* появление при прокрутке */
.rise { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .reel-frame .play i { animation: none; }
}

/* «открыт к работе»: живая лаймовая точка, как индикатор записи */
.open-badge {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); padding: 5px 11px 5px 9px; border-radius: 999px;
}
.open-badge i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lime); display: inline-block;
  box-shadow: 0 0 0 0 rgba(182, 239, 38, 0.7); animation: pulse 2s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(182, 239, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(182, 239, 38, 0); } }
.open-badge:hover { border-color: var(--ink); }
.open-badge.big { font: italic 400 1.6rem/1 var(--serif); border: 0; padding: 0; margin: 0 0 14px; gap: 14px; }
.open-badge.big i { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .open-badge i { animation: none; } }