/* Редакційний шар: об'єм, перспектива, фешн-подача. Кольору в палітрі немає,
   тому глибину дають три речі — масштаб шрифту, перспектива обкладинок і шарувата тінь. */

/* ── Обкладинка як предмет ───────────────────────────────────────────── */
.cover{
  position:relative;border-radius:3px 6px 6px 3px;overflow:hidden;
  background:var(--wash);
  /* три тіні замість однієї: контактна, м'яка і далека — так лежить справжній предмет */
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 22px rgba(0,0,0,.09), 0 34px 68px rgba(0,0,0,.10);
}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
/* корінець: світла смуга з тінню біля згину */
.cover::before{
  content:"";position:absolute;inset:0 auto 0 0;width:14px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,.06) 45%,rgba(255,255,255,.34) 78%,rgba(255,255,255,0));
}
/* блик по крейдованому паперу */
.cover::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(107deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.20) 47%,rgba(255,255,255,0) 58%);
  transform:translateX(-30%);transition:transform 1.1s cubic-bezier(.3,.7,.4,1);
}
.cover:hover::after,.cover.is-touch::after{transform:translateX(30%)}

.stagey{perspective:1500px;perspective-origin:50% 45%}
.cover--3d{transform:rotateY(-15deg) rotateX(3deg) translateZ(0);transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s ease}
.cover--3d:hover{transform:rotateY(-6deg) rotateX(1deg) translateY(-10px)}

/* ── Герой ───────────────────────────────────────────────────────────── */
.hero2{position:relative;padding-block:clamp(120px,17vh,180px) clamp(48px,7vw,90px);overflow:clip;
  display:block;min-height:0;text-align:left}
@media (max-width:880px){.hero2{text-align:center}}
.hero2__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:880px){.hero2__grid{grid-template-columns:1fr;text-align:center}}

.hero2__mark{font-size:clamp(38px,6.4vw,104px);letter-spacing:.05em;line-height:.86;margin:0;white-space:nowrap}
/* Назва в два рядки — так її затвердила власниця, і так вона не заходить під обкладинки:
   в один рядок на 1440 «MAGAZINE» перекривався стосом і читався як поламана вёрстка. */
.hero2__mark span{display:block;opacity:0;transform:translateY(.16em);
  transition:opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1)}
.hero2__mark span:nth-child(2){transition-delay:.13s}
@media (prefers-reduced-motion:reduce){.hero2__mark span{opacity:1;transform:none;transition:none}}
.hero2__mark span:first-child{font-size:.62em;letter-spacing:.16em;margin-left:.06em}
.hero2__claim{font-family:"Playfair Display",Georgia,serif;font-size:clamp(24px,3.4vw,44px);line-height:1.1;margin:22px 0 0;color:var(--ink)}
.hero2__note{margin-top:18px;max-width:44ch}
@media (max-width:880px){.hero2__note{margin-inline:auto}}
.hero2__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media (max-width:880px){.hero2__acts{justify-content:center}}

.hero2__stage{position:relative;aspect-ratio:3/4;max-width:420px;margin-inline:auto;width:100%}
.hero2__stage .cover{position:absolute;inset:0}
.hero2__stage .cover:nth-child(1){transform:translate(-13%,4%) rotate(-7deg) scale(.86);opacity:.5;filter:grayscale(.35)}
.hero2__stage .cover:nth-child(2){transform:translate(9%,-3%) rotate(5deg) scale(.9);opacity:.72}
.hero2__stage .cover:nth-child(3){z-index:2}
.hero2__stage .cover{transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .9s ease}

/* ── Рядок, що біжить ────────────────────────────────────────────────── */
.tick{border-block:1px solid var(--line);padding:14px 0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tick__in{display:inline-flex;gap:0;will-change:transform;animation:tick 34s linear infinite}
.tick:hover .tick__in{animation-play-state:paused}
.tick span{font-family:"Playfair Display",Georgia,serif;font-size:clamp(15px,1.7vw,20px);color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;padding-inline:26px}
.tick span::after{content:"·";margin-left:26px;color:var(--ink-4)}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.tick__in{animation:none}}

/* ── Полиця обкладинок ───────────────────────────────────────────────── */
.shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);align-items:end}
@media (max-width:900px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shelf .cover{aspect-ratio:3/4}
.shelf .cover:nth-child(odd){transform:translateY(-14px)}
.shelf .cover{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}
.shelf .cover:hover,.shelf .cover.is-touch{transform:translateY(-26px) scale(1.03)}

/* ── Великі числа ────────────────────────────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
@media (max-width:820px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fig{border-top:1px solid var(--ink);padding-top:16px}
.fig__n{font-family:"Playfair Display",Georgia,serif;font-size:clamp(44px,7vw,92px);line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fig__t{margin-top:10px;font-size:13.5px;color:var(--ink-3);line-height:1.45}

/* ── Асиметричні причини ─────────────────────────────────────────────── */
.reasons{display:grid;gap:clamp(28px,4vw,54px)}
.reason{display:grid;grid-template-columns:minmax(0,88px) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:start;padding-bottom:clamp(28px,4vw,44px);border-bottom:1px solid var(--line-2)}
.reason:last-child{border-bottom:0;padding-bottom:0}
@media (max-width:620px){.reason{grid-template-columns:1fr;gap:10px}}
.reason__n{font-family:"Playfair Display",Georgia,serif;font-size:clamp(40px,6vw,76px);line-height:.9;color:var(--line);letter-spacing:-.03em}
.reason h3{font-size:clamp(21px,2.7vw,32px);max-width:22ch}
.reason p{margin-top:12px;max-width:62ch}
@media (min-width:900px){.reason{grid-template-columns:minmax(0,110px) minmax(0,1.1fr) minmax(0,1fr);align-items:baseline}
 .reason p{margin-top:0}}

/* ── Стос журналів у калькуляторі ────────────────────────────────────── */
.stack{position:relative;height:clamp(240px,30vw,310px);margin:2px 0 22px;perspective:900px}
.stack__box{position:absolute;left:50%;bottom:8px;translate:-50% 0;width:min(210px,62%);transform-style:preserve-3d}
.stack__l{position:absolute;left:0;right:0;bottom:0;height:7px;border-radius:2px;background:linear-gradient(180deg,#fff,#ececec 60%,#dcdcdc);border:1px solid #e1e1e1;box-shadow:0 1px 1px rgba(0,0,0,.05);transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s ease}
.stack__top{position:absolute;left:0;right:0;bottom:0;aspect-ratio:3/4;border-radius:3px 5px 5px 3px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.07),0 16px 30px rgba(0,0,0,.12),0 40px 70px rgba(0,0,0,.10);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.stack__top img{width:100%;height:100%;object-fit:cover;display:block}
.stack__more{position:absolute;right:0;bottom:0;font-size:12px;color:var(--ink-4);letter-spacing:.08em}

/* ── Фінал з віялом ──────────────────────────────────────────────────── */
.fan{position:relative;height:clamp(220px,30vw,320px);margin:0 auto clamp(24px,4vw,44px);max-width:560px;perspective:1400px}
.fan .cover{position:absolute;bottom:0;left:50%;width:clamp(120px,20vw,180px);aspect-ratio:3/4;transform-origin:50% 100%}
.fan .cover:nth-child(1){transform:translateX(-50%) rotate(-16deg) translateX(-72%)}
.fan .cover:nth-child(2){transform:translateX(-50%) rotate(-6deg) translateX(-24%)}
.fan .cover:nth-child(3){transform:translateX(-50%) rotate(4deg) translateX(28%);z-index:2}
.fan .cover:nth-child(4){transform:translateX(-50%) rotate(14deg) translateX(76%)}