/* Ветка «бумага» (21.09): страница как стопка вырезанных листов — бумажная аппликация с доски владельца
   (research/эталоны/pinterest-стиль-сайта). Правила стиля:
   1. Слои по глубине: каждый следующий раздел лежит глубже и темнее — белый → светлый лист → зелёный → мох.
   2. Кромка листа волнистая (инлайн-svg .cut в конце слоя) и отбрасывает мягкую тень на лист под ней.
   3. Карточки — отдельные листы поверх слоя: белые, с тенью подъёма; в глубоких слоях они «светятся» на зелёном.
   4. Первый экран — окно, прорезанное в двух листах: два кольца вокруг сцены, глобус в таких же кольцах.
   5. Белый силуэт города и деревьев внизу мхового слоя — единственная иллюстрация, эко-мотив эталонов.
   Файл подключён последним и только переопределяет: разметка слоёв — <div class="layer" data-depth="0…4">. */

:root {
  --paper-0: #ffffff;
  --paper-1: #eef2e4;
  --paper-2: #d6e2c2;
  --paper-3: #b9cd9c;
  --paper-4: #1f4d3a;
  --sheet: #ffffff;                       /* лист-карточка поверх слоя */
  --sheet-shadow: 0 10px 18px -12px rgba(23, 26, 23, .34), 0 1px 0 rgba(255, 255, 255, .8) inset;
  --cut-shadow: rgba(23, 26, 23, .28);
  --band-shadow: rgba(23, 26, 23, .11);   /* полоса тени под кромкой на листе ниже */
  --cut-rim: rgba(255, 255, 255, .55);    /* светлая кайма кромки */
  --ring-shadow: rgba(23, 26, 23, .22);
  --grain-blend: multiply;
  --grain-opacity: .045;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper-0: #27392e; --paper-1: #203128; --paper-2: #1a2921; --paper-3: #142119; --paper-4: #0c1711;
    --sheet: #2f4237;                       /* лист-карточка светлее слоя — поднят над ним */
    --sheet-shadow: 0 12px 20px -12px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .09) inset;
    --cut-shadow: rgba(0, 0, 0, .75);
    --band-shadow: rgba(0, 0, 0, .5);
    --cut-rim: rgba(255, 255, 255, .16);    /* на тёмной бумаге кромку держит кайма, не тень */
    --ring-shadow: rgba(0, 0, 0, .7);
    --grain-blend: screen; --grain-opacity: .07;
  }
}
:root[data-theme="dark"] {
  --paper-0: #27392e; --paper-1: #203128; --paper-2: #1a2921; --paper-3: #142119; --paper-4: #0c1711;
  --sheet: #2f4237;                       /* лист-карточка светлее слоя — поднят над ним */
  --sheet-shadow: 0 12px 20px -12px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .09) inset;
  --cut-shadow: rgba(0, 0, 0, .75);
  --band-shadow: rgba(0, 0, 0, .5);
  --cut-rim: rgba(255, 255, 255, .16);    /* на тёмной бумаге кромку держит кайма, не тень */
  --ring-shadow: rgba(0, 0, 0, .7);
  --grain-blend: screen; --grain-opacity: .07;
}

/* Слои. Верхний лист выше по z, чтобы его кромка ложилась на следующий */
.layer { --cut-h: clamp(34px, 5vw, 72px); position: relative; background: var(--l); isolation: isolate; }
.layer[data-depth="0"] { --l: var(--paper-0); z-index: 5; }
.layer[data-depth="1"] { --l: var(--paper-1); z-index: 4; }
.layer[data-depth="2"] { --l: var(--paper-2); z-index: 3; }
.layer[data-depth="3"] { --l: var(--paper-3); z-index: 2; }
.layer[data-depth="4"] { --l: var(--paper-4); z-index: 1; }
.layer + .layer { padding-top: 48px; }    /* место под кромку верхнего листа */
.layer + .layer::after {                  /* лист выше отбрасывает на этот широкую полосу тени (эталон 03, 07) */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--band-shadow), transparent);
}
.layer::before {                          /* волокно бумаги */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cut {
  position: absolute; left: 0; right: 0; top: calc(100% - 2px);   /* заходит на лист на 2 px: дробная высота слоя иначе даёт шов */
  width: 100%; height: calc(var(--cut-h) + 2px);
  display: block; color: var(--l); fill: currentColor;
  z-index: 2; pointer-events: none;
  filter: drop-shadow(0 14px 12px var(--cut-shadow)) drop-shadow(0 2px 2px rgba(23, 26, 23, .12));
  clip-path: inset(1px 0 -200px 0);       /* тень только вниз: размытие иначе заползает на лист выше; верхний ряд с каймой срезан */
}
.cut use:first-child { stroke: var(--cut-rim); stroke-width: 2; paint-order: stroke; }
.cut .grain { fill: url(#paper-grain); opacity: var(--grain-opacity); stroke: none; }   /* волокно и на кромке, иначе у шва меняется фактура */   /* кайма по кромке — толщина бумаги; внутренняя половина под заливкой, верхняя срезана clip-path */
.layer:has(> .cut-big) { --cut-h: clamp(64px, 9vw, 130px); }          /* крупная волна перед мхом (эталон 09, 10) */
.layer[data-depth="4"] { padding-top: 96px; }
.layer[data-depth="4"]::after { height: 180px; }

/* Текст и линии на тёмных и глубоких листах */
.layer[data-depth="2"], .layer[data-depth="3"] { --line: rgba(23, 26, 23, .14); --muted: #5d645a; }
.layer[data-depth="4"] { --ink: #f1f3ec; --ink-2: #d5dbd0; --muted: #a9bdae; --line: rgba(255, 255, 255, .16); color: var(--ink); }
.layer[data-depth="4"] .card-sage { --ink: #171a17; --ink-2: #4a4f48; --muted: #7a7f76; color: var(--ink); }
.layer[data-depth="4"] .footer { margin-top: 0; }
:root[data-theme="dark"] .layer[data-depth="4"] .card-sage { --ink: #f1f3ec; --ink-2: #d5dbd0; --muted: #a9bdae; background: #34503a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .layer[data-depth="4"] .card-sage { --ink: #f1f3ec; --ink-2: #d5dbd0; --muted: #a9bdae; background: #34503a; } }
:root[data-theme="dark"] .layer { --line: rgba(255, 255, 255, .12); --muted: #9aa496; --bg-soft: #2f4237; --bg: #253630; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .layer { --line: rgba(255, 255, 255, .12); --muted: #9aa496; --bg-soft: #2f4237; --bg: #253630; }
}

/* Карточки — листы поверх слоя */
.layer:not([data-depth="0"]) .card-soft { background: var(--sheet); box-shadow: var(--sheet-shadow); }
.layer[data-depth="2"] .card-sage { background: #e7f0d8; box-shadow: var(--sheet-shadow); }
.layer[data-depth="3"] .card-sage, .layer[data-depth="4"] .card-sage { box-shadow: var(--sheet-shadow); }
.layer[data-depth="2"] .step .n { background: var(--paper-0); }
.layer[data-depth="2"] .card-soft .step .n { background: var(--paper-1); }   /* Детали (21.09): на белом листе белый кружок пропадал — номера 1–8 висели голыми */
:root[data-theme="dark"] .layer[data-depth="2"] .card-sage { background: #34503a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .layer[data-depth="2"] .card-sage { background: #34503a; } }

/* Лента этапов — верх первого зелёного листа, без линеек */
.ticker { margin-top: 0; border-block: 0; padding-block: 22px 6px; }
.ticker .chip { background: var(--sheet); box-shadow: 0 6px 12px -8px rgba(23, 26, 23, .4); }
.layer[data-depth="0"] .hero { padding-bottom: 56px; }

/* Первый экран: сцена — окно, прорезанное в стопке листов (эталон 01, 03): три ступени, каждая уже и темнее
   к центру, ступени не концентричны, на каждой — тень от листа выше. Дно окна — тёмный стол сцены
   (четвёртая, ярко-зелёная ступень снята по слову владельца 21.09 — сливалась со столом).
   Разметка: <span class="paper-rings"><i×3></span> перед .scene-media; контейнер повторяет короб сцены. */
.hero { --hero-gap: 34px; }
.hero-scene { isolation: isolate; margin-top: 16px; }
.scene-media { z-index: 1; }
.paper-rings { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.paper-rings i {
  position: absolute; display: block;
  box-shadow: inset 0 9px 16px -7px var(--ring-shadow), inset 0 -1px 0 rgba(255, 255, 255, .28);
}
.paper-rings i:nth-child(1) { inset: -38px -26px -34px -36px; background: var(--paper-1); border-radius: 64px 54px 70px 60px / 58px 66px 54px 68px; }
.paper-rings i:nth-child(2) { inset: -26px -21px -23px -25px; background: var(--paper-2); border-radius: 54px 46px 58px 50px / 50px 56px 46px 58px; }
.paper-rings i:nth-child(3) { inset: -16px -13px -14px -15px; background: var(--paper-3); border-radius: 46px 40px 50px 44px / 44px 48px 40px 50px; }
.layer[data-depth="0"] .hero-foot { grid-template-columns: 1fr auto; align-items: center; margin-top: 22px; }
.tagline .line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }   /* строка тезиса с чипами; ниже — .for, для кого (П4) */
.tagline b { margin: 0 4px 0 0; font-size: 12.5px; }
.tagline .tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--sheet); color: var(--ink-2);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 6px 12px -8px rgba(23, 26, 23, .45), 0 0 0 1px rgba(23, 26, 23, .06);
}
.globe { position: relative; }
.globe::before, .globe::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.globe::after  { inset: -16px; background: var(--paper-2); box-shadow: 0 0 0 12px var(--paper-1), inset 0 6px 10px -4px var(--ring-shadow); }
.globe::before { inset: -6px;  background: var(--paper-3); box-shadow: inset 0 5px 8px -3px var(--ring-shadow); }
.globe canvas { position: relative; z-index: 1; }
@media (max-width: 1100px) {
  .layer[data-depth="0"] .hero-foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tagline b { flex-basis: 100%; margin: 0; }
}
@media (max-width: 980px) {
  .hero { --hero-gap: 20px; }
  .hero-scene { margin-top: 0; }
  .paper-rings { bottom: auto; height: 470px; }          /* короб сцены на телефоне — фиксированные 470 px, врезка ниже вне колец */
  .paper-rings i:nth-child(1) { inset: -18px -16px -17px -17px; border-radius: 44px 38px 48px 40px / 40px 46px 38px 46px; }
  .paper-rings i:nth-child(2) { inset: -12px -10px -11px -11px; border-radius: 40px 34px 42px 36px / 36px 40px 34px 40px; }
  .paper-rings i:nth-child(3) { inset: -7px -6px -6px -6px;     border-radius: 36px 32px 38px 34px / 34px 36px 32px 36px; }
  .layer[data-depth="0"] .hero-foot { margin-top: 4px; }
  .globe::after  { inset: -7px; box-shadow: 0 0 0 5px var(--paper-1), inset 0 4px 6px -3px var(--ring-shadow); }
  .globe::before { inset: -3px; }
  .layer[data-depth="0"] .hero { padding-bottom: 40px; }
}

/* Силуэт города в нижнем листе — белая бумага на мху */
.layer[data-depth="4"] { padding-bottom: 150px; }
.skyline {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 150px;
  display: block; z-index: -1; pointer-events: none;
  color: rgba(255, 255, 255, .92); fill: currentColor;
  filter: drop-shadow(0 -6px 10px rgba(6, 22, 15, .35));
}
:root[data-theme="dark"] .skyline { color: rgba(159, 208, 168, .3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skyline { color: rgba(159, 208, 168, .3); } }
@media (max-width: 640px) { .layer[data-depth="4"] { padding-bottom: 96px; } .skyline { height: 96px; } }
.skyline .far { opacity: .22; }