/* Шрифты лежат на самом сайте, лицензии рядом в fonts/ */
@font-face { font-family: IdeaHead; font-weight: 500; src: url(fonts/jost-cyrillic.woff2) format("woff2"); font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: IdeaHead; font-weight: 500; src: url(fonts/jost-latin.woff2) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: IdeaText; font-weight: 400 600; src: url(fonts/text-cyrillic.woff2) format("woff2"); font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: IdeaText; font-weight: 400 600; src: url(fonts/text-latin.woff2) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  color-scheme: light;
  --bg: #f5f1e4; /* бумага из видео, чтобы небо сливалось со страницей */
  --ink: #16130f;
  --muted: #5d594f;
  /* Краска текста и кнопок, из видео */
  --blue: #2c49c4;
  --gutter: clamp(16px, 3vw, 44px);
  /* Jost: спокойный шрифт с корнями в типографиях прошлого века, треугольная Д даёт ему характер */
  --head: IdeaHead, "Century Gothic", sans-serif;
  --text: IdeaText, system-ui, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--text);
}
h1, h2, h3, p { margin: 0; }
main:focus { outline: none; }
a:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Первый экран: заголовок на пустом небе видео */
.hero { display: flex; flex-direction: column; overflow-x: clip; }
.intro { position: relative; z-index: 1; padding: clamp(18px, 3vh, 34px) var(--gutter) 0; }
h1, h2, h3 { font-family: var(--head); font-weight: 500; }
.row { display: block; }
h1, .end h2 { color: var(--blue); font-size: min(max(7.2vw, 4.4rem), (100vw - 2 * var(--gutter)) / 6.9); line-height: 1.06; letter-spacing: -.01em; }
.intro-foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  margin-top: clamp(10px, 1.6vh, 18px);
}
.lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 500; overflow-wrap: break-word; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 8px 22px;
  background: var(--blue); color: #fff;
  font-weight: 600; line-height: 1.1; text-align: center;
  text-decoration: none;
}
.btn:hover { background: #1a2c8a; }

.hero-art {
  aspect-ratio: 16 / 9;
  margin-top: -15vw;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 14%);
  mask: linear-gradient(to bottom, transparent, #000 14%);
}
.hero-art video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 700px) {
  .hero-art { aspect-ratio: 9 / 10; margin-top: -8vw; }
}

/* Доска: ряды листов на верёвке из первого экрана */
main { position: relative; overflow-x: clip; border-top: 2px solid var(--ink); } /* верёвка длиннее экрана и обрезается по его краю */
.board {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(58px, 6vw, 84px) clamp(20px, 3vw, 44px);
  max-width: 1320px; margin-inline: auto;
  padding: clamp(60px, 7vw, 100px) var(--gutter) clamp(70px, 8vw, 120px);
}
@media (max-width: 999px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 359px) { .board { grid-template-columns: minmax(0, 1fr); } }

.idea { position: relative; scroll-margin-top: 60px; }
.idea::before {
  content: ""; position: absolute; left: -100vw; right: -100vw; top: -10px;
  height: 1.5px;
  background: var(--ink);
}
.sheet {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  container-type: inline-size; /* размер названий считается от ширины листа */
  background: #fff;
  box-shadow: 4px 5px 0 rgb(22 19 15 / .18); /* лист единственное, что лежит над бумагой страницы */
  transform: rotate(var(--rot, 0deg));
  transform-origin: 50% 0;
}
.on .sheet { will-change: transform; }
@media (hover: hover) {
  .idea:hover .sheet { transform: rotate(0deg); }
  .idea:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
}
.idea:target .sheet { transform: rotate(0deg); }

.clip {
  position: absolute; z-index: 3;
  left: 50%; top: -28px;
  width: 46px; height: 46px;
  transform: translateX(-50%);
  pointer-events: none;
}

.thumb { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Обложки нет: лист как флаер, волна сверху и название на чистом низе */
.flat .thumb {
  display: flex; align-items: flex-end;
  padding: clamp(12px, 1.6vw, 22px);
  background: #fff url(figures/flat-a.svg) center / cover no-repeat; color: var(--ink);
}
.flat.warm .thumb { background-image: url(figures/flat-b.svg); }
.flat .thumb h3 { min-width: 0; font-size: 15cqi; line-height: 1.02; color: inherit; }

.body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: clamp(12px, 1.5vw, 18px); }
h3 { font-size: min(10.5cqi, 1.7rem); line-height: 1.12; color: var(--blue); overflow-wrap: break-word; hyphens: manual; }
h3 a { color: inherit; text-decoration: none; }
h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* весь лист кликается */
h3 a:focus-visible { outline: none; }
h3 a:focus-visible::after { outline: 2.5px solid var(--ink); outline-offset: 4px; }
.note { font-size: 1rem; color: var(--muted); overflow-wrap: break-word; }
.note em { font-style: normal; font-weight: 600; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: auto; }
.actions:empty { display: none; }
/* Штамп на сыром листе */
.soon {
  margin-top: 6px; padding: 3px 9px;
  border: 2px solid var(--blue); color: var(--blue);
  font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em;
  transform: rotate(-3deg);
}
.quiet {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--blue);
  text-underline-offset: .2em;
}

/* Финал */
.end { position: relative; overflow-x: clip; border-top: 2px solid var(--ink); background: #f4efdd; } /* бумага этого видео чуть теплее, поля кадра сливаются с блоком */
.end-top { position: relative; z-index: 1; padding: clamp(24px, 4vw, 50px) var(--gutter) clamp(16px, 2.4vw, 30px); }
.end .lede { margin-top: 12px; }
/* Правее текста лежат волны и орбы, поэтому на широком экране он до них не доходит */
@media (min-width: 56.3em) { .lede { max-width: min(38em, 62vw); text-wrap: pretty; } }
.end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 16px; }
.end-actions:empty { display: none; }
.end-art {
  aspect-ratio: 16 / 9;
  margin-top: -15vw;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 14%);
  mask: linear-gradient(to bottom, transparent, #000 14%);
}
.end-art video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .end-art { aspect-ratio: 9 / 10; margin-top: -10vw; }
}
.empty { grid-column: 1 / -1; padding: 70px 20px; text-align: center; color: var(--muted); }

/* Волны и орбы: только там, где нет текста. На узком экране вместо них небольшой шар */
.fig { position: absolute; display: block; height: auto; pointer-events: none; }
.fig-wave-hero { z-index: -1; top: 0; right: 0; width: clamp(420px, 44vw, 860px); }
.fig-wave-end { z-index: 1; bottom: 0; left: 0; width: 15vw; }
.fig-orbs-board { z-index: 0; right: 0; bottom: 0; width: 62vw; }
.fig-orbs-board.off { display: none; }
.fig-orbs-end { top: clamp(16px, 2vw, 30px); right: 3vw; width: 30vw; }
.fig-end-l { z-index: 1; bottom: 26vw; left: 1vw; width: 14vw; }
.fig-end-r { z-index: 1; bottom: 3vw; right: 0; width: 16vw; }
.fig-orb { display: none; right: var(--gutter); width: clamp(110px, 28vw, 180px); }
@media (max-width: 56.25em) {
  .fig-wave-hero, .fig-wave-end, .fig-orbs-board, .fig-orbs-end, .fig-end-l, .fig-end-r { display: none; }
  .fig-orb { display: block; top: 100%; right: var(--gutter); margin-top: 8px; width: clamp(110px, 28vw, 180px); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }