:root{
  --ink:#e4ddd3;
  --muted:rgba(228,221,211,.58);
  --line:rgba(228,221,211,.18);
  --bg:#050403;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#000}
body{overflow:hidden;color:var(--ink);font-family:var(--sans)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
.app{position:relative;width:100%;height:100%;min-height:100svh;overflow:hidden;background:#000}
.room,.panel,.diary,.kishen,.fade{position:absolute;inset:0}
.room{z-index:1;display:grid;place-items:center;background:#000;overflow:hidden}
.room-frame{
  position:relative;
  width:min(100vw,133.333vh);
  aspect-ratio:4/3;
  transform-origin:50% 50%;
  transition:transform 1.15s cubic-bezier(.72,0,.14,1),filter .9s ease;
  will-change:transform,filter
}
.room-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.brand{position:absolute;z-index:20;top:0;left:0;padding:30px 38px}
.brand a{font:400 31px/1 var(--serif);letter-spacing:.04em;color:var(--ink);text-decoration:none;text-shadow:0 2px 16px #000}
.hit{position:absolute;z-index:12;border:0;background:transparent;cursor:pointer;outline:none;padding:0}
.hit-library{left:.2%;top:18%;width:12.5%;height:47.8%;clip-path:polygon(2% 3%,96% 0,100% 96%,0 100%)}
.hit-series-left{left:12.8%;top:15.5%;width:16.5%;height:36.7%;clip-path:polygon(3% 2%,97% 2%,97% 98%,3% 98%)}
.hit-series-right{left:57.7%;top:26.8%;width:21.1%;height:27%;clip-path:polygon(2% 2%,98% 2%,98% 98%,2% 98%)}
.hit-about{left:81.7%;top:18.7%;width:13.8%;height:39.8%;border-radius:2%;clip-path:polygon(8% 2%,92% 2%,98% 8%,98% 92%,92% 98%,8% 98%,2% 92%,2% 8%)}
.hit-diary{left:66.1%;top:76.1%;width:16.4%;height:11.8%;transform:rotate(-2deg);border-radius:28%;clip-path:polygon(5% 20%,88% 3%,100% 48%,90% 91%,12% 100%,0 58%)}
.hit-rift{left:35.2%;top:0;width:26.6%;height:94.5%;clip-path:polygon(48% 0,58% 5%,55% 12%,64% 19%,58% 28%,68% 36%,61% 45%,68% 53%,59% 62%,67% 72%,58% 80%,63% 89%,53% 100%,43% 92%,45% 83%,36% 75%,42% 65%,31% 56%,39% 47%,29% 38%,37% 29%,31% 19%,41% 12%,39% 5%)}
.light,.haze,.rift-glow{position:absolute;pointer-events:none;mix-blend-mode:screen}
.light{z-index:4;filter:blur(24px);opacity:.55;animation:flicker 5.5s ease-in-out infinite}
.light-chandelier{left:24%;top:0;width:25%;height:22%;background:radial-gradient(ellipse,rgba(255,187,103,.23),transparent 68%)}
.light-left{left:0;top:47%;width:25%;height:28%;background:radial-gradient(ellipse,rgba(255,174,91,.18),transparent 70%);animation-delay:-2s}
.light-right{right:4%;top:33%;width:27%;height:32%;background:radial-gradient(ellipse,rgba(255,164,75,.25),transparent 68%);animation-delay:-3.6s}
.haze{z-index:5;opacity:.19;filter:blur(34px);animation:haze 12s ease-in-out infinite}
.haze-a{left:18%;top:12%;width:48%;height:58%;background:linear-gradient(115deg,transparent,rgba(232,204,170,.14),transparent)}
.haze-b{right:7%;top:21%;width:42%;height:44%;background:linear-gradient(70deg,transparent,rgba(231,198,156,.11),transparent);animation-delay:-6s}
.rift-glow{
  z-index:6;left:34.5%;top:0;width:28.5%;height:96%;
  background:
    radial-gradient(ellipse at 51% 46%,rgba(132,184,235,.21),transparent 31%),
    radial-gradient(ellipse at 50% 57%,rgba(241,228,196,.11),transparent 50%);
  filter:blur(10px);
  animation:riftPulse 3.8s ease-in-out infinite
}
@keyframes flicker{0%,100%{opacity:.44;transform:scale(1)}18%{opacity:.57}41%{opacity:.68;transform:scale(1.018)}48%{opacity:.49;transform:scale(.995)}63%{opacity:.64}79%{opacity:.52}91%{opacity:.61}}
@keyframes haze{0%,100%{transform:translate3d(-1%,0,0) scale(1);opacity:.11}50%{transform:translate3d(2%,1%,0) scale(1.04);opacity:.19}}
.smoke{position:absolute;z-index:5;pointer-events:none;mix-blend-mode:screen;filter:blur(38px);opacity:.48;will-change:transform,opacity}
.smoke-a{left:-8%;top:18%;width:72%;height:46%;background:radial-gradient(ellipse at 45% 50%,rgba(196,188,177,.48),rgba(128,121,112,.25) 45%,transparent 76%);animation:smokeDriftA 22s ease-in-out infinite}
.smoke-b{right:-10%;top:29%;width:68%;height:38%;background:radial-gradient(ellipse at 58% 48%,rgba(185,177,166,.44),rgba(115,109,101,.23) 48%,transparent 78%);animation:smokeDriftB 27s ease-in-out infinite -8s}
.smoke-c{left:22%;bottom:3%;width:66%;height:35%;background:linear-gradient(8deg,transparent,rgba(179,171,160,.38),transparent 72%);filter:blur(50px);animation:smokeDriftC 31s ease-in-out infinite -13s}
@keyframes smokeDriftA{0%,100%{transform:translate3d(-2%,1%,0) scale(1);opacity:.30}45%{transform:translate3d(5%,-2%,0) scale(1.08);opacity:.60}72%{transform:translate3d(1%,1%,0) scale(1.03);opacity:.42}}
@keyframes smokeDriftB{0%,100%{transform:translate3d(3%,0,0) scale(1.02);opacity:.24}50%{transform:translate3d(-6%,-2%,0) scale(1.1);opacity:.54}78%{opacity:.36}}
@keyframes smokeDriftC{0%,100%{transform:translate3d(-3%,2%,0) rotate(-1deg);opacity:.21}52%{transform:translate3d(4%,-4%,0) rotate(1.5deg);opacity:.48}}
@keyframes riftPulse{0%,100%{opacity:.30;filter:blur(14px) brightness(1.02)}42%{opacity:.58;filter:blur(9px) brightness(1.45)}48%{opacity:.40;filter:blur(13px) brightness(1.16)}54%{opacity:.56;filter:blur(10px) brightness(1.38)}72%{opacity:.36;filter:blur(15px) brightness(1.08)}}

/* Живой свет, тени, дымка и пыль */
.shadow{position:absolute;z-index:7;pointer-events:none;mix-blend-mode:multiply;filter:blur(22px);opacity:.28;will-change:transform,opacity}
.shadow-left{left:1%;top:8%;width:37%;height:76%;background:radial-gradient(ellipse at 15% 45%,rgba(0,0,0,.72),transparent 68%);animation:shadowLeft 6.8s ease-in-out infinite}
.shadow-right{right:-2%;top:14%;width:38%;height:66%;background:radial-gradient(ellipse at 82% 48%,rgba(0,0,0,.66),transparent 70%);animation:shadowRight 7.6s ease-in-out infinite -2.4s}
.shadow-floor{left:18%;bottom:-5%;width:68%;height:34%;background:radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.64),transparent 70%);filter:blur(28px);animation:shadowFloor 9s ease-in-out infinite -3.1s}
@keyframes shadowLeft{0%,100%{opacity:.22;transform:translate3d(-.4%,0,0) scale(1)}44%{opacity:.34;transform:translate3d(.5%,.2%,0) scale(1.015)}51%{opacity:.26;transform:translate3d(.1%,-.1%,0) scale(.995)}74%{opacity:.31}}
@keyframes shadowRight{0%,100%{opacity:.2;transform:translate3d(.4%,0,0) scale(1)}39%{opacity:.33;transform:translate3d(-.5%,.3%,0) scale(1.02)}57%{opacity:.24;transform:translate3d(-.1%,-.15%,0) scale(.99)}81%{opacity:.3}}
@keyframes shadowFloor{0%,100%{opacity:.2;transform:scaleX(1)}50%{opacity:.31;transform:scaleX(1.035)}}

.dust-layer{position:absolute;z-index:9;inset:0;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 88%,transparent 100%)}
.dust{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,235,204,var(--o));box-shadow:0 0 calc(var(--s)*3) rgba(255,203,143,.42);opacity:0;will-change:transform,opacity;animation:dustFloat var(--d) linear infinite var(--delay)}
@keyframes dustFloat{0%{opacity:0;transform:translate3d(0,8vh,0) scale(.75)}10%{opacity:var(--o)}45%{transform:translate3d(var(--dx),-4vh,0) scale(1)}72%{opacity:calc(var(--o)*.8)}100%{opacity:0;transform:translate3d(calc(var(--dx)*-0.35),-22vh,0) scale(.55)}}

.room-frame.is-alive .light-chandelier{animation-duration:4.9s}
.room-frame.is-alive .light-left{animation-duration:5.8s}
.room-frame.is-alive .light-right{animation-duration:4.6s}
.room-frame.is-alive .haze-a{animation-duration:15s}
.room-frame.is-alive .haze-b{animation-duration:18s}

.cursor-hint{
  position:fixed;z-index:30;left:0;top:0;padding:8px 11px;border:1px solid rgba(228,221,211,.14);
  background:rgba(5,4,3,.78);font:12px/1 var(--serif);color:rgba(238,229,216,.85);
  pointer-events:none;opacity:0;transform:translate(15px,15px);transition:opacity .15s;backdrop-filter:blur(8px)
}
.cursor-hint.show{opacity:1}
.panel{z-index:40;background:linear-gradient(90deg,rgba(3,3,3,.985) 0%,rgba(3,3,3,.93) 39%,rgba(3,3,3,.68) 60%,rgba(3,3,3,.12) 82%);opacity:0;visibility:hidden;pointer-events:none;transition:.5s}
.panel.open{opacity:1;visibility:visible;pointer-events:auto}
.panel-back,.diary-close,.kishen-back{
  position:absolute;z-index:5;top:30px;left:38px;border:0;background:none;padding:8px 0;cursor:pointer;
  font-size:8px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)
}
.panel-stage{position:absolute;inset:0}
.panel-content{position:absolute;left:7vw;bottom:7vh;width:min(560px,43vw)}
.panel-content small,.panel-content .meta{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.panel-content h1{margin:18px 0 16px;font:400 clamp(50px,5.8vw,92px)/.92 var(--serif);letter-spacing:-.045em}
.divider{width:70px;height:1px;margin:26px 0;background:var(--line)}
.panel-content .body{margin:0;max-width:520px;font:16px/1.65 var(--serif);color:rgba(228,221,211,.75)}
.panel-content blockquote{margin:24px 0 0;padding-left:18px;border-left:1px solid var(--line);font:italic 18px/1.5 var(--serif);color:rgba(238,230,218,.86)}
.diary{z-index:45;background:rgba(3,3,3,.96);opacity:0;visibility:hidden;pointer-events:none;transition:.55s;display:grid;place-items:center}
.diary.open{opacity:1;visibility:visible;pointer-events:auto}
.book{display:grid;grid-template-columns:1fr 1fr;width:min(980px,82vw);min-height:540px;box-shadow:0 30px 120px #000;transform:perspective(1300px) rotateX(2deg)}
.book-page{position:relative;padding:70px 64px;background:#d9cfbd;color:#2d2822}
.page-left{border-radius:7px 0 0 7px;background:linear-gradient(90deg,#c7baa6,#e1d7c7)}
.page-right{border-radius:0 7px 7px 0;background:linear-gradient(90deg,#ded4c4,#c9bca8)}
.book-page::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background-image:radial-gradient(#493f34 .45px,transparent .45px);background-size:4px 4px}
.book small{font-size:8px;letter-spacing:.22em}
.book h2{margin:24px 0 0;font:400 76px/1 var(--serif)}
.book p{position:relative;z-index:1;margin:0;font:22px/1.7 var(--serif)}
.book-controls{position:absolute;z-index:2;right:34px;bottom:28px;display:flex;gap:14px}
.book-controls button{border:0;background:none;color:#2d2822;font-size:22px;cursor:pointer}
.kishen{z-index:50;background:#010101;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s,visibility .9s;overflow:hidden}
.kishen.open{opacity:1;visibility:visible;pointer-events:auto}
.kishen-depth{position:absolute;inset:-15%;background:
  radial-gradient(circle at 66% 34%,rgba(77,59,50,.14),transparent 19%),
  radial-gradient(circle at 27% 72%,rgba(49,40,35,.11),transparent 20%),#010101;
  animation:depthDrift 16s ease-in-out infinite}
.kishen-noise{position:absolute;inset:-10%;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:grain .3s steps(2) infinite}
@keyframes depthDrift{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.05) translate(1.5%,-1%)}}
@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(2%,2%)}100%{transform:translate(-1%,-1%)}}
.artifact{position:absolute;z-index:3;border:0;background:none;padding:0;cursor:pointer;animation:float 8s ease-in-out infinite}
.artifact-a{top:18%;right:16%;width:160px}
.artifact-b{bottom:12%;left:31%;width:125px;animation-delay:-2.6s}
.artifact-c{right:29%;bottom:27%;width:125px;animation-delay:-4.2s}
.artifact-d{left:14%;bottom:22%;width:100px;animation-delay:-6s}
.artifact-image{display:block;width:100%;aspect-ratio:4/5;border:8px solid #171310;background:url("/assets/room.jpg") no-repeat;box-shadow:0 24px 80px #000}
.crop-a{background-size:520%;background-position:72% 36%}
.crop-b{background-size:520%;background-position:22% 37%}
.artifact-page{display:block;width:118px;height:156px;background:#d7cdbd;transform:rotate(8deg);box-shadow:0 30px 90px #000}
.artifact-object{display:block;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 42% 40%,#8b6d55,#211712 56%,#050403 74%);box-shadow:0 0 55px rgba(180,125,84,.18)}
@keyframes float{0%,100%{transform:translateY(-5px) rotate(-.4deg)}50%{transform:translateY(15px) rotate(.7deg)}}
.artifact-modal{position:absolute;z-index:20;inset:0;display:grid;place-content:center;padding:70px;background:rgba(1,1,1,.96);opacity:0;visibility:hidden;pointer-events:none;transition:.4s}
.artifact-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.artifact-modal>button{position:absolute;top:30px;right:38px;border:0;background:none;color:var(--muted);font-size:8px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.artifact-modal small{font-size:8px;letter-spacing:.22em;color:var(--muted)}
.artifact-modal h2{margin:18px 0 20px;font:400 clamp(52px,6vw,90px)/.92 var(--serif)}
.artifact-modal p{max-width:650px;margin:0;font:18px/1.65 var(--serif);color:rgba(228,221,211,.72)}
.fade{z-index:70;background:#000;opacity:0;visibility:hidden;pointer-events:none;transition:.22s}
.fade.show{opacity:1;visibility:visible}
@media(max-width:760px){
  .brand{padding:20px}
  .brand a{font-size:26px}
  .cursor-hint{display:none}
  .panel{background:rgba(3,3,3,.95)}
  .panel-back,.diary-close,.kishen-back{top:20px;left:20px}
  .panel-content{left:22px;right:22px;bottom:6vh;width:auto}
  .panel-content h1{font-size:50px}
  .panel-content .body{font-size:15px}
  .book{width:92vw;min-height:72vh;grid-template-columns:1fr}
  .page-left{display:none}
  .page-right{border-radius:7px;padding:64px 34px}
  .book p{font-size:18px}
  .artifact-a{top:20%;right:8%;width:105px}
  .artifact-b{bottom:13%;left:9%;width:92px}
  .artifact-c{right:13%;bottom:31%;width:98px}
  .artifact-d{left:18%;bottom:28%;width:78px}
  .artifact-modal{padding:62px 22px 30px}
}
.hit:not(.hit-rift){
  --hit-color:214,184,132;
  --hit-radius:3px;
  border-radius:var(--hit-radius);
}

/* Постоянный, едва заметный внутренний контур */
.hit:not(.hit-rift)::after{
  inset:1px;
  display:block;
  border:1px solid rgba(var(--hit-color),.16);
  border-radius:inherit;
  box-shadow:
    inset 0 0 28px rgba(var(--hit-color),.018),
    0 0 12px rgba(var(--hit-color),.015);
  opacity:.72;
  transition:
    opacity .38s ease,
    border-color .38s ease,
    box-shadow .45s ease,
    transform .45s cubic-bezier(.2,.75,.2,1),
    filter .45s ease;
}

/* Четыре тонких световых угла вместо грубой прямоугольной рамки */
.hit:not(.hit-rift)::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:-3px;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(var(--hit-color),.9),rgba(var(--hit-color),0)) left top/22px 1px no-repeat,
    linear-gradient(180deg,rgba(var(--hit-color),.9),rgba(var(--hit-color),0)) left top/1px 22px no-repeat,
    linear-gradient(270deg,rgba(var(--hit-color),.9),rgba(var(--hit-color),0)) right top/22px 1px no-repeat,
    linear-gradient(180deg,rgba(var(--hit-color),.9),rgba(var(--hit-color),0)) right top/1px 22px no-repeat,
    linear-gradient(90deg,rgba(var(--hit-color),.9),rgba(var(--hit-color),0)) left bottom/22px 1px no-repeat,
    linear-gradient(0deg,rgba(var(--hit-color),.9),rgba(var(--hit-color),0)) left bottom/1px 22px no-repeat,
    linear-gradient(270deg,rgba(var(--hit-color),.9),rgba(var(--hit-color),0)) right bottom/22px 1px no-repeat,
    linear-gradient(0deg,rgba(var(--hit-color),.9),rgba(var(--hit-color),0)) right bottom/1px 22px no-repeat;
  opacity:.2;
  filter:drop-shadow(0 0 4px rgba(var(--hit-color),.18));
  animation:interactiveBreath 8.5s ease-in-out infinite;
  transition:opacity .35s ease,filter .4s ease,transform .45s ease;
}

@keyframes interactiveBreath{
  0%,100%{opacity:.13;filter:drop-shadow(0 0 2px rgba(var(--hit-color),.1))}
  45%{opacity:.25;filter:drop-shadow(0 0 6px rgba(var(--hit-color),.22))}
  52%{opacity:.17}
  72%{opacity:.22}
}

.hit:not(.hit-rift):hover::after,
.hit:not(.hit-rift):focus-visible::after{
  border-color:rgba(var(--hit-color),.5);
  box-shadow:
    inset 0 0 44px rgba(var(--hit-color),.075),
    0 0 22px rgba(var(--hit-color),.08);
  opacity:1;
  transform:scale(1.018);
  filter:brightness(1.12);
}

.hit:not(.hit-rift):hover::before,
.hit:not(.hit-rift):focus-visible::before{
  animation:none;
  opacity:.9;
  filter:drop-shadow(0 0 8px rgba(var(--hit-color),.42));
  transform:scale(1.025);
}

/* У каждой категории свой характер света */
.hit-library{
  --hit-color:183,139,88;
  --hit-radius:2px;
}
.hit-library::after{
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 12%,
      rgba(218,169,103,.026) 12.5% 13.4%,
      transparent 14% 24%
    );
}
.hit-library:hover::after,
.hit-library:focus-visible::after{
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 12%,
      rgba(238,184,111,.075) 12.5% 13.6%,
      transparent 14% 24%
    );
}

.hit-series-left,
.hit-series-right{
  --hit-color:222,188,127;
}

.hit-about{
  --hit-color:178,145,210;
  --hit-radius:48%;
}
.hit-about:hover::after,
.hit-about:focus-visible::after{
  box-shadow:
    inset 0 0 42px rgba(178,145,210,.09),
    0 0 30px rgba(152,112,191,.12);
}

.hit-diary{
  --hit-color:215,167,101;
  --hit-radius:34%;
}

/* Разлом не получает рамку — он отвечает усилением собственного свечения */
.hit-rift::before,
.hit-rift::after{display:none}
.room-frame.rift-awake .rift-glow{
  opacity:.92;
  filter:blur(6px) brightness(1.4);
  animation:riftInvitation 1.25s ease-in-out infinite;
}
.room-frame.rift-awake .dust{
  filter:brightness(1.35);
}
@keyframes riftInvitation{
  0%,100%{transform:scaleX(1);opacity:.68;filter:blur(9px) brightness(1.18)}
  45%{transform:scaleX(1.07);opacity:1;filter:blur(5px) brightness(1.55)}
  58%{transform:scaleX(.99);opacity:.78;filter:blur(11px) brightness(1.3)}
}

/* На сенсорных устройствах контур чуть заметнее: hover там отсутствует */
@media (pointer:coarse){
  .hit:not(.hit-rift)::after{
    display:block;
    border-color:rgba(var(--hit-color),.24);
    opacity:.82;
  }
  .hit:not(.hit-rift)::before{
    opacity:.31;
    animation-duration:6.8s;
  }
}

@media(max-width:760px){
  .hit:not(.hit-rift)::after{display:block}
  .hit:not(.hit-rift)::before{display:block}
}


@media(max-aspect-ratio:4/3){.room-frame{width:auto;height:100svh}}
@supports(height:100dvh){
  .app{height:100dvh;min-height:100dvh}
  @media(max-aspect-ratio:4/3){.room-frame{height:100dvh}}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms;animation-iteration-count:1;transition-duration:.01ms}
  .hit:not(.hit-rift)::before{animation:none;opacity:.23}
}

/* v2 — явный коммерческий маршрут без потери комнаты */
:root{--paper:#d9cfbd;--black:#050403;--gold:#c9a36f}
.site-header{position:absolute;z-index:32;top:0;left:0;right:0;display:flex;align-items:center;gap:42px;padding:27px 38px;pointer-events:none}
.site-header>*{pointer-events:auto}
.site-header .brand{position:static;padding:0;font:400 31px/1 var(--serif);letter-spacing:.04em;color:var(--ink);text-decoration:none;text-shadow:0 2px 16px #000}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:25px;padding:0;border:0;background:transparent;backdrop-filter:none;box-shadow:none}
.main-nav button,.menu-toggle{border:0;background:none;padding:8px 0;color:rgba(238,230,218,.64);cursor:pointer;font-size:9px;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;transition:color .25s ease,opacity .25s ease,text-shadow .25s ease}
.main-nav button:hover,.main-nav button:focus-visible{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.16)}
.main-nav .nav-secondary{margin-left:9px;color:rgba(238,230,218,.42);font-size:8px;letter-spacing:.13em}
.main-nav .nav-contact{margin-left:-8px;padding:8px 0;border:0;color:rgba(238,230,218,.36)}
.main-nav .nav-secondary:hover,.main-nav .nav-secondary:focus-visible{color:rgba(255,255,255,.82)}
.menu-toggle{display:none;margin-left:auto}
.purchase-float{position:absolute;z-index:31;right:36px;bottom:32px;display:flex;align-items:center;gap:18px;border:0;background:transparent;backdrop-filter:none;padding:8px 0;color:rgba(234,220,198,.54);cursor:pointer;font-size:8px;letter-spacing:.15em;text-transform:uppercase;transition:color .25s ease,transform .25s ease,opacity .25s ease}
.purchase-float b{font:400 18px/1 var(--serif);opacity:.72}
.purchase-float:hover,.purchase-float:focus-visible{color:#eadcc6;transform:translateX(3px);outline:none}

.view{position:absolute;z-index:48;inset:0;background:#080706;color:var(--ink);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);transition:opacity .45s,transform .45s,visibility .45s;overflow:auto}
.view.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.view-head{position:sticky;z-index:5;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px;padding:0 38px;border-bottom:1px solid rgba(228,221,211,.1);background:rgba(8,7,6,.88);backdrop-filter:blur(16px)}
.view-head>button{border:0;background:none;color:var(--muted);cursor:pointer;padding:10px 0;font-size:8px;letter-spacing:.18em;text-transform:uppercase;text-align:left}
.view-head>button:last-child{text-align:right}.view-head>span{font:400 16px/1 var(--serif);letter-spacing:.06em}
.collection-shell{width:min(1460px,100%);margin:auto;padding:72px 5vw 110px}
.collection-intro{display:grid;grid-template-columns:minmax(270px,1fr) minmax(320px,1.6fr);column-gap:7vw;align-items:end;margin-bottom:52px}
.collection-intro small,.about-layout small,.contact-layout small,.artwork-passport>small{font-size:8px;letter-spacing:.22em;color:var(--muted)}
.collection-intro h1{grid-column:2;margin:0;font:400 clamp(44px,5.6vw,90px)/.95 var(--serif);letter-spacing:-.045em;max-width:850px}
.collection-intro p{grid-column:2;margin:25px 0 0;max-width:610px;font:16px/1.65 var(--serif);color:rgba(228,221,211,.66)}
.collection-intro small{grid-row:1 / span 2;align-self:start;padding-top:8px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filters button{border:1px solid rgba(228,221,211,.13);background:transparent;color:var(--muted);padding:10px 14px;cursor:pointer;font-size:8px;letter-spacing:.14em;text-transform:uppercase}
.filters button.active,.filters button:hover{border-color:rgba(211,173,116,.5);color:#ebdcc5;background:rgba(211,173,116,.06)}
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px}
.art-card{border:0;background:none;color:inherit;text-align:left;padding:0;cursor:pointer;min-width:0}
.art-card-image{display:block;width:100%;aspect-ratio:4/5;background-image:url("/assets/room.jpg");background-repeat:no-repeat;background-color:#12100e;box-shadow:0 16px 55px rgba(0,0,0,.36);filter:saturate(.88) brightness(.92);transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .45s,box-shadow .45s}
.art-card:hover .art-card-image,.art-card:focus-visible .art-card-image{transform:translateY(-5px) scale(1.008);filter:saturate(1) brightness(1.02);box-shadow:0 25px 75px rgba(0,0,0,.55)}
.crop-mask{background-size:520%;background-position:22% 31%}.crop-remains{background-size:410%;background-position:72% 38%}.crop-about{background-size:520%;background-position:93% 34%}.crop-witness{background-size:500%;background-position:66% 35%}.crop-rift{background-size:180%;background-position:48% 48%}
.art-card-copy{display:grid;grid-template-columns:1fr auto;gap:7px 14px;padding-top:14px}.art-card-copy small{grid-column:1/3;font-size:7px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}.art-card-copy strong{font:400 22px/1.1 var(--serif)}.art-card-copy span{align-self:end;font-size:9px;color:var(--muted)}

.about-layout,.contact-layout{width:min(1240px,90vw);min-height:calc(100svh - 72px);margin:auto;display:grid;grid-template-columns:.8fr 1.4fr;gap:9vw;align-items:center;padding:70px 0}
.about-mark{font:400 clamp(180px,28vw,430px)/.8 var(--serif);color:rgba(228,221,211,.055);user-select:none}
.about-layout article,.contact-layout article{max-width:700px}.about-layout h1,.contact-layout h1{margin:18px 0 28px;font:400 clamp(58px,8vw,118px)/.88 var(--serif);letter-spacing:-.055em}.about-layout p,.contact-layout p{font:18px/1.65 var(--serif);color:rgba(228,221,211,.68)}.about-layout .about-lead{font-size:26px;line-height:1.45;color:#e7ded2}.text-cta{margin-top:25px;border:0;border-bottom:1px solid rgba(219,183,129,.45);background:none;padding:9px 0;color:#ead6b8;cursor:pointer;font:15px/1 var(--serif)}
.contact-layout{grid-template-columns:1fr 1fr}.contact-form{display:grid;gap:17px;padding:34px;border:1px solid rgba(228,221,211,.12);background:rgba(255,255,255,.018)}.contact-form label{display:grid;gap:8px;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid rgba(228,221,211,.18);background:transparent;color:var(--ink);padding:11px 0;outline:none;font:17px/1.4 var(--serif);resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(211,173,116,.7)}.contact-form button,.buy-button{border:1px solid rgba(211,173,116,.48);background:rgba(211,173,116,.08);color:#edddc6;padding:16px 18px;cursor:pointer;font-size:9px;letter-spacing:.16em;text-transform:uppercase}.form-note{margin:0;font:11px/1.5 var(--sans);color:var(--muted)}.form-note code{font-size:10px}

.artwork{position:absolute;z-index:58;inset:0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.7fr);background:#050403;opacity:0;visibility:hidden;pointer-events:none;transition:.45s}
.artwork.open{opacity:1;visibility:visible;pointer-events:auto}.artwork-close{position:absolute;z-index:3;top:25px;left:32px;border:0;background:rgba(5,4,3,.48);backdrop-filter:blur(8px);padding:10px 12px;color:var(--muted);cursor:pointer;font-size:8px;letter-spacing:.16em;text-transform:uppercase}.artwork-visual{min-height:100%;display:grid;place-items:center;padding:70px;background:radial-gradient(circle at 50% 45%,#201b16,#090807 60%)}.artwork-image{width:min(72%,760px);height:min(78vh,900px);background-image:url("/assets/room.jpg");background-repeat:no-repeat;background-color:#15110e;box-shadow:0 35px 120px #000}.artwork-passport{display:flex;flex-direction:column;justify-content:center;padding:70px 6vw 55px;border-left:1px solid rgba(228,221,211,.1);overflow:auto}.artwork-passport h1{margin:17px 0 30px;font:400 clamp(48px,5vw,84px)/.9 var(--serif);letter-spacing:-.045em}.artwork-passport dl{margin:0 0 28px}.artwork-passport dl div{display:grid;grid-template-columns:110px 1fr;padding:10px 0;border-bottom:1px solid rgba(228,221,211,.1)}.artwork-passport dt{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.artwork-passport dd{margin:0;font:14px/1.35 var(--serif)}.artwork-passport p{font:16px/1.65 var(--serif);color:rgba(228,221,211,.66)}.buy-button{margin-top:18px}

@media(max-width:980px){.main-nav{gap:15px}.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-intro{grid-template-columns:1fr}.collection-intro small,.collection-intro h1,.collection-intro p{grid-column:1}.collection-intro small{grid-row:auto;margin-bottom:16px}.artwork{grid-template-columns:1fr}.artwork-visual{min-height:58vh;padding:60px 30px 25px}.artwork-image{height:50vh;width:min(75%,560px)}.artwork-passport{border-left:0;border-top:1px solid rgba(228,221,211,.1);padding:45px 8vw 70px}.about-layout,.contact-layout{grid-template-columns:1fr}.about-mark{display:none}}
@media(max-width:760px){.site-header{padding:18px 20px}.site-header .brand{font-size:26px}.menu-toggle{display:block}.main-nav{position:absolute;top:62px;left:20px;right:20px;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px 16px;border:1px solid rgba(228,221,211,.1);background:rgba(5,4,3,.94);backdrop-filter:blur(14px)}.main-nav.open{display:flex}.main-nav button{text-align:left;padding:14px 0;border-bottom:1px solid rgba(228,221,211,.09)}.main-nav .nav-secondary{margin-left:0;color:rgba(238,230,218,.48);font-size:8px}.main-nav .nav-contact{margin:0;padding:14px 0;border:0;color:rgba(238,230,218,.42)}.purchase-float{right:18px;bottom:18px;padding:12px}.view-head{padding:0 20px;min-height:62px}.view-head>span{font-size:14px}.collection-shell{padding:48px 20px 80px}.collection-intro{margin-bottom:35px}.collection-intro h1{font-size:48px}.art-grid{grid-template-columns:1fr;gap:30px}.about-layout,.contact-layout{width:auto;min-height:auto;padding:52px 22px 80px}.about-layout h1,.contact-layout h1{font-size:62px}.about-layout .about-lead{font-size:22px}.contact-form{padding:24px 18px}.artwork-visual{min-height:50vh;padding:65px 18px 22px}.artwork-image{width:78%;height:42vh}.artwork-passport{padding:38px 22px 70px}.artwork-passport h1{font-size:52px}.artwork-passport dl div{grid-template-columns:95px 1fr}}


/* v2.1 — direct contact channels */
.direct-contacts{display:grid;gap:8px;margin-top:8px;padding-top:16px;border-top:1px solid rgba(228,221,211,.1)}
.contact-channel{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(228,221,211,.09);color:rgba(237,221,198,.82);text-decoration:none;transition:color .25s ease,border-color .25s ease,transform .25s ease}
.contact-channel span{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact-channel b{font:400 14px/1.35 var(--serif);overflow-wrap:anywhere}
.contact-channel:hover,.contact-channel:focus-visible{color:#fff1d8;border-color:rgba(211,173,116,.45);transform:translateX(3px);outline:none}
.contact-channel-primary{color:#f0d9b5}
.artwork-contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.artwork-contacts a{display:grid;place-items:center;min-height:42px;border:1px solid rgba(228,221,211,.13);color:var(--muted);text-decoration:none;font-size:8px;letter-spacing:.14em;text-transform:uppercase;transition:border-color .25s ease,color .25s ease,background .25s ease}
.artwork-contacts a:hover,.artwork-contacts a:focus-visible{border-color:rgba(211,173,116,.48);background:rgba(211,173,116,.07);color:#edddc6;outline:none}
@media(max-width:520px){.contact-channel{grid-template-columns:1fr;gap:5px}.artwork-contacts{grid-template-columns:1fr}}

/* v2.4 — отдельная композиция комнаты для телефонов */
.room-picture{display:block;width:100%;height:100%}



@media (max-width:760px) and (orientation:landscape){
  .room-frame{width:min(100vw,133.333vh);height:auto;aspect-ratio:4/3}
  .room-image{object-fit:contain}
}

/* v2.5 — камин, усиленная пыль, книги и Instagram */
.dust-layer{filter:drop-shadow(0 0 4px rgba(255,208,145,.28))}
.dust{box-shadow:0 0 calc(var(--s)*4.5) rgba(255,203,143,.7)}
.room-actions{position:absolute;z-index:31;right:36px;bottom:32px;display:flex;align-items:center;gap:24px}
.room-actions .purchase-float{position:static}
.instagram-float{display:flex;align-items:center;gap:7px;color:rgba(234,220,198,.38);text-decoration:none;font-size:8px;letter-spacing:.15em;text-transform:uppercase;transition:color .25s ease,transform .25s ease}
.instagram-glyph{font-size:17px;line-height:1;letter-spacing:0}.instagram-float:hover,.instagram-float:focus-visible{color:#eadcc6;transform:translateY(-1px);outline:none}
.books-layout{width:min(1180px,90vw);min-height:calc(100svh - 72px);margin:auto;padding:80px 0;display:grid;grid-template-columns:1fr 1.2fr;gap:8vw;align-items:center}
.books-layout h1{margin:18px 0 0;font:400 clamp(58px,7.4vw,108px)/.9 var(--serif);letter-spacing:-.05em}.books-layout small{font-size:8px;letter-spacing:.2em;color:var(--muted)}
.book-sections{display:grid;gap:16px}.book-section{display:grid;grid-template-columns:48px 1fr auto;gap:10px 18px;align-items:center;text-align:left;padding:26px 4px;border:0;border-bottom:1px solid rgba(228,221,211,.13);background:transparent;color:var(--ink);cursor:pointer}.book-section span{grid-row:1/4;font-size:9px;color:var(--muted)}.book-section strong{font:400 31px/1.1 var(--serif)}.book-section p{grid-column:2;margin:0;font:15px/1.5 var(--serif);color:var(--muted)}.book-section b{grid-column:3;grid-row:1/4;font:400 9px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:rgba(234,220,198,.5)}.book-section:hover b,.book-section:focus-visible b{color:#eadcc6}.book-section:focus-visible{outline:1px solid rgba(211,173,116,.35);outline-offset:8px}
@media(max-width:980px){.books-layout{grid-template-columns:1fr;gap:50px}.books-layout header{max-width:760px}}

@media (max-width:760px) and (orientation:portrait){
  .room-actions{display:none}
  .books-layout{width:auto;min-height:auto;padding:58px 22px 90px;gap:42px}
  .books-layout h1{font-size:54px}.book-section{grid-template-columns:38px 1fr;padding:23px 0}.book-section strong{font-size:25px}.book-section b{grid-column:2;grid-row:auto;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.smoke{animation:none}}

/* v3.0 — experience architecture upgrade */
.site-header{position:absolute;z-index:32;inset:0 0 auto 0;display:flex;align-items:center;padding:28px 38px;pointer-events:none}
.site-header .brand{position:static;padding:0;pointer-events:auto;font:400 31px/1 var(--serif);letter-spacing:.04em;color:var(--ink);text-decoration:none;text-shadow:0 2px 16px #000}
.main-nav,.menu-toggle{pointer-events:auto}
.main-nav{margin-left:auto;display:none;flex-direction:column;align-items:stretch;gap:0;width:min(290px,calc(100vw - 40px));padding:18px 22px;border:1px solid rgba(228,221,211,.09);background:rgba(5,4,3,.9);box-shadow:0 24px 80px rgba(0,0,0,.55);backdrop-filter:blur(18px)}
.main-nav.open{display:flex}.main-nav button{border:0;border-bottom:1px solid rgba(228,221,211,.08);background:none;padding:16px 0;text-align:left;color:rgba(238,230,218,.78);font-size:9px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}.main-nav button:last-child{border-bottom:0}.main-nav button:disabled{opacity:.35;cursor:default}.main-nav button:hover:not(:disabled),.main-nav button:focus-visible:not(:disabled){color:#fff;outline:none}
.menu-toggle{display:block;margin-left:22px;border:0;background:none;padding:10px 0;color:rgba(238,230,218,.74);font-size:8px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.room-actions{right:38px;bottom:28px}.instagram-float{color:rgba(234,220,198,.32)}

.world-memory{position:absolute;z-index:10;pointer-events:none;opacity:0;transition:opacity 1.4s ease,filter 1.4s ease}
.memory-bookmark{left:9.8%;top:54%;width:.7%;height:8%;background:linear-gradient(#7e3d31,#2f1714);transform:rotate(4deg);box-shadow:0 6px 14px rgba(0,0,0,.5)}
.memory-object{right:18.5%;bottom:16%;width:2.4%;aspect-ratio:1;border:1px solid rgba(233,203,153,.25);border-radius:50%;box-shadow:0 0 18px rgba(226,174,99,.2)}
.memory-diary .memory-bookmark,.memory-reader .memory-object{opacity:.88}.memory-kishen .rift-glow{filter:blur(9px) brightness(1.35);opacity:.72}.world-remembers .light-right{opacity:.72}

.collection-shell{width:min(1380px,92vw);padding:12vh 0 15vh}.collection-intro{display:grid;grid-template-columns:1fr 1.2fr;gap:8vw;align-items:end;margin-bottom:12vh}.collection-intro h1{grid-column:1/3;margin:0;font:400 clamp(64px,9vw,138px)/.84 var(--serif);letter-spacing:-.055em;max-width:1100px}.collection-intro p{grid-column:2;margin:28px 0 0;max-width:620px}.collection-intro small{grid-column:1;grid-row:1}
.art-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2.2vw,34px);align-items:start}
.art-card{grid-column:span 4}.art-card-1{grid-column:1/8}.art-card-2{grid-column:9/13;margin-top:18vh}.art-card-3{grid-column:2/6;margin-top:8vh}.art-card-4{grid-column:7/13;margin-top:18vh}.art-card-5{grid-column:1/5;margin-top:8vh}.art-card-6{grid-column:6/11;margin-top:2vh}
.art-card-1 .art-card-image,.art-card-4 .art-card-image{aspect-ratio:1.28}.art-card-image{box-shadow:none;filter:saturate(.85) brightness(.88);transition:transform .9s cubic-bezier(.2,.75,.2,1),filter .55s}.art-card:hover .art-card-image,.art-card:focus-visible .art-card-image{transform:scale(1.018);filter:saturate(.96) brightness(1.02);box-shadow:none}.art-card-copy{padding-top:13px}.art-card-copy span{font-size:8px;letter-spacing:.13em;text-transform:uppercase}

.artwork{grid-template-columns:minmax(0,1.5fr) minmax(390px,.72fr)}
.artwork-visual{position:relative;overflow:hidden}.artwork-counter{position:absolute;top:28px;right:32px;color:var(--muted);font-size:8px;letter-spacing:.16em}.artwork-nav{position:absolute;right:32px;bottom:28px;display:flex;gap:12px}.artwork-nav button{width:44px;height:44px;border:1px solid rgba(228,221,211,.14);background:rgba(5,4,3,.45);color:var(--muted);cursor:pointer}.artwork-nav button:hover,.artwork-nav button:focus-visible{border-color:rgba(211,173,116,.45);color:#fff;outline:none}.artwork-passport{background:linear-gradient(145deg,#d9d0c0,#bfb2a0);color:#221d18;border-left:0}.artwork-passport small{color:rgba(34,29,24,.55);letter-spacing:.18em}.artwork-passport h1{color:#17130f}.archive-series{margin:-16px 0 24px;color:rgba(34,29,24,.56);font-size:13px;text-transform:uppercase;letter-spacing:.12em}.artwork-passport dl div{border-bottom-color:rgba(34,29,24,.16)}.artwork-passport dt{color:rgba(34,29,24,.54)}.artwork-passport dd{color:#211c17}.artwork-passport>p{color:rgba(34,29,24,.72)}.artwork-passport .buy-button{border-color:rgba(34,29,24,.45);background:transparent;color:#211c17}.artwork-passport .buy-button:hover,.artwork-passport .buy-button:focus-visible{background:#211c17;color:#d9d0c0;outline:none}.artwork-contacts a{border-color:rgba(34,29,24,.16);color:rgba(34,29,24,.58)}.artwork-contacts a:hover,.artwork-contacts a:focus-visible{border-color:rgba(34,29,24,.5);background:rgba(34,29,24,.06);color:#211c17}

.book-page h2{margin:28px 0 18px;font:400 clamp(42px,6vw,76px)/.92 var(--serif);letter-spacing:-.045em}.book-page em{display:block;max-width:250px;font:italic 15px/1.5 var(--serif);opacity:.54}.page-right [data-diary-text] p{margin:0 0 1.25em;font:22px/1.58 var(--serif)}

.reader{position:absolute;z-index:54;inset:0;background:#060505;opacity:0;visibility:hidden;pointer-events:none;transition:.5s;display:grid;grid-template-rows:auto 1fr auto}.reader.open{opacity:1;visibility:visible;pointer-events:auto}.reader-close{position:absolute;z-index:4;top:28px;left:38px;border:0;background:none;color:var(--muted);font-size:8px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}.reader-head{display:flex;justify-content:center;gap:32px;padding:30px;color:var(--muted);font-size:8px;letter-spacing:.16em;text-transform:uppercase}.reader-stage{display:grid;place-items:center;padding:28px}.reader-page{position:relative;width:min(820px,78vw);min-height:min(68vh,760px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(36px,7vw,90px);background:linear-gradient(145deg,#dad1c1,#bcae9a);color:#211c17;box-shadow:0 34px 120px rgba(0,0,0,.55)}.reader-page::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(#493f34 .45px,transparent .45px);background-size:4px 4px}.reader-page small,.reader-page h2,.reader-page p{position:relative;z-index:1}.reader-page small{font-size:9px;letter-spacing:.22em}.reader-page h2{margin:18px 0 24px;font:400 clamp(58px,9vw,128px)/.82 var(--serif);letter-spacing:-.055em}.reader-page p{max-width:32em;margin:0;font:clamp(19px,2vw,29px)/1.45 var(--serif)}.reader-controls{position:absolute;right:38px;bottom:28px;display:flex;gap:12px}.reader-controls button{width:46px;height:46px;border:1px solid rgba(228,221,211,.14);background:none;color:var(--muted);cursor:pointer}.reader-controls button:hover,.reader-controls button:focus-visible{border-color:rgba(211,173,116,.45);color:#fff;outline:none}

.book-section-closed{opacity:.38;cursor:default}.book-section-closed:hover b{color:rgba(234,220,198,.5)}
.contact-form button[type="submit"]{transition:background .25s,color .25s}.contact-form button[type="submit"]:hover,.contact-form button[type="submit"]:focus-visible{background:rgba(211,173,116,.16);outline:none}

@media(max-width:980px){.collection-intro{grid-template-columns:1fr}.collection-intro small,.collection-intro h1,.collection-intro p{grid-column:1}.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.art-card,.art-card-1,.art-card-2,.art-card-3,.art-card-4,.art-card-5,.art-card-6{grid-column:auto;margin-top:0}.art-card-1 .art-card-image,.art-card-4 .art-card-image{aspect-ratio:4/5}.artwork{grid-template-columns:1fr}.artwork-passport{border-top:0}.reader-page{width:min(880px,88vw)}}
@media(max-width:760px){.site-header{padding:calc(20px + env(safe-area-inset-top)) 22px 18px}.site-header .brand{font-size:clamp(30px,9vw,42px)}.menu-toggle{margin-left:auto;width:auto;height:auto;color:rgba(229,204,169,.82);font-size:8px}.menu-toggle::before{display:none}.main-nav{position:absolute;top:calc(74px + env(safe-area-inset-top));right:18px;left:auto}.collection-shell{width:auto;padding:58px 22px 90px}.collection-intro{margin-bottom:52px}.collection-intro h1{font-size:54px}.art-grid{grid-template-columns:1fr;gap:46px}.artwork-counter{top:23px;right:20px}.artwork-nav{right:20px;bottom:18px}.artwork-visual{min-height:56vh}.artwork-passport{padding:42px 22px 72px}.reader-head{justify-content:flex-end;padding:30px 22px}.reader-stage{padding:18px}.reader-page{width:100%;min-height:70vh;padding:34px 26px}.reader-page h2{font-size:62px}.reader-controls{right:20px;bottom:18px}.reader-close{left:22px}.memory-bookmark{left:4%;top:52%;width:1.3%;height:7%}.memory-object{right:14%;bottom:15%;width:5%}}

/* v3.0.1 — navigation, interaction and cursor corrections */
:root{
  --menu-ink:rgba(238,230,218,.82);
  --dirty-gold:#b89a67;
}

/* Fine gold spear cursor for precise devices */
@media (pointer:fine){
  html,body,.app,.room,.room-frame,
  button,a,[role="button"],input,textarea{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 L25 16 L16 18 L12 27 L4 3 Z' fill='%23c9aa72' stroke='%236f5734' stroke-width='1.2'/%3E%3Cpath d='M7 7 L17 17' stroke='%23f1dfbd' stroke-width='1' opacity='.8'/%3E%3C/svg%3E") 4 3, auto;
  }
}

/* No floating labels over objects */
.cursor-hint{display:none}

/* Header controls remain in the upper-right corner */
.site-header{
  align-items:flex-start;
  padding:28px 38px;
}
.header-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
  pointer-events:auto;
}
.language-switch{
  min-width:48px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(184,154,103,.62);
  border-radius:7px;
  background:rgba(5,4,3,.34);
  color:#cdb78f;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.language-switch:hover,.language-switch:focus-visible{
  border-color:rgba(214,187,139,.9);
  color:#ead8b8;
  background:rgba(184,154,103,.08);
  outline:none;
}
.menu-toggle{
  margin:0;
  min-width:62px;
  height:34px;
  padding:0;
  color:var(--menu-ink);
  font-size:10px;
  letter-spacing:.18em;
  text-align:right;
}

/* Menu opens below the controls, aligned to the right */
.main-nav{
  position:absolute;
  top:78px;
  right:38px;
  left:auto;
  margin:0;
  width:min(300px,calc(100vw - 40px));
  padding:14px 22px;
  border:1px solid rgba(228,221,211,.13);
  border-radius:3px;
  background:rgba(5,4,3,.93);
}
.main-nav button,
.main-nav .nav-secondary,
.main-nav .nav-contact{
  width:100%;
  margin:0;
  padding:17px 0;
  border:0;
  border-bottom:1px solid rgba(228,221,211,.11);
  color:var(--menu-ink);
  font-size:10px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.18em;
  text-align:left;
  opacity:1;
}
.main-nav button:last-child{border-bottom:0}
.main-nav button:hover,.main-nav button:focus-visible{
  color:#fff;
  text-shadow:0 0 13px rgba(255,255,255,.14);
}

/* Interactive objects: only a subtle white contour glow */
.hit:not(.hit-rift)::before{
  display:none;
}
.hit:not(.hit-rift)::after{
  content:"";
  display:block;
  position:absolute;
  inset:-3px;
  border:1px solid transparent;
  border-radius:var(--hit-radius,2px);
  background:none;
  box-shadow:none;
  opacity:0;
  transform:none;
  filter:none;
  animation:none;
  transition:opacity .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.hit:not(.hit-rift):hover::after,
.hit:not(.hit-rift):focus-visible::after{
  opacity:1;
  border-color:rgba(255,255,255,.56);
  box-shadow:0 0 8px rgba(255,255,255,.18),inset 0 0 10px rgba(255,255,255,.04);
}
@media (pointer:coarse){
  .hit:not(.hit-rift)::after{opacity:0}
  .hit:not(.hit-rift):active::after{opacity:.8}
}

/* Instagram: larger and dirty-gold */
.room-actions{
  right:38px;
  bottom:28px;
}
.instagram-float{
  color:var(--dirty-gold);
  font-size:11px;
  letter-spacing:.17em;
  font-weight:500;
  text-shadow:0 1px 10px rgba(0,0,0,.9);
}
.instagram-glyph{
  font-size:21px;
  color:#c4a36d;
}
.instagram-float:hover,.instagram-float:focus-visible{
  color:#d7bb8a;
  text-shadow:0 0 12px rgba(194,160,105,.2);
}

@media(max-width:760px){
  .site-header{padding:calc(20px + env(safe-area-inset-top)) 20px 18px}
  .header-controls{gap:12px}
  .language-switch{min-width:44px;height:32px;font-size:9px}
  .menu-toggle{height:32px;font-size:9px}
  .main-nav{
    top:calc(70px + env(safe-area-inset-top));
    right:18px;
    width:min(292px,calc(100vw - 36px));
  }
  .main-nav button,
  .main-nav .nav-secondary,
  .main-nav .nav-contact{
    font-size:10px;
    padding:16px 0;
  }
}

/* v3.0.3 — polished paths, language control and object interaction */
:root{
  --ui-gold:#b89a67;
  --ui-gold-bright:#d4ba88;
  --ui-cream:#eee6d9;
  --ui-panel:rgba(7,6,5,.91);
}

/* Right-side controls form one quiet vertical axis. */
.site-header{
  align-items:flex-start;
  padding:30px 42px;
}
.header-controls{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  pointer-events:auto;
  position:relative;
  z-index:44;
}

/* Language button: restrained brass frame, no white pills. */
.language-control{
  position:relative;
  display:block;
}
.language-switch{
  width:58px;
  min-width:58px;
  height:34px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  border:1px solid rgba(184,154,103,.58);
  border-radius:6px;
  background:rgba(7,6,5,.32);
  color:#c9ad7c;
  font-size:9px;
  font-weight:400;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:border-color .25s ease,color .25s ease,background .25s ease,box-shadow .25s ease;
}
.language-switch:hover,.language-switch:focus-visible,
.language-switch[aria-expanded="true"]{
  border-color:rgba(212,186,136,.86);
  color:var(--ui-gold-bright);
  background:rgba(184,154,103,.07);
  box-shadow:0 0 18px rgba(184,154,103,.08);
  outline:none;
}
.language-chevron{
  font-size:10px;
  line-height:1;
  opacity:.72;
  transform:translateY(-1px);
  transition:transform .28s ease;
}
.language-switch[aria-expanded="true"] .language-chevron{
  transform:rotate(180deg) translateY(1px);
}
.language-menu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:48;
  width:58px;
  padding:4px;
  display:grid;
  gap:2px;
  border:1px solid rgba(184,154,103,.38);
  border-radius:6px;
  background:rgba(7,6,5,.96);
  box-shadow:0 18px 44px rgba(0,0,0,.48);
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-5px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.75,.2,1),visibility 0s linear .3s;
}
.language-menu.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}
.language-option{
  width:100%;
  min-height:30px;
  padding:0;
  border:0;
  border-radius:3px;
  background:transparent;
  color:rgba(232,218,194,.5);
  font-size:9px;
  font-weight:400;
  letter-spacing:.16em;
  cursor:pointer;
}
.language-option:hover,.language-option:focus-visible{
  color:#ead8b8;
  background:rgba(184,154,103,.08);
  outline:none;
}
.language-option.is-active{
  color:#ead8b8;
  background:rgba(184,154,103,.11);
}

/* Paths trigger sits directly below language and never touches viewport edge. */
.menu-toggle{
  display:block;
  width:auto;
  min-width:58px;
  height:26px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(238,230,218,.72);
  font-size:9px;
  font-weight:400;
  line-height:1;
  letter-spacing:.22em;
  text-align:right;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .25s ease,text-shadow .25s ease;
}
.menu-toggle:hover,.menu-toggle:focus-visible,
.menu-toggle[aria-expanded="true"]{
  color:#f0e7d9;
  text-shadow:0 0 14px rgba(212,186,136,.13);
  outline:none;
}

/* The paths panel stays mounted and reveals itself in stages. */
.main-nav{
  position:absolute;
  top:96px;
  right:42px;
  left:auto;
  z-index:42;
  margin:0;
  width:min(300px,calc(100vw - 42px));
  padding:13px 22px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  border:1px solid rgba(228,221,211,.13);
  border-radius:4px;
  background:var(--ui-panel);
  box-shadow:0 26px 86px rgba(0,0,0,.58);
  backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-10px) scale(.985);
  transform-origin:top right;
  transition:opacity .4s ease,transform .48s cubic-bezier(.2,.75,.2,1),visibility 0s linear .48s;
}
.main-nav.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.main-nav button,
.main-nav .nav-secondary,
.main-nav .nav-contact{
  width:100%;
  min-height:50px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border:0;
  border-bottom:1px solid rgba(228,221,211,.1);
  background:transparent;
  color:rgba(238,230,218,.72);
  font-size:10px;
  font-weight:400;
  line-height:1;
  letter-spacing:.19em;
  text-align:left;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(-8px);
  cursor:pointer;
  transition:opacity .4s ease,transform .48s cubic-bezier(.2,.75,.2,1),color .25s ease,text-shadow .25s ease;
}
.main-nav button:last-child{border-bottom:0}
.main-nav.open button{opacity:1;transform:translateY(0)}
.main-nav.open button:nth-child(1){transition-delay:.07s}
.main-nav.open button:nth-child(2){transition-delay:.14s}
.main-nav.open button:nth-child(3){transition-delay:.21s}
.main-nav.open button:nth-child(4){transition-delay:.28s}
.main-nav button:hover,.main-nav button:focus-visible{
  color:#fff;
  text-shadow:0 0 14px rgba(255,255,255,.14);
  outline:none;
}
.main-nav button[aria-current="page"]{
  color:#f1e8da;
  text-shadow:0 0 14px rgba(220,190,145,.16);
}
.main-nav button[aria-current="page"]::after{
  content:"";
  width:18px;
  height:1px;
  margin-left:12px;
  background:rgba(199,164,109,.58);
}

/* No text labels. Each object reacts with one soft white contour. */
.cursor-hint{display:none}
.hit:not(.hit-rift){overflow:visible}
.hit:not(.hit-rift)::before{display:none}
.hit:not(.hit-rift)::after{
  content:"";
  display:block;
  position:absolute;
  inset:-2px;
  border:1px solid transparent;
  border-radius:var(--hit-radius,2px);
  background:rgba(255,255,255,0);
  box-shadow:none;
  opacity:0;
  transform:none;
  filter:none;
  animation:none;
  pointer-events:none;
  transition:opacity .28s ease,border-color .3s ease,box-shadow .34s ease,background .3s ease;
}
.hit:not(.hit-rift):hover::after,
.hit:not(.hit-rift):focus-visible::after{
  opacity:1;
  border-color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.012);
  box-shadow:inset 0 0 18px rgba(255,255,255,.045),0 0 8px rgba(255,255,255,.28),0 0 19px rgba(255,255,255,.1);
}
.hit:not(.hit-rift):focus-visible{outline:none}

/* Instagram remains legible without becoming a button. */
.room-actions{
  right:42px;
  bottom:30px;
}
.instagram-float{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--ui-gold);
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.17em;
  text-shadow:0 1px 12px rgba(0,0,0,.92);
}
.instagram-glyph{
  width:21px;
  height:21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  overflow:visible;
}
.instagram-dot{fill:currentColor;stroke:none}
.instagram-float:hover,.instagram-float:focus-visible{
  color:#d6b87f;
  text-shadow:0 0 13px rgba(194,160,105,.22);
  transform:translateY(-1px);
  outline:none;
}

@media(pointer:coarse){
  .hit:not(.hit-rift):hover::after{opacity:0}
  .hit:not(.hit-rift):active::after{
    opacity:1;
    border-color:rgba(255,255,255,.62);
    box-shadow:0 0 16px rgba(255,255,255,.16);
  }
}

@media(max-width:760px){
  .site-header{padding:calc(20px + env(safe-area-inset-top)) 20px 18px}
  .header-controls{gap:9px}
  .language-switch{width:54px;min-width:54px;height:32px}
  .language-menu{width:54px}
  .menu-toggle{min-width:54px;height:24px;font-size:8px}
  .main-nav{
    top:calc(88px + env(safe-area-inset-top));
    right:20px;
    width:min(292px,calc(100vw - 40px));
  }
  .main-nav button,
  .main-nav .nav-secondary,
  .main-nav .nav-contact{
    min-height:48px;
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .main-nav,.main-nav button,.language-menu{transition-duration:.01ms}
}
.language-switch.language-unavailable{
  color:#e2c693;
  border-color:rgba(226,198,147,.9);
  animation:languageNotice .9s ease both;
}
@keyframes languageNotice{
  0%,100%{box-shadow:0 0 0 rgba(212,186,136,0)}
  45%{box-shadow:0 0 20px rgba(212,186,136,.16)}
}

/* =========================================================
   v3.1 MOBILE DIRECTOR'S CUT
   Dedicated portrait composition. Desktop rules stay intact.
   ========================================================= */


/* =========================================================
   v3.1.1 — MOBILE INTERFACE POLISH
   Larger service UI, clearer touch affordances and calmer menu.
   ========================================================= */


@keyframes mobileObjectBreath{
  0%,72%,100%{opacity:0;box-shadow:inset 0 0 28px rgba(255,255,255,.02),0 0 12px rgba(255,255,255,.05)}
  78%{opacity:.12;box-shadow:inset 0 0 34px rgba(255,255,255,.035),0 0 18px rgba(255,255,255,.1)}
  84%{opacity:0}
}
@keyframes mobileRiftBreath{
  0%,100%{opacity:.15;filter:brightness(1)}
  50%{opacity:.32;filter:brightness(1.18)}
}

@media (max-width:390px) and (orientation:portrait){
  .site-header{padding-left:17px;padding-right:17px}
  .site-header .brand{font-size:36px}
  .main-nav{padding-left:24px;padding-right:24px}
  .main-nav::before{left:24px}
  .main-nav button,.main-nav .nav-secondary,.main-nav .nav-contact{font-size:15px}
}

/* v3.1.2 — Mobile Instagram placement and reveal */
@media (max-width: 820px){
  .room-actions{
    right:34px;
    bottom:calc(124px + env(safe-area-inset-bottom));
    z-index:86;
    pointer-events:none;
  }

  .instagram-float{
    pointer-events:auto;
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 0;
    color:#b89a68;
    font-size:15px;
    font-weight:500;
    line-height:1;
    letter-spacing:.14em;
    text-shadow:0 3px 18px rgba(0,0,0,.98),0 0 12px rgba(184,154,104,.10);
    opacity:0;
    transform:translateY(7px);
    animation:mobileInstagramReveal 1.25s cubic-bezier(.2,.75,.25,1) 2.2s forwards;
  }

  .instagram-glyph{
    width:24px;
    height:24px;
    stroke-width:1.55;
    flex:0 0 auto;
  }

  .instagram-float:active,
  .instagram-float:focus-visible{
    color:#d7bd8d;
    text-shadow:0 0 12px rgba(215,189,141,.28),0 3px 18px rgba(0,0,0,.96);
    transform:translateY(0);
    outline:none;
  }
}

@keyframes mobileInstagramReveal{
  0%{opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:translateY(0)}
}

@media (max-width: 430px) and (max-height: 760px){
  .room-actions{
    bottom:calc(102px + env(safe-area-inset-bottom));
    right:26px;
  }
}

/* v3.1.3 — definitive mobile Instagram visibility fix */
@media (max-width: 820px) and (orientation: portrait){
  .room-actions{
    display:flex;
    position:fixed;
    right:28px;
    bottom:calc(150px + env(safe-area-inset-bottom, 0px));
    z-index:2147483000;
    align-items:center;
    visibility:visible;
    opacity:1;
    pointer-events:none;
  }

  .room-actions .instagram-float{
    display:flex;
    visibility:visible;
    pointer-events:auto;
    opacity:1;
    transform:none;
    animation:none;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:10px 2px;
    color:#c3a26d;
    font-size:15px;
    font-weight:600;
    line-height:1;
    letter-spacing:.14em;
    text-shadow:0 3px 18px rgba(0,0,0,.98),0 0 14px rgba(195,162,109,.18);
  }

  .room-actions .instagram-glyph{
    display:block;
    width:24px;
    height:24px;
    min-width:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    overflow:visible;
  }

  .room-actions .instagram-dot{
    fill:currentColor;
    stroke:none;
  }
}

@media (max-width: 430px) and (orientation: portrait){
  .room-actions{
    right:24px;
    bottom:calc(164px + env(safe-area-inset-bottom, 0px));
  }
}

/* v3.1.4 — Instagram aligned to the lower safe strip above mobile browser chrome */
@media (max-width: 820px) and (orientation: portrait){
  .room-actions{
    display:flex;
    position:fixed;
    right:24px;
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    z-index:2147483000;
    align-items:center;
    visibility:visible;
    opacity:1;
    pointer-events:none;
  }

  .room-actions .instagram-float{
    pointer-events:auto;
    opacity:1;
    transform:none;
    animation:none;
  }
}

@media (max-width: 390px) and (orientation: portrait){
  .room-actions{
    right:18px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* v4.0 — Three.js: живой разлом */
.rift-three{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.86;transition:opacity .45s ease,filter .5s ease;contain:strict}
.rift-three canvas{display:block;width:100%;height:100%}
.rift-three.is-awake{opacity:1;filter:brightness(1.14) saturate(1.08)}
.rift-three.is-entering{opacity:1;filter:brightness(1.65) saturate(1.2)}
.room-frame.three-rift-ready>.rift-glow{opacity:.12;filter:blur(16px)}
@media(max-width:760px) and (orientation:portrait){.rift-three{opacity:.82}}
@media(prefers-reduced-motion:reduce){.rift-three{opacity:.64}}

/* v4.1 — Кишень как повреждение изображения, а не светящийся портал */
.rift-three{
  position:absolute;
  inset:0;
  z-index:8;
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:normal;
  opacity:0;
  filter:none;
  transition:opacity .8s ease;
  contain:strict;
}
.rift-three.is-ready{opacity:1}
.rift-three.is-awake,
.rift-three.is-entering{filter:none;opacity:1}
.rift-three canvas{display:block;width:100%;height:100%}

/* Убираем прежнее голубое свечение. Базовое изображение уже содержит разлом. */
.rift-glow,
.room-frame.three-rift-ready>.rift-glow,
.room-frame.rift-awake .rift-glow,
.memory-kishen .rift-glow{
  animation:none;
  opacity:.018;
  filter:blur(22px);
  mix-blend-mode:normal;
  background:radial-gradient(ellipse at 50% 53%,rgba(150,158,164,.045),transparent 54%);
}
.room-frame.rift-awake .rift-glow{opacity:.035}

@media(max-width:760px) and (orientation:portrait){
  .rift-three{opacity:0}
  .rift-three.is-ready{opacity:.94}
  .rift-glow,
  .room-frame.rift-awake .rift-glow{opacity:.012}
}

@media(prefers-reduced-motion:reduce){
  .rift-three.is-ready{opacity:.72}
}


/* v4.2 — стабильная атмосферная Кишень без WebGL-оверлея */
.rift-three,
.world-memory,
.memory-bookmark,
.memory-object{
  display:none;
}

/* Исходное изображение уже содержит разлом. Анимация только слегка меняет воздух вокруг него. */
.rift-glow{
  z-index:7;
  left:39%;
  top:2%;
  width:22%;
  height:96%;
  opacity:.018;
  mix-blend-mode:normal;
  filter:blur(26px);
  background:radial-gradient(
    ellipse at 50% 50%,
    rgba(128,138,146,.055) 0%,
    rgba(74,82,89,.025) 28%,
    transparent 68%
  );
  animation:pank-rift-breath 9s ease-in-out infinite alternate;
  transform:translate3d(0,0,0) scaleX(.92);
  will-change:opacity,transform;
}

.room-frame.rift-awake .rift-glow{
  opacity:.042;
  transform:translate3d(0,0,0) scaleX(.98);
  filter:blur(24px);
}

@keyframes pank-rift-breath{
  0%{opacity:.014;transform:translate3d(-.15%,0,0) scaleX(.90)}
  55%{opacity:.023;transform:translate3d(.1%,0,0) scaleX(.94)}
  100%{opacity:.017;transform:translate3d(0,-.15%,0) scaleX(.91)}
}

@media (max-width:760px) and (orientation:portrait){
  .rift-glow{
    left:29%;
    top:5%;
    width:40%;
    height:88%;
    opacity:.014;
    filter:blur(22px);
  }
  .room-frame.rift-awake .rift-glow{opacity:.032}
}

/* iPadOS / WebKit: не использовать blend-mode и отдельные GPU-буферы поверх комнаты. */
@supports (-webkit-touch-callout:none){
  .rift-glow{
    mix-blend-mode:normal;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
}

@media (prefers-reduced-motion:reduce){
  .rift-glow{animation:none;opacity:.014;transform:none}
}

/* v4.3 — незаметная интерактивность: никаких рамок, только живой курсор */
.hit::before,
.hit::after,
.hit.is-tapped::before,
.hit.is-tapped::after{
  display:none;
  content:none;
  opacity:0;
  border:0;
  box-shadow:none;
  background:none;
  animation:none;
}

.cursor-hint{
  position:fixed;
  z-index:120;
  left:0;
  top:0;
  width:20px;
  height:20px;
  padding:0;
  border:1px solid rgba(239,224,201,.82);
  border-radius:50%;
  background:rgba(225,195,150,.06);
  box-shadow:0 0 14px rgba(216,178,123,.16);
  opacity:0;
  pointer-events:none;
  transform:translate3d(-50%,-50%,0) scale(.72);
  transition:opacity .16s ease,transform .18s ease,border-color .18s ease;
  backdrop-filter:none;
  will-change:left,top,transform,opacity;
}
.cursor-hint::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:rgba(239,224,201,.72);
  transform:scale(.35);
  opacity:.48;
}
.cursor-hint.show{
  opacity:1;
  transform:translate3d(-50%,-50%,0) scale(1);
  animation:pankCursorPulse 1.65s ease-in-out infinite;
}
@keyframes pankCursorPulse{
  0%,100%{transform:translate3d(-50%,-50%,0) scale(.88);box-shadow:0 0 8px rgba(216,178,123,.10)}
  50%{transform:translate3d(-50%,-50%,0) scale(1.18);box-shadow:0 0 20px rgba(216,178,123,.25)}
}

@media (hover:hover) and (pointer:fine){
  .hit{cursor:none}
}
@media (hover:none),(pointer:coarse){
  .cursor-hint{display:none}
  .hit{cursor:pointer}
}
@media (prefers-reduced-motion:reduce){
  .cursor-hint.show{animation:none;transform:translate3d(-50%,-50%,0) scale(1)}
}

/* v4.4 — cinematic side vignette
   The original room keeps its 4:3 geometry. A dark, blurred echo fills wide screens,
   while the visible photograph dissolves softly into it instead of ending as a hard edge. */
@media (min-width:761px){
  .room::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:-5%;
    pointer-events:none;
    background-image:url("/assets/room.jpg");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    filter:blur(34px) brightness(.25) saturate(.68);
    opacity:.62;
    transform:scale(1.07);
  }

  .room::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(90deg,
        rgba(0,0,0,.76) 0%,
        rgba(0,0,0,.34) 5%,
        rgba(0,0,0,0) 17%,
        rgba(0,0,0,0) 83%,
        rgba(0,0,0,.34) 95%,
        rgba(0,0,0,.76) 100%),
      radial-gradient(ellipse at 50% 50%,
        transparent 52%,
        rgba(0,0,0,.14) 78%,
        rgba(0,0,0,.38) 100%);
  }

  .room-frame{
    z-index:2;
  }

  .room-picture{
    display:block;
    width:100%;
    height:100%;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.32) 1.8%,
      #000 6.5%,
      #000 93.5%,
      rgba(0,0,0,.32) 98.2%,
      transparent 100%);
    mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.32) 1.8%,
      #000 6.5%,
      #000 93.5%,
      rgba(0,0,0,.32) 98.2%,
      transparent 100%);
  }
}

/* On narrower landscape screens there is little empty space, so keep the fade restrained. */
@media (min-width:761px) and (max-aspect-ratio:16/10){
  .room-picture{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 3.5%,#000 96.5%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 3.5%,#000 96.5%,transparent 100%);
  }
  .room::after{opacity:.72}
}

/* v4.5 — многослойный сигаретный воздух комнаты.
   Canvas не перехватывает события и работает поверх изображения,
   но ниже теней, интерфейса и интерактивных зон. */
.room-smoke-canvas{
  position:absolute;
  z-index:6;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.92;
  mix-blend-mode:screen;
  filter:blur(.25px) saturate(.78);
  transform:translateZ(0);
}

/* Потолочный воздух должен быть заметнее на широком экране. */
@media (min-width:761px){
  .room-smoke-canvas{opacity:.96}
}

/* На мобильном сохраняем объём, но не перекрываем интерфейс. */
@media (max-width:760px) and (orientation:portrait){
  .room-smoke-canvas{opacity:.78;filter:blur(.15px) saturate(.76)}
}

@media (prefers-reduced-motion:reduce){
  .room-smoke-canvas{opacity:.5}
}


/* v4.9 — «Паразитизм» baked into the room artwork itself.
   No floating DOM frame: the original wall frame supplies perspective, scale and lighting. */
.hit-series-right{z-index:9}
.crop-parasitism{
  background-image:url("/assets/art/parasitism.webp");
  background-size:contain;
  background-position:center;
  background-color:#0d0b09;
}
.art-card-image.crop-parasitism{aspect-ratio:3/4;background-repeat:no-repeat}
.artwork-image.crop-parasitism{background-repeat:no-repeat;background-size:contain}

/* =========================================================
   Պանկ v6.0 Foundation
   Three layouts. One hotspot map per layout. One camera system.
   ========================================================= */
:root{
  --font-display:Georgia,"Times New Roman",serif;
  --font-interface:Arial,Helvetica,sans-serif;
  --camera-scale:1;
  --camera-darkness:1;
  --camera-blur:0px;
  --camera-duration:860ms;
}
html,body{overscroll-behavior:none}
.room{overflow:hidden;touch-action:manipulation}
.room-frame{
  transform:scale(var(--camera-scale));
  filter:brightness(var(--camera-darkness)) blur(var(--camera-blur));
  transition:
    transform var(--camera-duration) cubic-bezier(.22,.74,.18,1),
    filter calc(var(--camera-duration) * .72) ease;
  will-change:transform,filter;
}
.room-frame:not(.camera-moving){will-change:auto}
.hit{left:var(--hit-x);top:var(--hit-y);width:var(--hit-w);height:var(--hit-h)}
.hit-label,.rift-scroll-label{display:none}
.hit:focus{outline:none}
.hit:focus-visible{outline:1px solid rgba(244,232,207,.92);outline-offset:4px;box-shadow:0 0 0 1px rgba(25,18,14,.72),0 0 18px rgba(232,199,150,.24)}
button:focus-visible,a:focus-visible{outline:1px solid rgba(244,232,207,.92);outline-offset:4px}
.menu-toggle,.nav-secondary{font-size:clamp(10px,2.6vw,12px);line-height:1.25;letter-spacing:.16em}
.panel-content,.contact-form,.art-card,.book-section,.main-nav{border-radius:0;box-shadow:none}

/* Desktop map */
.hit-library{--hit-x:.2%;--hit-y:18%;--hit-w:12.5%;--hit-h:47.8%}
.hit-series-left{--hit-x:13.1%;--hit-y:20.4%;--hit-w:20.1%;--hit-h:34.5%}
.hit-rift{--hit-x:38.2%;--hit-y:12%;--hit-w:23.5%;--hit-h:76%}
.hit-series-right{--hit-x:61.2%;--hit-y:25.5%;--hit-w:18.4%;--hit-h:31%}
.hit-about{--hit-x:82.2%;--hit-y:20.5%;--hit-w:15.4%;--hit-h:39.5%}
.hit-diary{--hit-x:65.5%;--hit-y:70%;--hit-w:23%;--hit-h:18%}

/* Tablet: same desktop art, broader targets. */
@media (max-width:1179px) and (orientation:landscape){
  .hit-library{--hit-x:0%;--hit-y:17%;--hit-w:14%;--hit-h:51%}
  .hit-series-left{--hit-x:12%;--hit-y:19%;--hit-w:22%;--hit-h:39%}
  .hit-rift{--hit-x:36%;--hit-y:9%;--hit-w:27%;--hit-h:80%}
  .hit-series-right{--hit-x:59%;--hit-y:23%;--hit-w:22%;--hit-h:37%}
  .hit-about{--hit-x:80%;--hit-y:18%;--hit-w:19%;--hit-h:45%}
  .hit-diary{--hit-x:62%;--hit-y:67%;--hit-w:29%;--hit-h:22%}
}

/* Mobile portrait: one and only coordinate map for room-mobile-v2.jpg. */
@media (max-width:1179px) and (orientation:portrait){
  .room-picture,.room-image{width:100%;height:100%}
  .room-image{object-fit:cover;object-position:50% 50%}
  .site-header{padding:calc(18px + env(safe-area-inset-top)) 18px 16px}
  .site-header .brand{font-size:clamp(32px,9vw,42px)}
  .menu-toggle{margin-left:auto}
  .nav-secondary{font-size:clamp(10px,2.7vw,11px)}
  .room-actions{right:20px;bottom:calc(42px + env(safe-area-inset-bottom))}
  .hit-library{--hit-x:0%;--hit-y:30%;--hit-w:15%;--hit-h:32%}
  .hit-series-left{--hit-x:10%;--hit-y:31%;--hit-w:22%;--hit-h:25%}
  .hit-rift{--hit-x:35%;--hit-y:25%;--hit-w:28%;--hit-h:55%}
  .hit-series-right{--hit-x:58%;--hit-y:36%;--hit-w:20%;--hit-h:23%}
  .hit-about{--hit-x:78%;--hit-y:31%;--hit-w:21%;--hit-h:30%}
  .hit-diary{--hit-x:59%;--hit-y:69%;--hit-w:35%;--hit-h:18%}
}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}
  .room-smoke-canvas,.dust-layer,.cursor-hint,.rift-three{display:none}
  .room-frame{transform:none;filter:none}
}


/* =========================================================
   Պանկ v6.1 — mobile scene and interaction repair
   ========================================================= */
@media (max-width:1400px) and (orientation:portrait){
  .room{
    display:block;
    width:100%;
    height:100%;
  }
  .room-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    aspect-ratio:auto;
  }
  .room-picture,
  .room-image{
    display:block;
    width:100%;
    height:100%;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .room-image{
    object-fit:cover;
    object-position:50% 50%;
  }
  .room::before{
    background-image:url("/assets/room-mobile-v2.jpg?v=61");
  }
}

/* Touch discoverability: three-times stronger than v6.0, without labels. */
@media (hover:none),(pointer:coarse){
  .hit::after{
    content:"";
    display:block;
    position:absolute;
    inset:3%;
    pointer-events:none;
    opacity:0;
    border:2px solid rgba(255,224,177,0);
    background:radial-gradient(ellipse,
      rgba(255,232,195,.72) 0%,
      rgba(232,169,91,.28) 44%,
      rgba(180,112,44,.08) 67%,
      transparent 80%);
    box-shadow:0 0 0 rgba(244,180,102,0);
    mix-blend-mode:screen;
    animation:pankMobileBeacon 7.2s ease-in-out infinite;
  }
  .hit-series-left::after{animation-delay:.35s}
  .hit-series-right::after{animation-delay:1.05s}
  .hit-about::after{animation-delay:1.75s}
  .hit-library::after{animation-delay:2.45s}
  .hit-diary::after{animation-delay:3.15s}
  .hit-rift::after{
    inset:1% 12%;
    border-color:rgba(170,207,255,0);
    background:radial-gradient(ellipse,
      rgba(188,220,255,.76) 0%,
      rgba(91,143,216,.32) 46%,
      rgba(44,83,148,.11) 68%,
      transparent 82%);
    animation-delay:3.85s;
  }
  .hit:active::after{
    animation:none;
    opacity:1;
    transform:scale(1.035);
    border-color:rgba(255,228,189,.92);
    box-shadow:0 0 48px rgba(247,184,103,.88),inset 0 0 34px rgba(255,224,177,.42);
  }
}

@keyframes pankMobileBeacon{
  0%,72%,100%{
    opacity:0;
    transform:scale(.97);
    border-color:rgba(255,224,177,0);
    box-shadow:0 0 0 rgba(244,180,102,0);
  }
  78%{
    opacity:.72;
    transform:scale(1.01);
    border-color:rgba(255,224,177,.68);
    box-shadow:0 0 42px rgba(244,180,102,.72),inset 0 0 28px rgba(255,224,177,.28);
  }
  84%{
    opacity:1;
    transform:scale(1.035);
    border-color:rgba(255,232,202,.95);
    box-shadow:0 0 64px rgba(248,185,103,.92),inset 0 0 42px rgba(255,228,191,.42);
  }
  91%{
    opacity:.28;
    transform:scale(1.01);
  }
}

@media (prefers-reduced-motion:reduce){
  .hit::after{animation:none;opacity:.28;border-color:rgba(255,224,177,.34)}
}

/* =========================================================
   Պանկ v6.2 — rift touch overlay removal
   The rift remains interactive, but never receives the generic
   mobile hotspot fill/outline used by the other room objects.
   ========================================================= */
@media (hover:none),(pointer:coarse){
  .hit-rift::after,
  .hit-rift:active::after{
    display:none;
    content:none;
    animation:none;
    opacity:0;
    background:none;
    border:0;
    box-shadow:none;
  }
}


/* v6.5 — phone-only artwork reading transition
   Desktop and tablets use a stable, non-reactive artwork layout.
   Only narrow touch phones allow the image to yield space to text. */
.artwork{
  --artwork-visual-width:65%;
  --artwork-visual-height:56vh;
  --artwork-visual-opacity:1;
  --artwork-visual-scale:1;
  --artwork-copy-width:680px;
  grid-template-columns:minmax(0,65%) minmax(0,1fr);
  overflow:hidden;
}
.artwork-visual{
  min-width:0;
  opacity:1;
  transform:none;
  transform-origin:center;
  transition:none;
}
.artwork-passport{
  min-width:0;
  min-height:0;
  overscroll-behavior:contain;
  scroll-behavior:auto;
  justify-content:flex-start;
  padding-top:max(76px,9vh);
}
.artwork-passport>*{
  width:100%;
  max-width:var(--artwork-copy-width);
  margin-left:auto;
  margin-right:auto;
}

/* Tablet: fixed stacked composition. No scroll-driven resizing. */
@media(max-width:980px){
  .artwork{
    grid-template-columns:1fr;
    grid-template-rows:minmax(34vh,44vh) minmax(0,1fr);
  }
  .artwork-visual{
    min-height:0;
    height:auto;
    padding:0;
    overflow:hidden;
  }
  .artwork-passport{border-top:0;overflow-y:auto}
}

/* Phone only: enable the scroll-driven transition. */
@media(max-width:600px) and (pointer:coarse){
  .artwork{
    grid-template-rows:minmax(0,var(--artwork-visual-height)) minmax(0,1fr);
  }
  .artwork-visual{
    opacity:var(--artwork-visual-opacity);
    transform:scale(var(--artwork-visual-scale));
    padding-top:clamp(0px,calc(var(--artwork-visual-height) * .12),60px);
    padding-bottom:clamp(0px,calc(var(--artwork-visual-height) * .05),25px);
    will-change:opacity,transform;
  }
  .artwork.is-reading .artwork-visual{pointer-events:none}
  .artwork.is-text-expanded .artwork-visual{visibility:hidden}
  .artwork-passport{padding-top:42px}
}

@media(prefers-reduced-motion:reduce){
  .artwork-visual{transition:none}
}


/* =========================================================
   Պանկ v6.4 — stable reading layout
   Keep artwork title/series visible, remove excess mobile space,
   prevent metadata collisions, and smooth the scroll-driven resize.
   ========================================================= */
.artwork-passport-header{
  position:sticky;
  z-index:4;
  top:0;
  width:100%;
  max-width:var(--artwork-copy-width);
  margin:0 auto 24px;
  padding:10px 0 18px;
  background:linear-gradient(to bottom,#050403 0%,rgba(5,4,3,.97) 76%,rgba(5,4,3,0) 100%);
}
.artwork-passport-header h1{
  margin:12px 0 10px;
}
.artwork-passport-header .archive-series{
  margin:0;
}
.artwork-passport>*:not(.artwork-passport-header){
  width:100%;
  max-width:var(--artwork-copy-width);
  margin-left:auto;
  margin-right:auto;
}
.artwork-passport dl div{
  grid-template-columns:minmax(132px,40%) minmax(0,1fr);
  column-gap:18px;
  align-items:start;
}
.artwork-passport dt{
  overflow-wrap:anywhere;
}
.artwork-contacts{
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:0;
}
.artwork-passport{
  padding-bottom:max(18px,env(safe-area-inset-bottom));
}
.artwork-visual{
  transition:none;
}

@media(max-width:760px){
  .artwork-passport{
    padding:18px 20px max(16px,env(safe-area-inset-bottom));
  }
  .artwork-passport-header{
    margin-bottom:18px;
    padding:6px 0 14px;
  }
  .artwork-passport-header h1{
    margin:8px 0 7px;
    font-size:clamp(42px,13vw,54px);
    line-height:.94;
  }
  .artwork-passport dl div{
    grid-template-columns:minmax(138px,43%) minmax(0,1fr);
    column-gap:14px;
    padding:12px 0;
  }
  .artwork-passport dt{
    font-size:9px;
    line-height:1.35;
    letter-spacing:.12em;
  }
  .artwork-passport dd{
    font-size:16px;
    line-height:1.35;
  }
  .artwork-contacts{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
}

@media(max-width:420px){
  .artwork-passport dl div{
    grid-template-columns:minmax(126px,41%) minmax(0,1fr);
    column-gap:12px;
  }
}

/* v6.4 theme correction: sticky passport header follows the paper surface. */
.artwork-passport-header{
  background:linear-gradient(to bottom,#d5ccbd 0%,rgba(213,204,189,.98) 78%,rgba(213,204,189,0) 100%);
}
@media(max-width:760px){
  .artwork-close{
    top:max(12px,env(safe-area-inset-top));
    left:16px;
  }
  .artwork-passport-header{
    padding-top:54px;
  }
}

/* v6.6 — Content: «Паразитизм / 12 апостолок». */
.art-card-image[data-art-image],
.artwork-image[data-art-image]{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.art-card-parasitism,
.art-card-parasitism.art-card-1,
.art-card-parasitism.art-card-2,
.art-card-parasitism.art-card-3,
.art-card-parasitism.art-card-4,
.art-card-parasitism.art-card-5,
.art-card-parasitism.art-card-6{
  grid-column:span 4;
  margin-top:0;
}
.art-card-parasitism .art-card-image{
  background-color:#0d0b09;
}
.artwork-passport [hidden]{display:none}
@media(max-width:980px){
  .art-card-parasitism,
  .art-card-parasitism.art-card-1,
  .art-card-parasitism.art-card-2,
  .art-card-parasitism.art-card-3,
  .art-card-parasitism.art-card-4,
  .art-card-parasitism.art-card-5,
  .art-card-parasitism.art-card-6{grid-column:auto;margin-top:0}
}

/* v6.7 — light archive header typography fix */
.artwork .artwork-passport .artwork-passport-header{
  background:linear-gradient(
    to bottom,
    rgba(217,208,192,.98) 0%,
    rgba(217,208,192,.94) 76%,
    rgba(217,208,192,0) 100%
  );
}
.artwork .artwork-passport .artwork-passport-header small{
  color:rgba(34,29,24,.58);
}
.artwork .artwork-passport .artwork-passport-header h1{
  color:#17130f;
  opacity:1;
}
.artwork .artwork-passport .artwork-passport-header .archive-series{
  color:#6f6558;
  opacity:1;
  font-weight:400;
  letter-spacing:.18em;
}

/* v6.8 — one continuous archive sheet for every series and artwork.
   The title block is no longer rendered as a separate translucent card. */
.artwork .artwork-passport .artwork-passport-header{
  position:relative;
  top:auto;
  z-index:auto;
  width:100%;
  max-width:var(--artwork-copy-width);
  margin:0 auto 28px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

@media(max-width:760px){
  .artwork .artwork-passport .artwork-passport-header{
    margin-bottom:20px;
    padding:48px 0 0;
  }
}

/* =========================================================
   Պանկ v6.9 — первый визит, кроссфейд-навигация,
   CTA архивного листа, сетка, прогресс серии, светимость.
   ========================================================= */

/* ПУТИ: мягкая пульсация при первом визите (3 цикла, затем покой) */
.first-visit .menu-toggle{color:rgba(240,231,217,.92);animation:pathsPulse 2.4s ease-in-out 3 1.2s}
@keyframes pathsPulse{0%,100%{opacity:1;text-shadow:none}50%{opacity:.68;text-shadow:0 0 14px rgba(212,186,136,.5)}}
@media (prefers-reduced-motion:reduce){.first-visit .menu-toggle{animation:none}}

/* Подсветка кликабельных зон при первом входе (гаснет через ~3 с) */
.room-frame.show-hints .hit:not(.hit-rift)::after{
  opacity:1;
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.012);
  box-shadow:inset 0 0 16px rgba(255,255,255,.04),0 0 9px rgba(255,255,255,.2);
}

/* Кишень: логотип — якорь «домой», «Вернуться» под ним */
.kishen-brand{position:absolute;z-index:5;top:24px;left:38px;font:400 28px/1 var(--serif);letter-spacing:.04em;color:rgba(228,221,211,.85);text-decoration:none;text-shadow:0 2px 18px #000;transition:color .25s ease}
.kishen-brand:hover,.kishen-brand:focus-visible{color:#fff;outline:none}
.kishen .kishen-back{top:70px}
@media(max-width:760px){
  .kishen-brand{top:calc(16px + env(safe-area-inset-top));left:20px;font-size:24px}
  .kishen .kishen-back{top:calc(58px + env(safe-area-inset-top));left:20px}
}

/* CTA архивного листа: тёмная заливка в цвет панели */
.artwork-passport .buy-button{
  border-color:#211c17;
  background:#211c17;
  color:#e6dccb;
  box-shadow:0 10px 30px rgba(23,19,15,.28);
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
.artwork-passport .buy-button:hover,.artwork-passport .buy-button:focus-visible{background:#3a3129;color:#f2ead9;outline:none}

/* Сетка архива: живой hover и читаемые подписи */
.art-card-copy strong{font-size:24px}
.art-card-copy small{font-size:8px}
.art-card:hover .art-card-image,.art-card:focus-visible .art-card-image{
  transform:translateY(-6px) scale(1.02);
  filter:saturate(.98) brightness(1.07);
  box-shadow:0 22px 60px rgba(0,0,0,.5);
}

/* Прогресс серии в детальном виде */
.artwork-counter{top:26px;right:32px;font-size:10px;letter-spacing:.2em;color:rgba(238,230,218,.7)}
.artwork-progress{position:absolute;top:46px;right:32px;width:96px;height:2px;background:rgba(238,230,218,.16);overflow:hidden}
.artwork-progress i{display:block;height:100%;width:0;background:rgba(211,173,116,.85);transition:width .45s cubic-bezier(.2,.75,.2,1)}
@media(max-width:760px){
  .artwork-counter{top:21px;right:20px}
  .artwork-progress{top:40px;right:20px;width:78px}
}

/* Минимальная светимость комнаты на мобильном (портрет) */
@media (max-width:1400px) and (orientation:portrait){
  .room-image{filter:brightness(1.1) contrast(.99)}
}


/* v7.0 — content/navigation cleanup */
.brand,
.kishen-brand,
.panel-back,
.view-head [data-home],
.artwork-close,
.diary-close,
.reader-close,
.kishen-back{
  font-family:var(--sans);
  letter-spacing:.08em;
  text-transform:none;
  white-space:nowrap;
}

/* Archive sheet: the subtitle deliberately breaks before its numeric chapter. */
.archive-series{
  line-height:1.45;
  max-width:22ch;
}
.archive-series span{display:inline-block}

/* No inquiry form: direct channels are the only conversion path. */
.contact-direct-only{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-self:start;
}
.contact-direct-only .contact-channel,
.artwork-contacts a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  border:1px solid #211c17;
  background:#211c17;
  color:#d9d0c0;
  text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.contact-direct-only .contact-channel{
  min-height:84px;
  flex-direction:column;
  gap:8px;
}
.contact-direct-only .contact-channel span,
.contact-direct-only .contact-channel b{color:inherit}
.contact-direct-only .contact-channel:hover,
.contact-direct-only .contact-channel:focus-visible,
.artwork-contacts a:hover,
.artwork-contacts a:focus-visible{
  background:#3a3027;
  border-color:#3a3027;
  color:#f0e6d7;
  outline:none;
}

@media (max-width:760px){
  .contact-direct-only{grid-template-columns:1fr}
  .brand{font-size:clamp(27px,8vw,42px)}
}

/* Պանկ v8.0 — unified identity, cinematic archive and motion polish */
:root{
  --pank-mark-size:clamp(31px,3vw,48px);
  --archive-black:#080706;
  --archive-paper:#d2c7b6;
}

/* One identity component everywhere */
.site-header .brand,
.brand a,
.panel-back,
.view-head [data-home],
.artwork-close,
.diary-close,
.reader-close,
.kishen-brand{
  font-family:var(--serif);
  font-size:var(--pank-mark-size);
  font-weight:400;
  line-height:1;
  letter-spacing:.035em;
  text-transform:none;
  color:var(--ink);
  text-decoration:none;
  text-shadow:0 2px 16px rgba(0,0,0,.58);
}
.panel-back,
.view-head [data-home],
.artwork-close,
.diary-close,
.reader-close{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.view-head{align-items:center;min-height:clamp(72px,9vw,106px)}
.view-head [data-home]{justify-self:start}
.artwork-close,.diary-close,.reader-close{z-index:12;top:clamp(24px,3vw,42px);left:clamp(24px,3vw,44px)}
.kishen-brand{font-size:var(--pank-mark-size)}

/* Archive is a dark material, not a void */
.artwork-visual{
  background:
    radial-gradient(ellipse at 50% 42%,rgba(150,126,92,.08),transparent 58%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px),
    linear-gradient(145deg,#0b0908,var(--archive-black));
}
.artwork-visual::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:radial-gradient(rgba(226,205,174,.22) .45px,transparent .55px);
  background-size:5px 5px;mix-blend-mode:soft-light;
}
.artwork-image{position:relative;z-index:1;transition:opacity .24s ease,transform .42s cubic-bezier(.2,.8,.2,1),filter .24s ease}
.artwork-passport{transition:opacity .22s ease,transform .42s cubic-bezier(.2,.8,.2,1)}

/* Entry/exit and archive leafing */
.artwork-modal.artwork-entering .artwork-image,
.artwork-modal.artwork-entering .artwork-passport{opacity:0}
.artwork-modal.artwork-entering .artwork-image{transform:scale(.985)}
.artwork-modal.artwork-leaving{opacity:0;transition:opacity .17s ease}
.layer-leaving{opacity:0!important;transition:opacity .15s ease!important}
.room-frame.camera-returning{transition:transform .42s cubic-bezier(.22,.78,.2,1),filter .28s ease,opacity .28s ease!important}
.artwork-modal.artwork-switching .artwork-image{opacity:0;filter:brightness(.86)}
.artwork-modal.artwork-switching.switch-next .artwork-image{transform:translateX(-18px) scale(.992)}
.artwork-modal.artwork-switching.switch-prev .artwork-image{transform:translateX(18px) scale(.992)}
.artwork-modal.artwork-switching .artwork-passport{opacity:.72;transform:translateY(3px)}

/* Museum navigation: thinner, quieter, more air */
.artwork-counter{
  top:clamp(24px,3vw,40px);right:clamp(24px,3vw,42px);
  font-size:9px;letter-spacing:.18em;color:rgba(231,219,202,.52);
}
.artwork-nav{right:clamp(24px,3vw,42px);bottom:clamp(24px,3vw,42px);gap:18px}
.artwork-nav button,
.reader-controls button,
.book-controls button{
  width:38px;height:38px;border:0;border-bottom:1px solid rgba(228,221,211,.28);
  background:transparent;color:rgba(238,230,218,.58);font-size:18px;
  transition:color .22s ease,border-color .22s ease,transform .22s ease;
}
.artwork-nav button:hover,.artwork-nav button:focus-visible,
.reader-controls button:hover,.reader-controls button:focus-visible,
.book-controls button:hover,.book-controls button:focus-visible{
  color:#fff;border-color:rgba(229,202,160,.8);transform:translateY(-1px);outline:none;
}

/* The room keeps breathing after the first impression */
.room-frame:not(.camera-moving){animation:pankRoomBreath 15s ease-in-out infinite}
@keyframes pankRoomBreath{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.018) saturate(1.01)}}
.room::after{
  content:"";position:absolute;z-index:8;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 12%,rgba(237,202,153,.055) 42%,transparent 67%);
  transform:translateX(-26%);animation:pankRareGlint 18s ease-in-out infinite 4s;
}
@keyframes pankRareGlint{0%,76%,100%{opacity:0;transform:translateX(-26%)}82%{opacity:.35}89%{opacity:0;transform:translateX(30%)}}

@media(max-width:760px){
  :root{--pank-mark-size:clamp(34px,10vw,46px)}
  .view-head{padding:calc(18px + env(safe-area-inset-top)) 20px 12px;min-height:86px}
  .artwork-close,.diary-close,.reader-close{top:calc(20px + env(safe-area-inset-top));left:20px}
  .artwork-counter{top:calc(26px + env(safe-area-inset-top));right:20px;max-width:42%;text-align:right;line-height:1.45}
  .artwork-nav{right:20px;bottom:20px;gap:16px}
}

@media(prefers-reduced-motion:reduce){
  .room-frame:not(.camera-moving),.room::after{animation:none!important}
  .artwork-image,.artwork-passport{transition:none!important}
}

/* Պանկ v9.0 — dense archive, integrated passport, continuous journey */

/* Dense masonry archive: mixed proportions without artificial holes. */
.art-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:8px;
  grid-auto-flow:dense;
  column-gap:clamp(14px,1.7vw,24px);
  row-gap:0;
  align-items:start;
}
.art-grid>.art-card,
.art-grid>.art-card-1,.art-grid>.art-card-2,.art-grid>.art-card-3,
.art-grid>.art-card-4,.art-grid>.art-card-5,.art-grid>.art-card-6{
  grid-column:auto;
  margin-top:0;
  margin-bottom:clamp(18px,2vw,30px);
}
.art-grid .art-card-image,
.art-grid .art-card-1 .art-card-image,
.art-grid .art-card-4 .art-card-image{
  aspect-ratio:var(--art-ratio,auto);
  background-color:#0b0908;
}
.art-card-copy{
  padding:11px 2px 0;
  grid-template-columns:1fr auto;
}
.art-card-copy small{line-height:1.45}

/* One archival object: the image and the sheet belong to the same space. */
.artwork{
  grid-template-columns:minmax(0,1.42fr) minmax(390px,.72fr);
  background:#0a0807;
}
.artwork-visual{
  padding-right:clamp(38px,5vw,82px);
  background:
    radial-gradient(ellipse at 72% 48%,rgba(207,180,140,.09),transparent 42%),
    radial-gradient(ellipse at 46% 42%,rgba(150,126,92,.08),transparent 58%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px),
    linear-gradient(145deg,#0b0908,#080706);
}
.artwork-passport{
  position:relative;
  justify-content:flex-start;
  padding:clamp(92px,10vh,132px) clamp(44px,5vw,88px) 62px clamp(38px,4.5vw,76px);
  border:0;
  background:
    linear-gradient(90deg,rgba(8,7,6,.14),transparent 22%),
    linear-gradient(145deg,#d8cebd,#c8bcaa);
  box-shadow:-34px 0 70px rgba(0,0,0,.18);
}
.artwork-passport::before{
  content:"";position:absolute;left:-42px;top:0;bottom:0;width:84px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(209,198,181,.82) 54%,#d4c9b8);
  filter:blur(7px);opacity:.9;
}
.artwork-passport>*{position:relative;z-index:1}
.artwork-passport-header{margin:0 0 clamp(34px,5vh,60px)}
.artwork-passport h1{margin:16px 0 18px}
.archive-series{margin:0;color:rgba(34,29,24,.58)}

/* Archive card instead of a technical table. */
.artwork-passport dl{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 34px;
  margin:0 0 40px;
}
.artwork-passport dl div{
  display:block;
  min-width:0;
  padding:0;
  border:0;
}
.artwork-passport dt{
  margin:0 0 8px;
  font-size:9px;
  line-height:1.35;
  letter-spacing:.16em;
  color:rgba(34,29,24,.48);
}
.artwork-passport dd{
  margin:0;
  font:400 clamp(16px,1.35vw,20px)/1.28 var(--serif);
  color:#211c17;
}
.artwork-passport>p{max-width:46ch;margin:0 0 34px}

/* Transitions read as one route rather than disconnected pages. */
.view,.panel,.diary,.reader,.kishen,.artwork{
  transition-timing-function:cubic-bezier(.22,.78,.2,1);
}
.artwork.open .artwork-visual,
.artwork.open .artwork-passport{animation:pankJourneyIn .46s cubic-bezier(.22,.78,.2,1) both}
.artwork.open .artwork-passport{animation-delay:.035s}
@keyframes pankJourneyIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

@media(max-width:1180px){
  .art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .artwork{grid-template-columns:1fr}
  .artwork-visual{min-height:58vh;padding-right:30px}
  .artwork-passport{padding:58px 8vw 76px;box-shadow:0 -26px 64px rgba(0,0,0,.16)}
  .artwork-passport::before{left:0;right:0;top:-36px;bottom:auto;width:auto;height:72px;background:linear-gradient(180deg,transparent,rgba(211,200,183,.86) 58%,#d4c9b8)}
}
@media(max-width:760px){
  .art-grid{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:0}
  .art-grid>.art-card{grid-row:auto!important;margin-bottom:34px}
  .artwork-passport{padding:48px 22px 72px}
  .artwork-passport dl{grid-template-columns:1fr 1fr;gap:24px 18px}
  .artwork-passport dd{font-size:17px}
}

/* Պանկ v9.1 — restored side archive composition and corrected tablet layout */
.artwork{
  grid-template-columns:minmax(0,1.55fr) minmax(360px,.72fr);
  min-height:100svh;
  overflow:hidden;
}
.artwork-visual{
  min-width:0;
  padding:clamp(72px,8vh,104px) clamp(76px,7vw,118px) clamp(54px,6vh,82px) clamp(56px,5vw,88px);
  display:grid;
  place-items:center;
}
.artwork-image{
  width:min(100%,calc(100svh - 150px));
  height:min(100%,calc(100svh - 150px));
  max-width:100%;
  max-height:calc(100svh - 150px);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.artwork-passport{
  min-width:0;
  height:100svh;
  overflow-y:auto;
  padding:clamp(84px,9vh,120px) clamp(38px,4vw,68px) 42px;
  box-shadow:-22px 0 56px rgba(0,0,0,.16);
}
.artwork-passport::before{display:none}
.artwork-passport-header{margin-bottom:clamp(30px,4vh,48px)}
.artwork-passport dl{
  grid-template-columns:1fr;
  gap:20px;
  margin-bottom:30px;
}
.artwork-passport dt{margin-bottom:5px}
.artwork-passport dd{font-size:clamp(16px,1.25vw,19px)}
.artwork-nav{
  right:clamp(22px,2.2vw,34px);
  bottom:clamp(22px,2.5vh,34px);
  gap:10px;
}
.artwork-nav button{
  width:40px;
  height:40px;
  border-width:0 0 1px;
  background:transparent;
}
.artwork-counter{right:clamp(24px,2.4vw,38px)}

/* Keep the passport on the right for iPad and landscape tablets. */
@media (min-width:701px) and (max-width:1180px){
  .artwork{
    grid-template-columns:minmax(0,1.35fr) minmax(310px,.78fr);
  }
  .artwork-visual{
    padding:82px 54px 54px 32px;
  }
  .artwork-image{
    width:min(100%,calc(100svh - 138px));
    height:min(100%,calc(100svh - 138px));
    max-height:calc(100svh - 138px);
  }
  .artwork-passport{
    height:100svh;
    padding:82px 30px 34px;
  }
  .artwork-passport h1{font-size:clamp(46px,5.4vw,72px)}
  .archive-series{font-size:11px;line-height:1.65}
  .artwork-passport dl{gap:17px}
  .artwork-passport dd{font-size:16px}
}

/* Phones retain the vertical reading layout. */
@media (max-width:700px){
  .artwork{
    grid-template-columns:1fr;
    overflow-y:auto;
  }
  .artwork-visual{
    min-height:62svh;
    padding:88px 18px 52px;
  }
  .artwork-image{
    width:100%;
    height:calc(62svh - 138px);
    max-height:none;
  }
  .artwork-passport{
    height:auto;
    min-height:38svh;
    overflow:visible;
    padding:46px 24px calc(30px + env(safe-area-inset-bottom));
    box-shadow:0 -18px 44px rgba(0,0,0,.12);
  }
}


/* =========================================================
   Պանկ v9.2 Motion System
   A restrained, heavy and inevitable movement language.
   ========================================================= */
:root{
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.7,0,.84,0);
  --ease-travel:cubic-bezier(.65,0,.35,1);
  --motion-enter:480ms;
  --motion-exit:260ms;
  --motion-travel:1500ms;
  --motion-glow:300ms;
}

/* Camera movement between visible states. */
.room-frame{
  transition:
    transform var(--camera-duration) var(--ease-travel),
    filter calc(var(--camera-duration) * .72) var(--ease-travel);
}

/* Panels, archive, diary, reader and Kishen enter softly and leave faster. */
.panel,
.diary,
.reader,
.artwork-view,
.archive,
.kishen,
.artifact-modal{
  transition-property:opacity,visibility,transform;
  transition-duration:var(--motion-exit),0s,var(--motion-exit);
  transition-timing-function:var(--ease-exit),linear,var(--ease-exit);
}
.panel.open,
.diary.open,
.reader.open,
.artwork-view.open,
.archive.open,
.kishen.open,
.artifact-modal.open{
  transition-duration:var(--motion-enter),0s,var(--motion-enter);
  transition-timing-function:var(--ease-enter),linear,var(--ease-enter);
}

/* The Paths menu is one composed entrance, not a collection of unrelated fades. */
.main-nav{
  transition:
    opacity var(--motion-enter) var(--ease-enter),
    transform var(--motion-enter) var(--ease-enter),
    visibility 0s linear var(--motion-enter);
}
.main-nav.open{transition-delay:0s}
.main-nav:not(.open){
  transition:
    opacity var(--motion-exit) var(--ease-exit),
    transform var(--motion-exit) var(--ease-exit),
    visibility 0s linear var(--motion-exit);
}
.main-nav button,
.main-nav .nav-secondary,
.main-nav .nav-contact{
  transition:
    opacity var(--motion-enter) var(--ease-enter),
    transform var(--motion-enter) var(--ease-enter),
    color var(--motion-glow) var(--ease-enter),
    text-shadow var(--motion-glow) var(--ease-enter);
}

/* Artwork and archive elements appear decisively and settle softly. */
.art-card,
.art-card-image,
.artwork-image,
.reader-page,
.book,
.panel-content{
  transition-timing-function:var(--ease-enter);
}
.art-card-image{
  transition:
    transform 520ms var(--ease-enter),
    filter 420ms var(--ease-enter),
    opacity 420ms var(--ease-enter);
}

/* Hover/focus illumination: immediate recognition, soft stop. */
.hit:not(.hit-rift)::before,
.hit:not(.hit-rift)::after,
.rift-glow,
.artwork-nav button,
.reader-controls button,
.menu-toggle,
.nav-secondary,
.artwork-contacts a{
  transition-timing-function:var(--ease-enter);
}
.hit:not(.hit-rift)::before,
.hit:not(.hit-rift)::after,
.rift-glow{
  transition-duration:var(--motion-glow);
}

/* Short fades use enter/exit asymmetrically. */
.fade{
  transition:opacity var(--motion-exit) var(--ease-exit),visibility 0s linear var(--motion-exit);
}
.fade.show,
.fade.active{
  transition:opacity 220ms var(--ease-enter),visibility 0s;
}

@media (prefers-reduced-motion:reduce){
  :root{
    --motion-enter:.01ms;
    --motion-exit:.01ms;
    --motion-travel:.01ms;
    --motion-glow:.01ms;
  }
  .room-frame{transition-duration:.01ms}
}

/* =========================================================
   Պանկ v10.0 — mobile repair + global URL routing support
   Visual changes below intentionally affect phones only.
   ========================================================= */
@media (max-width:700px){
  /* Smaller universal project mark: preserves hierarchy and safe space. */
  .site-header .brand,
  .artwork-close,
  .diary-close,
  .reader-close,
  .panel-back,
  .view-head>button,
  .kishen-brand{
    font-size:clamp(24px,7vw,30px);
    line-height:1;
    max-width:58vw;
    white-space:nowrap;
  }
  .site-header{min-height:78px;align-items:flex-start}
  .view-head{min-height:82px;padding:calc(18px + env(safe-area-inset-top)) 20px 12px;align-items:flex-start}
  .view-head>span:nth-child(2){font-size:12px;line-height:1.2;margin-top:7px;text-align:right;max-width:34vw}

  /* Artwork becomes one continuous object: image immediately followed by archive sheet. */
  .artwork{display:block;min-height:100svh;overflow-y:auto;background:#070605}
  .artwork-visual{
    min-height:0;
    height:auto;
    padding:calc(78px + env(safe-area-inset-top)) 16px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }
  .artwork-image{
    width:min(92vw,520px);
    height:min(54svh,650px);
    min-height:320px;
    max-height:54svh;
    background-color:#0b0908;
  }
  .artwork-counter{top:calc(20px + env(safe-area-inset-top));right:18px;max-width:42vw;text-align:right;font-size:8px;line-height:1.35}
  .artwork-progress{top:calc(48px + env(safe-area-inset-top));right:18px;width:72px}
  .artwork-nav{position:static;align-self:flex-end;margin:14px 2px 0;gap:16px}
  .artwork-nav button{width:44px;height:34px}
  .artwork-passport{
    margin:0;
    height:auto;
    min-height:0;
    overflow:visible;
    padding:34px 24px calc(30px + env(safe-area-inset-bottom));
    background:#d4c9b8;
    color:#211c17;
    box-shadow:none;
  }
  .artwork-passport-header{margin:0 0 28px;position:static;background:transparent}
  .artwork-passport-header h1{font-size:clamp(54px,17vw,76px);line-height:.92;margin:14px 0 24px}
  .archive-series{font-size:13px;line-height:1.6;color:rgba(34,29,24,.62)}
  .artwork-passport dl{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;margin:0 0 28px}
  .artwork-passport dl div{display:block;padding:0;border:0}
  .artwork-passport dt{color:rgba(34,29,24,.52)}
  .artwork-passport dd{color:#211c17;font-size:17px}
  .artwork-contacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .artwork-contacts a{min-height:58px;background:#211c17;color:#e8dfcf;border:0}

  /* Diary and reader no longer collide with the project mark. */
  .diary,.reader{padding-top:calc(74px + env(safe-area-inset-top))}
  .diary .book{margin-top:12px;max-height:calc(100svh - 110px)}
  .reader-head{padding-top:8px}
  .reader-stage{padding-top:8px}

  /* Archive title stays legible beneath the mark. */
  .collection-shell{padding-top:38px}
  .collection-intro{padding-top:10px}
  .collection-intro h1{font-size:clamp(42px,12vw,56px);line-height:.95}

  /* Never expose a black empty frame while the next image is decoding. */
  .artwork.artwork-switching .artwork-image{opacity:.72;transform:scale(.992)}
  .artwork-image{transition:opacity 260ms var(--ease-enter),transform 360ms var(--ease-enter)}
}

/* Պանկ v10.2 — resilient media loading + browser history transitions */
.artwork-image{
  isolation:isolate;
  overflow:hidden;
}
.artwork-image::before,
.artwork-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  transition:opacity 420ms var(--ease-enter, cubic-bezier(.16,1,.3,1));
}
.artwork-image::before{
  z-index:-1;
  opacity:0;
  background:
    radial-gradient(circle at 50% 40%,rgba(221,207,185,.07),transparent 48%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
    #100e0c;
}
.artwork-image::after{
  z-index:2;
  display:grid;
  place-items:center;
  padding:24px;
  color:rgba(224,214,199,.58);
  font:10px/1.5 var(--sans, sans-serif);
  letter-spacing:.18em;
  text-align:center;
  text-transform:uppercase;
  opacity:0;
  background:rgba(10,9,8,.3);
}
.artwork.artwork-loading .artwork-image::before,
.artwork-image[data-load-state="loading"]::before{opacity:1}
.artwork.artwork-loading .artwork-image{
  animation:pank-loading-breathe 1.8s ease-in-out infinite alternate;
}
.artwork.artwork-load-error .artwork-image::before,
.artwork-image[data-load-state="error"]::before{opacity:1}
.artwork.artwork-load-error .artwork-image::after,
.artwork-image[data-load-state="error"]::after{
  content:"Архивный лист временно недоступен";
  opacity:1;
}
@keyframes pank-loading-breathe{
  from{filter:brightness(.78)}
  to{filter:brightness(.96)}
}
.artwork.route-leaving,
.diary.route-leaving,
.reader.route-leaving,
.kishen.route-leaving,
.view.route-leaving{
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms var(--ease-exit, cubic-bezier(.7,0,.84,0));
}
.artwork.route-leaving.route-back,
.diary.route-leaving.route-back,
.reader.route-leaving.route-back,
.view.route-leaving.route-back{transform:translateX(8px)}
.artwork.route-leaving.route-forward,
.diary.route-leaving.route-forward,
.reader.route-leaving.route-forward,
.view.route-leaving.route-forward{transform:translateX(-8px)}
.artwork.artwork-switching .artwork-image{
  opacity:.82;
  filter:brightness(.86);
}
.artwork.artwork-switching .artwork-passport{
  opacity:.78;
}
@media (prefers-reduced-motion:reduce){
  .artwork.artwork-loading .artwork-image{animation:none}
  .artwork.route-leaving,.diary.route-leaving,.reader.route-leaving,.kishen.route-leaving,.view.route-leaving{transition:none;transform:none}
}

/* v10.3 — mobile ambient discoverability
   На touch-устройствах интерактивные зоны должны быть заметны до касания. */
@media (hover:none), (pointer:coarse) {
  .hit:not(.hit-rift)::after {
    opacity:.22;
    border-color:rgba(244,232,207,.28);
    background:rgba(255,255,255,.008);
    box-shadow:
      inset 0 0 24px rgba(255,248,232,.035),
      0 0 10px rgba(239,218,180,.16),
      0 0 26px rgba(239,218,180,.07);
    animation:pankMobileAmbientGlow 7.8s cubic-bezier(.16,1,.3,1) infinite;
  }

  .hit-library::after{animation-delay:-.6s}
  .hit-series-left::after{animation-delay:-2.1s}
  .hit-series-right::after{animation-delay:-3.8s}
  .hit-about::after{animation-delay:-5.2s}
  .hit-diary::after{animation-delay:-6.4s}

  .hit:not(.hit-rift):active::after,
  .hit:not(.hit-rift).is-active::after {
    opacity:.9;
    border-color:rgba(255,246,225,.72);
    box-shadow:
      inset 0 0 38px rgba(255,248,232,.07),
      0 0 16px rgba(239,218,180,.36),
      0 0 42px rgba(239,218,180,.18);
    animation:none;
  }
}

@keyframes pankMobileAmbientGlow {
  0%,100% {
    opacity:.16;
    border-color:rgba(244,232,207,.18);
    box-shadow:
      inset 0 0 18px rgba(255,248,232,.025),
      0 0 7px rgba(239,218,180,.10),
      0 0 18px rgba(239,218,180,.04);
  }
  42% {
    opacity:.34;
    border-color:rgba(255,242,216,.40);
    box-shadow:
      inset 0 0 28px rgba(255,248,232,.05),
      0 0 13px rgba(239,218,180,.24),
      0 0 34px rgba(239,218,180,.10);
  }
  58% {
    opacity:.25;
  }
}

@media (prefers-reduced-motion:reduce) {
  .hit:not(.hit-rift)::after {
    animation:none;
  }
  @media (hover:none), (pointer:coarse) {
    .hit:not(.hit-rift)::after {
      opacity:.24;
      border-color:rgba(244,232,207,.30);
      box-shadow:0 0 12px rgba(239,218,180,.14);
    }
  }
}

/* =========================================================
   Պանկ v10.4 — Living Frames
   Hit-zones remain generous and invisible. The visible cue is an
   internal warm reflection constrained to each painted frame.
   ========================================================= */

/* Remove every generic UI contour/fill from room objects. */
.hit:not(.hit-rift)::after{
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  outline:0!important;
}

/* Paintings: the button may be larger than the visible frame, but its
   visual layer is clipped to the perspective of the frame itself. */
.hit-series-left,
.hit-series-right,
.hit-about{
  overflow:hidden;
  isolation:isolate;
}

.hit-series-left::before,
.hit-series-right::before,
.hit-about::before{
  content:"";
  display:block!important;
  position:absolute;
  pointer-events:none;
  z-index:0;
  inset:var(--frame-inset, 3%);
  clip-path:polygon(var(--frame-shape));
  -webkit-clip-path:polygon(var(--frame-shape));
  opacity:0;
  transform:translateZ(0);
  mix-blend-mode:screen;
  background:
    linear-gradient(104deg,
      rgba(255,244,216,.00) 0%,
      rgba(255,232,184,.10) 16%,
      rgba(255,249,226,.30) 22%,
      rgba(225,174,94,.08) 31%,
      rgba(255,239,204,.00) 47%),
    linear-gradient(to bottom,
      rgba(255,239,205,.24) 0%,
      rgba(229,178,102,.035) 11%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,0) 72%,
      rgba(205,139,65,.09) 100%),
    linear-gradient(to right,
      rgba(235,190,116,.18) 0%,
      rgba(255,255,255,0) 9%,
      rgba(255,255,255,0) 91%,
      rgba(235,190,116,.15) 100%);
  box-shadow:
    inset 0 0 10px rgba(255,229,181,.11),
    inset 0 0 24px rgba(202,137,62,.045);
  transition:opacity 420ms var(--ease-enter),filter 420ms var(--ease-enter);
  animation:none;
}

/* Individual perspective masks. Values are relative to each generous hitbox. */
.hit-series-left{
  --frame-inset:4% 5% 5% 4%;
  --frame-shape:7% 3%, 94% 8%, 91% 96%, 3% 91%;
}
.hit-series-right{
  --frame-inset:4% 4% 5% 5%;
  --frame-shape:5% 8%, 94% 3%, 98% 91%, 8% 97%;
}
.hit-about{
  --frame-inset:5% 7% 6% 5%;
  --frame-shape:8% 4%, 93% 9%, 96% 94%, 4% 89%;
}

/* Desktop: the object catches light rather than drawing an interface border. */
@media (hover:hover) and (pointer:fine){
  .hit-series-left:hover::before,
  .hit-series-left:focus-visible::before,
  .hit-series-right:hover::before,
  .hit-series-right:focus-visible::before,
  .hit-about:hover::before,
  .hit-about:focus-visible::before{
    opacity:.62;
    filter:brightness(1.08);
  }
}

/* Touch: faint persistent life, deliberately asynchronous. */
@media (hover:none), (pointer:coarse){
  .hit-series-left::before,
  .hit-series-right::before,
  .hit-about::before{
    opacity:.16;
    animation:pankLivingFrame 10.8s cubic-bezier(.45,0,.2,1) infinite;
  }
  .hit-series-left::before{animation-delay:-1.7s}
  .hit-series-right::before{animation-delay:-5.4s}
  .hit-about::before{animation-delay:-8.1s}

  .hit-series-left:active::before,
  .hit-series-left.is-active::before,
  .hit-series-right:active::before,
  .hit-series-right.is-active::before,
  .hit-about:active::before,
  .hit-about.is-active::before{
    opacity:.76;
    filter:brightness(1.18);
    animation:pankFrameTouch 560ms var(--ease-enter) both;
  }

  /* Other room objects keep no visible rectangular geometry. */
  .hit-library::after,
  .hit-diary::after{
    display:none!important;
    content:none!important;
  }
}

@keyframes pankLivingFrame{
  0%,100%{opacity:.11;filter:brightness(.92)}
  38%{opacity:.18;filter:brightness(1)}
  52%{opacity:.31;filter:brightness(1.12)}
  67%{opacity:.15;filter:brightness(.98)}
}

@keyframes pankFrameTouch{
  0%{opacity:.22;filter:brightness(1)}
  38%{opacity:.84;filter:brightness(1.28)}
  100%{opacity:.46;filter:brightness(1.08)}
}

@media (prefers-reduced-motion:reduce){
  .hit-series-left::before,
  .hit-series-right::before,
  .hit-about::before{
    animation:none!important;
    opacity:.18;
    filter:none;
  }
}

/* =========================================================
   Պանկ v10.5 — Raster frame light
   The interaction geometry is never rendered. Each glow is a transparent
   raster cut directly from the room artwork, so perspective and ornament
   follow the painted frame exactly.
   ========================================================= */
.hit:not(.hit-rift),
.hit:not(.hit-rift):hover,
.hit:not(.hit-rift):focus,
.hit:not(.hit-rift):focus-visible,
.hit:not(.hit-rift):active{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
.hit:not(.hit-rift)::before,
.hit:not(.hit-rift)::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

.frame-light{
  position:absolute;
  z-index:10;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:screen;
  will-change:opacity,filter;
}
.frame-light img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
}
.frame-light-left{animation:pankRasterFrameBreath 9.6s ease-in-out infinite -1.1s}
.frame-light-right{animation:pankRasterFrameBreath 11.4s ease-in-out infinite -5.6s}
.frame-light-about{animation:pankRasterFrameBreath 10.3s ease-in-out infinite -8.2s}

@keyframes pankRasterFrameBreath{
  0%,100%{opacity:.17;filter:brightness(.98)}
  38%{opacity:.27;filter:brightness(1.08)}
  53%{opacity:.42;filter:brightness(1.22)}
  69%{opacity:.23;filter:brightness(1.04)}
}

/* Fine pointer: retain the ambient presence and slightly lift the exact frame. */
@media (hover:hover) and (pointer:fine){
  .room-frame:has(.hit-series-left:hover) .frame-light-left,
  .room-frame:has(.hit-series-left:focus-visible) .frame-light-left,
  .room-frame:has(.hit-series-right:hover) .frame-light-right,
  .room-frame:has(.hit-series-right:focus-visible) .frame-light-right,
  .room-frame:has(.hit-about:hover) .frame-light-about,
  .room-frame:has(.hit-about:focus-visible) .frame-light-about{
    opacity:.68;
    filter:brightness(1.32);
    animation-play-state:paused;
    transition:opacity .32s ease,filter .32s ease;
  }
}

/* Touch: the glow is visible before any tap. Tapping only strengthens the
   corresponding raster layer; the hitbox itself stays completely invisible. */
@media (hover:none), (pointer:coarse){
  .frame-light{opacity:.28}
  .frame-light img{object-fit:contain}
  .room-frame:has(.hit-series-left:active) .frame-light-left,
  .room-frame:has(.hit-series-left.is-active) .frame-light-left,
  .room-frame:has(.hit-series-right:active) .frame-light-right,
  .room-frame:has(.hit-series-right.is-active) .frame-light-right,
  .room-frame:has(.hit-about:active) .frame-light-about,
  .room-frame:has(.hit-about.is-active) .frame-light-about{
    opacity:.82;
    filter:brightness(1.42);
    animation:pankRasterFrameTap .58s ease-out both;
  }
}

@keyframes pankRasterFrameTap{
  0%{opacity:.34;filter:brightness(1.05)}
  42%{opacity:.92;filter:brightness(1.55)}
  100%{opacity:.48;filter:brightness(1.18)}
}

@media (max-width:1400px) and (orientation:portrait){
  .frame-light img{object-fit:cover;object-position:50% 50%}
  .frame-light-left{animation-duration:8.8s}
  .frame-light-right{animation-duration:10.2s}
  .frame-light-about{animation-duration:9.4s}
}

@media (prefers-reduced-motion:reduce){
  .frame-light{animation:none!important;opacity:.32;filter:none}
}

/* =========================================================
   Պանկ v10.8 — exact scene-locked raster alignment
   The glow layers now use the same cover/center projection as the room art.
   No independent replaced-element sizing, no intrinsic-image drift.
   Effect and animation values remain unchanged.
   ========================================================= */
.frame-light{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  background-repeat:no-repeat!important;
  background-position:50% 50%!important;
  background-size:100% 100%!important;
}
.frame-light img{display:none!important}
.frame-light-left{background-image:url('/assets/frame-glow-left-desktop.png?v=108')}
.frame-light-right{background-image:url('/assets/frame-glow-right-desktop.png?v=108')}
.frame-light-about{background-image:url('/assets/frame-glow-about-desktop.png?v=108')}

@media (max-width:1400px) and (orientation:portrait){
  .frame-light{
    background-size:cover!important;
    background-position:50% 50%!important;
  }
  .frame-light-left{background-image:url('/assets/frame-glow-left-mobile.png?v=108')}
  .frame-light-right{background-image:url('/assets/frame-glow-right-mobile.png?v=108')}
  .frame-light-about{background-image:url('/assets/frame-glow-about-mobile.png?v=108')}
}

/* =========================================================
   PANK v2.0 - UX Polish Pass 01
   Interaction reliability, quiet desktop hover and focus continuity.
   ========================================================= */

.cursor-hint{
  display:none;
  width:20px;
  height:20px;
  border-color:rgba(239,224,201,.78);
  background:rgba(225,195,150,.045);
  box-shadow:0 0 12px rgba(216,178,123,.13);
  transition:opacity 190ms cubic-bezier(.16,1,.3,1),transform 220ms cubic-bezier(.16,1,.3,1),border-color 180ms ease;
}
.cursor-hint.is-pressed{
  animation:none;
  transform:translate3d(-50%,-50%,0) scale(.78);
  border-color:rgba(255,242,218,.96);
}
.cursor-hint.show{
  transition:opacity 45ms ease-out,transform 90ms cubic-bezier(.16,1,.3,1),border-color 90ms ease;
}

.room-entry-active .room .hit{pointer-events:none}
.hit-series-left,
.hit-series-right,
.hit-about{z-index:13}

.main-nav[aria-hidden="true"]{visibility:hidden}
.view,
.panel,
.diary,
.reader,
.kishen,
.artwork{
  transition-timing-function:cubic-bezier(.16,1,.3,1);
}
.view,
.artwork-passport,
.reader-stage,
.panel-stage{
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.artwork{
  transform:scale(1.003);
  transition:opacity 560ms cubic-bezier(.16,1,.3,1),transform 720ms cubic-bezier(.16,1,.3,1),visibility 0s linear 560ms;
}
.artwork.open{
  transform:scale(1);
  transition:opacity 560ms cubic-bezier(.16,1,.3,1),transform 720ms cubic-bezier(.16,1,.3,1),visibility 0s;
}
.artwork.route-leaving,
.diary.route-leaving,
.reader.route-leaving,
.kishen.route-leaving,
.view.route-leaving{
  transition:opacity 260ms cubic-bezier(.55,.06,.68,.19),transform 260ms cubic-bezier(.55,.06,.68,.19);
}

@media (hover:hover) and (pointer:fine){
  .cursor-hint{display:block}
  body.interaction-cursor-active button:not(:disabled),
  body.interaction-cursor-active a[href],
  body.interaction-cursor-active summary,
  body.interaction-cursor-active [role="button"],
  body.interaction-cursor-active [data-cursor-interactive]{
    cursor:none!important;
  }

  /* Desktop objects react as material, never as framed UI. */
  .frame-light{
    display:none!important;
    opacity:0!important;
    animation:none!important;
    background-image:none!important;
  }
  .hit:not(.hit-rift):hover{
    background:rgba(255,244,220,.012)!important;
    -webkit-backdrop-filter:brightness(1.045) saturate(1.015);
    backdrop-filter:brightness(1.045) saturate(1.015);
  }
  .hit:not(.hit-rift):active{
    background:rgba(255,244,220,.022)!important;
    -webkit-backdrop-filter:brightness(1.065) saturate(1.02);
    backdrop-filter:brightness(1.065) saturate(1.02);
  }
  .hit:focus-visible{
    outline:0!important;
    box-shadow:none!important;
  }
  .hit:focus-visible::after{
    content:""!important;
    display:block!important;
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    width:12px;
    height:12px;
    margin:-6px 0 0 -6px;
    border:1px solid rgba(244,232,207,.88)!important;
    border-radius:50%!important;
    background:rgba(244,232,207,.12)!important;
    box-shadow:0 0 14px rgba(229,202,160,.2)!important;
    opacity:1!important;
    animation:pankKeyboardPulse 1.8s ease-in-out infinite!important;
    pointer-events:none;
  }
}

@keyframes pankKeyboardPulse{
  0%,100%{transform:scale(.82);opacity:.66}
  50%{transform:scale(1.18);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .cursor-hint{transition:none}
  .hit:focus-visible::after{animation:none!important}
  .artwork{transition-duration:.01ms}
}

/* =========================================================
   PANK v2.1 - cursor performance and invisible room hit areas
   ========================================================= */
.cursor-hint{
  --cursor-x:-100px;
  --cursor-y:-100px;
  left:0;
  top:0;
  box-shadow:none;
  contain:layout style paint;
  transform:translate3d(var(--cursor-x),var(--cursor-y),0) translate3d(-50%,-50%,0);
  transition:opacity 120ms ease-in;
  will-change:transform,opacity;
}
.cursor-hint.show,
.cursor-hint.is-pressed{
  animation:none!important;
  transform:translate3d(var(--cursor-x),var(--cursor-y),0) translate3d(-50%,-50%,0);
}
.cursor-hint.show{
  opacity:1;
  transition:opacity 0s;
}
.cursor-hint::after{
  box-shadow:none;
  transform:scale(.42);
  will-change:transform,opacity;
}
.cursor-hint.show::after{
  animation:pankCursorCorePulse 1.55s ease-in-out infinite;
}
.cursor-hint.is-pressed::after{
  animation:none;
  opacity:.86;
  transform:scale(.24);
}
@keyframes pankCursorCorePulse{
  0%,100%{opacity:.38;transform:scale(.34)}
  50%{opacity:.76;transform:scale(.72)}
}

body.is-world-open .cursor-hint{display:none!important}
body.interaction-cursor-active .world-layer{cursor:auto!important}
body.interaction-cursor-active .world-layer button:not(:disabled),
body.interaction-cursor-active .world-layer a[href],
body.interaction-cursor-active .world-layer summary,
body.interaction-cursor-active .world-layer [role="button"]{cursor:pointer!important}

.frame-light{
  display:none!important;
  opacity:0!important;
  animation:none!important;
  background-image:none!important;
  filter:none!important;
}
.room .hit:not(:focus-visible)::before,
.room .hit:not(:focus-visible)::after{
  display:none!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  animation:none!important;
}

@media (hover:hover) and (pointer:fine){
  .room .hit:not(.hit-rift):hover,
  .room .hit:not(.hit-rift):active{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:radial-gradient(ellipse at center,rgba(255,244,220,.04),rgba(255,244,220,.012) 44%,transparent 76%)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .cursor-hint.show::after{animation:none}
}

@media (max-width:700px){
  .site-header .brand,
  .artwork-close,
  .diary-close,
  .reader-close,
  .panel-back,
  .view-head>button,
  .kishen-brand{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .language-switch,
  .menu-toggle,
  .artwork-nav button{
    min-height:44px;
    height:44px;
  }
}