/* ==========================================================================
   Repkina — rk-gallery: film-strip gallery + fullscreen viewer
   Uses site tokens: --bg --bg-2 --ivory --ink --ink-dim --ink-faint --line
   --accent --accent-hi --serif --sans --ease --gutter (fallbacks included)
   ========================================================================== */

.rk-gallery{
  --rk-h:clamp(340px,60vh,620px);
  --rk-gap:clamp(12px,1.35vw,22px);
  --rk-radius:3px;
  --rk-e:var(--ease,cubic-bezier(.2,.7,.1,1));
  position:relative;
  font-family:var(--sans,system-ui,sans-serif);
  color:var(--ink,#f3efe7);
}
@supports (height:1svh){ .rk-gallery{--rk-h:clamp(340px,60svh,620px)} }

/* ---------- before JS (graceful fallback, same height => no layout shift) */
.rk-gallery:not(.rk-on){display:flex;gap:var(--rk-gap);overflow-x:auto;scrollbar-width:none;padding:24px 0 calc(28px + 56px + clamp(20px,3vw,36px))}
.rk-gallery:not(.rk-on)::-webkit-scrollbar{display:none}
.rk-gallery:not(.rk-on) .rk-g-item{flex:0 0 auto;height:var(--rk-h);margin:0;position:relative;overflow:hidden;border-radius:var(--rk-radius);background:var(--bg-2,#111311)}
.rk-gallery:not(.rk-on) .rk-g-item img{height:100%;width:auto;max-width:none;object-fit:cover}
.rk-gallery:not(.rk-on) figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;font-size:13px;background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* ---------- strip viewport */
.rk-g-viewport{
  position:relative;
  margin-left:calc(-1 * var(--rk-bl,0px));
  margin-right:calc(-1 * var(--rk-br,0px));
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-padding-left:var(--rk-bl,0px);
  scroll-padding-right:var(--rk-br,0px);
  cursor:grab;
  -webkit-user-select:none;user-select:none;
  outline:none;
}
.rk-g-viewport::-webkit-scrollbar{display:none}
.rk-g-viewport.rk-dragging{cursor:grabbing}
.rk-g-track{
  position:relative;
  display:flex;align-items:center;gap:var(--rk-gap);
  width:max-content;
  padding:24px var(--rk-br,0px) 28px var(--rk-bl,0px);
}

/* native snap only for touch */
@media (hover:none),(pointer:coarse){
  .rk-g-viewport{scroll-snap-type:x mandatory;cursor:auto}
  .rk-g-item{scroll-snap-align:start}
  .rk-g-viewport.rk-nosnap{scroll-snap-type:none}
}

/* ---------- card */
.rk-g-item{
  position:relative;flex:0 0 auto;margin:0;
  height:var(--rk-h);
  width:calc(var(--rk-h) * var(--rk-ar,.75));
  max-width:84vw;
  cursor:pointer;outline:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .6s var(--rk-e);
}
.rk-g-frame{
  position:absolute;inset:0;overflow:hidden;
  border-radius:var(--rk-radius);
  background:var(--bg-2,#111311);
  isolation:isolate;
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white,black); /* Safari radius+overflow fix */
  transition:box-shadow .4s var(--rk-e);
}
.rk-g-frame::before{ /* loading shimmer */
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,transparent 30%,rgba(243,239,231,.05) 50%,transparent 70%) 0 0/250% 100%;
  animation:rk-shimmer 1.8s linear infinite;
}
.rk-g-item.rk-ok .rk-g-frame::before{display:none}
@keyframes rk-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

.rk-g-zoom{position:absolute;inset:0;z-index:1;transition:transform 1.4s var(--rk-e)}
.rk-g-item img{
  position:absolute;top:0;left:-9%;
  width:118%;height:100%;max-width:none;
  object-fit:cover;display:block;
  opacity:0;transition:opacity .9s ease;
  -webkit-user-drag:none;user-select:none;
  will-change:transform;
}
.rk-g-item.rk-ok img{opacity:1}

/* shade + meta */
.rk-g-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,9,8,.42) 0%,rgba(8,9,8,0) 22%),
    linear-gradient(0deg,rgba(8,9,8,.78) 0%,rgba(8,9,8,.2) 30%,rgba(8,9,8,0) 52%);
  opacity:0;transition:opacity .6s ease;
}
.rk-g-no{
  position:absolute;z-index:3;top:18px;left:20px;
  font-size:11px;letter-spacing:.3em;font-weight:500;color:var(--ivory,#f3efe7);
  font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(-6px);
  transition:opacity .5s ease,transform .7s var(--rk-e);
}
.rk-g-plus{
  position:absolute;z-index:3;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(11,12,11,.35);border:1px solid rgba(243,239,231,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--ivory,#f3efe7);
  opacity:0;transform:scale(.6);
  transition:opacity .45s ease,transform .6s var(--rk-e);
}
.rk-g-plus svg{width:14px;height:14px}
.rk-g-item figcaption{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:22px 22px 20px;
  font-family:var(--serif,Georgia,serif);font-weight:400;
  font-size:clamp(18px,1.5vw,23px);line-height:1.2;color:var(--ivory,#f3efe7);
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .8s var(--rk-e);
  pointer-events:none;
}
.rk-g-item figcaption::before{
  content:"";display:block;width:28px;height:1px;margin-bottom:12px;
  background:var(--accent-hi,#8cc4a5);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--rk-e) .08s;
}

@media (hover:hover){
  .rk-g-item:hover .rk-g-zoom{transform:scale(1.06)}
  .rk-g-item:hover .rk-g-frame::after,
  .rk-g-item:hover figcaption,
  .rk-g-item:hover .rk-g-no,
  .rk-g-item:hover .rk-g-plus{opacity:1;transform:none}
  .rk-g-item:hover figcaption::before{transform:none}
}
.rk-g-item:focus-visible .rk-g-zoom{transform:scale(1.06)}
.rk-g-item:focus-visible .rk-g-frame::after,
.rk-g-item:focus-visible figcaption,
.rk-g-item:focus-visible .rk-g-no,
.rk-g-item:focus-visible .rk-g-plus{opacity:1;transform:none}
.rk-g-item:focus-visible figcaption::before{transform:none}
.rk-g-item:focus-visible .rk-g-frame{box-shadow:0 0 0 2px var(--bg,#0b0c0b),0 0 0 4px var(--accent-hi,#8cc4a5)}

/* touch: captions always visible, quieter */
@media (hover:none){
  .rk-g-frame::after{opacity:.85}
  .rk-g-item figcaption{opacity:1;transform:none;font-size:18px;padding:16px 16px 15px}
  .rk-g-item figcaption::before{transform:none;margin-bottom:9px}
  .rk-g-no{opacity:.85;transform:none;top:14px;left:16px}
}

/* drag feel */
.rk-dragging .rk-g-item{transform:scale(.975)}

/* card lifted into viewer */
.rk-g-item.rk-lifted .rk-g-frame{opacity:0}

/* ---------- staggered entrance (only when JS is on) */
.rk-on .rk-g-item{opacity:0;transform:translate3d(64px,0,0)}
.rk-on .rk-g-frame{clip-path:inset(100% 0 0 0)}
.rk-on .rk-g-zoom{transform:scale(1.22)}
.rk-on.rk-in .rk-g-item{
  opacity:1;transform:none;
  transition:opacity 1s ease var(--rk-d,0s),transform 1.4s var(--rk-e) var(--rk-d,0s);
}
.rk-on.rk-in .rk-g-frame{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--rk-e) var(--rk-d,0s),box-shadow .4s var(--rk-e)}
.rk-on.rk-in .rk-g-zoom{transform:none;transition:transform 1.8s var(--rk-e) var(--rk-d,0s)}
.rk-on.rk-in.rk-done .rk-g-item{transition:transform .6s var(--rk-e)}
.rk-on.rk-in.rk-done .rk-g-frame{clip-path:none;transition:box-shadow .4s var(--rk-e)}
.rk-on.rk-in.rk-done .rk-g-zoom{transition:transform 1.4s var(--rk-e)}
@media (hover:hover){ .rk-on.rk-in.rk-done .rk-g-item:hover .rk-g-zoom{transform:scale(1.06)} }
.rk-on.rk-in.rk-done .rk-g-item:focus-visible .rk-g-zoom{transform:scale(1.06)}
.rk-on.rk-in.rk-done.rk-dragging .rk-g-item,
.rk-on.rk-in.rk-done .rk-dragging .rk-g-item{transform:scale(.975)}

/* ---------- control bar */
.rk-g-bar{
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  margin-top:clamp(4px,1vw,12px);
}
.rk-g-count{
  display:flex;align-items:baseline;gap:.35em;flex:0 0 auto;
  font-family:var(--sans,system-ui,sans-serif);font-weight:300;line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
}
.rk-g-cur{display:inline-block;font-size:clamp(34px,3.4vw,48px);min-width:1.1em;overflow:hidden}
.rk-g-cur span{display:inline-block}
.rk-g-sep,.rk-g-tot{font-size:clamp(15px,1.2vw,18px);color:var(--ink-faint,#7d7a73);letter-spacing:.08em}
.rk-g-progress{
  position:relative;flex:1 1 auto;height:44px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rk-g-progress::before,.rk-g-progress i{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;
}
.rk-g-progress::before{background:var(--line,rgba(243,239,231,.14))}
.rk-g-progress i{
  height:2px;margin-top:-1px;background:var(--accent-hi,#8cc4a5);
  transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 14px var(--accent-glow,transparent);
}
.rk-g-hint{
  flex:0 0 auto;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint,#7d7a73);
}
.rk-g-nav{display:flex;gap:10px;flex:0 0 auto}

.rk-g-btn,.rk-lb-btn{
  position:relative;display:inline-grid;place-items:center;
  width:56px;height:56px;padding:0;border-radius:50%;
  border:1px solid var(--line,rgba(243,239,231,.14));
  background:transparent;color:var(--ink,#f3efe7);cursor:pointer;
  overflow:hidden;isolation:isolate;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color .4s ease,border-color .4s ease,opacity .4s ease,transform .35s var(--rk-e,cubic-bezier(.2,.7,.1,1));
}
.rk-g-btn::before,.rk-lb-btn::before{
  content:"";position:absolute;inset:-1px;border-radius:50%;z-index:-1;
  background:var(--ivory,#f3efe7);
  transform:scale(0);transition:transform .55s var(--rk-e,cubic-bezier(.2,.7,.1,1));
}
.rk-g-btn svg,.rk-lb-btn svg{width:16px;height:16px;transition:transform .45s var(--rk-e,cubic-bezier(.2,.7,.1,1))}
@media (hover:hover){
  .rk-g-btn:hover,.rk-lb-btn:hover{color:var(--bg,#0b0c0b);border-color:var(--ivory,#f3efe7)}
  .rk-g-btn:hover::before,.rk-lb-btn:hover::before{transform:scale(1)}
  .rk-g-next:hover svg,.rk-lb-next:hover svg{transform:translateX(3px)}
  .rk-g-prev:hover svg,.rk-lb-prev:hover svg{transform:translateX(-3px)}
}
.rk-g-btn:active,.rk-lb-btn:active{transform:scale(.92)}
.rk-g-btn:focus-visible,.rk-lb-btn:focus-visible{outline:2px solid var(--accent-hi,#8cc4a5);outline-offset:3px}
.rk-g-btn[aria-disabled="true"]{opacity:.3;cursor:default}
.rk-g-btn[aria-disabled="true"]::before{transform:scale(0)!important}
.rk-g-btn[aria-disabled="true"]:hover{color:var(--ink,#f3efe7);border-color:var(--line,rgba(243,239,231,.14))}

@media (max-width:640px){
  .rk-gallery{--rk-h:min(64vh,104vw)}
  .rk-g-hint{display:none}
  .rk-g-btn{width:48px;height:48px}
  .rk-g-bar{gap:16px}
}
@supports (height:1svh){ @media (max-width:640px){ .rk-gallery{--rk-h:min(64svh,104vw)} } }

/* ---------- custom cursor bubble (fine pointers only) */
.rk-has-cursor .rk-g-item{cursor:none}
.rk-cursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:0;height:0}
.rk-cursor-in{
  position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ivory,#f3efe7);color:var(--bg,#0b0c0b);
  font:500 10.5px/1 var(--sans,system-ui,sans-serif);letter-spacing:.22em;text-transform:uppercase;text-indent:.22em;
  transform:scale(0);opacity:0;
  transition:transform .5s var(--ease,cubic-bezier(.2,.7,.1,1)),opacity .3s ease,background .3s ease,color .3s ease;
}
.rk-cursor.rk-on-card .rk-cursor-in{transform:scale(1);opacity:1}
.rk-cursor.rk-grab .rk-cursor-in{transform:scale(.7);opacity:1;background:var(--accent,#2f6b4f);color:var(--ivory,#f3efe7)}

/* ==========================================================================
   Fullscreen viewer
   ========================================================================== */
html.rk-lb-lock{overflow:hidden}
html.rk-lb-lock body{padding-right:var(--rk-sbw,0px)}

.rk-lb{
  --rk-e:var(--ease,cubic-bezier(.2,.7,.1,1));
  --rk-side:calc(var(--gutter,clamp(16px,4vw,56px)) + 76px);
  position:fixed;inset:0;z-index:1000;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  overflow:hidden;
  color:var(--ink,#f3efe7);font-family:var(--sans,system-ui,sans-serif);
  touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:contain;
  outline:none;
}
.rk-lb[hidden]{display:none}
.rk-lb-backdrop{
  position:absolute;inset:0;z-index:0;
  background:rgba(9,10,9,.9);
  -webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15);
  opacity:0;transition:opacity .55s ease;
}
@supports (background:color-mix(in srgb,red,blue)){
  .rk-lb-backdrop{background:color-mix(in srgb,var(--bg,#0b0c0b) 90%,transparent)}
}
.rk-lb-backdrop::after{ /* faint accent glow */
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 55%,var(--accent-glow,rgba(76,160,118,.12)),transparent 70%);
  opacity:.35;
}
.rk-lb.rk-show .rk-lb-backdrop{opacity:1}
.rk-lb-ui{opacity:0;transition:opacity .45s ease}
.rk-lb.rk-show .rk-lb-ui{opacity:1;transition:opacity .6s ease .18s}
.rk-lb.rk-pull .rk-lb-ui,.rk-lb.rk-pull .rk-lb-backdrop{transition:none}

/* top */
.rk-lb-top{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:max(14px,env(safe-area-inset-top)) var(--gutter,clamp(16px,4vw,56px)) 10px;
}
.rk-lb-count{display:flex;align-items:baseline;gap:.4em;font-family:var(--sans,system-ui,sans-serif);font-weight:300;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.rk-lb-cur{font-size:clamp(30px,2.6vw,40px)}
.rk-lb-tot{font-size:15px;color:var(--ink-faint,#7d7a73);letter-spacing:.08em}
.rk-lb-actions{display:flex;gap:10px}
.rk-lb-btn{width:52px;height:52px;background:rgba(11,12,11,.35)}
.rk-lb-play .rk-i-pause{display:none}
.rk-lb-play[aria-pressed="true"] .rk-i-play{display:none}
.rk-lb-play[aria-pressed="true"] .rk-i-pause{display:block}
.rk-lb-play[aria-pressed="true"]{border-color:var(--accent-hi,#8cc4a5);color:var(--accent-hi,#8cc4a5)}
.rk-lb-auto{position:absolute;left:0;right:0;top:0;height:2px;z-index:4;pointer-events:none}
.rk-lb-auto i{display:block;height:100%;background:var(--accent-hi,#8cc4a5);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--accent-glow,transparent)}

/* stage */
.rk-lb-stage{position:relative;z-index:1;cursor:grab;touch-action:none}
.rk-lb-stage.rk-grabbing{cursor:grabbing}
.rk-lb-area{position:absolute;top:8px;bottom:8px;left:var(--rk-side);right:var(--rk-side);pointer-events:none;visibility:hidden}
.rk-lb-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform,opacity;transform-origin:50% 50%}
.rk-lb-fig{
  position:relative;margin:0;overflow:hidden;
  border-radius:2px;background:var(--bg-2,#111311);
  pointer-events:auto;transform-origin:50% 50%;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.rk-lb-fig img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;-webkit-user-drag:none}
.rk-lb-low{filter:blur(8px);transform:scale(1.04)}
.rk-lb-img{opacity:0;transition:opacity .5s ease;transform-origin:var(--kox,50%) var(--koy,50%)}
.rk-lb-img.rk-ok{opacity:1}
.rk-lb-slide.rk-kb .rk-lb-img{animation:rk-kb 18s ease-in-out infinite alternate}
@keyframes rk-kb{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.1) translate3d(var(--kx,1.5%),var(--ky,-1%),0)}
}

/* bottom */
.rk-lb-bottom{position:relative;z-index:3;min-width:0;padding:6px 0 max(14px,env(safe-area-inset-bottom))}
.rk-lb-row{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 var(--gutter,clamp(16px,4vw,56px));min-height:52px}
.rk-lb-cap{
  margin:0;flex:1 1 auto;max-width:60ch;text-align:center;
  font-family:var(--serif,Georgia,serif);font-weight:400;
  font-size:clamp(18px,1.6vw,24px);line-height:1.25;color:var(--ink-dim,#b9b5ac);
  min-height:1.25em;
}
.rk-lb-nav{position:fixed;top:50%;margin-top:-28px;width:56px;height:56px;z-index:3}
.rk-lb-prev{left:var(--gutter,clamp(16px,4vw,56px))}
.rk-lb-next{right:var(--gutter,clamp(16px,4vw,56px))}

.rk-lb-rail{
  position:relative;margin-top:12px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  touch-action:pan-x;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.rk-lb-rail::-webkit-scrollbar{display:none}
.rk-lb-rail-in{display:flex;gap:8px;width:max-content;padding:6px calc(50vw - 26px)}
.rk-lb-thumb{
  position:relative;flex:0 0 auto;width:52px;height:68px;padding:0;border:0;border-radius:2px;
  overflow:hidden;background:var(--bg-2,#111311);cursor:pointer;
  opacity:.38;transform:scale(.92);
  transition:opacity .4s ease,transform .5s var(--rk-e);
  -webkit-tap-highlight-color:transparent;
}
.rk-lb-thumb img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.rk-lb-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(243,239,231,.12);transition:box-shadow .4s ease}
@media (hover:hover){ .rk-lb-thumb:hover{opacity:.8} }
.rk-lb-thumb[aria-current="true"]{opacity:1;transform:none}
.rk-lb-thumb[aria-current="true"]::after{box-shadow:inset 0 0 0 2px var(--accent-hi,#8cc4a5)}
.rk-lb-thumb:focus-visible{outline:2px solid var(--ivory,#f3efe7);outline-offset:2px;opacity:1}

.rk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:760px){
  .rk-lb{--rk-side:10px}
  .rk-lb-btn{width:46px;height:46px}
  .rk-lb-nav{position:relative;top:auto;left:auto;right:auto;margin:0;flex:0 0 auto;width:46px;height:46px}
  .rk-lb-row{gap:10px}
  .rk-lb-cap{font-size:18px}
  .rk-lb-rail{margin-top:10px}
  .rk-lb-thumb{width:44px;height:58px}
  .rk-lb-rail-in{padding:4px calc(50vw - 22px);gap:6px}
}
@media (max-height:520px) and (orientation:landscape){
  .rk-lb-rail{display:none}
  .rk-lb-top{padding-top:8px;padding-bottom:4px}
  .rk-lb-bottom{padding-bottom:max(8px,env(safe-area-inset-bottom))}
}

/* ---------- reduced motion: no Ken Burns / FLIP / parallax, simple fades */
@media (prefers-reduced-motion:reduce){
  .rk-on .rk-g-item,.rk-on.rk-in .rk-g-item{transform:none!important;transition:opacity .4s ease!important}
  .rk-on .rk-g-frame,.rk-on.rk-in .rk-g-frame{clip-path:none!important}
  .rk-on .rk-g-zoom,.rk-g-item:hover .rk-g-zoom{transform:none!important;transition:none!important}
  .rk-g-item img{transform:none!important}
  .rk-g-frame::before{animation:none}
  .rk-lb{opacity:0;transition:opacity .3s ease}
  .rk-lb.rk-show{opacity:1}
  .rk-lb-slide.rk-kb .rk-lb-img{animation:none}
  .rk-cursor{display:none}
}