/* ---------- базовые переменные ---------- */
:root {
  /* цвета */
  --bg:    #F4E5E0;   /* реальный цвет фона с макета */
  --navy:  #000000;
  --text:  #171717;

  /* размеры */
  --max-w: 390px;     /* css-ширина iPhone 13 / 14 */
  --pad:   1.25rem;
  --flow-space: 1.6rem;   /* вертикальный ритм внутри .flow */
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ---------- базовая раскладка ---------- */
* { box-sizing: border-box; margin: 0; }
html,body { height: 100%; }
body      { display: flex; justify-content: center; background:#000; }

#card{
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  background: var(--bg);
  border-radius: var(--radius);

  /* было: overflow: hidden; */
  overflow-x: hidden;  /* прячем только лишнее по ширине */
  overflow-y: auto;    /* по вертикали теперь можно листать */

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch; /* плавность на iOS */
}

/* добавляет равный вертикальный отступ между последовательными детьми */
.flow > *+*   { margin-top: var(--flow-space); }

/* ---------- верхний декоративный слой ---------- */
.bunting{
  position:absolute;
  top:-3%;          /* подняли чуть меньше, чтобы не резалось */
  left:-4%;         /* сдвинули ближе к центру */
  width:108%;       /* уменьшим растяжение */
  pointer-events:none;
}
.popper{
  --size:90px;      /* на пару пикселей меньше, чтобы целиком влезало */
  position:absolute;
  width:var(--size);
  height:var(--size);
  top:32%;          /* опустили чуть ниже гирлянды */
  pointer-events:none;
}
.popper--l{ left:-4%;  transform:rotate(-15deg); }
.popper--r{ right:-4%; transform:rotate( 18deg); }

/* ---------- герой-блок ---------- */
.hero        { padding: 6.5rem var(--pad) 4.5rem; text-align:center; }
.to-whom     { font-size: 1.15rem; line-height:1.2; }
.title       { font: 700 2.35rem "Times New Roman", serif; color: var(--navy);}
.subtitle    { font: 400 1.05rem serif; color: var(--navy);}
.cake        { width: 36%; max-width:170px; margin: 3rem auto 0; }

/* ---------- история ---------- */
.story-section{
  position: relative;     /* чтобы .photo-trail была «привязана» к этой секции */
  margin-top: 12.4rem;     /* немного опускаем блок */
  padding: 0 var(--pad) 3rem;
}

.story-headline{
  font-size: 1.9rem; font-weight: 700; text-align:center;
}
.story-list   { list-style:none; }
.story        { display:flex; flex-direction:column; row-gap:.55rem; }
.story-date   { font-family: monospace; font-size:1rem; }
.story-title  { font-size:1.25rem; font-weight:600; }
.story-text   { font-size:1rem; line-height:1.45; color:var(--text); }


/* ---------- СТАТИСТИКА ---------- */
.stats-section      { padding: 0 var(--pad) 3.2rem; }
.stats-headline     { font: 700 1.9rem/1.2 serif; text-align:center; }
.stats-sub          { display:block; font:400 .95rem/1.3 var(--font,sans-serif); }

.stats-table        { display:flex; flex-direction:column; gap:2.4rem; margin-top:2.4rem; }
.stats-row{
  display:grid;                             /* проще задать колонку фикс. ширины */
  grid-template-columns: 42% 22% 1fr;       /* 42% / 22% / остаток */
  column-gap:1.2rem;
  align-items:start;                        /* шапки ровно по верхней линии */
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:1.6rem;
}
.stats-row:first-child{ border-top:none; padding-top:0; }

.stats-number{
  text-align:right;
  white-space:nowrap;
  font-family:monospace;
  font-variant-numeric:tabular-nums;
  font-size:1.05rem;
  color:var(--navy);
}

/* правая колонка (значение) забирает оставшееся место */
.stats-meaning{
  font-size:.95rem;
  line-height:1.4;
  color:var(--text);
}

.stats-what{
  font-weight:600;
  font-size:1rem;
  line-height:1.35;
}

/* лёгкое уменьшение межстрочыыного интервала у многострочных ячеек, чтобы они визуально совпадали с «что значит» */
.stats-what br,
.stats-number br{line-height:1;}           /* компактные переносы */

/* ---------- ЧУВСТВА ---------- */
.feelings-section   { padding: 0 var(--pad) 4rem; }
.feelings-headline  { font:700 1.9rem/1.25 serif; text-align:center; }
.feelings-section p { font-size:1rem; line-height:1.45; margin-bottom:1.2rem; }


/* =====  Д О Р О Ж К А   И З   Ф О Т О  ================================= */

.photo-trail{
  position:absolute;
  inset:0;                       /* занимает всё поле карточки */
  z-index:0;
  overflow:hidden;               /* скрываем то, что случайно выйдет */
  border-radius:inherit;         /* повторяем скругление #card */
  pointer-events:none;
}

.photo-trail img{
  position:absolute;
  width:32%; max-width:150px;    /* можно править на вкус */
  border-radius:14px;
  box-shadow:0 6px 12px rgba(0,0,0,.12);
  opacity:.28;                   /* чуть ярче */
  filter:blur(1px) saturate(.95);
  transition:transform .3s;
}
.photo-trail img{
  opacity: .32;          /* было .22 — стало чуть ярче */
  filter: blur(1px) saturate(.95);
}



/* ---------- лёгкая адаптация для больших экранов ---------- */
@media (min-width:430px){
  :root { --max-w:430px; }
  .title{ font-size:2.6rem; }
  .photo-trail img{ width:26%; }
}