/* ===========================================================
   Секции: hero, обо мне, путь, ИИ, Plango, коллаж, финал
   =========================================================== */

/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */

/* padding-block — чтобы не затереть боковые отступы .wrap (см. base.css) */
.hero { padding-block: clamp(28px, 5vw, 72px) clamp(64px, 8vw, 110px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap-l);
  align-items: center;
}

.hero-eyebrow {
  display: block;
  width: max-content;
  font-family: var(--hand);
  font-size: 1.6rem;
  color: var(--marker);
  transform: rotate(-2deg);
}

.hero-name {
  font-weight: 900;
  font-size: clamp(4.6rem, 11.5vw, 9.5rem);
  line-height: .95;
  letter-spacing: -.015em;
}

.hero-surname {
  display: block;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink-soft);
  margin: 10px 0 26px 6px;
}

.hero-sub {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  max-width: 34em;
  margin-bottom: 34px;
}

.hero-links { display: flex; flex-wrap: wrap; gap: 12px 10px; }

.hero-links .sticker:nth-child(1) { --tilt: -2deg; }
.hero-links .sticker:nth-child(2) { --tilt: 1.5deg; }
.hero-links .sticker:nth-child(3) { --tilt: -1deg; }
.hero-links .sticker:nth-child(4) { --tilt: 2deg; }
.hero-links .sticker:nth-child(5) { --tilt: -2.5deg; }

.hero-scrap { --tilt: -1.2deg; margin-top: 40px; max-width: 480px; }

.hero-photo-zone { position: relative; justify-self: end; width: min(100%, var(--hero-photo)); }
.hero-photo { --tilt: -2.5deg; }
.hero-photo img { aspect-ratio: 4 / 5; }

/* -----------------------------------------------------------
   Обо мне
   ----------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--gap-l);
  align-items: start;
  justify-content: center;
  grid-template-areas:
    "card  photo"
    "scrap photo";
}

.about-card  { grid-area: card; }
.about-photo { grid-area: photo; }
.about-scrap { grid-area: scrap; }

.about-card {
  --tilt: -0.6deg;
  position: relative;
  background-color: var(--kraft);
  background-image: var(--grain);
  background-size: 240px 240px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 14px 30px rgba(46, 50, 38, .17), 0 3px 8px rgba(46, 50, 38, .1);
}

.about-card { max-width: 780px; }
.about-card p { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.65; }
.about-card p + p { margin-top: 1em; }
.about-scrap { --tilt: 1deg; margin-top: var(--gap-s); max-width: 480px; }
/* кольцо ложится на угол карточки, а не за её пределы: иначе его
   срезает наехавший сверху следующий лист */
.about-card .coffee { right: -26px; bottom: 22px; }

.about-photo { --tilt: 2.5deg; width: min(100%, var(--about-photo, 320px)); justify-self: center; }
.about-photo img { aspect-ratio: 4 / 5; }

/* -----------------------------------------------------------
   Путь — таймлайн, прошитый пунктирной нитью
   ----------------------------------------------------------- */

.path-list {
  list-style: none;
  position: relative;
  padding-left: clamp(26px, 4vw, 44px);
  max-width: min(100%, 900px);
}

.path-list::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  border-left: 2px dashed rgba(46, 50, 38, .35);
}

.path-item { position: relative; margin-bottom: clamp(24px, 3vw, 36px); }

.path-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(26px, 4vw, 44px) + 1px);
  top: 26px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E8896A, #B4452F 55%, #7D2B1C);
  box-shadow: 0 1px 3px rgba(46, 50, 38, .4);
}

.path-card {
  position: relative;
  background: var(--card);
  padding: 22px 26px 24px;
  box-shadow: var(--lift-card);
}

/* карточки приклеены чуть вразнобой */
.path-item:nth-child(odd)  .path-card { --tilt: -0.6deg; }
.path-item:nth-child(even) .path-card { --tilt:  0.65deg; }

.path-date  { font-family: var(--mono); font-size: .78rem; color: var(--marker); letter-spacing: .03em; }
.path-title { font-weight: 900; font-size: 1.3rem; margin: 4px 0 6px; }
.path-card p { color: var(--ink-soft); font-size: 1.02rem; }

.path-stack {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(46, 50, 38, .22);
  font-family: var(--mono);
  font-size: .74rem !important;
  letter-spacing: .01em;
  color: var(--marker) !important;
  opacity: .85;
}

.path-badge {
  position: absolute;
  top: -14px;
  right: 18px;
  font-family: var(--mono);
  font-size: .72rem;
  background: var(--marker); /* AA-контраст на светлой карточке */
  color: var(--card);
  border-radius: 999px;
  padding: 5px 13px 6px;
  transform: rotate(3deg);
  box-shadow: 0 3px 8px rgba(46, 50, 38, .25);
}

.path-margin-note { position: absolute; right: -4px; bottom: -16px; transform: rotate(-3deg); }
.path-card .clip { right: 42px; transform: rotate(4deg); }

.arrow--badge { top: -26px; right: 2px; width: 122px; height: 48px; }
.arrow--badge path { stroke-width: 2.4; opacity: .9; }

/* -----------------------------------------------------------
   ИИ без хайпа — тёмная вставка
   ----------------------------------------------------------- */

.ai {
  color: var(--paper);
  padding-block: clamp(64px, 8vw, 120px);
  box-shadow: inset 0 10px 24px rgba(0, 0, 0, .12);
}

.ai h2 { color: var(--paper); }
.ai .note { color: var(--marker-lite); }
.ai .scribble path { stroke: var(--marker-lite); }

.ai-lede {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.65;
  max-width: 46em;
  margin-bottom: var(--gap-l);
}

.ai-slips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--gap-s);
}

.ai-slip {
  position: relative;
  background: var(--card);
  color: var(--ink);
  padding: 26px 24px 24px;
  font-size: 1.02rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

.ai-slip:nth-child(1) { --tilt: -1deg; }
.ai-slip:nth-child(2) { --tilt:  0.8deg; }
.ai-slip:nth-child(3) { --tilt: -0.7deg; }
.ai-slip:nth-child(4) { --tilt:  1deg; }

.ai-slip .k {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--marker);
  margin-bottom: 8px;
}

/* -----------------------------------------------------------
   Plango
   ----------------------------------------------------------- */

.plango-card {
  --tilt: 0.5deg;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap-m);
  align-items: center;
  padding: clamp(28px, 4.5vw, 56px);
  background: var(--card);
  box-shadow: var(--lift-hero);
}

.plango-word { width: min(var(--plango-word, 220px), 60%); margin-bottom: 22px; }
.plango-copy p { font-size: 1.08rem; margin-bottom: 20px; max-width: 36em; }

.plango-list {
  list-style: none;
  margin-bottom: 24px;
  max-width: 40em;
}

.plango-list li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.plango-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--orange);
}

.plango-list b { color: var(--ink); font-weight: 600; }

.plango-fact {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--orange);
  padding-left: 14px;
  margin-bottom: 28px;
  max-width: 34em;
}

.plango-disclaimer { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); margin-top: 12px; }

.plango-visual { --tilt: 2deg; position: relative; }
.plango-visual img { aspect-ratio: 16 / 9; object-fit: cover; }
.plango-note { position: absolute; right: -6px; top: -34px; transform: rotate(4deg); }

/* -----------------------------------------------------------
   «Это всё я» — коллаж
   ----------------------------------------------------------- */

/* Коллаж — колонками, а не сеткой: в сетке ряд выравнивается по самому
   высокому элементу, и под короткими карточками остаются дыры, которые
   нечем закрыть. Колонки укладывают карточки вплотную, как на доске. */
.me-grid {
  column-count: 1;
  column-gap: var(--gap-s);
}

.me-grid > * {
  break-inside: avoid;
  margin: 0 0 var(--gap-s);
}

/* билет с мем-каналом — во всю ширину, поперёк колонок */
.me-mem { column-span: all; --tilt: -0.45deg; }

.me-grid .polaroid img { aspect-ratio: 3 / 4; }
.me-grid .polaroid.wide img { aspect-ratio: 4 / 3; }

@media (min-width: 700px)  { .me-grid { column-count: 2; } }
@media (min-width: 1200px) { .me-grid { column-count: 3; } }

/* мем-канал как билет с перфорацией */
.me-mem {
  position: relative;
  filter: drop-shadow(0 12px 14px rgba(46, 50, 38, .2)) drop-shadow(0 2px 4px rgba(46, 50, 38, .12));
}

.ticket-in {
  --stub: 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  background-color: var(--kraft);
  background-image: var(--grain);
  background-size: 240px 240px;
  -webkit-mask:
    radial-gradient(circle 11px at calc(100% - var(--stub)) 0,    transparent 10px, #000 11px),
    radial-gradient(circle 11px at calc(100% - var(--stub)) 100%, transparent 10px, #000 11px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 11px at calc(100% - var(--stub)) 0,    transparent 10px, #000 11px),
    radial-gradient(circle 11px at calc(100% - var(--stub)) 100%, transparent 10px, #000 11px);
  mask-composite: intersect;
}

.ticket-main { position: relative; padding: clamp(26px, 3.5vw, 42px); }

.ticket-stub {
  border-left: 2px dashed rgba(46, 50, 38, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 10px 20px;
}

.ticket-meta {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--ink-soft);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.me-mem h3 { font-weight: 900; font-size: 1.7rem; margin-bottom: 10px; }
.me-mem p  { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 18px; }
.me-mem .sticker { --tilt: -2deg; }

.me-card,
.me-note {
  position: relative;
  background: var(--card);
  box-shadow: var(--lift-card);
}

.me-card { padding: 24px 24px 22px; }
.me-note { padding: 26px 26px 24px; }

.me-card h3 { font-weight: 900; font-size: 1.25rem; margin-bottom: 4px; padding-right: 64px; }
.me-card p  { font-family: var(--hand); font-size: 1.45rem; line-height: 1.15; color: var(--ink-soft); }
.me-card a  { color: var(--ink); }

.me-note-big {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.3vw, 2.05rem);
  line-height: 1.12;
  color: var(--ink);
}

.me-note--kraft {
  background-color: var(--kraft);
  background-image: var(--grain);
  background-size: 240px 240px;
}

.me-note--kraft .me-note-big { color: var(--marker); }

/* разброс углов по коллажу */
.me-grid > :nth-child(2)  { --tilt:  2deg; }
.me-grid > :nth-child(3)  { --tilt: -1.5deg; }
.me-grid > :nth-child(4)  { --tilt:  1.2deg; }
.me-grid > :nth-child(5)  { --tilt: -1deg; }
.me-grid > :nth-child(6)  { --tilt: -2deg; }
.me-grid > :nth-child(7)  { --tilt:  1.7deg; }
.me-grid > :nth-child(8)  { --tilt: -1.2deg; }
.me-grid > :nth-child(9)  { --tilt:  1.2deg; }
.me-grid > :nth-child(10) { --tilt: -1.6deg; }

/* -----------------------------------------------------------
   Финал
   ----------------------------------------------------------- */

.finale { padding-block: clamp(72px, 10vw, 140px) clamp(56px, 7vw, 96px); }

.finale-card {
  --tilt: -0.8deg;
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
  background: var(--card);
  box-shadow: 0 16px 36px rgba(46, 50, 38, .16);
}

.finale-hand {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.5vw, 3.8rem);
  line-height: 1.05;
  margin-bottom: 14px;
}

.finale-card > p { font-size: 1.12rem; color: var(--ink-soft); max-width: 30em; margin: 0 auto 34px; }

/* маркерная петля вокруг главной кнопки — дорисовывается при появлении */
.cta-wrap { position: relative; display: inline-block; padding: 18px 26px; }

.cta-circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.cta-circle path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.js .in-view .cta-circle path { animation: draw 1.1s ease .25s forwards; }
html:not(.js) .cta-circle path { stroke-dashoffset: 0; }

@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cta-circle path { stroke-dashoffset: 0 !important; }
}

.finale-alt {
  margin-top: 30px;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink-soft);
  display: flex;
  justify-content: center;
  gap: 10px 22px;
  flex-wrap: wrap;
}

.finale-alt a:hover { color: var(--marker); }

.finale-ps {
  margin-top: 26px;
  font-family: var(--hand);
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--marker);
  transform: rotate(-1.2deg);
}

/* -----------------------------------------------------------
   Адаптив
   ----------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-grid    { grid-template-columns: 1fr; gap: 56px; }
  .hero-photo-zone { justify-self: center; }
  .about-photo  { justify-self: start; }
  .plango-card  { grid-template-columns: 1fr; }
  .plango-visual { max-width: 440px; }

  /* одна колонка: карточка → справка → фото */
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "card" "scrap" "photo";
  }
}

@media (max-width: 600px) {
  .ticket-in { --stub: 100px; }
  .stamp { font-size: 1.15rem; max-width: 84px; }
  .cta-hint { margin-left: 10px; }
  .me-grid .polaroid { max-width: 340px; }
  .path-margin-note { position: static; display: inline-block; margin-top: 10px; }

  /* клочки крафта на телефоне — во всю ширину и без наклона:
     наклон на узком экране заваливает текст и режет края */
  .scrap { --tilt: 0deg; max-width: none; padding: 18px 20px 20px; }
  .scrap li { font-size: .75rem; }
  .hero-scrap { margin-top: 30px; }

  /* стек-строка длинная — на телефоне пусть переносится свободно */
  .path-stack { font-size: .7rem !important; line-height: 1.7; }

  .plango-list li { font-size: .98rem; }
  .finale-ps { font-size: 1.25rem; }
}