/* ─── готика для «Сайт»: цифри й латина з Grenze Gotisch, кирилиця з
   Ruslan Display. Тримаємо у себе — політика безпеки чужі шрифти не пустить. ─── */
@font-face{font-family:Grenze;src:url(/z/font/grenze-latin-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122;
  font-weight:400;font-display:swap}
@font-face{font-family:Grenze;src:url(/z/font/grenze-latin-600.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122;
  font-weight:600;font-display:swap}
@font-face{font-family:Ruslan;src:url(/z/font/ruslan-cyrillic-400.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:Ruslan;src:url(/z/font/ruslan-latin-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+20AC,U+2122;font-display:swap}

/* ═══════════════════════════════════════════════════════════════════
   Сайт убрання — другий вигляд бренду. Не сайт: ані шапки, ані героя
   з кнопкою, ані сітки карток, ані підвалу. Аркуш книги на весь екран.
   Світло ходить своїми маршрутами ЗА фігурою і ЗА написом — саме з цього
   й береться відчуття обʼєму.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:Prata;src:url(/assets/fonts/prata-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:Prata;src:url(/assets/fonts/prata-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;font-display:swap}
@font-face{font-family:Onest;src:url(/assets/fonts/onest-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-weight:300 700;font-display:swap}
@font-face{font-family:Onest;src:url(/assets/fonts/onest-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;font-weight:300 700;font-display:swap}

:root{
  --ink:#05060a;
  --bone:#ded6c9; --bone-dim:#a89e90;
  --gold:#c9a44e; --gold-hi:#f0d98e;
  --acc:#ff6a24; --acc-soft:rgba(255,106,36,.5);
  --sky1:#141a28; --sky2:#05060a;
  --px:0; --py:0; --lx:50vw; --ly:45vh;
  --turn:900ms; --ease:cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink)}
body{font-family:Onest,system-ui,sans-serif;color:var(--bone);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ─── над усім: зерно плівки і вінʼєтка ─── */
.grain{position:fixed;inset:-22%;z-index:60;pointer-events:none;opacity:.26;
  background:url(/z/img/grain.png) repeat;animation:grainShift 2.6s steps(3,end) infinite}
@keyframes grainShift{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-2%,1%,0)}
  50%{transform:translate3d(1%,-2%,0)}75%{transform:translate3d(-1%,-1%,0)}100%{transform:translate3d(0,0,0)}}
.vig{position:fixed;inset:0;z-index:58;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 40%,rgba(2,3,6,.6) 100%)}
.dust{position:fixed;inset:0;z-index:34;pointer-events:none}

/* ─── чорнильна завіса перегортання ─── */
.wipe{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0}
.wipe svg{width:100%;height:100%;display:block}
.wipe path{fill:#04050a}
.wipe.on{opacity:1}

/* ═══ аркуш ═══ */
.tome{position:fixed;inset:0}
.leaf{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity var(--turn) var(--ease),transform var(--turn) var(--ease),filter var(--turn) var(--ease);
  transform:scale(1.06);filter:blur(12px) brightness(.6)}
.leaf.on{opacity:1;visibility:visible;transform:scale(1);filter:none}
.leaf.was{opacity:0;transform:scale(.94);filter:blur(16px) brightness(.4)}
/* на схованих аркушах анімації стоять — інакше вісім розворотів гріють процесор */
.leaf:not(.on):not(.was) *{animation-play-state:paused!important}

/* Порядок шарів. Світло (.lamp) мусить бути НИЖЧЕ фігури і напису — саме тому
   воно проходить за ними і дає глибину. Туман — між далеким і близьким планом,
   інакше своїм screen-режимом стирає світила в сіру пляму. */
.sky,.plate{z-index:0}
.orb,.beam,.bolt{z-index:1}
.r-far,.r-mid,.mono,.cyp,.tree,.castle,.water{z-index:2}
.fog{z-index:3}
.r-near,.rift{z-index:4}
.lamp{z-index:5}
.word.behind{z-index:6}
.stage{z-index:7}
.word{z-index:8}
.fore{z-index:9}

.sky{position:absolute;inset:0;
  background:radial-gradient(130% 90% at 50% 96%,var(--sky1) 0%,var(--sky2) 62%,var(--ink) 100%)}

/* фотоплита далекого плану: чуже фото, зведене в нашу палітру */
.plate{position:absolute;inset:-6% -8%;background-position:center;background-size:cover;
  opacity:.5;filter:contrast(1.05);
  transform:scale(1.03)}
.plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,6,10,.46) 0%,rgba(5,6,10,.08) 44%,rgba(5,6,10,.88) 100%)}

/* світило: ядро окремо, сяйво окремо — жодних видимих меж кола */
.orb{position:absolute;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--orb,var(--acc)) 0%,var(--orb-soft,var(--acc-soft)) 18%,rgba(0,0,0,0) 58%);
  animation:breathe 7s ease-in-out infinite;
  }
.orb i{position:absolute;left:50%;top:50%;width:30%;height:30%;margin:-15% 0 0 -15%;
  border-radius:50%;background:radial-gradient(circle,var(--orb-hi,#fff7e6) 0%,var(--orb-mid,#ffd694) 52%,var(--orb,var(--acc)) 100%);
  box-shadow:0 0 34px 6px var(--orb-soft,var(--acc-soft))}
.orb.soft i{display:none}
@keyframes breathe{0%,100%{opacity:.9}50%{opacity:1}}

/* стовп світла — розмитий конус без меж */
.beam{position:absolute;transform-origin:50% 0;pointer-events:none;
  background:linear-gradient(to bottom,var(--acc) 0%,var(--acc-soft) 34%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%,#000 58%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 42%,#000 58%,transparent);
  filter:blur(14px);animation:beamPulse 5.5s ease-in-out infinite}
@keyframes beamPulse{0%,100%{opacity:.8;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.18)}}
.rift{position:absolute;width:2px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--acc) 22%,var(--acc) 78%,transparent);
  box-shadow:0 0 26px 6px var(--acc-soft);animation:riftBreath 4.2s ease-in-out infinite}
@keyframes riftBreath{0%,100%{opacity:.7;width:2px}50%{opacity:1;width:3px}}

/* блискавка */
/* Смуги стоять готові, але з нульовою непрозорістю: до удару блискавки на
   екрані немає. Спалах розігрує код — так пауза щоразу інша, а не рівна
   по колу, як була б у нескінченної анімації. */
.bolts{position:absolute;inset:0;pointer-events:none;z-index:1}
.bolt{position:absolute;top:-4%;height:78%;width:clamp(120px,13vw,200px);
  margin-left:calc(clamp(120px,13vw,200px) / -2);pointer-events:none;opacity:0}
.bolt path{fill:none;stroke:#eaf2ff;stroke-width:2;
  filter:drop-shadow(0 0 10px rgba(190,215,255,.95)) drop-shadow(0 0 28px rgba(140,180,255,.5))}
/* відсвіт грози по всій сцені */
.flash{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(120% 80% at 50% 0%,rgba(190,215,255,.5),rgba(120,150,210,.12) 46%,transparent 74%)}

/* силуети світу */
.sil{position:absolute;left:-6%;right:-6%;bottom:0;width:112%;overflow:visible;pointer-events:none}
.sil path,.sil line,.sil circle,.sil ellipse,.sil rect{fill:currentColor;stroke:none}
.sil.stroke path{fill:none;stroke:currentColor;stroke-linecap:round}
.sil.branches line{fill:none;stroke:currentColor;stroke-linecap:round}
.r-far{color:#0d1220;opacity:.95;}
.r-mid{color:#090c17;}
.r-near{color:#05070d;}
/* Руїни колон. Кожна — окреме полотно зі своїми пропорціями: на спільному
   розтягнутому полотні їх сплющувало по висоті, і читались вони плямами. */
.col{bottom:0;
  filter:drop-shadow(0 0 18px rgba(150,178,225,.22))}
/* Камінь трохи світліший за небо і з виразнішим ребром: у темному силуеті
   без цього колона зливається з ніччю і читається як стовпчик паркану. */
.col path{fill:#111827;stroke:#aebfdc;stroke-width:1;stroke-opacity:.28;
  vector-effect:non-scaling-stroke}
/* каннелюри — тонкі борозни, саме вони кажуть оку «колона», а не «стовп» */
.col path.fl{fill:none;stroke:#aebfdc;stroke-opacity:.22;stroke-width:1}
.cyp{color:#070a12;}
.tree{color:#0b1410;}
.tree ellipse{fill:#0b1510;opacity:.96}
.tree ellipse.b{fill:#07100b;opacity:.98}
.tree line{stroke:#2c2a20}
.fore{color:#04060c;
  animation:sway 11s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(to top,#000 34%,rgba(0,0,0,.45) 72%,transparent 100%);
          mask-image:linear-gradient(to top,#000 34%,rgba(0,0,0,.45) 72%,transparent 100%)}
@keyframes sway{0%,100%{transform:skewX(0deg)}50%{transform:translateX(5px) skewX(-.7deg)}}

/* ─── замок на обрії ───
   Стояв низом на самому краю аркуша, а лінія пагорбів на фотоплиті вища —
   тому правий нижній кут замку опинявся НИЖЧЕ пагорба і висів у повітрі.
   Тепер, по-перше, підіймаємо його на висоту гір (--cb), по-друге,
   розчиняємо низ у серпанку: так основа не має різаного краю взагалі. */
.castle{position:absolute;bottom:var(--cb,11vh);pointer-events:none;
  
  -webkit-mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.5) 9%,#000 20%);
          mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.5) 9%,#000 20%)}
.castle .stone{fill:#0a0f1a}
.castle .win{fill:var(--gold-hi);opacity:.75;animation:winFlick 5s ease-in-out infinite}
.castle .win:nth-of-type(2n){animation-duration:7.5s;animation-delay:-2s}
.castle .win:nth-of-type(3n){animation-duration:9s;animation-delay:-4s}
@keyframes winFlick{0%,100%{opacity:.28}50%{opacity:.9}}

/* туман */
.fog{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.38}
/* розмиття тут найдорожче на сторінці: зменшено, бо через завантажений
   головний потік починав заїкатись звук */
.fog i{position:absolute;left:-42%;width:184%;height:60%;
  background:radial-gradient(60% 100% at 30% 50%,rgba(150,165,195,.16),transparent 70%),
             radial-gradient(50% 100% at 72% 45%,rgba(120,140,175,.13),transparent 72%);
  filter:blur(11px)}
.fog i:nth-child(1){bottom:4%;animation:drift 78s linear infinite}
.fog i:nth-child(2){bottom:22%;height:44%;opacity:.75;animation:drift 116s linear infinite reverse}
.fog i:nth-child(3){bottom:-6%;height:38%;opacity:.9;animation:drift 54s linear infinite}
@keyframes drift{from{transform:translate3d(-14%,0,0)}to{transform:translate3d(14%,0,0)}}

/* водяна площина */
.water{position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(140,160,200,.10) 0%,rgba(8,11,20,.55) 26%,rgba(4,5,10,.9) 100%)}
.water::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(170,190,225,.35),transparent)}

/* ═══ світло, що ходить своїми маршрутами ═══
   Головна річ аркуша: воно НИЖЧЕ фігури і напису, тому проходить за ними. */
.lamp{position:absolute;left:0;top:0;width:700px;height:700px;margin:-350px 0 0 -350px;
  pointer-events:none;mix-blend-mode:screen;will-change:transform;
  /* Заграва довкола приглушена — вона мусить лише виявляти те, повз що
     проходить, а не світити сама по собі. */
  background:radial-gradient(circle,rgba(170,200,255,.11) 0%,rgba(120,160,240,.06) 26%,
    rgba(90,130,220,.028) 46%,transparent 66%);
  animation:flicker 4.6s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.86}38%{opacity:1}61%{opacity:.8}}
/* саме тільце вогника: темніше й дрібніше, ніж було */
.lamp::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px;
  border-radius:50%;background:radial-gradient(circle,#eef4ff 0%,#a9c4f2 62%,#4c6cae 100%);
  box-shadow:0 0 9px 2px rgba(150,190,255,.7)}
/* окремий вузький ореол щільно навколо вогника — тонке кільце світла,
   якого не дає широка заграва */
.lamp::before{content:"";position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(190,214,255,.5) 0%,rgba(140,180,255,.22) 34%,
    rgba(110,150,240,.07) 58%,transparent 76%);
  animation:halo 4.6s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

/* ─── фігура в сукні ─── */
.stage{position:absolute;inset:0;
  }
/* Погойдування висить на ФОТО, а не на контейнері: у контейнера в
   перетворенні лежить центрування translateX(-50%), і анімація його
   затирала — постать з'їжджала вправо на півширини, а стрілка разом із
   нею вилітала за край екрана. */
.fig{position:absolute;bottom:var(--fb,0);height:74vh;width:var(--fw,160px);
  transition:width .55s cubic-bezier(.22,1,.28,1)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fig img{height:100%;width:auto;object-fit:contain;pointer-events:none}
/* тінь під ногами: без неї вирізана фігура читається як наліпка в повітрі */
.fig::after{content:"";position:absolute;left:50%;bottom:-8px;width:118%;height:44px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.72),transparent 72%);filter:blur(9px)}
.halo{position:absolute;bottom:var(--fb,0);pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(50% 46% at 50% 54%,var(--acc-soft) 0%,rgba(0,0,0,0) 70%);
  opacity:.5;filter:blur(24px)}
.reflect{position:absolute;height:38vh;opacity:.22;pointer-events:none;
  bottom:calc(var(--fb,0px) - 37vh);transform:translateX(-50%) scaleY(-1);filter:blur(3px);
  -webkit-mask-image:linear-gradient(to top,transparent 4%,#000 72%);
          mask-image:linear-gradient(to top,transparent 4%,#000 72%)}
.reflect img{height:100%;width:auto}

/* ─── напис аркуша ─── */
.word{position:absolute;pointer-events:none;max-width:min(38vw,560px);
  }
/* М'яка тінь під написом. Розводити світило й текст по різних половинах —
   це половина справи: позаду ще лежить фотоплита, і на світлій її ділянці
   текст однаково тоне. Тінь без країв і без рамки: по краях сходить у
   ніщо, тому читається як згущення темряви, а не як підкладка. */
.word::before{content:"";position:absolute;inset:-16% -22% -18% -22%;z-index:-1;
  pointer-events:none;
  background:radial-gradient(62% 58% at 28% 46%,rgba(4,6,12,.74) 0%,
    rgba(4,6,12,.42) 48%,rgba(4,6,12,0) 78%)}
.word.right::before{
  background:radial-gradient(62% 58% at 72% 46%,rgba(4,6,12,.74) 0%,
    rgba(4,6,12,.42) 48%,rgba(4,6,12,0) 78%)}
.word.behind::before{
  background:radial-gradient(64% 60% at 50% 44%,rgba(4,6,12,.7) 0%,
    rgba(4,6,12,.4) 50%,rgba(4,6,12,0) 80%)}
.word.mid{max-width:min(60vw,820px)}
.word.mid .frag,.word.mid .rule{margin-left:auto;margin-right:auto}
.word.mid .rule{width:min(32ch,38vw)}
/* Правий напис відсунуто від рейки: тепер назва активного аркуша завжди
   висунута, і без цього зазору вона лягала на заголовок. */
.word.right{right:clamp(130px,10.5vw,175px)!important;padding-right:0}
.word.right .frag{margin-left:auto}
.word.right .rule{margin-left:auto;width:min(26ch,30vw);
  background:linear-gradient(270deg,var(--gold),transparent);transform-origin:right}
.title{margin:0;font-family:Prata,serif;font-weight:400;line-height:.95;text-wrap:balance;
  font-size:clamp(2.3rem,6.6vw,6.6rem);letter-spacing:.03em;text-transform:uppercase;
  color:#e7ded0;opacity:.92;text-shadow:0 0 80px rgba(0,0,0,.8)}
.title em{font-style:normal;display:block;font-size:.34em;letter-spacing:.3em;
  opacity:.6;margin-top:.55em}
.folio{font-family:Prata,serif;font-size:.78rem;letter-spacing:.5em;color:var(--gold);
  opacity:.8;margin:0 0 1.1em}
.rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);
  margin:1.3em 0 1.1em;transform-origin:left;animation:grow 1.5s var(--ease) both .35s}
@keyframes grow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.7}}
.frag{margin:0;max-width:25ch;font-size:.92rem;line-height:1.66;color:var(--bone-dim);
  font-weight:300;animation:rise 1.4s var(--ease) both .6s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stuff{margin:1.5em 0 0;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);opacity:.6;animation:rise 1.4s var(--ease) both .78s}

/* ═══ обкладинка ═══ */
.cover{position:absolute;inset:0;z-index:8;display:grid;place-items:center;text-align:center}
.cover .mark{font-family:Prata,serif;font-size:clamp(2.2rem,6.4vw,5.2rem);letter-spacing:.16em;
  text-transform:uppercase;margin:0;color:#e9e0d2}
.cover .mark span{display:block;font-size:.26em;letter-spacing:.6em;opacity:.5;margin-top:1.2em}
.cover .kick{font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);opacity:.7;margin:0 0 2.2em}
/* руна входу замість кнопки «дивитись каталог» */
.ring{position:relative;width:132px;height:132px;margin:3.4em auto 0;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;color:var(--gold);
  animation:spin 44s linear infinite}
.ring svg.b{animation:spin 28s linear infinite reverse;color:var(--acc);opacity:.5}
.ring svg circle,.ring svg path,.ring svg line{fill:none;stroke:currentColor;stroke-width:1}
.ring i{position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 1px rgba(201,164,78,.25),0 0 60px 8px rgba(255,106,36,.14) inset;
  transition:box-shadow .5s}
.ring b{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);
  font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;
  color:var(--bone-dim);transition:color .4s}
.ring:hover i{box-shadow:0 0 0 1px rgba(201,164,78,.6),0 0 90px 16px rgba(255,106,36,.3) inset}
.ring:hover b{color:#f4e7d2}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ корінець: закладки аркушів ═══ */
.rail{position:fixed;right:clamp(12px,2vw,30px);top:50%;transform:translateY(-50%);
  z-index:45;display:flex;flex-direction:column;gap:17px;align-items:flex-end}
.rail button{display:flex;align-items:center;gap:10px;opacity:.4;transition:opacity .4s}
.rail button:hover,.rail button.on{opacity:1}
.rail .gl{width:25px;height:25px;color:var(--bone-dim);transition:color .4s,transform .5s}
.rail .gl path,.rail .gl circle,.rail .gl line{fill:none;stroke:currentColor;stroke-width:1.1}
.rail button.on .gl{color:var(--acc);transform:scale(1.18)}
.rail .nm{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
  opacity:0;max-width:0;overflow:hidden;white-space:nowrap;transition:opacity .4s,max-width .5s}
/* Активний аркуш — завжди з назвою, без наведення. Наведення на рейку —
   висуваються назви ВСІХ, щоб бачити, куди йти. Прохання власника. */
.rail button.on .nm{opacity:1;max-width:96px;color:var(--bone)}
.rail:hover button .nm{opacity:.72;max-width:96px}
.rail:hover button.on .nm{opacity:1}
.rail button:hover .nm{opacity:1}

/* ═══ руна звуку ═══ */
.sound{position:fixed;left:clamp(12px,2vw,30px);bottom:clamp(12px,2vw,30px);z-index:45;
  width:44px;height:44px;opacity:.5;transition:opacity .4s}
.sound:hover{opacity:1}
.sound svg{width:100%;height:100%;color:var(--bone-dim)}
.sound .sr,.sound .sg{fill:none;stroke:currentColor;stroke-width:1.1}
.sound .sg{opacity:.35;transition:opacity .4s}
/* Поки музики немає, руна світиться і має підпис — інакше її просто не
   помічають і ходять по сайт в тиші, думаючи, що музики немає взагалі. */
.sound.off{opacity:.92}
.sound.off svg{color:var(--gold)}
.sound.off .sr{animation:callRing 2.6s ease-in-out infinite}
@keyframes callRing{
  0%,100%{opacity:.45;stroke-width:1.1}
  50%{opacity:1;stroke-width:1.7}}
.snd-l{position:absolute;left:52px;top:50%;transform:translateY(-50%);
  font:400 .56rem/1 Onest,sans-serif;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .5s}
.sound.off .snd-l{opacity:.8;animation:callText 2.6s ease-in-out infinite}
@keyframes callText{0%,100%{opacity:.5}50%{opacity:1}}
.sound:hover .snd-l{opacity:1;animation:none}
.sound[aria-pressed=true]{opacity:1}
.sound[aria-pressed=true] svg{color:var(--gold)}
.sound[aria-pressed=true] .sg{opacity:0}
.sound[aria-pressed=true] .sr{animation:pulseRing 3s ease-in-out infinite}
@keyframes pulseRing{0%,100%{opacity:.5}50%{opacity:1}}
/* смужки-рівні поруч із руною, поки грає */
.sound em{position:absolute;left:52px;bottom:14px;display:flex;gap:3px;align-items:flex-end;
  height:16px;opacity:0;transition:opacity .5s;pointer-events:none}
.sound[aria-pressed=true] em{opacity:.85}
.sound[aria-pressed=true] .snd-l{opacity:0}
.sound em s{width:2px;background:var(--gold);height:4px;animation:lvl 1.1s ease-in-out infinite}
.sound em s:nth-child(2){animation-duration:.8s;animation-delay:-.2s}
.sound em s:nth-child(3){animation-duration:1.4s;animation-delay:-.5s}
.sound em s:nth-child(4){animation-duration:.95s;animation-delay:-.8s}
@keyframes lvl{0%,100%{height:3px}50%{height:15px}}

/* ═══ підказка гортання ═══ */
.hint{position:fixed;left:50%;bottom:clamp(16px,2.6vh,36px);transform:translateX(-50%);z-index:45;
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:opacity .8s;
  pointer-events:none}
.hint i{width:20px;height:1px;background:var(--bone-dim);opacity:.3;
  animation:hintFall 2.4s ease-in-out infinite}
.hint i:nth-child(2){width:13px;animation-delay:.18s}
.hint i:nth-child(3){width:6px;animation-delay:.36s}
@keyframes hintFall{0%,100%{opacity:.14;transform:translateY(-3px)}50%{opacity:.7;transform:translateY(3px)}}
.hint.gone{opacity:0}



/* ═══════════════ ГОРТАННЯ ФОТО ОБРАЗУ ═══════════════
   Книги більше немає: інші кадри того самого образу гортаються стрілками
   просто на аркуші. Стрілки стоять обабіч САМОЇ постаті, а не по краях
   екрана — так одразу зрозуміло, що зміниться образ, а не сторінка. */
.sh-nav{position:absolute;bottom:34%;z-index:9;
  width:clamp(34px,3.2vw,48px);height:clamp(34px,3.2vw,48px);
  opacity:.34;transition:opacity .35s,transform .35s}
.sh-nav:hover{opacity:1;transform:scale(1.12)}
/* прив'язка до справжнього краю постаті, а не до частки екрана */
.sh-nav.p{right:100%;margin-right:clamp(10px,1.4vw,26px)}
.sh-nav.n{left:100%;margin-left:clamp(10px,1.4vw,26px)}
.sh-nav svg{width:100%;height:100%;color:var(--gold);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.85))}
.sh-nav path{fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}

.sh-dots{position:absolute;left:50%;bottom:-22px;z-index:9;
  display:flex;gap:9px;transform:translateX(-50%)}
.sh-dots b{width:6px;height:6px;border-radius:50%;background:var(--bone-dim);
  opacity:.28;cursor:pointer;transition:opacity .35s,transform .35s,background .35s}
.sh-dots b:hover{opacity:.7}
.sh-dots b.on{opacity:1;background:var(--gold);transform:scale(1.55)}

/* Зміна кадру перекриттям.

   Обидва кадри лежать НАКЛАДЕНО і кожен по центру контейнера. Раніше
   новий кадр після переходу вертався у звичайний потік, контейнер брав
   його ширину — і постать зі стрілками сунулась убік на очах. Тепер
   ширину задає рахунок із співвідношення сторін (--fw ставить рушій),
   і міняється вона плавно, тому нічого не стрибає. */
.fig img{position:absolute;left:50%;bottom:0;height:100%;width:auto;
  max-width:none;object-fit:contain;pointer-events:none;
  transform:translateX(-50%);transition:opacity .5s ease;
  animation:figFloat 9.5s ease-in-out infinite}
/* у власному перетворенні кадру вже є центрування, тож гойдання мусить
   його повторювати — інакше воно затре центр і постать з'їде вправо */
@keyframes figFloat{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-9px)}}
.fig img.in,.fig img.out{opacity:0}

/* ═══════════════ ЗАЯВКА ═══════════════
   Вузька панель, а не книга. Відкривається підписом під текстом аркуша. */
.ask-open{pointer-events:auto;margin-top:2em;font:400 .6rem/1 Onest,sans-serif;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);opacity:.72;
  padding:.9em 1.5em;border:1px solid rgba(201,164,78,.34);border-radius:2px;
  transition:opacity .35s,border-color .35s,background .35s;
  animation:rise 1.4s var(--ease) both .95s}
.ask-open:hover{opacity:1;border-color:rgba(201,164,78,.75);
  background:rgba(201,164,78,.07)}

.askw{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.askw.on{opacity:1;pointer-events:auto}
.askw-bg{position:absolute;inset:0;background:rgba(3,4,8,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ask{position:relative;width:min(92vw,420px);padding:34px 32px 30px;border-radius:4px;
  background:linear-gradient(160deg,#191410 0%,#0d0a07 60%,#14100c 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.8),inset 0 0 0 1px rgba(201,164,78,.22);
  transform:translateY(16px) scale(.97);transition:transform .45s var(--ease)}
.askw.on .ask{transform:none}
.ask-h{font-family:Prata,serif;font-size:clamp(1.2rem,2.6vw,1.7rem);color:#e9e0d2;
  letter-spacing:.04em}
.ask-sub{margin-top:.5em;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);opacity:.72}
.ask-f{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.ask-r{display:flex;flex-direction:column;gap:6px}
.ask-r span{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-dim);opacity:.8}
.ask-r input,.ask-r select{width:100%;padding:11px 13px;border-radius:2px;
  background:rgba(255,250,240,.045);color:var(--bone);
  border:1px solid rgba(201,164,78,.2);font:300 .92rem Onest,sans-serif;
  transition:border-color .3s,background .3s}
.ask-r input:focus,.ask-r select:focus{outline:none;border-color:rgba(201,164,78,.65);
  background:rgba(255,250,240,.075)}
.ask-r select option{background:#14100c;color:var(--bone)}
.ask-r.err input{border-color:#b6462f}
.ask-go{margin-top:8px;padding:13px;border-radius:2px;font:400 .64rem Onest,sans-serif;
  letter-spacing:.3em;text-transform:uppercase;color:#150f07;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  transition:filter .3s}
.ask-go:hover{filter:brightness(1.12)}
.ask-go:disabled{opacity:.6;cursor:default}
.ask-done{display:none;flex-direction:column;gap:.7em;margin-top:26px}
.askw.sent .ask-f{display:none}
.askw.sent .ask-done{display:flex}
.ask-dh{font-family:Prata,serif;font-size:clamp(1rem,2vw,1.35rem);color:var(--gold-hi)}
.ask-dn{font-family:Prata,serif;font-size:clamp(1.4rem,3vw,2.1rem);color:var(--gold);
  letter-spacing:.1em}
.ask-dp{margin:0;font-size:.84rem;line-height:1.6;color:var(--bone-dim);font-weight:300}
.ask-x{position:absolute;right:12px;top:8px;width:34px;height:34px;font-size:1.5rem;
  color:var(--bone-dim);opacity:.55;transition:opacity .3s}
.ask-x:hover{opacity:1}

/* ═══ телефон: напис угорі, постать унизу — перетнутись не можуть ═══ */
@media (max-width:860px){
  .lamp{width:520px;height:520px;margin:-260px 0 0 -260px}
  /* transform теж скидаємо: у сцені з написом по центру там лишався
     translateX(-50%), і заголовок їхав на півширини за лівий край */
  .word,.word.right{position:absolute;left:4%!important;right:4%!important;
    top:5%!important;bottom:auto!important;max-width:none;text-align:center;
    padding-right:0;transform:none!important}
  .word .frag,.word .rule{margin-left:auto;margin-right:auto}
  .word .rule{width:min(24ch,52vw)}
  .word .frag{max-width:30ch}
  .title{font-size:clamp(1.9rem,9.4vw,3.2rem)}
  .title em{font-size:.36em;letter-spacing:.26em}
  .fig,.halo{height:48vh!important;--fb:0px!important;left:50%!important}
  .reflect{display:none}
  .rail{gap:11px;right:7px}
  .rail .gl{width:18px;height:18px}
  .rail .nm{display:none}
  /* стрілки притискаємо до країв екрана: біля постаті на телефоні тісно */
  .sh-nav{bottom:20vh;width:38px;height:38px;opacity:.6}
  /* Стрілки лишаються при постаті, але саму постать звужуємо: інакше
     широка вирізка займає весь екран і стрілки опиняються за краєм.
     Притиснути їх до країв екрана не можна — вони всередині постаті,
     а та зсунута перетворенням, тож fixed тут рахувався б від неї. */
  .fig{max-width:66vw}
  .sh-nav{width:34px;height:34px;opacity:.62;bottom:38%}
  .sh-nav.p{margin-right:8px}
  .sh-nav.n{margin-left:8px}
  .sh-dots{left:50%!important;bottom:10px}
  .ask-open{margin-top:1.4em;padding:.8em 1.2em;font-size:.55rem}
  .ask{padding:28px 20px 24px}
}

/* ═══ поважаємо «зменшити рух» ═══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.14s!important}
  .grain,.dust{display:none}
}


/* ═══════════════ АУДИТ 13.09.2026 (projects-91) ═══════════════
   Правки за заміром живого сайту. Блок стоїть у КІНЦІ файлу навмисне:
   перебиває раніші правила порядком і не чіпає їх — файл одночасно тримає
   інша сесія. */

/* 1–2. Перехід аркуша — лише прозорість. Масштаб 1.06→1 давав доїзд постаті
   на 5–15 пікс уже після появи аркуша («ставить поруч і потім дотягує»).
   Розмиття на весь екран давало 4–9 кадрів довших за 50 мс на кожному
   перемиканні. */
/* ПОВЕРНУТО 13.09.2026: власник — «раніше було повільно і плавно,
   плавність головне». Аудит прибрав масштаб і розмиття заради кадрів;
   власник обрав плавність. Перебивку знято, діє базове правило .leaf
   з масштабом 1.06 і розмиттям 12px за 900 мс. */

/* 3. Довгий підпис кольору в два рядки налазив сам на себе: успадковував
   міжрядковий .95 від назви. */
.title em{line-height:1.3}

/* 4. Стрілки гортання фото: у спокої .34 їх майже не видно. Не яскравіше за
   .55, щоб не сперечались із сукнею; на наведенні — повністю. */
.sh-nav{opacity:.55}
.sh-nav:hover,.sh-nav:focus-visible{opacity:1}
.sh-nav path{stroke-width:1.7}
.sh-nav svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.95)) drop-shadow(0 0 14px rgba(0,0,0,.6))}

@media (max-width:860px){
  /* 5. На телефоні напис завжди по центру. Без !important перемагало
     вбудоване text-align:right зі сцени — назви стояли хто куди, а праві
     залазили під рейку. */
  .word,.word.right{text-align:center!important}
  .sh-nav{opacity:.55}
  /* 6. На телефоні напис угорі по центру — саме там, де на комп'ютері
     висять світила. Тріщину і стовп світла ховаємо, світило приглушуємо;
     «дихання» знімаємо, бо анімація перебила б непрозорість. */
  .rift,.beam{display:none}
  .orb:not(.soft){animation:none;opacity:.28}
}

/* ═══════════════ КОНТРАСТ НАПИСУ 13.09.2026 (projects-91) ═══════════════
   Замір живого сайту з новими полотнами: на світлих ділянках (Mesti, Remy,
   Ere; на телефоні — майже всі аркуші) опис давав 2.2–3.9 при потрібних 4.5,
   тканина і кнопка заявки 1.7–2.9 при потрібних 3. Опис лишаємо тихішим за
   назву (не світліше #d6cdbf): контраст добираємо тінню і темрявою
   підкладки, а не яскравістю тексту. */
.frag{color:#d6cdbf;font-weight:400;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 16px rgba(0,0,0,.55)}
.stuff{opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.9)}
/* темна заливка під кнопкою: читається на будь-якому полотні, не лише на нинішніх */
.ask-open{opacity:.95;border-color:rgba(201,164,78,.6);background:rgba(4,6,12,.45);
  text-shadow:0 1px 2px rgba(0,0,0,.9)}
.ask-open:hover{background:rgba(4,6,12,.62)}
.word::before{
  background:radial-gradient(62% 58% at 28% 46%,rgba(4,6,12,.84) 0%,
    rgba(4,6,12,.52) 50%,rgba(4,6,12,0) 80%)}
.word.right::before{
  background:radial-gradient(62% 58% at 72% 46%,rgba(4,6,12,.84) 0%,
    rgba(4,6,12,.52) 50%,rgba(4,6,12,0) 80%)}

@media (max-width:860px){
  /* На телефоні напис по центру, а підкладка лишалась прив'язаною до 28% чи
     72% і половину тексту не накривала. Тут — рівна смуга під усім написом. */
  .word::before,.word.right::before{inset:-4% -6% -12% -6%;
    background:linear-gradient(to bottom,rgba(4,6,12,.84) 0%,rgba(4,6,12,.68) 72%,rgba(4,6,12,0) 100%)}
}

/* ─── ПІДПИС ТКАНИНИ 13.09.2026 ───
   Золотий рядок «ШОВКОВИЙ ШИФОН» губився на світлих полотнах: Remy 1.6,
   Mesti 2.2, Ere 2.8 при потрібних 4.5. Колір лишаємо золотим — він має
   читатись як другорядний, — але додаємо щільну тінь, тож він тримається
   і на блідому небі Фрідріха, і на темній грозі Айвазовського. */
.stuff{color:var(--gold-hi);opacity:1;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.85)}

/* ─── РУНА ЗВУКУ І ПІДКАЗКА 13.09.2026 ───
   Дві хиби, знайдені на телефоні заміром projects-91:
   · підказка гортання йшла рівно через напис «додати атмосфери» і
     перекреслювала його;
   · сам напис золотом лежав на світлій сукні й не читався.
   Підказку піднімаємо над руною, напису даємо власну темну підкладку —
   тоді він тримається на будь-якому кадрі, хоч на чорній, хоч на білій. */
.snd-l{padding:5px 9px;border-radius:999px;
  background:rgba(4,6,12,.62);
  text-shadow:0 1px 2px rgba(0,0,0,.9)}
@media (max-width:860px){
  .hint{bottom:74px}
}

/* ─── СВІТЛО СЦЕНИ НА ПОСТАТІ 13.09.2026 ───
   Власник: «просто картинка і плаття на фоні — плоско». Одна з причин:
   постать не освітлена сценою. Тепер по краю сукні йде мʼяке сяйво в колір
   світла сцени (--rim ставить рушій на аркуш): у багряній сцені — рожеве,
   у крижаній — блакитне. Постать перестає бути наліпкою. */
.fig img{filter:drop-shadow(0 0 18px var(--rim,transparent))}

/* режим знімка (?shot=1): жодних переходів і анімацій, щоб headless-кадр був чистим */
.shot *{transition:none!important;animation:none!important}

/* ── нові шари сцен (13.09.2026) ──
   Дракон: далекий силует, повільно перетинає небо, крила махають (морфінг контуру).
   Лежить під хребтами (z 1), тож ховається за горами. */
.dragon{position:absolute;left:-24vw;pointer-events:none;z-index:1;color:#1a2438;opacity:.97;filter:drop-shadow(0 0 12px rgba(160,190,240,.45));
  animation:dragonFly 36s linear infinite;will-change:transform}
.dragon svg{display:block;width:100%;height:auto;overflow:visible}
.dragon path{fill:currentColor}
.dragon.flip svg{transform:scaleX(-1)}
@keyframes dragonFly{
  0%{transform:translate3d(0,0,0) scale(.5)}
  45%{transform:translate3d(58vw,-7vh,0) scale(.82)}
  100%{transform:translate3d(134vw,3vh,0) scale(.58)}}
/* Світляки: зелено-бірюзові точки, блимають і повільно дрейфують. Вище туману, нижче постаті. */
.flies{position:absolute;inset:0;pointer-events:none;z-index:6;color:var(--fly,#8ff0c0)}
.flies i{position:absolute;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:currentColor;
  box-shadow:0 0 6px 2px currentColor,0 0 16px 5px rgba(120,240,190,.22);opacity:0;
  animation:flyBlink 3s ease-in-out infinite,flyDrift 12s ease-in-out infinite alternate}
@keyframes flyBlink{0%,100%{opacity:0}35%{opacity:.95}55%{opacity:.65}}
@keyframes flyDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(26px,-34px,0)}}
/* Червоні очі в темряві лісу: пара точок, зʼявляються ненадовго і гаснуть. */
.eyes{position:absolute;inset:0;pointer-events:none;z-index:3}
.eyes b{position:absolute;display:flex;gap:var(--g,10px);opacity:0;animation:eyeBlink 8s ease-in-out infinite}
.eyes b i{display:block;width:var(--s,4px);height:calc(var(--s,4px) * .8);border-radius:50%;background:#ff3a3a;
  box-shadow:0 0 6px 1px rgba(255,60,60,.85),0 0 16px 4px rgba(200,20,30,.35)}
@keyframes eyeBlink{0%,18%{opacity:0}24%,46%{opacity:.95}48%{opacity:0}52%,62%{opacity:.9}66%,100%{opacity:0}}
.shot .dragon{transform:translate3d(86vw,2vh,0) scale(.8)}
.shot .flies i{opacity:.85}
.shot .eyes b{opacity:.9}

/* Вузькі екрани: напис без паралаксу — поля 4% замалі, щоб зсув до 18px за ліхтарем не виносив рядок за край */
@media (max-width:860px){.word,.word.right{transform:none!important}}

/* ═══════════════ ТЕЛЕФОН 13.09.2026 — окремий макет, не латки ═══════════════
   Власник: «текст і картинка заважають одне одному, і багато іншого заважає».
   Портрет: напис компактно зверху, постать бере рівно решту висоти (--mfh
   рахує рушій від справжнього низу тексту), рейка — рядок крапок унизу,
   звук — у верхньому куті, крапки фото й підказку прибрано.
   Ландшафт: напис ліворуч, постать праворуч, рейка тонкою колонкою. */
@media (max-width:860px){
  /* на телефоні сцена не гойдається по вертикалі за ліхтарем: зазор між
     написом і постаттю рахований точно, а зсув до 16px його зʼїдав */
  .stage{}
}
@media (max-width:860px) and (orientation:portrait){
  .word,.word.right{top:54px!important}
  /* стрілки — біля країв ЕКРАНА (постать по центру, 50% = півширини постаті) */
  .sh-nav.p{left:calc(50% - 44vw)!important;right:auto!important;margin:0!important}
  .sh-nav.n{right:calc(50% - 44vw)!important;left:auto!important;margin:0!important}
  .title{font-size:clamp(1.65rem,8.2vw,2.5rem);line-height:1}
  .frag{font-size:.84rem;line-height:1.4;max-width:32ch}
  .word .rule{margin-top:.55em;margin-bottom:.6em}
  .stuff{margin-top:.5em}
  .ask-open{margin-top:.9em;padding:.65em 1.1em;font-size:.55rem}
  .fig,.halo{height:var(--mfh,44vh)!important;max-height:64vh;bottom:44px!important;--fb:44px!important;
    left:50%!important;max-width:90vw}
  .has-water .fig,.has-water .halo{bottom:12vh!important;--fb:12vh!important}
  .has-water .water{height:12vh!important}
  .sh-dots{display:none!important}
  .sh-nav{bottom:44%;width:34px;height:34px}
  .rail{top:auto!important;bottom:9px!important;right:auto!important;left:50%!important;
    transform:translateX(-50%)!important;flex-direction:row;gap:8px;align-items:center;
    padding:6px 11px;border-radius:999px;background:rgba(4,6,12,.55)}
  .rail button{gap:0}
  .rail .gl{width:13px;height:13px}
  .rail button.on .gl{transform:scale(1.35)}
  .sound{top:10px!important;bottom:auto!important;left:10px!important}
  .hint{display:none!important}
  .lamp{width:360px;height:360px;margin:-180px 0 0 -180px}
  .dragon{width:34vw!important}
}
@media (max-width:860px) and (orientation:landscape){
  .word,.word.right{left:4%!important;right:auto!important;top:6%!important;bottom:auto!important;
    max-width:44vw;text-align:left!important;transform:none!important}
  .word .frag,.word .rule{margin-left:0;margin-right:0}
  .title{font-size:clamp(1.4rem,6vw,2.3rem)}
  .frag{font-size:.8rem;max-width:40ch}
  .fig,.halo{height:80vh!important;bottom:0!important;--fb:0px!important;left:73%!important;max-width:46vw}
  .has-water .fig,.has-water .halo{bottom:16vh!important;--fb:16vh!important}
  .has-water .water{height:16vh!important}
  .rail{right:6px;top:50%;bottom:auto;left:auto;transform:translateY(-50%);flex-direction:column;gap:7px}
  .rail .gl{width:12px;height:12px}
  .sh-dots,.hint{display:none!important}
  .sh-nav{width:30px;height:30px}
}

/* ═══ ТЕЛЕФОН: ПАМʼЯТЬ І ПЛАВНІСТЬ 13.09.2026 ═══
   Chrome на iPhone убивав вкладку («Не вдається відкрити цю сторінку»). Причини:
   розмиття всього аркуша на переході (два повноекранні буфери), тіні-фільтри на
   постаті, що перераховуються щокадру через погойдування, змішування шарів
   туману й ліхтаря. На телефоні все це вимкнено: вигляд лишається, зникає зайва
   робота відеопамʼяті. */
@media (max-width:860px){
  .leaf,.leaf.was,.leaf.on{filter:none!important}
  .leaf{transition:opacity var(--turn) var(--ease),transform var(--turn) var(--ease)}
  .fig,.fig img,.dragon,.castle,.col{filter:none!important}
  .fig img{animation:none!important}
  .fog{mix-blend-mode:normal;opacity:.2}
  .fog i:nth-child(2){display:none}
  .lamp{mix-blend-mode:normal;opacity:.55;animation:none}
  .halo{display:none}
  .orb{animation:none}
  .flies i{box-shadow:0 0 5px 1px currentColor}
  /* туман без розмиття і трава без тіні: обидва анімовані, фільтр перераховувався щокадру */
  .fog i,.sil{filter:none!important}
}

/* ═══════════════ ФОРМА, КАТАЛОГ, СТРІЛКИ МОДЕЛЕЙ — v26, 13.09.2026 ═══════════════ */
html,body{touch-action:manipulation}

/* форма замовлення: стримана темна панель */
.sheetw .ask{display:none}
.sheet{position:relative;width:min(94vw,460px);max-height:min(88vh,780px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0f131d 0%,#080a11 100%);border:1px solid rgba(201,214,234,.14);border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.8);transform:translateY(22px);opacity:0;
  transition:transform .45s var(--ease),opacity .35s var(--ease)}
.askw.on .sheet{transform:none;opacity:1}
.sh-grip{display:none}
.sh-x{position:absolute;right:6px;top:6px;z-index:2;width:42px;height:42px;font-size:1.5rem;line-height:1;
  color:var(--bone-dim);background:none;border:0;opacity:.75}
.sh-head{display:flex;gap:14px;align-items:center;padding:18px 48px 14px 20px;border-bottom:1px solid rgba(201,214,234,.1)}
.sh-thumb{width:56px;height:84px;object-fit:contain;flex:none}
.sh-folio{margin:0;font:400 .56rem/1 Onest,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-dim);opacity:.7}
.sh-name{margin:.2em 0 .25em;font:400 1.7rem/1 Prata,serif;color:#ece4d6}
.sh-price{margin:0;font:400 1rem/1.2 Prata,serif;color:var(--gold-hi)}
.sh-price[hidden]{display:none}
.sh-terms{margin:.25em 0 0;font:300 .78rem/1.3 Onest,sans-serif;color:var(--bone-dim)}
.sh-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 20px 20px}
.sh-f{display:flex;flex-direction:column;gap:15px}
.sh-r{display:flex;flex-direction:column;gap:7px}
.sh-r[hidden]{display:none}
.sh-r>span{font:400 .58rem/1.2 Onest,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);opacity:.85}
.sh-r.opt>span::after{content:" · за бажанням";letter-spacing:.04em;text-transform:none;opacity:.7}
.sh-r input,.sh-r textarea{width:100%;padding:11px 12px;border-radius:4px;border:1px solid rgba(201,214,234,.16);
  background:rgba(255,255,255,.035);color:#ece4d6;font:400 16px/1.3 Onest,sans-serif;resize:none;
  -webkit-appearance:none;appearance:none}
.sh-r input:focus,.sh-r textarea:focus{outline:none;border-color:rgba(223,232,246,.5)}
.sh-r.err input{border-color:#b6462f}
.sh-r.err>span{color:#e07a6a}
.sh-chips{display:flex;flex-wrap:wrap;gap:7px}
.sh-chip{display:inline-flex;align-items:center;gap:.5em;padding:.6em .95em;border-radius:999px;
  border:1px solid rgba(201,214,234,.2);background:transparent;color:#d9d2c5;font:400 .84rem/1 Onest,sans-serif;
  -webkit-tap-highlight-color:transparent}
.sh-chip i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.sh-chip.on{border-color:#dfe8f6;background:rgba(223,232,246,.12);color:#fff}
.sh-pal{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;margin-top:2px}
.sh-pal[hidden]{display:none}
.sh-sw{aspect-ratio:1;min-height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.2);padding:0;
  -webkit-tap-highlight-color:transparent}
.sh-sw.on{box-shadow:0 0 0 2px #080a11,0 0 0 4px #dfe8f6}
.sh-cn{min-height:1.1em;font:italic 400 .8rem/1.2 Onest,sans-serif;color:var(--bone-dim)}
.sh-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sh-go{margin-top:4px;padding:15px;border-radius:4px;border:0;font:400 .66rem/1 Onest,sans-serif;
  letter-spacing:.28em;text-transform:uppercase;color:#12100b;background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
.sh-go:disabled{opacity:.6}
.sh-err{min-height:1.1em;margin:0;text-align:center;font:400 .8rem/1.2 Onest,sans-serif;color:#e07a6a}
.pfbox{position:fixed;left:50%;bottom:calc(130px + env(safe-area-inset-bottom));width:0;height:0;z-index:81;pointer-events:none}
.pf{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px;border-radius:50%;
  background:var(--c);box-shadow:0 0 8px 2px var(--c);animation:pfFly .9s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes pfFly{0%{transform:translate(0,0) scale(1.1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.sc-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:80;
  transform:translate(-50%,12px);opacity:0;pointer-events:none;white-space:nowrap;
  padding:.85em 1.3em;border-radius:999px;background:rgba(6,9,16,.9);border:1px solid rgba(201,214,234,.28);
  font:400 .68rem/1 Onest,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#dfe8f6;
  transition:opacity .5s,transform .5s}
.sc-toast.on{opacity:1;transform:translate(-50%,0)}

/* каталог на першій сторінці */
.cover.cat{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;
  padding:9vh 0 7vh;text-align:center}
.cat .mark{font-size:clamp(2rem,5vw,4.2rem)}
.cat-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,.7vw,12px);
  padding:0 clamp(60px,7vw,120px)}
.cat-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;
  background:none;border:0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cat-card:hover{z-index:2}
.cat-pic{position:relative;display:block;width:clamp(64px,6.4vw,118px);height:46vh}
.cat-pic img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;
  transform:translateX(-50%);filter:brightness(.8);transition:transform .5s var(--ease),filter .5s}
.cat-card:hover .cat-pic img,.cat-card:focus-visible .cat-pic img{transform:translateX(-50%) translateY(-10px);filter:brightness(1.05)}
.cat-nm{font:400 .82rem/1 Prata,serif;letter-spacing:.06em;color:#e6ddcf}
.cat-c{font:400 .5rem/1.2 Onest,sans-serif;font-style:normal;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-dim);opacity:.7;max-width:9em}

/* стрілки моделей — лише на телефоні */
.mnav{display:none}
@media (max-width:860px){
  .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:46;justify-content:space-between;
    align-items:flex-end;padding:0 6px calc(8px + env(safe-area-inset-bottom));pointer-events:none}
  .mn{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:92px;min-height:58px;
    padding:6px 8px;background:none;border:0;color:#cfdaec;-webkit-tap-highlight-color:transparent}
  .mn.off{visibility:hidden}
  .forge{width:66px;height:27px;overflow:visible;transition:transform .2s}
  .forge .sh,.forge .cu{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
  .forge .ring{fill:none;stroke:currentColor;stroke-width:2.2}
  .forge .hd{fill:currentColor}
  .forge .hd-in{fill:#070a12;opacity:.8}
  .mn:active .forge{transform:scale(.9)}
  .mn-l{font:400 .56rem/1 Onest,sans-serif;letter-spacing:.24em;text-transform:uppercase;
    color:var(--bone-dim);text-shadow:0 1px 3px #000}
  .rail{display:none!important}
  .sh-nav{display:none!important}
  .fig{pointer-events:auto;cursor:pointer}
  .sh-dots{display:flex!important;gap:5px;bottom:-44px!important;left:50%!important;transform:translateX(-50%)}
  .sh-dots b{width:16px;height:2px;border-radius:2px;background:#dfe8f6;opacity:.3;transform:none!important}
  .sh-dots b.on{background:#dfe8f6;opacity:1}
  .askw-bg{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(3,4,8,.8)}

  /* форма знизу екрана */
  .sheetw{place-items:end stretch}
  .sheet{width:100%;max-height:90vh;max-height:90svh;border-radius:16px 16px 0 0;border-bottom:0;
    transform:translateY(100%);opacity:1;transition:transform .5s var(--ease)}
  .askw.on .sheet{transform:none}
  .sh-grip{display:block;width:40px;height:4px;margin:8px auto 0;border-radius:4px;background:rgba(223,232,246,.25)}
  .sh-head{padding-top:10px}
  .sh-body{padding-bottom:calc(22px + env(safe-area-inset-bottom))}

  /* каталог: ряд гортається пальцем убік */
  .cover.cat{padding:62px 0 calc(96px + env(safe-area-inset-bottom))}
  .cat .mark{font-size:clamp(1.9rem,9vw,2.6rem)}
  .cat-row{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    gap:8px;padding:12px 28vw 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
  .cat-row::-webkit-scrollbar{display:none}
  .cat-card{flex:0 0 44vw;scroll-snap-align:center}
  .cat-pic{width:44vw;height:46vh;height:46svh}
  .cat-pic img{filter:none}
  .cat-nm{font-size:1.05rem}
  .cat-c{font-size:.54rem}
}
@media (max-width:860px) and (orientation:portrait){
  .fig,.halo{bottom:84px!important;--fb:84px!important}
}

/* ═══ кнопка «каталог» — v27 ═══ */
.home{position:fixed;left:clamp(14px,2vw,30px);top:clamp(14px,2vw,26px);z-index:47;
  display:inline-flex;align-items:center;gap:.7em;min-height:38px;padding:.5em 1em .5em .75em;border-radius:999px;
  background:rgba(4,6,12,.55);border:1px solid rgba(201,214,234,.2);color:#dfe8f6;
  font:400 .6rem/1 Onest,sans-serif;letter-spacing:.26em;text-transform:uppercase;
  transition:opacity .45s var(--ease),border-color .3s;-webkit-tap-highlight-color:transparent}
.home svg{width:13px;height:13px;flex:none}
.home svg path{fill:currentColor}
.home:hover{border-color:rgba(223,232,246,.55)}
.at-cover .home{opacity:0;pointer-events:none}
@media (max-width:860px){
  .home{left:auto;right:10px;top:10px;min-height:40px}
}

/* ═══ ТЕЛЕФОН: ВІДЕОПАМʼЯТЬ НА ПЕРЕГОРТАННІ — v27 ═══
   Трасування 13.09: головний потік на перегортанні вільний, а задачі відеокарти тягнуться
   до 100+ мс. На екрані ×3 кожен рухомий повноекранний шар — окрема велика текстура.
   Тому на телефоні: зерно і туман нерухомі (малюються раз), трава не гойдається,
   світляки лише мерехтять. Вигляд лишається, зникають постійні текстури. */
@media (max-width:860px){
  .grain{animation:none;inset:0}
  .fog i{animation:none!important}
  .fore{animation:none!important}
  .flies i{animation:flyBlink 3s ease-in-out infinite!important}
  .lamp{will-change:auto}
}

/* ═══ КАТАЛОГ: ГОЛОВИ НЕ ОБРІЗАЮТЬСЯ — v28 ═══
   Власник, 13.09.2026, екран 400×498: «чому голови обрізані? краще їх зменшити».
   Причина: мініатюра мала жорстку висоту 46vh, а на низькому екрані ряду між заголовком
   і низом лишалось менше; ряд із прокруткою вбік обрізав зайве ЗВЕРХУ (картки притиснуті
   донизу). Тепер ряд бере рівно залишок висоти, а мініатюра зменшується під нього —
   але не більша за 46% екрана. */
.cover.cat{justify-content:flex-start}
.cat-top{flex:none}
.cat-row{flex:1 1 auto;min-height:0;align-items:stretch;margin-top:2vh}
.cat-card{justify-content:flex-end;min-height:0}
.cat-pic{flex:1 1 auto;min-height:0;height:auto;max-height:46vh}
@media (max-width:860px){
  .cat-row{padding-top:14px}
  .cat-pic{height:auto;max-height:46vh;max-height:46svh}
}

/* ═══ ТЕЛЕФОН: ПОСТАТЬ НІКОЛИ НЕ ПЕРЕКРИВАЄТЬСЯ — v29 ═══
   Постать стоїть рівно над смугою стрілок (--mfb рахує рушій від її верху), висота —
   проміжок до низу напису (--mfh). Сходинки стискання напису: .cmp1 без опису,
   .cmp2 ще без номера аркуша й лінії. Темна підкладка напису не спускається нижче тексту,
   трава — під постаттю. */
@media (max-width:860px) and (orientation:portrait){
  .fig,.halo{bottom:var(--mfb,84px)!important;--fb:var(--mfb,84px)!important}
  .has-water .fig,.has-water .halo{bottom:var(--mfb,12vh)!important;--fb:var(--mfb,12vh)!important}
  .cmp1 .frag{display:none}
  .cmp2 .folio,.cmp2 .rule{display:none}
  .word::before,.word.right::before{inset:-4% -6% 0 -6%}
  .fore{z-index:6}
}
@media (max-width:860px) and (orientation:landscape){
  .fig,.halo{height:calc(100vh - 88px)!important;bottom:78px!important;--fb:78px!important}
  .has-water .fig,.has-water .halo{bottom:78px!important;--fb:78px!important}
  .fore{z-index:6}
}
.stuff .price{font-weight:400;color:#f3e3bd;letter-spacing:.14em}
.sh-desc{margin:0 0 14px;font:300 .86rem/1.5 Onest,sans-serif;color:var(--bone-dim)}
.sh-desc:empty{display:none}