@font-face{font-family:'Golos Text';src:url('assets/GolosText-Variable.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Grow both 16:9 rows into a tall viewport; reserve space for 25% hover expansion. */
:root{color-scheme:dark;--page:56px;--layout-fixed:519px;--card-height:clamp(180px,calc((100svh - var(--layout-fixed)) / 2.375),min(360px,calc((100vw - 16px) * 9 / 20)));--card:calc(var(--card-height) * 16 / 9);--gap:14px;--hover-scale:1.25}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#f1ece2;background:#080807;font:400 19px/1.4 Montserrat,sans-serif;-webkit-font-smoothing:antialiased;font-synthesis:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;padding:0;cursor:pointer;background:none;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:1px solid #f5e3c3;outline-offset:5px}button:disabled{cursor:default;opacity:.25}button,a{touch-action:manipulation}
.canvas{min-height:max(941px,100svh);display:flex;flex-direction:column;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 200px 230px at -5% 51%,#6f1e1428 0%,transparent 100%),#080807}
#film-texture{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.topbar,.intro,.filters,.work,.arrows,footer{position:relative;z-index:1;flex-shrink:0}
.topbar{z-index:2;position:absolute;top:27px;left:var(--page);right:54px;display:flex;justify-content:space-between;align-items:center}.navigation{display:flex;gap:51px}.navigation button,.navigation a{font-size:19px}.languages{display:flex;gap:13px;align-items:center;font-size:17px;color:#8c867d}.languages [aria-current=true]{color:#f4ebd9}.languages span{color:#9a9286}
.intro{text-align:center;height:287px;padding-top:25px}.logo{display:block;width:440px;max-width:65vw;height:auto;margin:auto}h1{position:absolute;top:213px;left:0;width:100%;margin:0;font:500 32px/40px 'Golos Text',sans-serif;letter-spacing:normal}.description{position:absolute;top:258px;left:0;width:100%;margin:0;padding:0 20px;font-size:20px;line-height:29px;color:#ddd8cf}
.filters{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:27px}.filters button{height:43px;padding:0 31px;border:1px solid #baafa0;border-radius:99px;font-size:17px;line-height:41px;white-space:nowrap;transition:background .2s,color .2s}.filters [aria-pressed=true]{background:#f5e3c3;color:#17130f;border-color:#f5e3c3}.filters [data-category=all]{padding-inline:33px}.filters button:hover{border-color:#f5e3c3}
.work{margin-top:max(38px,calc(var(--card-height) * .125 + 15.5px));scroll-margin-top:32px}.ribbon{position:relative;overflow:visible;touch-action:pan-y;height:var(--card-height);cursor:grab;user-select:none;--row-start:var(--page)}.ribbon+.ribbon{margin-top:max(40px,calc(var(--card-height) * .125 + 17.5px));--row-start:-100px}.ribbon.is-static{--row-start:var(--page)}.ribbon.is-dragging{cursor:grabbing}.ribbon:has(.is-active){z-index:2}.filmstrip{display:flex;align-items:center;height:var(--card-height);gap:var(--gap);width:max-content;margin-left:var(--row-start);will-change:transform;transform:translate3d(0,0,0);translate:calc(-1 * var(--hover-offset,0px)) 0;transition:translate .88s cubic-bezier(.16,1,.3,1)}
.card{position:relative;flex:0 0 var(--card);width:var(--card);height:var(--card-height);border-radius:14px;overflow:hidden;background:#131312;display:block;text-align:left;isolation:isolate;transition:flex-basis .88s cubic-bezier(.16,1,.3,1),width .88s cubic-bezier(.16,1,.3,1),height .88s cubic-bezier(.16,1,.3,1)}.card:focus-visible{outline-offset:2px}.media{position:absolute;inset:0;transform:scale(1);transition:transform .7s cubic-bezier(.2,.65,.3,1);pointer-events:none}.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.media img{opacity:1}.media video{opacity:0;transition:opacity .3s}.card.is-playing video{opacity:1}.card.is-active{flex-basis:calc(var(--card) * var(--hover-scale));width:calc(var(--card) * var(--hover-scale));height:calc(var(--card-height) * var(--hover-scale));z-index:2}
.caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 28px 20px;background:linear-gradient(180deg,transparent 35%,#0000000a 47%,#00000070 76%,#000000b8 100%);opacity:0;transition:opacity .3s;pointer-events:none}.card.is-active .caption,.card:focus-visible .caption{opacity:1}.caption strong{margin:0 0 1px;font:500 28px/34px 'Golos Text',sans-serif;color:#faf6ee;display:block}.caption span{font-size:16px;line-height:24px;color:#d8d0c3}
.ribbon.is-wheeling .card,.ribbon.is-wheeling .filmstrip{transition-duration:.18s}
/* Categories are a centered collection, while All keeps the moving ribbons. */
.work{opacity:1;transition:opacity .18s ease}
.work.is-changing{opacity:0;pointer-events:none;transition-duration:.14s}
.work.is-category{flex:1;display:flex;align-items:center;justify-content:center;margin-top:0;padding:clamp(48px,7svh,96px) max(var(--page),5.8vw)}
.category-grid{--columns:3;--grid-card:640px;--grid-gap:clamp(40px,5.8vw,96px);display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:var(--grid-gap);width:100%;max-width:calc(var(--columns) * min(var(--grid-card),max(320px,calc((100svh - 520px) * 16 / 11.25))) + (var(--columns) - 1) * var(--grid-gap))}
.category-grid[data-count="1"]{--columns:1;--grid-card:900px;max-width:min(900px,calc((100vw - 32px) / 1.25),max(320px,calc((100svh - 520px) * 16 / 11.25)))}
.category-grid[data-count="2"],.category-grid[data-count="4"]{--columns:2;--grid-card:720px}
.category-grid .card{width:100%;height:auto;aspect-ratio:16/9;min-width:0;transform:scale(1);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.category-grid .card.is-active{width:100%;height:auto;transform:scale(var(--hover-scale));z-index:3}
.category-grid .caption strong{font-size:clamp(20px,1.7vw,28px);line-height:1.2;overflow-wrap:anywhere}
.ribbon[hidden],.category-grid[hidden],.arrows[hidden]{display:none}
@media(max-width:1100px){.category-grid{--columns:2}.category-grid[data-count="1"]{--columns:1}}
@media(max-width:740px){.work.is-category{padding:48px var(--page)}.category-grid,.category-grid[data-count="2"],.category-grid[data-count="4"]{--columns:1;--grid-gap:56px;max-width:min(100%,calc((100vw - 32px) / 1.25))}}
.arrows{display:flex;justify-content:center;gap:48px;margin-top:max(32px,calc(var(--card-height) * .125 + 9.5px));margin-bottom:20px}.arrows button{width:40px;height:36px;display:grid;place-items:center}.arrows svg{width:32px;height:24px;stroke:#e0d7c6;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.arrows button:hover svg{stroke:#fff}
footer{margin:auto 54px 20px var(--page);border-top:1px solid #b1a49465;padding-top:13px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;font-size:16px;line-height:24px;color:#c9c1b5}.contact{display:flex;gap:10px;align-items:center}.contact svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
dialog{color:#eee8df;border:1px solid #ffffff28;border-radius:14px;background:#10100f;padding:0;width:min(1100px,calc(100vw - 48px));max-height:90svh}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}body:has(dialog[open]){overflow:hidden}.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 24px}.dialog-bar h2{font:500 22px/1.3 'Golos Text',sans-serif;margin:0}.close{font-size:32px;line-height:32px;width:40px;height:40px}#full-video{display:block;width:100%;max-height:74svh;background:#000}#about{max-width:640px}#about>p,#video-error{margin:0;padding:0 24px 28px;font-size:18px;line-height:1.65}
@media(max-width:1000px){:root{--page:28px;--layout-fixed:569px}.topbar{right:28px}.navigation{gap:28px}.navigation button,.navigation a{font-size:16px}.intro{height:337px;padding-top:75px}h1{top:263px}.description{top:308px;font-size:17px}.filters{gap:12px}.filters button{padding-inline:22px}footer{margin-right:28px}.canvas{min-height:max(991px,100svh)}}
@media(max-width:640px){:root{--page:20px;--card:50vw;--card-height:28.125vw;--gap:10px}.canvas{min-height:100svh}.topbar{top:24px;right:20px}.navigation{gap:24px}.navigation button,.navigation a{font-size:14px}.languages{font-size:13px;gap:10px}.intro{height:auto;padding-top:92px}.logo{width:330px;max-width:78vw}h1{position:static;font-size:26px;line-height:34px;margin-top:19px}.description{position:static;font-size:14px;line-height:22px;margin:8px 0 0;padding:0 30px}.filters{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:26px 0 0;padding:4px 20px;gap:10px}.filters button{height:36px;font-size:13px;line-height:34px;padding:0 19px}.filters [data-category=all]{padding-inline:24px}.work{margin-top:30px}.ribbon+.ribbon{margin-top:32px;--row-start:-60px}.ribbon.is-static{--row-start:var(--page)}.caption{padding:18px 20px}.caption strong{font-size:23px;line-height:29px}.caption span{font-size:13px;line-height:21px}.arrows{margin-top:26px;gap:36px;margin-bottom:20px}footer{margin: auto 20px 25px;font-size:12px}.contact svg{width:14px;height:14px}.dialog-bar{padding:10px 14px}dialog{width:calc(100vw - 24px)}.dialog-bar h2{font-size:18px}}
@media(hover:none){:root{--hover-scale:1}.filmstrip{translate:none}.caption{opacity:1}}
@media(prefers-reduced-motion:reduce){:root{--hover-scale:1}.filmstrip{translate:none}html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.card.is-active .media{transform:none}}

/* Site shell keeps the agreed demo composition and allows category pages to grow. */
#main-content{display:flex;flex-direction:column;flex:1;min-width:0;outline:none}
#film-texture{position:fixed;width:100vw;height:100svh}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;padding:12px 18px;background:#f5e3c3;color:#17130f;transform:translateY(-150%);border-radius:4px}
.skip-link:focus{transform:translateY(0)}
.navigation [aria-current=page]{color:#f5e3c3}
.caption strong{font-size:clamp(20px,1.68vw,28px);line-height:1.18;overflow-wrap:anywhere;text-wrap:balance}
.caption{padding:clamp(16px,1.45vw,24px) clamp(18px,1.7vw,28px)}
#player-category{margin:0 0 5px;color:#bcb2a4;font-size:12px}
#project-details{padding:0 24px 16px;overflow-wrap:anywhere}
#project-details[hidden]{display:none}
#project-credits{margin:0;font:500 15px/1.5 'Golos Text',sans-serif;color:#eee8df}
#project-description{margin:5px 0 0;font-size:13px;line-height:1.5;color:#bcb2a4}
@media(max-width:640px){#project-details{padding:0 14px 12px}#project-credits{font-size:14px}#project-description{font-size:12px}}
.player-bottom{display:flex;justify-content:flex-end;align-items:center;gap:20px;padding:15px 24px;color:#c9c1b5;font-size:13px}
#chapters{display:flex;flex-wrap:wrap;gap:10px;padding:0 24px 16px}
#chapters[hidden],#video-error[hidden]{display:none}
#chapters button{border:1px solid #766d5f;border-radius:99px;padding:7px 15px;font-size:14px}
#chapters [aria-pressed=true]{background:#f5e3c3;color:#17130f}
#video-error a{text-decoration:underline;text-underline-offset:4px}
.fallback-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}
.fallback-grid img{width:100%;height:auto;border-radius:14px}.no-js{position:relative;padding:40px var(--page)}
@media(max-width:640px){.caption strong{font-size:21px}.player-bottom{padding:12px 14px;font-size:12px}#chapters{padding-inline:14px}}

/* Frame only the still cover. Hover and full videos retain their authored framing. */
.media img,.fallback-image img{transform:translate(var(--poster-x,0%),var(--poster-y,0%)) scale(var(--poster-scale,1));transform-origin:center}
.fallback-image{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:14px}
.fallback-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}

/* Smaller mobile ribbons expose nearly two projects per row; category cards keep their size. */
@media(max-width:640px){
  .ribbon+.ribbon{margin-top:24px;--row-start:0px}
  .ribbon .card{border-radius:10px}
  .ribbon .caption{padding:10px 12px}
  .ribbon .caption strong{font-size:clamp(14px,4.2vw,18px);line-height:1.12;text-wrap:balance}
  .ribbon .caption span{font-size:11px;line-height:15px}
}