/* ============================================================
   Дневник. Стол не двигается, двигается только тетрадь.
   Все размеры считаются от высоты страницы (--ph), поэтому
   вёрстка масштабируется целиком, а не по кускам.
   ============================================================ */

:root{
  --ph: min(78vh, 55vw);          /* высота страницы */
  --ratio: .705;                  /* пропорции A5 */
  --pw: calc(var(--ph) * var(--ratio));
  --u: calc(var(--ph) / 100);     /* единица внутри страницы */

  --paper:      #f4eee0;
  --paper-warm: #efe6d2;
  --paper-edge: #ded2b8;
  --ink:        #232f38;
  --ink-soft:   #55636e;
  --ink-pale:   #8d9aa2;
  --red:        #bf4436;
  --blue:       #2f5d86;
  --green:      #4a6b45;

  --cover-1: #2f4a3f;
  --cover-2: #1f332c;

  --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='440'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.075' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='640' height='440' filter='url(%23w)'/%3E%3C/svg%3E");
  --leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.021' numOctaves='5' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23l)'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{ box-sizing: border-box; }

html{ background:#15181a; scrollbar-width: thin; scrollbar-color: #4a5250 #15181a; }
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background:#15181a; }
::-webkit-scrollbar-thumb{ background:#3d4442; border-radius: 6px; border: 2px solid #15181a; }
::-webkit-scrollbar-thumb:hover{ background:#556059; }
body{
  margin:0;
  background:#15181a;
  color: var(--ink);
  font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* высоту задаёт скрипт: она и есть «длина» прокрутки */

/* ===================== СТОЛ ===================== */
.stage{
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  /* вертикаль отдаём браузеру, горизонталь забираем себе под перелистывание */
  touch-action: pan-y pinch-zoom;
}

.desk{ position:absolute; inset:0; background:#140e09; }

/* доска стола: свет по диагонали, стыки досок, волокно поверх */
.desk__wood{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.6) 0 2px,
      rgba(255,255,255,.022) 2px 4px,
      rgba(0,0,0,0) 4px 178px),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.016) 0 178px,
      rgba(0,0,0,.05) 178px 356px,
      rgba(255,255,255,.006) 356px 534px),
    linear-gradient(104deg, #402e20 0%, #33241a 26%, #281c13 52%, #1a120c 78%, #100a07 100%);
}
.desk__wood::after{
  content:''; position:absolute; inset:0;
  background-image: var(--wood);
  background-size: 640px 440px;
  mix-blend-mode: overlay;
  opacity:.5;
}

/* тёплое пятно настольной лампы */
.desk__lamp{
  position:absolute; inset:-25%;
  pointer-events:none;
  background:
    radial-gradient(40% 36% at 30% 14%, rgba(255,224,164,.22), rgba(255,224,164,0) 70%),
    radial-gradient(72% 62% at 50% 44%, rgba(255,231,188,.075), rgba(255,231,188,0) 74%);
}

.desk__grain{
  position:absolute; inset:0; pointer-events:none;
  background-image: var(--noise);
  background-size: 190px 190px;
  opacity:.13; mix-blend-mode: overlay;
}
.desk__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(82% 74% at 50% 44%, rgba(0,0,0,0) 40%, rgba(0,0,0,.66) 100%),
    linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 26%);
}

/* предметы на столе. min() держит их в поле слева и справа от книги,
   а на узком экране даёт им уйти за край, а не под дневник */
.prop{ position:absolute; pointer-events:none; }

.prop--mug{
  width: calc(19*var(--u)); height:auto;
  left: min(5.5vw, calc(50% - var(--pw) - 21*var(--u)));
  top: calc(50% - 42*var(--u));
  transform: rotate(-7deg);
  filter: drop-shadow(0 calc(1.4*var(--u)) calc(2.4*var(--u)) rgba(0,0,0,.55));
}
.prop--ring{
  width: calc(15*var(--u)); height: calc(15*var(--u));
  left: min(11vw, calc(50% - var(--pw) - 15*var(--u)));
  top: calc(50% - 15*var(--u));
  opacity:.42; transform: rotate(-8deg);
}
.prop--papers{
  width: calc(31*var(--u)); height:auto;
  left: min(2.5vw, calc(50% - var(--pw) - 30*var(--u)));
  top: calc(50% + 4*var(--u));
  filter: drop-shadow(0 calc(1.2*var(--u)) calc(2.2*var(--u)) rgba(0,0,0,.5));
}
.prop--clips{
  width: calc(9*var(--u)); height:auto;
  left: min(15vw, calc(50% - var(--pw) - 9*var(--u)));
  top: calc(50% + 30*var(--u));
  transform: rotate(16deg); opacity:.8;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.prop--pen{
  width: calc(30*var(--u)); height:auto;
  right: 7vw; bottom: calc(2.6*var(--u));
  transform: rotate(-3.5deg);
  filter: drop-shadow(0 calc(1*var(--u)) calc(1.6*var(--u)) rgba(0,0,0,.6));
}
.prop--pencil{
  width: calc(24*var(--u)); height:auto;
  right: 15vw; top: calc(2.4*var(--u));
  transform: rotate(4deg);
  filter: drop-shadow(0 calc(.8*var(--u)) calc(1.4*var(--u)) rgba(0,0,0,.55));
}

/* ===================== СЦЕНА ===================== */
.scene{
  position:absolute; inset:0;
  display:grid; place-items:center;
  perspective: calc(230 * var(--u));
  perspective-origin: 50% 46%;
}

.book{
  position:relative;
  width: var(--bookw, calc(var(--pw) * 2));
  height: var(--ph);
  transform-style: preserve-3d;
  transform: translateX(var(--shift, calc(var(--pw) * -.5))) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  will-change: transform;
}

.book__shadow{
  position:absolute; left:4%; right:4%; top:6%; bottom:-3%;
  background: radial-gradient(60% 60% at 50% 60%, rgba(0,0,0,.75), rgba(0,0,0,0) 72%);
  filter: blur(calc(2.6 * var(--u)));
  transform: translateZ(-4px) scale(1.06);
  opacity:.9;
}

/* ---- статичные «пачки» бумаги под листами ---- */
.stack{ position:absolute; top:0; width: var(--pw); height:100%; }
.stack--left { left:0; }
.stack--right{ left: var(--pw); }

.stack__paper{
  position:absolute; inset:0;
  background: var(--paper);
  background-image: var(--noise);
  background-blend-mode: multiply;
  background-size: 180px 180px;
  box-shadow: inset 0 0 calc(6*var(--u)) rgba(120,96,60,.16);
}
.stack--left  .stack__paper{ border-radius: calc(1.2*var(--u)) 0 0 calc(1.2*var(--u)); }
.stack--right .stack__paper{ border-radius: 0 calc(1.2*var(--u)) calc(1.2*var(--u)) 0; }

/* торец страниц: чем дальше листаешь, тем толще левая пачка */
.stack__edge{
  position:absolute; top:.6%; bottom:.6%;
  width: calc(1.6 * var(--u));
  background: repeating-linear-gradient(to right,
    #efe6d0 0 1px, #d9cdb2 1px 2px, #f3ecda 2px 3px);
  box-shadow: 0 calc(.6*var(--u)) calc(1.4*var(--u)) rgba(0,0,0,.35);
}
.stack--left  .stack__edge{ left: calc(-1.6 * var(--u)); border-radius: calc(.8*var(--u)) 0 0 calc(.8*var(--u)); }
.stack--right .stack__edge{ right: calc(-1.6 * var(--u)); border-radius: 0 calc(.8*var(--u)) calc(.8*var(--u)) 0; }

/* ---- тень в корешке ---- */
.gutter{
  position:absolute; top:-1%; bottom:-1%;
  left: calc(var(--pw) - 5.5 * var(--u));
  width: calc(11 * var(--u));
  transform: translateZ(9.6px);
  pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(60,44,22,0) 0%,
      rgba(60,44,22,.16) 34%,
      rgba(45,32,16,.42) 48%,
      rgba(45,32,16,.42) 52%,
      rgba(60,44,22,.16) 66%,
      rgba(60,44,22,0) 100%);
}

/* ---- ляссе ---- */
.ribbon{
  position:absolute; left: calc(var(--pw) - 1.9*var(--u));
  bottom: calc(-13 * var(--u)); width: calc(3.8*var(--u)); height: calc(15*var(--u));
  transform: translateZ(-1px) rotate(3deg);
  pointer-events:none;
}
.ribbon span{
  position:absolute; inset:0;
  background: linear-gradient(to right, #8a2f2a, #b4453c 45%, #7c2822);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
  box-shadow: 0 calc(.6*var(--u)) calc(1.2*var(--u)) rgba(0,0,0,.45);
}

/* ---- закладки-язычки ---- */
.tabs{
  position:absolute; top: 11%;
  left: var(--bookw, calc(var(--pw) * 2));
  margin-left: calc(1.2*var(--u));
  display:flex; flex-direction:column; gap: calc(1.5*var(--u));
  transform: translateZ(8px);
  opacity:0; transition: opacity .25s linear;
}
.tab{
  appearance:none; border:0; cursor:pointer;
  writing-mode: vertical-rl;
  font-family:'Caveat', cursive; font-size: calc(3.1*var(--u)); font-weight:600;
  padding: calc(1.3*var(--u)) calc(.8*var(--u)) calc(1.3*var(--u)) calc(1.2*var(--u));
  border-radius: 0 calc(1*var(--u)) calc(1*var(--u)) 0;
  color:#3c3326; background:#e7c56a;
  box-shadow: calc(.5*var(--u)) calc(.5*var(--u)) calc(1.2*var(--u)) rgba(0,0,0,.4), inset calc(-.4*var(--u)) 0 rgba(0,0,0,.08);
  transition: transform .18s ease, filter .18s ease;
  transform: translateX(calc(-.6*var(--u)));
  letter-spacing:.02em;
}
.tab:nth-child(2){ background:#d99f8a; }
.tab:nth-child(3){ background:#9dbfa4; }
.tab:nth-child(4){ background:#a8b6d4; }
.tab:nth-child(5){ background:#e0b0be; }
.tab:nth-child(6){ background:#c9bda0; }
.tab:hover, .tab:focus-visible{ transform: translateX(calc(1.2*var(--u))); filter:brightness(1.06); outline:none; }
.tab.is-active{ transform: translateX(calc(1.6*var(--u))); box-shadow: calc(.5*var(--u)) calc(.5*var(--u)) calc(1.6*var(--u)) rgba(0,0,0,.5), inset 0 0 0 calc(.28*var(--u)) rgba(0,0,0,.22); }

/* тень, которую поднятый лист кладёт на соседние страницы */
.cast{
  position:absolute; top:0; bottom:0; width: var(--pw);
  transform: translateZ(10.4px);
  pointer-events:none; opacity:0;
}
.cast--right{ left: var(--pw); background: linear-gradient(to right, rgba(40,28,12,.72), rgba(40,28,12,0) 58%); }
.cast--left { left: 0;         background: linear-gradient(to right, rgba(40,28,12,0) 34%, rgba(40,28,12,.55)); }

/* ===================== ЛИСТЫ ===================== */
.leaves{ position:absolute; inset:0; transform-style: preserve-3d; }

.leaf{
  position:absolute; top:0; left: var(--pw);
  width: var(--pw); height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}
.leaf__face{
  position:absolute; inset:0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow:hidden;
  background: var(--paper);
}
.leaf__face--front{ border-radius: 0 calc(1.2*var(--u)) calc(1.2*var(--u)) 0; }
.leaf__face--back { transform: rotateY(180deg); border-radius: 0 calc(1.2*var(--u)) calc(1.2*var(--u)) 0; }
.leaf__face--blank{
  background-image: var(--noise); background-size:180px 180px; background-blend-mode: multiply;
  box-shadow: inset 0 0 calc(6*var(--u)) rgba(120,96,60,.14);
}
/* обложка чуть больше блока страниц */
.leaf__face--front.is-cover{ inset: -1.1% -1.4% -1.1% 0; }
.leaf__face--back.is-cover { inset: -1.1% 0 -1.1% -1.4%; }
.is-cover::after{ display:none; }

/* затемнение листа по ходу переворота */
.leaf__shade{
  position:absolute; inset:0; pointer-events:none; z-index:40;
  background: linear-gradient(to right, rgba(38,26,10,.34), rgba(38,26,10,0) 42%);
  opacity:0;
}
/* мягкий блик у корешка на каждой странице */
.leaf__face::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width: 14%;
  background: linear-gradient(to right, rgba(92,70,38,.20), rgba(92,70,38,0));
  pointer-events:none; z-index:3;
}

/* ===================== БУМАГА ===================== */
.page{
  position:absolute; inset:0;
  background-image: var(--noise);
  background-size: 180px 180px;
  background-blend-mode: multiply;
  padding: 8.5% 9% 15% 13%;
  font-size: calc(2.45 * var(--u));
  line-height: 1.62;
  color: var(--ink);
  overflow:hidden;
}
.leaf__face--back .page{ padding: 8.5% 13% 15% 9%; }

/* линовка */
.page[data-paper="ruled"]{
  background-image:
    repeating-linear-gradient(to bottom, rgba(120,140,155,0) 0 calc(4.13*var(--u)), rgba(96,126,148,.26) calc(4.13*var(--u)) calc(4.19*var(--u))),
    var(--noise);
  background-position: 0 8.5%, 0 0;
}
.page[data-paper="grid"]{
  background-image:
    repeating-linear-gradient(to bottom, rgba(122,146,160,0) 0 calc(4.13*var(--u)), rgba(110,140,160,.19) calc(4.13*var(--u)) calc(4.19*var(--u))),
    repeating-linear-gradient(to right, rgba(122,146,160,0) 0 calc(4.13*var(--u)), rgba(110,140,160,.19) calc(4.13*var(--u)) calc(4.19*var(--u))),
    var(--noise);
}

/* поле и дырки от дырокола */
.page::before{
  content:''; position:absolute; top:0; bottom:0; left:10.4%;
  width: calc(.28*var(--u)); background: rgba(190,74,60,.5);
}
.leaf__face--back .page::before{ left:auto; right:10.4%; }

.page::after{ /* прошивка блока у корешка */
  content:''; position:absolute; left:4.6%; top:9%; width: calc(.5*var(--u)); height: 82%;
  background: repeating-linear-gradient(to bottom,
    rgba(90,70,44,.42) 0 calc(2.2*var(--u)), rgba(90,70,44,0) calc(2.2*var(--u)) calc(4.4*var(--u)));
  opacity:.55;
}
.leaf__face--back .page::after{ left:auto; right:4.6%; }
.page--cover::before, .page--cover::after{ display:none; }

/* номер страницы */
.pnum{
  position:absolute; bottom: calc(3.4*var(--u)); right: 12%;
  font-family:'Caveat', cursive; font-size: calc(3.2*var(--u));
  color: var(--ink-pale);
}
.leaf__face--back .pnum{ right:auto; left:12%; }

/* ===================== ТИПОГРАФИКА СТРАНИЦ ===================== */
.p-title{
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size: calc(7.4 * var(--u));
  line-height:1.02;
  margin: 0 0 calc(4.4*var(--u));
  color:#1d2a33;
  position:relative;
  display:inline-block;
  transform: rotate(-1.2deg);
}
.p-title::after{
  content:''; position:absolute; left:-3%; right:-6%; bottom: calc(-1.6*var(--u)); height: calc(2.2*var(--u));
  background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C60 3 130 2 210 5c30 1 60 3 86 2' fill='none' stroke='%23bf4436' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M14 11c70-3 150-4 240-1' fill='none' stroke='%23bf4436' stroke-width='1.6' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
}

.page p{ margin: 0 0 calc(2.6*var(--u)); }
.page .small{ font-size: calc(2.2*var(--u)); color: var(--ink-soft); line-height:1.55; }
.page .lead{ font-size: calc(2.9*var(--u)); }
.page .site-info-link{
  color:#2f5d86; font-weight:700; text-decoration:underline;
  text-decoration-color:rgba(47,93,134,.48); text-underline-offset:calc(.4*var(--u));
}
.page s{ color: var(--ink-pale); text-decoration-thickness: calc(.24*var(--u)); }
.strike-line s{ text-decoration-color: var(--red); }

/* списки-галочки */
.checks, .rules, .boxes, .steps{ margin:0 0 calc(2.4*var(--u)); padding:0; list-style:none; }
.checks li, .boxes li{ position:relative; padding-left: calc(5.6*var(--u)); margin-bottom: calc(1.9*var(--u)); }
.checks li::before{
  content:''; position:absolute; left:0; top: calc(.4*var(--u));
  width: calc(3.6*var(--u)); height: calc(3.6*var(--u));
  background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13.5c2.4 1 4.3 3 6 6.2C12 12 16 6.4 22 2.6' fill='none' stroke='%234a6b45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.checks li:nth-child(even)::before{ transform: rotate(-6deg) scale(1.04); }
.boxes li::before{
  content:''; position:absolute; left: calc(.4*var(--u)); top: calc(.9*var(--u));
  width: calc(3*var(--u)); height: calc(3*var(--u));
  border: calc(.3*var(--u)) solid var(--ink-soft); border-radius: calc(.4*var(--u));
  transform: rotate(-2deg);
}
.rules li{ margin-bottom: calc(2.2*var(--u)); }
.rules b, .steps b{ font-weight:700; }

.steps{ counter-reset: st; }
.steps li{ position:relative; padding-left: calc(6.4*var(--u)); margin-bottom: calc(2.5*var(--u)); }
.steps li::before{
  counter-increment: st; content: counter(st);
  position:absolute; left:0; top: calc(-.4*var(--u));
  font-family:'Caveat', cursive; font-weight:700; font-size: calc(5.4*var(--u));
  color: var(--red); line-height:1;
}
.steps li:nth-child(2)::before{ transform: rotate(4deg); }
.steps li:nth-child(3)::before{ transform: rotate(-3deg); }

/* цены */
.price{ margin: 0 0 calc(2.6*var(--u)); }
.price > div{
  display:flex; align-items:baseline; gap: calc(1*var(--u));
  margin-bottom: calc(1.5*var(--u));
}
.price dt{ white-space:nowrap; }
.price > div::after{
  content:''; flex:1 1 auto;
  border-bottom: calc(.22*var(--u)) dotted rgba(80,96,108,.6);
  transform: translateY(calc(-.6*var(--u)));
}
.price dd{ margin:0; white-space:nowrap; font-weight:700; font-family:'Caveat', cursive; font-size: calc(3.9*var(--u)); color:#1d2a33; }

/* вопросы */
.qa .q{ font-family:'Caveat', cursive; font-size: calc(4.1*var(--u)); color:var(--blue); margin-bottom: calc(.4*var(--u)); }
.qa .a{ margin-bottom: calc(2.4*var(--u)); }

/* облако направлений */
.cloud{ display:flex; flex-wrap:wrap; gap: calc(1.4*var(--u)); margin-bottom: calc(3*var(--u)); }
.cloud span{
  font-size: calc(2.15*var(--u)); padding: calc(.7*var(--u)) calc(1.5*var(--u));
  border-radius: calc(1*var(--u)); background: rgba(47,93,134,.10);
  border: calc(.18*var(--u)) solid rgba(47,93,134,.25);
  color:#2b4356;
}
.cloud span:nth-child(3n){ transform: rotate(-1.4deg); background: rgba(191,68,54,.08); border-color: rgba(191,68,54,.22); color:#7b3128; }
.cloud span:nth-child(4n){ transform: rotate(1.1deg); background: rgba(74,107,69,.10); border-color: rgba(74,107,69,.26); color:#3c5a38; }

/* где проверить */
.proof{ display:flex; flex-direction:column; gap: calc(1.8*var(--u)); margin-top: calc(3*var(--u)); }
.proof__item{
  display:block; text-decoration:none; color:inherit;
  padding: calc(1.9*var(--u)) calc(2.2*var(--u));
  border: calc(.26*var(--u)) solid rgba(35,47,56,.30);
  border-radius: calc(1.4*var(--u));
  background: rgba(255,255,255,.32);
  transform: rotate(-.5deg);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.proof__item:nth-child(2){ transform: rotate(.6deg); }
.proof__item:nth-child(3){ transform: rotate(-.9deg); }
.proof__item:hover{ background: rgba(255,255,255,.8); border-color: rgba(47,93,134,.55); transform: rotate(0deg); }
.proof__item b{ font-family:'Caveat', cursive; font-size: calc(4.4*var(--u)); font-weight:700; display:block; line-height:1.05; color:#1d2a33; }
.proof__item b em{
  font-style:normal; font-family:'Manrope',sans-serif; font-weight:600;
  font-size: calc(1.8*var(--u)); letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:#bf4436; padding: calc(.35*var(--u)) calc(1*var(--u));
  border-radius: calc(.8*var(--u)); vertical-align: calc(.9*var(--u)); margin-left: calc(1*var(--u));
  display:inline-block; transform: rotate(-1.4deg);
}
.proof__item span{ display:block; font-size: calc(2.05*var(--u)); color: var(--ink-soft); margin: calc(.2*var(--u)) 0 calc(.6*var(--u)); }
.proof__item em{ font-style:normal; font-family:'PT Mono', monospace; font-size: calc(2*var(--u)); color:#7b3128; }
.proof__item i{ font-style:normal; font-family:'PT Mono', monospace; font-size: calc(1.85*var(--u)); color: var(--ink-pale); letter-spacing:.02em; }
.proof__item--main{ background: rgba(247,236,205,.72); border-color: rgba(191,68,54,.4); box-shadow: calc(.4*var(--u)) calc(.7*var(--u)) 0 rgba(191,68,54,.12); }
.proof__item--main b{ color:#7b3128; }

/* контакты */
.big-link{
  display:flex; align-items:center; gap: calc(2.4*var(--u));
  text-decoration:none; color:inherit;
  border: calc(.3*var(--u)) solid rgba(35,47,56,.45);
  border-radius: calc(1.8*var(--u));
  padding: calc(1.7*var(--u)) calc(2.4*var(--u));
  margin-bottom: calc(1.8*var(--u));
  background: rgba(255,255,255,.35);
  transform: rotate(-.6deg);
  transition: transform .18s ease, background .18s ease;
}
.big-link--wa{ transform: rotate(.7deg); }
.big-link--max{ transform: rotate(-.4deg); }
.big-link--tg .big-link__ico{ color:#2f7cae; }
.big-link--wa .big-link__ico{ color:#3f9d63; }
.big-link--max .big-link__ico{ color:#6a5bb0; }
.big-link:hover{ background: rgba(255,255,255,.75); transform: rotate(0deg) translateY(calc(-.4*var(--u))); }
.big-link__ico{ width: calc(5.4*var(--u)); height: calc(5.4*var(--u)); flex:0 0 auto; color: var(--blue); }
.big-link__ico svg{ width:100%; height:100%; display:block; }
.big-link b{ display:block; font-size: calc(2.2*var(--u)); text-transform:lowercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:600; }
.big-link i{ display:block; font-style:normal; font-family:'Caveat', cursive; font-size: calc(4.2*var(--u)); font-weight:700; color:#1d2a33; letter-spacing:.01em; }

/* ===================== ДЕТАЛИ НА СТРАНИЦАХ ===================== */
.note{
  position:absolute;
  font-family:'Caveat', cursive; font-size: calc(3.1*var(--u));
  line-height:1.18; color:#3d6ea8;
  max-width: 46%;
}
.note::before{
  content:''; position:absolute; left:calc(-2.6*var(--u)); top:calc(1.2*var(--u));
  width: calc(1.8*var(--u)); height: calc(1.8*var(--u));
  background: no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 10h14M11 5l6 5-6 5' fill='none' stroke='%233d6ea8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.7;
}
.note--a{ right:9%; bottom:7%; transform: rotate(-3deg); }
.note--b{ right:8%;  bottom:9%;  transform: rotate(2.4deg); }
.note--c{ left:16%;  bottom:8%;  transform: rotate(-2deg); color:#7b3128; }
.note--c::before{ display:none; }
.note--d{ right:8%;  bottom:10%; transform: rotate(-2.6deg); }
.note--e{ left:16%;  bottom:7%;  transform: rotate(1.6deg); color:#3c5a38; }
.note--f{ right:9%;  bottom:11%; transform: rotate(2deg); }
.note--g{ right:9%;  bottom:4%;  transform: rotate(-2.2deg); color:#7b3128; }
.note--h{ left:15%;  bottom:7%;  transform: rotate(1.4deg); }
.note--i{ right:8%;  bottom:9%;  transform: rotate(-2.8deg); color:#3c5a38; }
.note--j{ left:16%;  bottom:7%;  transform: rotate(1.8deg); color:#7b3128; }
.note--k{ right:9%;  bottom:9%;  transform: rotate(-2.4deg); }

.postit{
  position:absolute; z-index:6;
  width: calc(25*var(--u)); min-height: calc(19*var(--u));
  padding: calc(2.2*var(--u)) calc(2*var(--u));
  font-family:'Caveat', cursive; font-size: calc(3.1*var(--u)); line-height:1.2;
  color:#4a3f1e;
  background: linear-gradient(160deg, #ffe98f, #f6d95f);
  box-shadow: calc(.6*var(--u)) calc(1.2*var(--u)) calc(2.2*var(--u)) rgba(0,0,0,.28);
}
.postit--flow{
  position:static; float:right; shape-outside: margin-box;
  margin: calc(.6*var(--u)) calc(-6.5*var(--u)) calc(2*var(--u)) calc(3*var(--u));
  transform: rotate(4.5deg);
}
.postit .doodle{ display:block; width: calc(12*var(--u)); height:auto; margin-top: calc(1*var(--u)); color:#8a6b1e; }

.stamp{
  position:absolute; z-index:5;
  font-family:'PT Mono', monospace; font-weight:700;
  font-size: calc(2.5*var(--u)); line-height:1.15; text-align:center; letter-spacing:.14em;
  text-transform: uppercase;
  padding: calc(1.6*var(--u)) calc(2.4*var(--u));
  border: calc(.5*var(--u)) solid currentColor; border-radius: calc(1*var(--u));
  opacity:.62;
}
.stamp i{ font-style:normal; font-size: calc(3.4*var(--u)); letter-spacing:.06em; }
.stamp--red{ color:var(--red); right:12%; top:14%; transform: rotate(-13deg); }
.stamp--blue{ color:var(--blue); right:7%; bottom:4.5%; transform: rotate(8deg); }

.tape{
  position:absolute; z-index:7;
  width: calc(19*var(--u)); height: calc(6*var(--u));
  background: linear-gradient(105deg, rgba(214,226,214,.72), rgba(196,212,198,.62));
  box-shadow: 0 calc(.4*var(--u)) calc(1*var(--u)) rgba(0,0,0,.18);
  border-left: calc(.3*var(--u)) dashed rgba(255,255,255,.5);
  border-right: calc(.3*var(--u)) dashed rgba(255,255,255,.5);
}
.tape--r3{ left:-6%; top:2.5%; transform: rotate(-34deg); }
.tape--r9{ left:-5%; bottom:11%; transform: rotate(31deg); }

.leaf__face--back .clip{ right:auto; left: calc(-1.4*var(--u)); transform: rotate(-4deg); }
.clip{
  position:absolute; right: calc(-1.4*var(--u)); top:34%; width: calc(6*var(--u)); height: calc(14*var(--u)); z-index:8;
  background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100'%3E%3Cpath d='M14 92V22a11 11 0 0 1 22 0v62a7 7 0 0 1-14 0V26' fill='none' stroke='%23a8b0b8' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
  transform: rotate(6deg);
}

/* ===================== ОБЛОЖКА ===================== */
/* Кожаная обложка без «премиальной» рамки и уголков: на ней просто наклеен
   бумажный ярлык, как на школьной тетради. Все линии живут внутри ярлыка,
   поэтому пересекаться им не с чем. */
.page--cover{ padding:0; background:none; }

.cover{
  position:absolute; inset:0;
  border-radius: calc(1*var(--u)) calc(2.6*var(--u)) calc(2.6*var(--u)) calc(1*var(--u));
  background:
    radial-gradient(120% 80% at 22% 8%, rgba(255,255,255,.07), rgba(255,255,255,0) 44%),
    radial-gradient(78% 54% at 44% 42%, rgba(126,170,148,.13), rgba(126,170,148,0) 70%),
    linear-gradient(122deg, #3a5c4d 0%, #2d473c 32%, #21352e 66%, #15221c 100%);
  box-shadow:
    inset 0 0 calc(11*var(--u)) rgba(0,0,0,.5),
    inset calc(1.4*var(--u)) 0 calc(2*var(--u)) rgba(0,0,0,.35),
    inset 0 calc(.3*var(--u)) 0 rgba(255,255,255,.09);
  overflow:hidden;
}
.leaf__face--back .cover{
  border-radius: calc(2.6*var(--u)) calc(1*var(--u)) calc(1*var(--u)) calc(2.6*var(--u));
  box-shadow:
    inset 0 0 calc(11*var(--u)) rgba(0,0,0,.5),
    inset calc(-1.4*var(--u)) 0 calc(2*var(--u)) rgba(0,0,0,.35),
    inset 0 calc(.3*var(--u)) 0 rgba(255,255,255,.09);
}

.cover__grain{
  position:absolute; inset:0; mix-blend-mode: overlay; opacity:.45;
  background-image: var(--noise), var(--leather);
  background-size: 110px 110px, 300px 300px;
}
.cover::before{ /* свет от лампы по диагонали */
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(118deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 70%, rgba(0,0,0,.18) 100%);
}
.cover::after{ /* слепое тиснение по краю, без золота */
  content:''; position:absolute; inset: calc(2.4*var(--u));
  border-radius: calc(1*var(--u));
  box-shadow:
    inset 0 0 0 calc(.16*var(--u)) rgba(0,0,0,.32),
    inset 0 calc(.16*var(--u)) 0 rgba(255,255,255,.05);
}

/* резинка */
.cover__strap{
  position:absolute; top:-5%; bottom:-5%; right:11.5%;
  width: calc(3.6*var(--u));
  background: linear-gradient(to right,
    rgba(0,0,0,.6) 0%, #0e1013 14%, #23262b 46%, #191c20 66%, #0a0b0d 100%);
  box-shadow:
    calc(-1.1*var(--u)) 0 calc(2.2*var(--u)) rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.cover__strap::after{
  content:''; position:absolute; left:30%; top:0; bottom:0; width:10%;
  background: linear-gradient(to right, rgba(255,255,255,.07), rgba(255,255,255,0));
}

/* бумажный ярлык */
.cover__label{
  position:absolute; left:8%; right:24%; top:24%;
  padding: calc(3*var(--u)) calc(2.8*var(--u)) calc(2.4*var(--u));
  text-align:center; color:#26313a;
  background-color: #f3ecd8;
  background-image: var(--noise);
  background-size: 130px 130px;
  background-blend-mode: multiply;
  transform: rotate(-1.1deg);
  box-shadow:
    0 calc(.9*var(--u)) calc(2.2*var(--u)) rgba(0,0,0,.45),
    inset 0 0 0 calc(.2*var(--u)) rgba(160,64,54,.5),
    inset 0 0 0 calc(.62*var(--u)) rgba(255,255,255,.5),
    inset 0 0 0 calc(.8*var(--u)) rgba(160,64,54,.3);
}
.cover__kicker{
  font-family:'PT Mono', monospace; font-size: calc(2*var(--u));
  letter-spacing:.5em; text-transform:uppercase;
  color: rgba(38,49,58,.5); padding-left:.5em;
  margin-bottom: calc(1*var(--u));
}
.cover__title{
  margin:0; font-family:'Manrope', sans-serif; font-weight:800;
  font-size: calc(7.7*var(--u)); letter-spacing:.055em; line-height:1;
  color:#22303a; white-space:nowrap;
}
.cover__hr{
  height: calc(.16*var(--u));
  margin: calc(1.8*var(--u)) 12% calc(1.6*var(--u));
  background: rgba(160,64,54,.55);
  box-shadow: 0 calc(.5*var(--u)) 0 rgba(160,64,54,.22);
}
.cover__sub{
  font-family:'Caveat', cursive; font-size: calc(3.8*var(--u)); line-height:1.14;
  color:#46545e;
}
.cover__owner{
  display:flex; align-items:baseline; gap: calc(1*var(--u));
  margin-top: calc(2.4*var(--u)); text-align:left;
}
.cover__owner span{
  font-family:'PT Mono', monospace; font-size: calc(1.7*var(--u));
  letter-spacing:.12em; color: rgba(38,49,58,.45); white-space:nowrap;
}
.cover__owner i{
  font-style:normal; font-family:'Caveat', cursive; font-weight:700;
  font-size: calc(3.4*var(--u)); color:#22415e; flex:1 1 auto;
  border-bottom: 1px dotted rgba(38,49,58,.4);
  transform: rotate(-.6deg);
}

/* наклейка на коже */
.cover__sticker{
  position:absolute; left:9%; bottom:11%;
  font-family:'Caveat', cursive; font-weight:700; font-size: calc(3.6*var(--u));
  color:#8a2f2a; background: linear-gradient(160deg, #f6ecd6, #e9dcbd);
  padding: calc(1.2*var(--u)) calc(2.6*var(--u));
  border-radius: 52% 48% 46% 54% / 58% 42% 58% 42%;
  transform: rotate(-7deg);
  box-shadow: 0 calc(.7*var(--u)) calc(1.6*var(--u)) rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
  text-align:center; line-height:1.05;
}
.cover__sticker--back{ left:auto; right:9%; top:19%; bottom:auto; color:#2f5d86; transform: rotate(6deg); }

.cover--back .cover__bye{
  position:absolute; left:0; right:0; top:38%; text-align:center;
  font-family:'Caveat', cursive; font-size: calc(7*var(--u)); color: rgba(240,234,217,.4);
}
.barcode{ position:absolute; left:50%; transform: translateX(-50%) rotate(-1deg); bottom:16%; width:52%; }
.barcode__bars{
  height: calc(9*var(--u));
  background: repeating-linear-gradient(to right,
    #efe9db 0 2px, transparent 2px 4px, #efe9db 4px 5px, transparent 5px 9px,
    #efe9db 9px 12px, transparent 12px 13px);
  opacity:.55;
}
.barcode__num{
  font-family:'PT Mono', monospace; font-size: calc(1.9*var(--u)); letter-spacing:.18em;
  color: rgba(240,234,217,.45); text-align:center; margin-top: calc(.8*var(--u));
}

/* форзац */
.flyleaf{ padding-top: calc(6*var(--u)); }
.flyleaf__pre{ font-family:'PT Mono', monospace; font-size: calc(2.1*var(--u)); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-pale); margin-bottom: calc(1.4*var(--u)); }
.flyleaf__name{
  font-family:'Caveat', cursive; font-weight:700; font-size: calc(11*var(--u)); line-height:1;
  margin:0 0 calc(.6*var(--u)); color:#22415e; transform: rotate(-2deg);
  border-bottom: calc(.3*var(--u)) solid rgba(34,65,94,.25); display:inline-block; padding: 0 calc(2*var(--u)) calc(1*var(--u)) 0;
}
.flyleaf__line{ font-family:'Caveat', cursive; font-size: calc(3.6*var(--u)); color:var(--ink-soft); margin-bottom: calc(4*var(--u)); }
.flyleaf__fields div{ display:flex; gap: calc(1.4*var(--u)); margin-bottom: calc(1.8*var(--u)); align-items:baseline; }
.flyleaf__fields b{ font-size: calc(1.95*var(--u)); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-pale); font-weight:600; min-width: calc(19*var(--u)); }
.flyleaf__fields span{ font-family:'Caveat', cursive; font-size: calc(3.5*var(--u)); color:#22415e; border-bottom: 1px dotted rgba(34,65,94,.35); flex:1; }
.flyleaf__found{ margin-top: calc(5*var(--u)); font-size: calc(2.1*var(--u)); color:var(--ink-soft); max-width:82%; }

/* ===================== HUD ===================== */
/* записка «написать» на столе */
.cta{
  position:absolute; left: calc(5*var(--u)); bottom: calc(5*var(--u));
  display:flex; align-items:center; gap: calc(1.8*var(--u));
  width: calc(40*var(--u));
  padding: calc(2.3*var(--u)) calc(2.6*var(--u));
  background: linear-gradient(158deg, #ffeb95 0%, #f7dc6c 48%, #eec94a 100%);
  color:#4a3f1e; text-decoration:none;
  transform: rotate(-3.2deg);
  box-shadow:
    calc(.8*var(--u)) calc(1.6*var(--u)) calc(2.8*var(--u)) rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .2s ease, box-shadow .2s ease;
  z-index: 30;
}
.cta::after{ /* загнутый уголок */
  content:''; position:absolute; right:0; bottom:0;
  border: calc(1.6*var(--u)) solid transparent;
  border-right-color: rgba(0,0,0,.13); border-bottom-color: rgba(0,0,0,.13);
}
.cta:hover, .cta:focus-visible{
  transform: rotate(-1.2deg) translateY(calc(-.5*var(--u)));
  box-shadow: calc(.8*var(--u)) calc(2.2*var(--u)) calc(3.6*var(--u)) rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
.cta__pin{
  position:absolute; left: calc(2.2*var(--u)); top: calc(-1.5*var(--u));
  width: calc(3.4*var(--u)); height: calc(3.4*var(--u)); border-radius:50%;
  background: radial-gradient(circle at 34% 30%, #f4776a, #a5271a 72%);
  box-shadow: 0 calc(.5*var(--u)) calc(1*var(--u)) rgba(0,0,0,.5);
}
.cta__ico{ width: calc(4.6*var(--u)); height: calc(4.6*var(--u)); flex:0 0 auto; color:#8a6a12; }
.cta__ico svg{ width:100%; height:100%; display:block; }
.cta__text b{
  display:block; font-family:'Caveat', cursive; font-weight:700;
  font-size: calc(3.2*var(--u)); line-height:1.06;
}
.cta__text i{
  display:block; font-style:normal; font-family:'PT Mono', monospace;
  font-size: calc(1.95*var(--u)); letter-spacing:.1em; color:#7d6c34; margin-top: calc(.3*var(--u));
}

/* подсказка про свайп: только на телефоне и только пока дневник закрыт */
.swipe{
  position:absolute; left:50%; z-index: 29;
  top: calc(50% + var(--ph) / 2 + 2 * var(--u));
  transform: translateX(-50%);
  display:none; flex-direction:column; align-items:center; gap: calc(.4*var(--u));
  color: rgba(238,228,203,.72); text-align:center;
  pointer-events:none;
  transition: opacity .4s ease, transform .4s ease;
}
.swipe__row{ display:flex; align-items:center; gap: calc(1.6*var(--u)); }
.swipe__txt{ font-family:'Caveat', cursive; font-size: calc(3.8*var(--u)); line-height:1; }
.swipe__sub{
  font-family:'Manrope', sans-serif; font-size: calc(2*var(--u));
  color: rgba(238,228,203,.5); letter-spacing:.02em;
}
.swipe__arr{ width: calc(6.2*var(--u)); height: auto; opacity:.55; }
.swipe__arr--l{ animation: swl 2.6s ease-in-out infinite; }
.swipe__arr--r{ animation: swr 2.6s ease-in-out infinite; }
@keyframes swl{
  0%, 55%, 100%{ transform: translateX(0); opacity:.4 }
  25%{ transform: translateX(calc(-1.4*var(--u))); opacity:.95 }
}
@keyframes swr{
  0%, 55%, 100%{ transform: translateX(0); opacity:.4 }
  25%{ transform: translateX(calc(1.4*var(--u))); opacity:.95 }
}
.is-open .swipe{ opacity:0; transform: translateX(-50%) translateY(calc(1*var(--u))); }

/* понятный первый шаг: на компьютере это заметнее, чем молчаливая обложка */
.open-book{
  position:absolute; left:50%; z-index:31;
  top:calc(50% + var(--ph) / 2 + 2.4 * var(--u));
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:calc(1.6*var(--u));
  min-width:calc(42*var(--u));
  padding:calc(1.15*var(--u)) calc(2.4*var(--u));
  appearance:none; border:1px solid rgba(235,224,192,.28); border-radius:999px;
  color:#f4ead2; background:rgba(22,27,25,.78);
  box-shadow:0 calc(.8*var(--u)) calc(2*var(--u)) rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  font:inherit; text-align:left; cursor:pointer;
  transition:opacity .25s ease, transform .25s ease, background .2s ease, visibility .25s;
}
.open-book:hover, .open-book:focus-visible{ background:rgba(35,44,39,.94); }
.open-book__arrow{
  display:grid; place-items:center; width:calc(4.7*var(--u)); height:calc(4.7*var(--u));
  border-radius:50%; background:rgba(233,207,107,.18); color:#f2da86;
  font-family:'PT Mono', monospace; font-size:calc(3.3*var(--u)); line-height:1;
}
.open-book__copy b{ display:block; font-family:'Caveat', cursive; font-size:calc(3.6*var(--u)); line-height:1; }
.open-book__copy small{ display:block; margin-top:calc(.35*var(--u)); font-size:calc(1.7*var(--u)); letter-spacing:.015em; color:rgba(244,234,210,.68); }
.open-book__copy .open-book__mobile{ display:none; }
.is-open .open-book{ opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(calc(1.1*var(--u))); }

.mobile-nav{ display:none; }

.toast{
  position:absolute; left:50%; bottom: calc(14*var(--u)); z-index: 36;
  transform: translateX(-50%) translateY(calc(1*var(--u)));
  max-width: 80vw; text-align:center;
  padding: calc(1.2*var(--u)) calc(2.4*var(--u));
  border-radius: 999px;
  background: rgba(28,32,30,.9);
  color:#f0e7d2; font-family:'Caveat', cursive; font-size: calc(3.2*var(--u));
  box-shadow: 0 calc(.8*var(--u)) calc(2*var(--u)) rgba(0,0,0,.5), inset 0 0 0 1px rgba(226,214,183,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.toast.is-on{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }

/* ===================== КНОПКА «В НАЧАЛО» ===================== */
.to-start{
  position:absolute; left:50%; bottom: calc(3*var(--u)); z-index: 33;
  transform: translateX(-50%) translateY(calc(1.6*var(--u)));
  display:inline-flex; align-items:center; gap: calc(1.2*var(--u));
  appearance:none; border:0; cursor:pointer;
  font-family:'Caveat', cursive; font-weight:600; font-size: calc(3.5*var(--u));
  color:#f0e7d2; background: rgba(28,32,30,.86);
  padding: calc(1.2*var(--u)) calc(2.6*var(--u));
  border-radius: 999px;
  box-shadow: 0 calc(.8*var(--u)) calc(2*var(--u)) rgba(0,0,0,.5), inset 0 0 0 1px rgba(226,214,183,.18);
  opacity:0; visibility:hidden;
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.to-start svg{ width: calc(2.8*var(--u)); height: calc(2.8*var(--u)); }
.is-end .to-start{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.to-start:active{ transform: translateX(-50%) scale(.96); }

:focus-visible{ outline: calc(.3*var(--u)) solid rgba(191,68,54,.75); outline-offset: calc(.3*var(--u)); }

/* ===================== БЕЗ JS ===================== */
.pages-src{ display:none; }
.no-js .stage{ display:none; }
.no-js .pages-src{
  display:block; max-width: 46rem; margin:0 auto; padding: 2rem 1.2rem 6rem;
  background: var(--paper);
}
.no-js .page{ position:relative; inset:auto; padding: 1.6rem 0; font-size: 1rem; }
.no-js .page--cover{ min-height: 40vh; }
.no-js .note, .no-js .stamp, .no-js .tape, .no-js .clip{ display:none; }
.no-js .to-start, .no-js .swipe{ display:none; }

/* ===================== МОБИЛЬНОЕ ===================== */
@media (max-width: 780px), (hover: none) and (pointer: coarse) and (max-width: 1024px){
  /* Телефон — отдельный режим приложения: документ не прокручивается,
     листание происходит только внутри полноэкранной сцены. */
  html, body{
    width:100%; height:100%; overflow:hidden;
    overscroll-behavior:none;
  }
  body{ position:fixed; inset:0; }
  .stage{ touch-action:pan-x pinch-zoom; overscroll-behavior:none; }
  :root{
    /* Нижний dock состоит из управления дневником, компактной приватности
       и контакта. Сцена резервирует это место, поэтому элементы никогда не
       перекрывают книгу — ни на коротком, ни на высоком телефоне. */
    --mobile-safe-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    --mobile-row-h: clamp(52px, 8svh, 60px);
    --mobile-gap: clamp(16px, 2.2svh, 20px);
    --mobile-privacy-h: 28px;
    --mobile-privacy-gap: 6px;
    --mobile-book-clearance: clamp(18px, 3svh, 24px);
    --mobile-dock-h: calc(
      var(--mobile-safe-bottom) + var(--mobile-row-h) +
      var(--mobile-privacy-gap) + var(--mobile-privacy-h) +
      var(--mobile-gap) + var(--mobile-row-h)
    );
    /* Чуть шире обычной тетради: на телефоне обложка выглядит крупнее и
       читается лучше, но всё ещё оставляет безопасные поля по краям. */
    --ratio: .72;
    /* svh не прыгает при скрытии мобильной адресной строки */
    --ph: min(
      70svh,
      132vw,
      620px,
      calc(100svh - var(--mobile-dock-h) - var(--mobile-book-clearance))
    );
    --bookw: var(--pw);
  }
  /* Нативная карусель: браузер сам ведёт палец и фиксирует экран ровно
     на следующем листе. Это устойчивее самодельных drag-обработчиков. */
  .leaves{
    display:flex; overflow-x:auto; overflow-y:hidden;
    transform-style:flat; isolation:isolate;
    scroll-snap-type:x mandatory; scroll-snap-stop:always;
    scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; touch-action:pan-x pinch-zoom;
    scrollbar-width:none;
  }
  .leaves::-webkit-scrollbar{ display:none; }
  .leaf{
    position:relative; top:auto; left:auto;
    width:100%; height:100%; flex:0 0 100%;
    scroll-snap-align:start; scroll-snap-stop:always;
    transform-style:flat;
    transform:none !important; opacity:1 !important;
    visibility:visible !important; pointer-events:auto !important;
    z-index:auto !important; transition:none;
  }
  .leaf__face--front{ border-radius:calc(1.2*var(--u)); }
  .leaf__face--back{ display:none; }
  .stack--left{ display:none; }
  .stack--right, .cast--right, .cast--left, .gutter, .ribbon{ display:none; }
  .book__shadow{ left:-2%; right:-2%; }
  .page{ font-size: calc(2.7*var(--u)); padding: 7.5% 7.5% 15% 15%; }
  .leaf__face--back .page{ padding: 7.5% 15% 15% 7.5%; }
  .p-title{ font-size: calc(7.6*var(--u)); margin-bottom: calc(3.6*var(--u)); }
  .flyleaf__fields div{ gap:calc(.9*var(--u)); align-items:flex-start; }
  .flyleaf__fields b{ min-width:calc(15*var(--u)); font-size:calc(1.8*var(--u)); }
  .flyleaf__fields span{
    min-width:0; overflow-wrap:anywhere;
    font-size:calc(3.15*var(--u)); line-height:1.18;
  }
  .checks li, .boxes li{ padding-left: calc(4.6*var(--u)); }
  .postit--flow{
    float:none; width:auto; min-height:0; transform: rotate(-1deg);
    margin: calc(.6*var(--u)) 0 calc(1.8*var(--u));
    padding: calc(1.4*var(--u)) calc(1.8*var(--u));
    font-size: calc(2.9*var(--u));
  }
  .postit--flow .doodle{ display:none; }
  .pnum{ right: 9%; bottom: calc(4*var(--u)); }
  .leaf__face--back .pnum{ left: 9%; }
  .tabs{ display:none; }
  .swipe{ display:none; }
  /* На iOS/Android абсолютные потомки fixed-сцены могут смещаться вместе
     с прокруткой документа. Фиксируем все мобильные слои к viewport, чтобы
     открытая страница и элементы управления не «уплывали» за верх экрана. */
  .desk, .scene, .open-book, .mobile-nav, .cta, .toast, .to-start{
    position:fixed;
  }
  /* Книга всегда остаётся в одном и том же свободном поле. Нельзя менять
     выравнивание при первом открытии: иначе дневник визуально «уезжает». */
  .scene{
    inset:0 0 calc(var(--mobile-dock-h) + var(--mobile-book-clearance)) 0;
    align-items:center;
  }
  .book{ will-change:auto; }
  .leaf{ will-change:auto; }
  .cast{ display:none; }
  .open-book{
    top:auto;
    bottom:calc(
      var(--mobile-safe-bottom) + var(--mobile-row-h) +
      var(--mobile-privacy-gap) + var(--mobile-privacy-h) + var(--mobile-gap)
    );
    width:min(88vw, calc(57*var(--u))); min-width:0;
    height:var(--mobile-row-h); min-height:44px; box-sizing:border-box;
    justify-content:center; padding:calc(1.35*var(--u)) calc(2*var(--u));
  }
  .open-book__desktop{ display:none !important; }
  .open-book__copy .open-book__mobile{ display:block !important; }
  .open-book__copy b{ font-size:max(16px, calc(4.1*var(--u))); }
  .open-book__copy small{ font-size:max(10px, calc(2.05*var(--u))); line-height:1.2; }
  .mobile-nav{
    left:50%; bottom:calc(
      var(--mobile-safe-bottom) + var(--mobile-row-h) +
      var(--mobile-privacy-gap) + var(--mobile-privacy-h) + var(--mobile-gap)
    ); z-index:34;
    width:min(88vw, calc(58*var(--u))); transform:translateX(-50%);
    height:var(--mobile-row-h);
    align-items:center; gap:8px;
  }
  .is-open .mobile-nav{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); }
  .mobile-nav button{
    flex:1 1 0; min-height:var(--mobile-row-h); height:100%;
    padding:6px 8px;
    appearance:none; border:1px solid rgba(235,224,192,.23); border-radius:999px;
    background:rgba(23,29,27,.84); color:#f3e9d3;
    font-family:'Caveat', cursive; font-size:max(16px, calc(3.35*var(--u))); font-weight:700;
    cursor:pointer; box-shadow:0 calc(.5*var(--u)) calc(1.4*var(--u)) rgba(0,0,0,.32);
  }
  .mobile-nav button:active{ transform:scale(.97); }
  .mobile-nav button:disabled{ opacity:.38; cursor:default; }
  .mobile-progress{
    display:flex; min-width:44px; flex-direction:column; align-items:center;
    color:#f3e9d3; text-align:center; line-height:1;
  }
  .mobile-progress__count{ display:flex; align-items:baseline; gap:2px; }
  .mobile-progress b{ font-family:'Caveat', cursive; font-size:22px; }
  .mobile-progress i{ font-style:normal; opacity:.5; font-size:13px; }
  .mobile-progress span span{ font-size:12px; opacity:.7; }
  .mobile-progress small{
    margin-top:2px; white-space:nowrap; font-family:'PT Mono', monospace;
    font-size:8px; letter-spacing:.02em; color:rgba(243,233,211,.68);
  }
  /* на телефоне поля по бокам нет: оставляем только то, что не лезет под книгу */
  .prop--mug, .prop--papers, .prop--clips, .prop--pen, .prop--pencil{ display:none; }
  .prop--ring{ left: 3vw; top: 3vh; width: calc(26*var(--u)); height: calc(26*var(--u)); opacity:.3; }
  .cta{
    left:50%; bottom:var(--mobile-safe-bottom);
    transform: translateX(-50%) rotate(-1.2deg);
    width: min(88vw, calc(52*var(--u)));
    height:var(--mobile-row-h); min-height:44px; box-sizing:border-box;
    padding: calc(1.7*var(--u)) calc(2.4*var(--u));
    justify-content:center; gap: calc(1.6*var(--u));
  }
  .cta:hover, .cta:focus-visible{ transform: translateX(-50%) rotate(-1.2deg); }
  .cta__pin{ display:none; }
  .cta__text b{ font-size:max(16px, calc(3.9*var(--u))); }
  .cta__text i{ font-size:max(10px, calc(1.95*var(--u))); }
  .to-start{ display:none; }
  /* Эта страница была единственной, где нижний отступ попадал под обрезку. */
  .page[data-nav="Опыт"]{ padding-bottom:8%; }
  .postit--p2{ width: calc(28*var(--u)); font-size: calc(3.2*var(--u)); }
  .note{ font-size: calc(3*var(--u)); max-width: 60%; }
}


@media (prefers-reduced-motion: reduce){
  .swipe__arr--l, .swipe__arr--r{ animation:none; }
}

/* Статистика не меняет геометрию дневника: это отдельный fixed-слой. */
.analytics-consent[hidden], .analytics-settings[hidden]{ display:none; }
.analytics-consent{
  position:fixed; z-index:60;
  top:max(12px, env(safe-area-inset-top)); left:50%;
  width:min(92vw, 440px); transform:translateX(-50%);
  padding:16px;
  border:1px solid rgba(235,224,192,.28); border-radius:16px;
  background:rgba(22,27,25,.97); color:#f3e9d3;
  box-shadow:0 14px 38px rgba(0,0,0,.42);
  font-family:'Manrope', sans-serif;
}
.analytics-consent__eyebrow{
  margin:0 0 4px; color:#d7bd63;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.analytics-consent h2{
  margin:0; font-family:'Caveat', cursive; font-size:27px; line-height:1.02; font-weight:700;
}
.analytics-consent p:not(.analytics-consent__eyebrow){
  margin:8px 0 0; color:rgba(243,233,211,.78); font-size:12px; line-height:1.5;
}
.analytics-consent a{
  display:inline-block; margin-top:8px; color:#f3e9d3;
  font-size:11px; text-underline-offset:3px;
}
.analytics-consent__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:13px; }
.analytics-consent button, .analytics-settings{
  appearance:none; border:1px solid rgba(235,224,192,.28); border-radius:999px;
  min-height:36px; padding:8px 13px; cursor:pointer;
  font:700 11px/1 'Manrope', sans-serif;
}
.analytics-consent__decline{ background:transparent; color:#f3e9d3; }
.analytics-consent__grant{ border-color:#d7bd63 !important; background:#d7bd63; color:#25261f; }
.analytics-consent button:focus-visible, .analytics-settings:focus-visible{
  outline:2px solid #f3e9d3; outline-offset:2px;
}
.analytics-settings{
  position:fixed; z-index:60;
  top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right));
  background:rgba(22,27,25,.84); color:#f3e9d3;
  box-shadow:0 6px 18px rgba(0,0,0,.26);
}
@media (max-width:780px){
  .analytics-consent{ padding:14px; }
  .analytics-consent h2{ font-size:25px; }
  .analytics-settings{
    top:auto; right:auto; left:50%;
    bottom:calc(var(--mobile-safe-bottom) + var(--mobile-row-h) + var(--mobile-privacy-gap));
    transform:translateX(-50%);
    min-height:var(--mobile-privacy-h); padding:5px 10px;
    font-size:9px; letter-spacing:.01em;
    background:rgba(22,27,25,.72);
  }
}