/* Портфолио-галерея: одна непрерывная стена, работы на стеклянных панелях.
   Цвета: стена #BCCCCF / #B1C4C7, тёмно-зелёный #37494D (текст), зелёный #6A8D94 (акцент), белое стекло. Шрифт Onest. */
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/onest-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/onest-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --wall:#BCCCCF;--wall-2:#B1C4C7;--green:#6A8D94;--ink:#37494D;--muted:#566a6e;
  --glass:rgba(244,248,249,.42);--glass-hi:rgba(246,249,250,.76);--glass-line:rgba(255,255,255,.75);
  --ease:cubic-bezier(.22,.8,.2,1);
  --f:"Onest",Arial,Helvetica,sans-serif;
  --bar-h:76px;--dock-h:82px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--wall);color:var(--ink);font:400 16px/1.5 var(--f);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Interface glass */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);box-shadow:0 18px 40px -22px rgba(38,52,56,.45),inset 0 1px 0 rgba(255,255,255,.8)}
.bar{position:fixed;z-index:30;top:12px;left:12px;right:12px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 6px 0 22px}
.bar-name{font-weight:600;letter-spacing:-.02em}
.bar-cta{background:var(--ink);color:#fff;font-size:14px;font-weight:500;padding:11px 18px;border-radius:999px;transition:background .2s}
.bar-cta:hover{background:var(--green)}

/* One continuous wall moved by the camera */
.viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.viewport.dragging{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform 1.1s var(--ease);will-change:transform}
.world.slow{transition:transform 2.4s cubic-bezier(.45,.05,.2,1)}
.world.instant{transition:none}
.world::before{content:"";position:absolute;inset:-4000px;background:
  radial-gradient(1200px 700px at 20% 30%,rgba(255,255,255,.18),transparent 70%),
  radial-gradient(1400px 900px at 70% 80%,rgba(40,60,65,.07),transparent 70%),
  var(--wall) url(assets/plaster-tile.jpg) 0 0/900px 900px repeat;z-index:0}
.strip{position:relative;z-index:1;display:flex}
.portrait .strip{flex-direction:column}
.bay{position:relative;flex:0 0 auto;width:1900px;height:1000px}
.portrait .bay{width:900px;height:1500px}
.light{position:absolute;inset:-120px -60px;pointer-events:none;mix-blend-mode:soft-light;opacity:.5;transition:opacity .6s;
  background:repeating-linear-gradient(118deg,transparent 0 140px,rgba(255,255,255,.55) 190px 250px,transparent 300px 470px);
  -webkit-mask:radial-gradient(70% 80% at 12% 0%,#000,transparent 70%);mask:radial-gradient(70% 80% at 12% 0%,#000,transparent 70%);filter:blur(26px)}
.bay:nth-child(2n) .light{opacity:.32;transform:translateX(260px)}
.bay:nth-child(3n) .light{opacity:.42;transform:translateX(-140px) scaleY(.9)}
.far .light{opacity:0}

.bay>*:not(.light){position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px)}
.portrait .bay>*:not(.light){left:calc(var(--px) * 1px);top:calc(var(--py) * 1px)}
.it,.paint-lead,.paint-hint,.paint-title.small{width:calc(var(--w) * 1px)}
.portrait .it,.portrait .paint-lead,.portrait .paint-hint,.portrait .paint-title.small{width:calc(var(--pw) * 1px)}

/* Lettering on the plaster */
.paint-name{margin:0;font-size:24px;letter-spacing:.04em;color:var(--ink);font-weight:600;opacity:.8}
.paint-title{margin:0;font-size:160px;line-height:.92;letter-spacing:-.055em;font-weight:650;white-space:nowrap;color:var(--ink);mix-blend-mode:multiply}
.paint-title span{display:block}
.paint-title.small{font-size:104px;white-space:normal}
.portrait .paint-title{font-size:118px}.portrait .paint-title.small{font-size:80px}
.accent,.paint-title em{font-style:normal;color:var(--green)}
.paint-lead{margin:0;font-size:34px;line-height:1.38;letter-spacing:-.01em;color:var(--ink);font-weight:450}
.paint-hint{margin:0;font-size:22px;color:var(--ink);opacity:.7;font-weight:500}
/* company names: frosted-glass letters mounted on the wall */
.glass-word{margin:0;font-size:118px;line-height:1;letter-spacing:-.045em;font-weight:700;white-space:nowrap;
  color:rgba(255,255,255,.42);-webkit-text-stroke:1.5px rgba(255,255,255,.85);
  text-shadow:0 1px 0 rgba(255,255,255,.9),8px 14px 18px rgba(38,52,56,.22),2px 3px 2px rgba(38,52,56,.12);transition:color .3s}
.glass-word.long{font-size:110px}
.portrait .glass-word{font-size:96px}.portrait .glass-word.long{font-size:80px}
.far .bay:hover .glass-word{color:rgba(255,255,255,.75)}

/* Glass panels that hold the work */
.it{display:block;transform:rotate(var(--r,0deg));transition:transform .5s var(--ease),opacity .5s,filter .5s}
.portrait .it{transform:rotate(var(--pr,var(--r,0deg)))}
.pane-card{padding:14px;border-radius:24px;background:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),16px 24px 30px -8px rgba(38,52,56,.30),3px 5px 8px rgba(38,52,56,.16);position:relative;overflow:hidden}
.pane-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.45),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 60%,rgba(255,255,255,.18) 78%,rgba(255,255,255,0))}
.it:hover{transform:translateY(-8px) rotate(var(--r,0deg))}
.portrait .it:hover{transform:translateY(-6px) rotate(var(--pr,var(--r,0deg)))}
.pane-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),22px 34px 40px -8px rgba(38,52,56,.32),3px 5px 8px rgba(38,52,56,.16)}
.art img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 2px 6px rgba(38,52,56,.25)}
.ph{display:grid;place-items:center;align-content:center;gap:6px;text-align:center;border-radius:14px;border:1.5px dashed rgba(55,73,77,.28);background:rgba(255,255,255,.18);color:var(--ink);font-size:21px;line-height:1.3;padding:14px;font-weight:550}
.ph small{font-size:15px;color:var(--green);font-weight:500}
.a45{aspect-ratio:4/5}.a34{aspect-ratio:3/4}.a11{aspect-ratio:1}.a43{aspect-ratio:4/3}.a169{aspect-ratio:16/9}.a916{aspect-ratio:9/16}
.txt{display:grid;gap:10px;padding:14px 12px;font-size:20px;line-height:1.4;color:var(--ink)}
.txt b{font-size:26px;font-weight:650}
.note .txt{aspect-ratio:3/4;align-content:start}
.step .txt{aspect-ratio:4/5;align-content:start;padding:18px 16px}
.step .txt i{font-style:normal;font-size:68px;font-weight:700;letter-spacing:-.05em;color:var(--green);line-height:1}
.step .txt b{font-size:36px;letter-spacing:-.03em}
.qr .txt{place-items:center;text-align:center}
.qr .txt b{font-size:42px}
.qr .txt img{width:80%;height:auto;border-radius:16px}
.qr .txt span{font-size:26px;font-weight:600;color:var(--green)}

/* Tags: rounded glass captions instead of paper labels */
.tag{display:grid;gap:6px;padding:22px 26px 20px;border-radius:24px;text-align:left;background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),12px 18px 26px -10px rgba(38,52,56,.28)}
.tag b{font-size:30px;line-height:1.15;letter-spacing:-.02em;font-weight:650}
.tag span{font-size:19px;line-height:1.4;color:var(--muted)}
.tag em{margin-top:8px;justify-self:start;font-style:normal;font-size:15px;font-weight:600;color:#fff;background:var(--green);padding:8px 14px;border-radius:999px}
.tag em::after{content:" →"}

/* Zoom state */
.zoomed .it:not(.target),.zoomed .glass-word,.zoomed .paint-title,.zoomed .paint-lead,.zoomed .paint-name,.zoomed .paint-hint{opacity:.22;filter:blur(2px)}
.zoomed .it.target{z-index:3}
.far .viewport{cursor:zoom-in}
.far .it{pointer-events:none}

/* Mockup viewer: shown only when a work is zoomed */
.viewer{position:fixed;z-index:35;left:20px;top:calc(var(--bar-h) + 4px);bottom:calc(var(--dock-h) + 8px);right:calc(min(440px,38vw) + 36px);margin:0;border-radius:28px;padding:18px;display:flex;flex-direction:column;gap:12px;align-items:center;opacity:0;transform:scale(.97);transition:opacity .5s,transform .6s var(--ease)}
.viewer.open{opacity:1;transform:none}
.viewer img{flex:1;min-height:0;max-width:100%;object-fit:contain;border-radius:18px;box-shadow:0 18px 40px -16px rgba(38,52,56,.45)}
.viewer figcaption{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--muted)}

/* Panel */
.panel{position:fixed;z-index:40;top:calc(var(--bar-h) + 4px);right:16px;bottom:calc(var(--dock-h) + 8px);width:min(440px,38vw);border-radius:28px;padding:24px 26px 20px;overflow-y:auto;background:var(--glass-hi);display:flex;flex-direction:column;gap:12px;transform:translateX(calc(100% + 30px));opacity:0;transition:transform .7s var(--ease),opacity .5s}
.panel.open{transform:none;opacity:1}
.panel-top{display:flex;align-items:center;justify-content:space-between}
.panel-kicker{margin:0;font-size:13px;color:var(--muted)}
.panel-close{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.75);border:1px solid var(--glass-line)}
.panel h3{margin:0;font-size:28px;line-height:1.1;letter-spacing:-.03em;font-weight:650}
.panel-note{margin:0;color:var(--muted);font-size:15px}
.panel-mocks{display:grid;gap:8px}
.panel-mocks>p{margin:0;font-size:13px;color:var(--muted)}
#panel-mock-list{display:flex;gap:10px;flex-wrap:wrap}
.mock-btn{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--green);color:#fff;font-size:14px;font-weight:500}
.mock-btn img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.mock-btn[aria-pressed=true]{background:var(--ink)}
.panel-body{display:grid;gap:12px;font-size:15px;line-height:1.55;border-top:1px solid rgba(55,73,77,.14);padding-top:14px}
.panel-body p{margin:0}
.panel-body .meta{font-size:13px;color:var(--muted)}
.did,.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.did li,.steps li{display:grid;gap:2px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.62)}
.did b,.steps b{font-weight:600}
.steps{counter-reset:s}.steps li b::before{counter-increment:s;content:counter(s) " · "}
.result{padding:12px 14px;border-radius:16px;background:rgba(106,141,148,.18)}.result b{display:block;color:var(--ink);font-size:13px}
.panel-nav{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.pill{font-size:14px;font-weight:500;padding:11px 16px;border-radius:999px;background:var(--ink);color:#fff;align-self:flex-start;transition:background .2s}
.pill:hover{background:var(--green)}
.pill.ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1px solid var(--glass-line)}
.pill.ghost:hover{background:#fff}
.pill[hidden]{display:none}

/* Dock */
.dock{position:fixed;z-index:30;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100vw - 24px);bottom:14px;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px}
.dock-zoom{font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;white-space:nowrap}
.dock-zoom[aria-pressed=true]{background:var(--green)}
.dock-list{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.dock-list::-webkit-scrollbar{display:none}
.dock-list button{flex:0 0 auto;font-size:13px;padding:10px 14px;border-radius:999px;color:var(--muted);transition:background .3s,color .3s}
.dock-list button:hover{color:var(--ink)}
.dock-list button[aria-current=true]{background:rgba(255,255,255,.85);color:var(--ink);font-weight:600}
.dock-arrow{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:rgba(255,255,255,.6)}
.dock-arrow:disabled{opacity:.35;cursor:default}

@media (max-width:760px){
  :root{--bar-h:66px;--dock-h:72px}
  .bar{height:46px;padding:0 5px 0 16px}.bar-name{font-size:14px}.bar-cta{font-size:12px;padding:9px 12px}
  .panel{top:auto;left:8px;right:8px;bottom:calc(var(--dock-h) + 4px);width:auto;max-height:50vh;transform:translateY(calc(100% + 100px))}
  .viewer{left:8px;right:8px;bottom:calc(var(--dock-h) + 4px + 50vh + 8px);padding:10px;border-radius:22px}
  .viewing .panel{max-height:22vh}
  .viewing .viewer{bottom:calc(var(--dock-h) + 4px + 22vh + 8px)}
  .panel{transition:transform .7s var(--ease),opacity .5s,max-height .5s var(--ease)}
  .dock{bottom:10px;width:calc(100vw - 16px)}.dock-list{flex:1}.dock-arrow{width:36px;height:36px}.dock-zoom{padding:9px 12px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== v10: painted company names (back) + glass folders with a dossier ===== */
.paint-big{margin:0;font-size:128px;line-height:.95;letter-spacing:-.05em;font-weight:700;white-space:nowrap;color:var(--ink);mix-blend-mode:multiply;opacity:.88;transition:opacity .3s}
.paint-big.long{font-size:120px}
.portrait .paint-big{font-size:104px}.portrait .paint-big.long{font-size:84px}
.zoomed .paint-big{opacity:.22;filter:blur(2px)}
.far .bay:hover .paint-big{opacity:1}

.folder{position:relative;aspect-ratio:4/3;perspective:900px;text-align:left;filter:drop-shadow(14px 22px 22px rgba(38,52,56,.28)) drop-shadow(2px 3px 3px rgba(38,52,56,.16))}
.f-back,.f-front{position:absolute;left:0;right:0;border-radius:22px;border:1px solid rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.f-back{top:20px;bottom:0;background:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
/* tab of the folder */
.f-back::before{content:"";position:absolute;left:-1px;top:-21px;width:42%;height:30px;border-radius:16px 16px 0 0;background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.85);border-bottom:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.f-sheet{position:absolute;left:9%;right:9%;top:10px;height:44%;border-radius:10px;background:#fbfcfc;box-shadow:0 4px 10px rgba(38,52,56,.18);padding:22px 20px;display:grid;align-content:start;gap:10px;transition:transform .55s var(--ease)}
.f-sheet i{display:block;height:6px;border-radius:3px;background:rgba(55,73,77,.16)}
.f-sheet i:first-child{width:46%;height:9px;background:rgba(106,141,148,.55)}
.f-sheet i:nth-child(3){width:82%}.f-sheet i:nth-child(4){width:64%}
.f-front{bottom:0;height:76%;padding:22px 24px 20px;display:grid;align-content:end;gap:4px;background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 -6px 16px -10px rgba(38,52,56,.25);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.f-front b{font-size:32px;line-height:1.1;letter-spacing:-.025em;font-weight:650;color:var(--ink)}
.f-front span{font-size:19px;color:var(--muted)}
.f-front em{margin-top:10px;justify-self:start;font-style:normal;font-size:15px;font-weight:600;color:#fff;background:var(--green);padding:8px 14px;border-radius:999px}
.f-front em::after{content:" →"}
.folder:hover .f-front{transform:rotateX(-16deg)}
.folder:hover .f-sheet{transform:translateY(-12px)}
.folder.target .f-front{transform:rotateX(-38deg)}
.folder.target .f-sheet{transform:translateY(-34px)}

/* dossier look of the panel when a folder is opened */
.panel.dossier .panel-body{background:#fbfcfc;border-radius:18px;padding:18px;border-top:0;box-shadow:0 6px 18px -8px rgba(38,52,56,.25)}

.panel.dossier .did li{background:rgba(188,204,207,.25)}