/* pictures carry width/height attributes (space is kept before they load); a side the stylesheet does not set follows the other one */
:where(img){width:auto;height:auto}
/* Fundația de Cultură Transilvania — site.css
   Cinematic scroll site: loader, pinned hero with diagonal wipe, horizontal film strip,
   pinned "what we do" stack, word-by-word manifesto, scattered frames, final call. */
@font-face{font-family:"Aerosoldier";src:url(/assets/fonts/Aerosoldier.woff) format("woff");font-display:swap}
@font-face{font-family:"DeiGratia RO";src:url(/assets/fonts/DeiGratia-RO.woff) format("woff");font-display:swap}
:root{
  --bg:#050505;--ink:#0b0b0b;--paper:#F4F1EA;--paper2:#e9e4d8;--muted:rgba(244,241,234,.64);
  --neon:#D7FF2E;--perg:#E6D3A8;--line:rgba(244,241,234,.14);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cond:"Antonio","Arial Narrow",sans-serif;--graf:"Aerosoldier","Antonio",sans-serif;--clasic:"DeiGratia RO",Georgia,serif;
  --ease:cubic-bezier(.22,.8,.12,1);--ease2:cubic-bezier(.65,0,.35,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--paper);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
::selection{background:var(--neon);color:#000}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--noise);opacity:.09;mix-blend-mode:overlay}

/* ---------- loader + page wipe ---------- */
#loader{position:fixed;inset:0;z-index:100;background:#0a0a0a;display:grid;place-items:center;transition:clip-path .9s var(--ease2);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
#loader.done{clip-path:polygon(0 0,100% 0,100% 0,0 0);pointer-events:none}
#loader .in{display:grid;justify-items:center;gap:22px}
#loader img{width:min(320px,62vw);opacity:.25;filter:grayscale(1);transition:opacity .5s,filter .5s}
#loader.lit img{opacity:1;filter:none}
#loader .pct{font:600 12px/1 var(--sans);letter-spacing:.3em;color:var(--muted)}
.wipe{position:fixed;inset:0;z-index:90;background:var(--neon);pointer-events:none;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);transition:clip-path .5s var(--ease2)}
.wipe.out{clip-path:polygon(0 -30%,100% 0,100% 100%,0 100%)}
html.sub .wipe{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);background:#0a0a0a}
html.sub.ready .wipe{clip-path:polygon(0 0,100% 0,100% 0,0 -30%)}
html.sub.ready .wipe.out{background:var(--neon);clip-path:polygon(0 -30%,100% 0,100% 100%,0 100%)}

/* ---------- top bar + menu ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,3vw,36px);pointer-events:none;mix-blend-mode:difference}
.bar a,.bar button{pointer-events:auto}
.bar .mark img{height:38px;width:auto}
.bar .name{position:absolute;left:50%;transform:translateX(-50%);font:600 15px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.burger{all:unset;cursor:pointer;width:46px;height:46px;display:grid;place-items:center}
.burger i{display:block;width:26px;height:3px;background:#fff;transform:skewX(-28deg);transition:transform .35s var(--ease),width .35s var(--ease)}
.burger i+i{margin-top:-14px;width:18px;justify-self:start;margin-left:10px}
.burger[aria-expanded=true] i{transform:rotate(45deg);width:26px}
.burger[aria-expanded=true] i+i{transform:rotate(-45deg);width:26px;margin:-3px 0 0 0;justify-self:center}
.burger:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:640px){.bar .name{display:none}}
#menu{position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:80;width:min(300px,calc(100vw - 24px));padding:22px 22px 16px;border-radius:14px;background:rgba(24,22,22,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
  transform:translateY(18px);opacity:0;visibility:hidden;transition:transform .45s var(--ease),opacity .3s,visibility .3s}
#menu.open{transform:none;opacity:1;visibility:visible}
#menu img{height:30px;margin-bottom:16px}
#menu nav{display:grid;gap:2px}
#menu nav a{font:700 21px/1.35 var(--sans);text-decoration:none;color:var(--paper);transition:color .2s,transform .3s var(--ease);transform-origin:left}
#menu nav a:hover,#menu nav a:focus-visible{color:var(--neon);transform:translateX(8px)}
#menu .foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted)}
#menu .foot a{color:var(--paper);text-decoration:none;font-weight:700;letter-spacing:.1em;border:1px solid var(--line);border-radius:999px;padding:6px 10px}
#menu .foot a:hover{border-color:var(--neon);color:var(--neon)}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;z-index:95;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--neon);pointer-events:none;mix-blend-mode:difference;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),opacity .2s;opacity:0}
.cur.on{opacity:1}
.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px}
@media(hover:none),(pointer:coarse){.cur{display:none}}

/* ---------- shared bits ---------- */
.kicker{font:600 12px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--neon)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 30px;border-radius:999px;font:700 14px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--neon);color:var(--neon);position:relative;overflow:hidden;transition:color .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--neon);transform:translateY(101%);transition:transform .35s var(--ease);z-index:-1}
.btn{z-index:0}
.btn:hover,.btn:focus-visible{color:#000}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn.neon{background:var(--neon);color:#000}
.btn.neon::before{background:var(--paper)}
.btn.dark{border-color:var(--ink);color:var(--ink)}
.btn.dark::before{background:var(--ink)}
.btn.dark:hover{color:var(--paper)}
.btn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.giant{font:600 clamp(90px,23vw,420px)/.82 var(--cond);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;user-select:none;pointer-events:none}
.paper{background:var(--paper);color:var(--ink);position:relative}
.paper::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.paper>*{position:relative}

/* ---------- 1. hero (pinned) ---------- */
.hero{height:280vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero .media{position:absolute;inset:0;z-index:2;will-change:transform,clip-path}
.hero .media img,.hero .media video{width:100%;height:100%;object-fit:cover}
.hero .media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 20%,rgba(0,0,0,.7) 100%),linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,rgba(0,0,0,.8))}
.hero .open{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:0 16px;pointer-events:none;opacity:calc(1 - var(--p,0)*6);transform:translateY(calc(var(--p,0)*-120px))}
.hero .open img{width:min(620px,84vw);margin:0 auto 26px;filter:drop-shadow(0 0 34px rgba(215,255,46,.25))}
.hero .open .kicker{color:var(--paper)}
html.ready .hero .open img{animation:neon 2.6s linear .5s both}
@keyframes neon{0%,6%{opacity:.15;filter:grayscale(1) brightness(.5)}7%,9%{opacity:1;filter:drop-shadow(0 0 34px rgba(215,255,46,.6))}10%,18%{opacity:.2;filter:grayscale(1) brightness(.5)}19%,22%{opacity:1;filter:drop-shadow(0 0 40px rgba(215,255,46,.7))}23%,27%{opacity:.35;filter:grayscale(1) brightness(.6)}28%,100%{opacity:1;filter:drop-shadow(0 0 34px rgba(215,255,46,.3))}}
.hero .spot{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .6s;background:radial-gradient(circle 320px at var(--mx,50%) var(--my,50%),rgba(215,255,46,.26),rgba(215,255,46,.06) 45%,transparent 70%)}
.hero .spot.on{opacity:calc(1 - var(--p,0)*5)}

.hero .hint{position:absolute;z-index:4;left:50%;bottom:26px;transform:translateX(-50%);font:600 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);opacity:calc(1 - var(--p,0)*8)}
.hero .hint::after{content:"";display:block;width:1px;height:38px;margin:10px auto 0;background:linear-gradient(var(--neon),transparent);animation:drip 1.8s var(--ease2) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero .sheet{position:absolute;inset:0;display:grid;grid-template-columns:1fr minmax(0,860px) 1fr;align-items:center;gap:clamp(12px,3vw,40px);padding:84px clamp(16px,3vw,40px) 24vh}
.hero .sheet .mid{text-align:center}
.hero .sheet .mid h1,.hero .sheet .mid .lead{opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0))*30px))}
/* woven Transylvanian motif pressed into the paper; drifts with the scroll */
.hero .sheet::before{inset:-20%;opacity:.6;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.13' stroke-width='9'%3E%3Cpath d='M120 26l94 94-94 94-94-94z'/%3E%3Cpath d='M120 70l50 50-50 50-50-50z'/%3E%3Cpath d='M0 0l44 44M240 0l-44 44M0 240l44-44M240 240l-44-44'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.12'%3E%3Cpath d='M108 108h24v24h-24zM-12 108h24v24h-24zM228 108h24v24h-24zM108 -12h24v24h-24zM108 228h24v24h-24z'/%3E%3C/g%3E%3C/svg%3E") 0 0/380px,var(--noise);transform:rotate(-9deg) translate3d(calc(var(--p,0)*-70px),calc(var(--p,0)*-160px),0)}
/* the camera the video zooms out into; .lens marks where the video lands (see site.js) */
.cam{position:relative;height:min(var(--ch,44vh),60vw);aspect-ratio:var(--ar,600/440);margin:1.4vh auto 2vh}
.cam>svg,.cam>img{position:absolute;inset:0;width:100%;height:100%}
.cam>img{filter:drop-shadow(0 26px 22px rgba(40,22,6,.45))}
.cam .lens,.cam .glass{position:absolute;left:var(--lx,50%);top:var(--ly,51.14%);width:var(--ld,30.67%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.cam .lens{background:#050505}
.cam .glass{z-index:3;pointer-events:none;opacity:var(--a,0);box-shadow:inset 0 0 0 5px #0b0b0b,inset 0 0 0 7px rgba(215,255,46,.55),inset 0 0 46px rgba(0,0,0,.85);background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.34),transparent 30%),radial-gradient(circle at 72% 80%,rgba(215,255,46,.2),transparent 42%)}
.hero h1{font:600 clamp(40px,6.4vw,104px)/.92 var(--cond);text-transform:uppercase;letter-spacing:-.005em}
.hero h1 em{font:400 .95em/1 var(--graf);font-style:normal;text-transform:none;color:#3d4f00;padding:0 .05em}
.hero .lead{max-width:34em;margin:0 auto;font-size:clamp(14px,1.3vw,17px);color:rgba(11,11,11,.72)}
.hero .note{font-size:13px;line-height:1.5;color:rgba(11,11,11,.7);max-width:19em;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0))*80px))}
.hero .note b{display:block;font:600 34px/1 var(--cond);color:var(--ink);margin-bottom:6px}
.hero .note.r{justify-self:end;text-align:right}
.hero .note.r i{display:block;font:400 30px/1 var(--clasic);font-style:normal;color:#3d4f00;margin-bottom:8px}
@media(max-width:900px){.hero .sheet{grid-template-columns:1fr}.hero .note{display:none}}

/* ---------- 2. films (pinned, horizontal) ---------- */
.films{height:calc(var(--n,5)*75vh + 100vh);position:relative;background:#0a0909;margin-top:-22vh;clip-path:polygon(0 22vh,100% 0,100% 100%,0 100%);z-index:2}
.films .stage{background:radial-gradient(ellipse at 70% 110%,rgba(215,255,46,.08),transparent 55%),#0a0909}
.films .giant{position:absolute;top:9vh;left:0;transform:translateX(calc(4vw - var(--p,0)*18vw));color:transparent;-webkit-text-stroke:0;background:linear-gradient(180deg,rgba(215,255,46,.34),rgba(215,255,46,.02) 85%);-webkit-background-clip:text;background-clip:text}
.films .track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;gap:clamp(28px,6vw,110px);padding:0 12vw 0 30vw;will-change:transform}
.card{flex:none;width:clamp(210px,23vw,330px);text-decoration:none;color:var(--paper);perspective:900px;transform:translateY(var(--dy,0))}
.card:nth-child(odd){--dy:-6vh}.card:nth-child(even){--dy:7vh}
.card .fr{position:relative;aspect-ratio:2/3;border-radius:6px;padding:7px;background:linear-gradient(135deg,#f3e3b0,#b98f3a 30%,#f8ecc6 50%,#9a7426 75%,#e9d49a);box-shadow:0 30px 60px -20px rgba(0,0,0,.9);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .5s;transform-style:preserve-3d}
.card:hover .fr{transition-duration:.12s;box-shadow:0 40px 80px -20px rgba(215,255,46,.25)}
.card .fr .ph{position:absolute;inset:7px;border-radius:3px;overflow:hidden;background:#111}
.card .fr img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform .9s var(--ease)}
.card:hover .fr img{transform:scale(1.14)}
.card .fr .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(calc(-120% + var(--sh,0)*240%));mix-blend-mode:screen}
.card .fr .yr{position:absolute;left:16px;top:14px;z-index:2;font:600 13px/1 var(--cond);letter-spacing:.14em;background:#000;color:var(--neon);padding:6px 8px;border-radius:3px}
.card h3{margin-top:18px;text-align:center;font:600 20px/1.1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
.card p{margin-top:6px;text-align:center;font:600 10.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.card .go{display:block;margin-top:8px;text-align:center;font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--neon);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.card:hover .go,.card:focus-visible .go{opacity:1;transform:none}
.card:focus-visible{outline:none}.card:focus-visible .fr{outline:2px solid var(--neon);outline-offset:4px}
.films .strip{position:absolute;left:0;right:0;bottom:0;height:54px;border-top:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(244,241,234,.16) 22px 36px,transparent 36px 58px) 0 8px/58px 10px repeat-x;background-position-x:calc(var(--p,0)*-600px)}
.films .strip span{position:absolute;bottom:8px;font:600 22px/1 var(--cond);color:rgba(244,241,234,.28);letter-spacing:.1em;transform:translateX(calc(var(--p,0)*-60vw))}
@media(max-width:640px){.card{width:62vw}.films .track{padding-left:22vw;gap:9vw}.card:nth-child(odd){--dy:-3vh}.card:nth-child(even){--dy:3vh}}

/* ---------- 3. what we do (pinned stack) ---------- */
.work{height:420vh;position:relative;background:#0a0909}
.work .stage{display:grid;place-items:center}
.work .giant{position:absolute;top:10vh;left:50%;transform:translateX(-50%);color:transparent;background:radial-gradient(circle,rgba(215,255,46,.5) 1.2px,transparent 1.6px) 0 0/7px 7px;-webkit-background-clip:text;background-clip:text;opacity:.75;font-size:clamp(80px,19vw,340px)}
.work .stack{position:relative;width:min(52vw,720px);aspect-ratio:16/10;margin-top:6vh}
.work .stack figure{position:absolute;inset:0;margin:0;padding:8px;background:var(--paper);box-shadow:0 30px 70px -20px #000;transform:translate(var(--x,0),120vh) rotate(var(--r,0deg));transition:transform 1s var(--ease),filter .6s;filter:brightness(.55)}
.work .stack figure.seen{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg))}
.work .stack figure.on{filter:none}
.work .stack img{width:100%;height:100%;object-fit:cover}
.work .stack figure:nth-child(1){--r:-4deg;--x:-9%}.work .stack figure:nth-child(2){--r:3deg;--x:10%;--y:4%}
.work .stack figure:nth-child(3){--r:-2deg;--x:-3%;--y:-3%}.work .stack figure:nth-child(4){--r:5deg;--x:6%;--y:2%}
.work .info{position:absolute;left:clamp(16px,4vw,60px);bottom:16vh;width:min(330px,calc(100vw - 32px));min-height:190px;padding:22px 24px;border-radius:14px;background:rgba(60,58,62,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line)}
.work .info div{position:absolute;inset:22px 24px;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .6s var(--ease);pointer-events:none}
.work .info div.on{opacity:1;transform:none;pointer-events:auto}
.work .info h3{font:700 22px/1.2 var(--sans);margin-bottom:10px}
.work .info p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.work .dots{position:absolute;left:clamp(4px,2vw,30px);bottom:calc(16vh + 60px);display:grid;gap:7px}
.work .dots i{width:4px;height:4px;border-radius:4px;background:rgba(244,241,234,.35);transition:height .4s var(--ease),background .3s}
.work .dots i.on{height:22px;background:var(--paper)}
.work .more{position:absolute;right:clamp(16px,4vw,60px);bottom:17vh}
.marq{position:absolute;left:0;right:0;bottom:0;padding:22px 0;border-top:1px solid var(--line);overflow:hidden;white-space:nowrap}
.marq div{display:inline-flex;gap:64px;padding-right:64px;animation:marq 38s linear infinite;font:600 19px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.55)}
.marq span::before{content:"✦";margin-right:64px;color:var(--neon)}
@keyframes marq{to{transform:translateX(-50%)}}
@media(max-width:900px){.work .stack{width:86vw;margin-top:-16vh}.work .info{left:16px;bottom:13vh;min-height:170px}.work .dots{display:none}.work .more{display:none}}

/* ---------- 4. manifesto ---------- */
.mani{height:240vh;position:relative;background:#0a0909}
.mani .stage{display:grid;place-items:center;padding:0 clamp(16px,6vw,120px)}
.mani p{font:600 clamp(34px,6.2vw,104px)/1.02 var(--cond);text-transform:uppercase;text-align:center;max-width:16em}
.mani p span{color:rgba(244,241,234,.14);transition:color .35s}
.mani p span.on{color:var(--paper)}
.mani p span.hl.on{color:var(--neon)}

/* ---------- 5. frames ---------- */
.frames{padding:16vh clamp(16px,4vw,60px) 20vh;overflow:hidden;clip-path:polygon(0 0,100% 9vh,100% 100%,0 100%);margin-top:-9vh;z-index:2}
.frames .giant{color:var(--ink);opacity:.9;font-size:clamp(70px,17vw,300px);margin:6vh 0 2vh}
.frames .sub{max-width:30em;color:rgba(11,11,11,.7);margin-bottom:8vh}
.frames .wall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,46px) clamp(12px,2.4vw,36px);align-items:start}
.pol{margin:0;padding:9px 9px 14px;background:#fbfaf6;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);transform:translateY(var(--py,0px)) rotate(var(--r,0deg));transition:transform .6s var(--ease),box-shadow .4s;will-change:transform}
.pol:hover{transform:translateY(var(--py,0px)) rotate(0deg) scale(1.06);box-shadow:0 34px 60px -18px rgba(0,0,0,.6);z-index:3;position:relative}
.pol img{width:100%;aspect-ratio:var(--ar,4/3);object-fit:cover;filter:saturate(.9)}
.pol figcaption{margin-top:10px;font:600 10.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(11,11,11,.7)}
.pol:nth-child(4n+1){--r:-3deg;margin-top:6vh}.pol:nth-child(4n+2){--r:2deg;--ar:3/4}.pol:nth-child(4n+3){--r:-1.5deg;margin-top:12vh}.pol:nth-child(4n){--r:3.5deg;--ar:1/1;margin-top:3vh}
@media(max-width:900px){.frames .wall{grid-template-columns:repeat(2,1fr)}}

/* ---------- 6. final call + footer ---------- */
.call{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:16vh 16px 10vh;background:#0a0909;overflow:hidden;clip-path:polygon(0 9vh,100% 0,100% 100%,0 100%);margin-top:-9vh;z-index:3}
.call .bgimg{position:absolute;inset:0;opacity:.3}
.call .bgimg img{width:100%;height:100%;object-fit:cover}
.call .bgimg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent,#0a0909 75%)}
.call .in{position:relative}
.call .sig{font:400 clamp(40px,6vw,84px)/1 var(--graf);color:var(--neon);text-shadow:0 0 26px rgba(215,255,46,.55);margin-bottom:10px}
.call h2{font:600 clamp(44px,8vw,120px)/.94 var(--cond);text-transform:uppercase;max-width:11em;margin:0 auto}
.call .lead{max-width:34em;margin:22px auto 30px;color:var(--muted)}
.call .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
footer{background:#0a0909;border-top:1px solid var(--line);padding:44px clamp(16px,4vw,60px) calc(44px + env(safe-area-inset-bottom));position:relative;z-index:3}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
footer img{height:54px;margin-bottom:14px}
footer h4{margin:0 0 10px;font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--neon)}
footer p,footer a{font-size:14px;line-height:1.7;color:var(--muted);text-decoration:none}
footer a:hover{color:var(--neon)}
footer .legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:rgba(244,241,234,.42)}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}

/* ---------- sub pages (film, foundation) ---------- */
.phero{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden}
.phero .media{position:absolute;inset:0}
.phero .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:kb 14s var(--ease) forwards}
@keyframes kb{to{transform:scale(1)}}
.phero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 35%,#0a0909 100%)}
.phero .in{position:relative;width:100%;padding:0 clamp(16px,4vw,60px) 8vh}
.phero h1{font:600 clamp(60px,15vw,260px)/.84 var(--cond);text-transform:uppercase;letter-spacing:-.01em}
.phero .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.phero .meta span{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.4)}
.pbody{background:#0a0909;padding:10vh clamp(16px,4vw,60px)}
.pbody .cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,6vw,100px);max-width:1280px;margin:0 auto}
.pbody .big{font:600 clamp(28px,3.6vw,54px)/1.08 var(--cond);text-transform:uppercase}
.pbody .big em{font-style:normal;color:var(--neon)}
.pbody .txt p{margin-top:20px;color:var(--muted);max-width:38em}
.facts{display:grid;gap:0;align-content:start}
.facts div{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.facts div span:first-child{font:600 11px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--neon);flex:none}
.facts div span:last-child{text-align:right}
.facts .btn{margin-top:24px}
.gal{background:#0a0909;padding:0 clamp(16px,4vw,60px) 12vh;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,22px);max-width:1400px;margin:0 auto}
.gal figure{margin:0;overflow:hidden;border-radius:4px}
.gal img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.1s var(--ease)}
.gal figure:hover img{transform:scale(1.07)}
.gal figure.tall{grid-row:span 2}.gal figure.tall img{aspect-ratio:auto}
@media(max-width:900px){.pbody .cols{grid-template-columns:1fr}.gal{grid-template-columns:1fr 1fr}.gal figure.tall{grid-row:auto}}
.credit{background:#0a0909;text-align:center;padding:0 16px 10vh;font:600 12px/1.8 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--perg)}
.next{display:block;position:relative;background:var(--paper);color:var(--ink);text-decoration:none;padding:12vh clamp(16px,4vw,60px);overflow:hidden;clip-path:polygon(0 0,100% 7vh,100% 100%,0 100%);margin-top:-7vh}
.next small{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.next b{display:block;font:600 clamp(54px,12vw,200px)/.9 var(--cond);text-transform:uppercase;transition:transform .7s var(--ease),letter-spacing .7s var(--ease)}
.next:hover b{transform:translateX(3vw);letter-spacing:.02em}
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;margin-top:10px}
.tl{max-width:1280px;margin:0 auto;background:#0a0909}
.tl .row{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.tl .row b{font:600 44px/1 var(--cond);color:var(--neon)}
.tl .row h3{font:600 24px/1.1 var(--cond);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.tl .row p{color:var(--muted);font-size:15px;max-width:44em}
@media(max-width:640px){.tl .row{grid-template-columns:1fr;gap:6px}}

/* ================= direction: parchment + graffiti =================
   Two extremes carry the identity: medieval parchment and manuscript script (tradition)
   and sprayed neon tags (now). Everything between them stays clean: black, Antonio, Jakarta. */
:root{--parch:#e6d8b6;--sepia:#3a2410}
.paper{background-color:var(--parch);color:#17100a;
  background-image:radial-gradient(ellipse 60% 50% at 18% 12%,rgba(122,84,38,.22),transparent 60%),radial-gradient(ellipse 55% 60% at 88% 84%,rgba(104,66,26,.26),transparent 62%),radial-gradient(ellipse 40% 30% at 70% 22%,rgba(140,100,50,.12),transparent 70%),radial-gradient(ellipse 70% 60% at 50% 50%,rgba(255,249,230,.55),transparent 70%);
  box-shadow:inset 0 0 160px rgba(84,50,16,.38)}
.paper::before{opacity:.75}
.hero .sheet::before{inset:0;transform:none;background:var(--noise);opacity:.75}
/* manuscript lines written across the parchment, drifting with the scroll */
.paper .script{position:absolute;inset:-12% -20%;overflow:hidden;pointer-events:none;user-select:none;
  font:400 clamp(54px,8.6vw,150px)/1.22 var(--clasic);white-space:nowrap;color:rgba(58,36,16,.105);
  transform:rotate(-5deg) translate3d(calc(var(--p,0)*-90px),calc(var(--p,0)*-170px),0)}
.paper .script span{display:block}
.paper .script span:nth-child(even){margin-left:-9vw}
.paper .script b{font-weight:400;color:rgba(122,30,18,.16)}            /* rubricated capitals */
/* medieval accents */
.hero .note b{font:400 44px/1 var(--clasic);color:#6e1d12}
.hero .note.r i{color:#6e1d12}
.hero .lead,.hero .note{color:rgba(23,16,10,.74)}
.chap{position:absolute;left:clamp(16px,3vw,36px);top:86px;z-index:2;font:400 clamp(20px,2vw,30px)/1 var(--clasic);color:var(--perg);display:flex;align-items:center;gap:12px}
.chap::after{content:"";width:54px;height:1px;background:var(--perg);opacity:.5}
.frames .giant{font:400 clamp(70px,15vw,260px)/.9 var(--clasic);text-transform:none;letter-spacing:0;color:#1d130a;opacity:1;position:relative;display:inline-block}
.frames .giant::first-letter{color:#6e1d12}
.frames .sub{color:rgba(23,16,10,.72)}
.pol{background:#f6efdc}
.dropcap::first-letter{font:400 4.2em/.8 var(--clasic);float:left;padding:.06em .12em 0 0;color:var(--perg)}
.next b{font-family:var(--clasic);font-weight:400;text-transform:none;letter-spacing:0}
.next:hover b{letter-spacing:0}
.tl .row b{font:400 40px/1 var(--clasic);color:var(--perg)}
/* graffiti accents: sprayed neon with a dark outline, slightly off-axis */
.tag{font:400 1em/1 var(--graf);font-style:normal;text-transform:none;letter-spacing:.01em;color:var(--neon);display:inline-block;transform:rotate(-4deg)}
.paper .tag,.hero h1 em{color:var(--neon);-webkit-text-stroke:.09em #0b0b0b;paint-order:stroke fill;text-shadow:.03em .05em 0 #0b0b0b}
.hero h1 em{display:inline-block;transform:rotate(-4deg) translateY(-.04em);padding:0 .08em}
.frames .giant .tag{position:absolute;right:-.9em;top:-.12em;font-size:.36em;transform:rotate(-11deg)}
.mani p span.hl{font-family:var(--graf);font-weight:400;text-transform:none;font-size:1.06em}
.mani p span.hl.on{text-shadow:0 0 28px rgba(215,255,46,.55)}
.pbody .big em{font:400 1.05em/1 var(--graf);text-transform:none;text-shadow:0 0 22px rgba(215,255,46,.45)}
.call .sig{transform:rotate(-5deg)}
.spray{position:relative;display:inline-block}
.spray::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-.12em;height:.16em;border-radius:99px;background:var(--neon);filter:blur(1.2px);box-shadow:0 0 18px rgba(215,255,46,.7);transform:rotate(-1.5deg) scaleX(var(--sx,1));transform-origin:left}
.spray::before{content:"";position:absolute;left:62%;bottom:-.62em;width:.07em;height:.5em;border-radius:99px;background:var(--neon);opacity:.9}
@media(max-width:640px){.chap{top:74px}.frames .giant .tag{right:0;top:-.5em}}

/* ================= intro: pixels resolve, then the logo is written and sprayed =================
   site.js drives --s1/--s2 (serif lines, 0..1), --w (how far the spray has got) and --m (mist). */
#loader .pct{font:600 clamp(40px,7vw,96px)/1 var(--cond);letter-spacing:.02em;color:var(--paper)}
#loader .ln{display:block;width:min(240px,50vw);height:2px;background:linear-gradient(90deg,var(--neon) var(--lp,0%),rgba(244,241,234,.16) 0)}
.hero .media .px{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;transition:opacity .45s}
html.ready .hero .open img{animation:none}
.lg{position:relative;width:min(640px,86vw);aspect-ratio:var(--ar);margin:0 auto 26px}
.hero .open .lg img{position:absolute;inset:0;width:100%;height:100%;margin:0;filter:none}
.lg .s1{clip-path:inset(0 calc(100% - var(--s1,1)*100%) calc(100% - var(--split)) 0)}
.lg .s2{clip-path:inset(var(--split) calc(100% - var(--s2,1)*100%) 0 0)}
.hero .open .lg .tg{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--w,1.1)*100% - 2.5%),transparent calc(var(--w,1.1)*100%));mask-image:linear-gradient(90deg,#000 calc(var(--w,1.1)*100% - 2.5%),transparent calc(var(--w,1.1)*100%))}
.lg.lit .tg{animation:buzz 1.5s linear both}
@keyframes buzz{0%,8%{filter:brightness(1.7) drop-shadow(0 0 30px rgba(215,255,46,.9))}9%,14%{filter:brightness(.55)}15%,30%{filter:brightness(1.5) drop-shadow(0 0 26px rgba(215,255,46,.8))}31%,35%{filter:brightness(.7)}36%,100%{filter:brightness(1) drop-shadow(0 0 20px rgba(215,255,46,.45))}}
.lg .mist{position:absolute;left:calc(var(--w,0)*100%);top:var(--ty,50%);width:17%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:var(--m,0);mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(235,255,150,.95) 0,rgba(215,255,46,.5) 22%,rgba(215,255,46,.14) 48%,transparent 70%),var(--noise);filter:blur(3px)}
.hero .open .kicker{opacity:var(--k,1);transition:opacity .8s}

/* ================= hero sheet v3: figure in the middle, donations left, sponsors right =================
   Same arrangement as a sports-portrait page: one cut-out person, bottom-anchored, small blocks at the sides.
   The video lands in the lens of the camera he carries (.lens, positioned by --lx/--ly/--ld from build.py). */
.cur{display:none}
.paper{background-color:#e3d6b8;background-image:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(255,250,235,.38),transparent 75%);box-shadow:inset 0 0 180px rgba(84,50,16,.3)}
.hero .sheet{display:block;padding:0;overflow:hidden}
.hero .sheet h1{position:absolute;left:0;right:0;top:78px;z-index:1;text-align:center;font:600 clamp(26px,3.6vw,58px)/1 var(--cond);letter-spacing:.01em;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0))*-20px))}
.hero h1 em{display:inline-block;vertical-align:middle;transform:none;padding:0 .1em;font-size:1.21em;line-height:1;color:var(--neon);-webkit-text-stroke:0;text-shadow:0 0 .1em rgba(0,0,0,.6),0 .04em .02em rgba(0,0,0,.45)}
.fig{position:absolute;left:50%;bottom:0;height:min(86vh,118vw);aspect-ratio:var(--ar,1/1);transform:translate3d(calc(-50% + var(--fx,0px)),0,0);will-change:transform}
.fig>img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 30px 30px rgba(40,22,6,.35))}
.fig .lens,.fig .glass{position:absolute;left:var(--lx);top:var(--ly);width:var(--ld);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.fig .lens{background:#050505}
.fig .glass{z-index:3;pointer-events:none;opacity:var(--a,0);box-shadow:inset 0 0 0 2px rgba(0,0,0,.9),inset 0 0 26px rgba(0,0,0,.75);background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.3),transparent 32%)}
.side{position:absolute;bottom:13vh;width:min(230px,19vw);z-index:1;color:#17100a;text-decoration:none;font-size:14.5px;line-height:1.5;opacity:var(--o,0);transform:translate3d(calc(var(--fx,0px)*-.35),calc((1 - var(--o,0))*60px),0)}
.side.l{left:clamp(16px,8.6vw,170px)}
.side.r{right:clamp(16px,8.6vw,170px)}
.side b{display:block;font:600 20px/1.1 var(--cond);letter-spacing:.08em;text-transform:uppercase;margin:16px 0 6px}
.side p{color:rgba(23,16,10,.78)}
.side u{display:inline-block;margin-top:10px;text-decoration:none;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid #17100a;padding-bottom:4px;transition:letter-spacing .3s var(--ease)}
.side:hover u,.side:focus-visible u{letter-spacing:.2em}
.side .tk{display:block;width:150px;aspect-ratio:2/3;padding:6px;border-radius:5px;background:linear-gradient(135deg,#f3e3b0,#b98f3a 30%,#f8ecc6 50%,#9a7426 75%,#e9d49a);box-shadow:0 18px 30px -12px rgba(40,22,6,.6);transform:rotate(-3deg);transition:transform .5s var(--ease)}
.side .tk img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.side:hover .tk{transform:rotate(0) scale(1.05)}
.side .sg{display:block;font:400 clamp(38px,3.9vw,64px)/.9 var(--clasic);font-style:normal;color:#6e1d12;margin-bottom:14px;white-space:nowrap;transform:rotate(-6deg);transform-origin:left bottom;transition:transform .5s var(--ease)}
.side:hover .sg{transform:rotate(-2deg) scale(1.04)}
@media(max-width:900px){.side{display:none}.fig{height:min(74vh,128vw)}.hero .sheet h1{top:72px;font-size:clamp(24px,7vw,40px)}}
/* manuscript: straight lines, black, faint, written out one after another like a hand at work */
.paper .script{inset:0;transform:translate3d(calc(var(--fx,0px)*.5),0,0);font:400 clamp(30px,4.4vw,72px)/1.42 var(--clasic);color:rgba(0,0,0,.075);padding-top:1.2vh}
.paper .script span,.paper .script span:nth-child(even){margin-left:-1vw;clip-path:inset(-10% 100% -10% 0);animation:ink 5.5s linear both paused;animation-delay:calc(var(--i)*2.6s)}
.paper .script.go span{animation-play-state:running}
.paper .script b{color:rgba(90,20,10,.11)}
@keyframes ink{to{clip-path:inset(-10% 0 -10% 0)}}
/* logo over the video: only during the last shot; the tag is drawn stroke by stroke on a canvas */
.lg{transition:opacity .5s}
.lg.off{opacity:0}
.hero .open .lg .tgsrc{display:none}
.hero .open .lg canvas.tg{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:none;mask-image:none}
.lg .mist{left:var(--mx,0%);top:var(--my,50%);width:9%}
/* sound button */
.snd{all:unset;position:fixed;right:clamp(14px,2.4vw,34px);bottom:clamp(14px,2.4vw,34px);z-index:85;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;background:rgba(120,116,112,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.snd i{width:2px;height:5px;background:#fff;border-radius:2px}
.snd.on i{animation:eq .9s ease-in-out infinite alternate}
.snd.on i:nth-child(2){animation-delay:.2s}.snd.on i:nth-child(3){animation-delay:.45s}.snd.on i:nth-child(4){animation-delay:.1s}
@keyframes eq{from{height:4px}to{height:16px}}
.snd:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

/* ================= video: old-television look =================
   Bloom, colour fringing and noise are baked into hero.mp4; the scan lines and the phosphor stripes are
   drawn here so they stay sharp at any size. The logo is part of the video now (sprayed on the clapper). */
.hero .media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,rgba(0,0,0,0) 1px 3px),repeating-linear-gradient(90deg,rgba(255,60,60,.1) 0 1px,rgba(60,255,60,.08) 1px 2px,rgba(60,60,255,.1) 2px 3px);animation:tv 5s steps(60) infinite}
@keyframes tv{0%,100%{opacity:1}47%{opacity:.86}50%{opacity:1}52%{opacity:.9}}
.hero .media{border-radius:calc(var(--a,0)*0px)}
.hero .open{align-items:end;padding-bottom:13vh}
.hero .open .kicker{opacity:calc(1 - var(--p,0)*8);text-shadow:0 0 12px #000}

/* ================= hero v4: the film plays once, then zooms out by itself (no scroll pinning) ================= */
.hero{height:100vh;height:100svh}
.films{margin-top:-7vh;clip-path:polygon(0 7vh,100% 0,100% 100%,0 100%)}
.hero .open{opacity:calc(1 - var(--p,0)*5)}
.hero .hint{opacity:calc(1 - var(--p,0)*5)}
.fig{transform:translate3d(calc(-50% + var(--fx,0px)),var(--fy,0px),0) rotate(var(--fr,0deg));transform-origin:50% 100%}
.paper .script{transform:translate3d(calc(var(--fx,0px)*-.55),calc(var(--fy,0px)*-.55),0)}
.side{transform:translate3d(calc(var(--fx,0px)*.3),calc((1 - var(--o,0))*60px + var(--fy,0px)*.3),0)}
.fig canvas.gl{position:absolute;left:var(--lx);top:var(--ly);width:var(--ld);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:3;opacity:0;transition:opacity .5s}
.hero.glass-on .fig canvas.gl{opacity:1}
.hero.glass-on .media{opacity:0;transition:opacity .5s}
.hero.glass-on .fig .glass{background:none;box-shadow:inset 0 0 0 2px rgba(0,0,0,.85),inset 0 0 14px rgba(0,0,0,.6)}

/* ================= hero v5: the knight, the lens and the film are one WebGL scene (hero3d.js) ================= */
.paper>canvas.gl3{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:none}
.hero.gl3 canvas.gl3{display:block}
.hero.gl3 .fig{display:none}
.hero.gl3 .media{opacity:0;pointer-events:none}
.hero.gl3 .sheet h1,.hero.gl3 .side{z-index:1}
.hero.gl3 .paper .script{transform:translate3d(var(--fx,0px),var(--fy,0px),0)}
.hero.gl3 .side{transform:translate3d(calc(var(--fx,0px)*.4),calc((1 - var(--o,0))*40px),0)}

/* ================= loader: the two extremes together =================
   The count is sprayed: graffiti digits in neon. Under it runs a line ruled the way a scribe rules a page:
   thin ink, a second hairline, a red lozenge at the nib, and a line of script beneath. */
#loader{background:#070707}
#loader .in{gap:20px;min-width:min(420px,76vw)}
#loader .pct{font:400 clamp(90px,15vw,210px)/1 "Rubik Spray Paint","Antonio",sans-serif;letter-spacing:.01em;color:var(--neon);min-height:1em;text-align:center;transform:rotate(-4deg);
  text-shadow:0 0 22px rgba(215,255,46,.6),0 0 70px rgba(215,255,46,.3)}
#loader .pct::first-letter{color:var(--neon)}
#loader.lit .pct{text-shadow:0 0 30px rgba(215,255,46,.95),0 0 110px rgba(215,255,46,.55)}
#loader .ln{position:relative;display:block;justify-self:center;width:min(440px,78vw);height:14px;background:none;transform:none}
#loader .ln::before{content:"";position:absolute;left:0;top:3px;height:2px;width:var(--lp,0%);background:var(--perg);box-shadow:0 6px 0 0 rgba(230,211,168,.4);filter:none;border-radius:0;transition:none}
#loader .ln::after{content:"";position:absolute;top:0;left:var(--lp,0%);width:8px;height:8px;margin-left:-1px;background:#b3261a;transform:rotate(45deg);border-radius:0;opacity:1;box-shadow:none;max-height:none}
#loader .in::after{content:"Fundatio Culturae Transsilvaniae · anno mmxxiv";font:400 clamp(15px,1.5vw,21px)/1 var(--clasic);color:rgba(230,211,168,.55);text-align:center;letter-spacing:.02em}

/* ================= hero sheet v6: Donații and Sponsori as two matching headings; script stays clear of them ================= */
.paper .script b{color:inherit}                                   /* the manuscript is plain black ink, no red capitals */
.paper .script span,.paper .script span:nth-child(even){animation-delay:calc((var(--i) - 2)*2.6s)}
.paper .script span:nth-child(-n+2){animation:none;clip-path:none}   /* the first two lines are already on the page; writing goes on from the third */
.side .sg{transform:none;font-size:clamp(40px,4vw,66px);line-height:1;margin-bottom:12px;color:#6e1d12;white-space:nowrap}
.side:hover .sg{transform:translateX(6px)}
.side.r{text-align:left}
/* the script runs behind the two blocks again; their text is centred under the heading */
.side,.side.r{text-align:center;width:min(280px,22vw)}
.side.l{left:clamp(16px,6.4vw,130px)}
.side.r{right:clamp(16px,6.4vw,130px)}
.side .sg{display:block;text-align:center}
.side p{margin:0 auto;max-width:17em}
.side:hover .sg{transform:scale(1.04)}

/* 'Cluj' sits on the middle of the headline (the generated skin-grain texture was tried and dropped: see higgsfield/pergament.png) */
.hero h1 em{transform:translateY(-.1em)}
/* a hint of old paper: the faint skin grain multiplied onto the parchment colour, under the script and everything else */
.paper{background-image:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(255,250,235,.38),transparent 75%),url(/assets/pergament-fin.jpg);background-size:auto,1000px;background-blend-mode:normal,multiply}

/* the two side blocks hang from the same line (their texts differ in length), and the big script
   headings get room below so their flourishes never run into the description */
.side{bottom:auto;top:62vh}
.side .sg{line-height:1.15;margin-bottom:26px;padding-bottom:6px}
.side p{position:relative}

/* side blocks: heading, text and link share one centre line. The script headings have long flourishes that
   hang outside their letter box, so site.js measures the ink and nudges each heading (--sx) until what you
   SEE is centred over the text. */
.side{display:flex;flex-direction:column;align-items:center}
.side .sg{transform:translateX(var(--sx,0px))}
.side:hover .sg{transform:translateX(var(--sx,0px)) scale(1.04)}

/* ================= pinned stage: hero stays, films wipe over it, the first poster flies out of the lens =================
   site.js sets the diagonal (clip-path on .films), --rec on the hero and drives .fly. */
.hero{position:sticky;top:0;z-index:0}
.hero .sheet{transform:scale(calc(1 - var(--rec,0)));transform-origin:50% 100%;will-change:transform}
/* the stage carries the same parchment, so when the sheet sinks back there is paper around it, not a dark gap */
.hero .stage{background:#e3d6b8 radial-gradient(ellipse 80% 70% at 50% 45%,rgba(255,250,235,.38),transparent 75%)}
.films{height:calc(var(--n,5)*75vh + 200vh);margin-top:-100vh;margin-top:-100svh;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);z-index:2}
.work,.mani,.frames,.call,footer{position:relative;z-index:2}
.fly{position:fixed;left:0;top:0;z-index:55;pointer-events:none;visibility:hidden;perspective:1500px;will-change:transform,opacity;filter:drop-shadow(0 10px 20px rgba(0,0,0,.34))}
.fly .spin{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.fly .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fly .face.back{transform:rotateY(180deg)}
.fly .fr{position:absolute;inset:0;border-radius:6px;padding:7px;background:linear-gradient(135deg,#f3e3b0,#b98f3a 30%,#f8ecc6 50%,#9a7426 75%,#e9d49a)}
.fly .fr .ph{position:absolute;inset:7px;border-radius:3px;overflow:hidden;background:#111}
.fly .fr img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.fly .fr .yr{position:absolute;left:16px;top:14px;z-index:2;font:600 13px/1 var(--cond);letter-spacing:.14em;background:#000;color:var(--neon);padding:6px 8px;border-radius:3px}
/* card hover: lift and tilt quickly, light sweeps across, a trace of iridescence, a bright edge */
.card{perspective:1500px}
.card .fr{transform:translateZ(var(--tz,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;
  box-shadow:0 calc(8px + 26px*var(--hv,0)) calc(16px + 34px*var(--hv,0)) rgba(0,0,0,calc(.45 + .3*var(--hv,0)))}
.card:hover .fr{transition-duration:.2s;box-shadow:0 calc(8px + 26px*var(--hv,0)) calc(16px + 34px*var(--hv,0)) rgba(0,0,0,calc(.45 + .3*var(--hv,0)))}
.card .fr .ph::after{content:"";position:absolute;inset:0;transform:none;background:linear-gradient(102deg,transparent 36%,rgba(255,255,255,.28) 46%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.28) 54%,transparent 64%);
  background-size:260% 100%;background-position-x:calc(var(--sh,.5)*100%);mix-blend-mode:screen;opacity:calc(.85*var(--hv,0));transition:opacity .25s ease}
.card .fr .ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,rgba(215,255,46,.16) 0%,rgba(255,120,200,0) 38%,rgba(255,180,90,0) 62%,rgba(90,200,255,.16) 100%);mix-blend-mode:color-dodge;opacity:calc(.7*var(--hv,0));transition:opacity .3s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,calc(.5*var(--hv,0))),inset 0 0 calc(18px*var(--hv,0)) rgba(255,255,255,calc(.18*var(--hv,0)))}

/* chapter labels sit a little lower, clear of the top bar; numerals are written small (i, ii) */
.chap{top:128px}
@media(max-width:640px){.chap{top:104px}}

/* ================= Proiecte: a wall of cards on film stock =================
   grain over everything; a ruled field (thin verticals and tick rows) that drifts behind the cards; big faint
   date marks low in the frame; cards fanned toward the centre; captions in a typewriter face; a strip of
   35 mm film along the bottom that runs faster than the cards. */
.films .stage{background:radial-gradient(ellipse 90% 70% at 50% 0,rgba(215,255,46,.07),transparent 60%),#0b0a0c}
.films .stage::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--noise);background-size:180px;opacity:.32;mix-blend-mode:overlay}
.films .stage::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--noise);background-size:140px;opacity:.07;mix-blend-mode:screen}
.films .giant{top:5.5vh;font-size:clamp(90px,19.5vw,380px);background:linear-gradient(180deg,rgba(215,255,46,.5),rgba(215,255,46,.03) 88%),var(--noise);background-size:auto,120px;background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text;color:transparent}
.films .rules{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(244,241,234,.07) 0 1px,transparent 1px 25vw),
             repeating-linear-gradient(90deg,rgba(244,241,234,.16) 0 1px,transparent 1px 5vw) 0 50%/auto 14px no-repeat,
             repeating-linear-gradient(90deg,rgba(244,241,234,.16) 0 1px,transparent 1px 5vw) 0 calc(100% - 78px)/auto 14px no-repeat;background-repeat:repeat-x,repeat-x,repeat-x}
.films .dates{position:absolute;left:0;top:0;height:100%;width:100%;pointer-events:none;will-change:transform}
.films .dates span{position:absolute;bottom:13vh;font:600 clamp(64px,8vw,150px)/.9 var(--cond);letter-spacing:.02em;white-space:nowrap;color:rgba(244,241,234,.085);text-transform:uppercase}
.films .dates span i{display:block;font:600 .26em/1 var(--cond);font-style:normal;letter-spacing:.16em;margin:0 0 .3em .06em;color:rgba(215,255,46,.3)}
.films .track{gap:clamp(44px,9.5vw,180px)}
.films .track{z-index:2}
.card:nth-child(odd){--dy:-11vh}.card:nth-child(even){--dy:10vh}
.card .fr{transform:translateZ(var(--tz,0px)) rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--ryp,0deg))) rotateZ(var(--rz,0deg)) scale(var(--sc,1))}
.card:hover .fr{transform:translateZ(var(--tz,0px)) rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--ryp,0deg)*.35)) rotateZ(calc(var(--rz,0deg)*.3)) scale(var(--sc,1))}
.card h3{margin-top:22px;font:500 clamp(13px,1.05vw,17px)/1.2 "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.2em}
.card p{margin-top:9px;font:400 clamp(10px,.82vw,13px)/1.6 "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.2em;color:rgba(244,241,234,.5)}
.card .go{font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace}
/* 35 mm strip: two rows of perforations, frame lines between them, edge print */
.films .reel{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:3;pointer-events:none;background-color:#050505;border-top:1px solid rgba(244,241,234,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64'%3E%3Cg fill='%23d9d2c2' fill-opacity='.5'%3E%3Crect x='6' y='6' width='14' height='10' rx='2.5'/%3E%3Crect x='30' y='6' width='14' height='10' rx='2.5'/%3E%3Crect x='54' y='6' width='14' height='10' rx='2.5'/%3E%3Crect x='78' y='6' width='14' height='10' rx='2.5'/%3E%3Crect x='102' y='6' width='14' height='10' rx='2.5'/%3E%3Crect x='126' y='6' width='14' height='10' rx='2.5'/%3E%3Crect x='150' y='6' width='14' height='10' rx='2.5'/%3E%3Crect x='174' y='6' width='14' height='10' rx='2.5'/%3E%3Crect x='6' y='48' width='14' height='10' rx='2.5'/%3E%3Crect x='30' y='48' width='14' height='10' rx='2.5'/%3E%3Crect x='54' y='48' width='14' height='10' rx='2.5'/%3E%3Crect x='78' y='48' width='14' height='10' rx='2.5'/%3E%3Crect x='102' y='48' width='14' height='10' rx='2.5'/%3E%3Crect x='126' y='48' width='14' height='10' rx='2.5'/%3E%3Crect x='150' y='48' width='14' height='10' rx='2.5'/%3E%3Crect x='174' y='48' width='14' height='10' rx='2.5'/%3E%3C/g%3E%3Crect x='0' y='21' width='192' height='22' fill='%23121110'/%3E%3Crect x='95' y='21' width='2' height='22' fill='%23000'/%3E%3Ctext x='8' y='36' font-family='monospace' font-size='9' letter-spacing='2' fill='%23D7FF2E' fill-opacity='.55'%3EFCT%3C/text%3E%3Ctext x='104' y='36' font-family='monospace' font-size='9' letter-spacing='2' fill='%23d9d2c2' fill-opacity='.4'%3E%E2%96%B8 24%3C/text%3E%3C/svg%3E");background-repeat:repeat-x}
.films .strip{display:none}
@media(max-width:640px){.films .dates span{bottom:12vh}.card:nth-child(odd){--dy:-5vh}.card:nth-child(even){--dy:4vh}.films .reel{height:52px;background-size:auto 52px}}

/* the big PROIECTE title spans the screen edge to edge and stays whole: no sideways drift, no clipped tops (site.js fits its size) */
.films .giant{left:0;right:0;top:7vh;transform:none;text-align:center;line-height:1;padding:.04em 0 .08em;font-size:22vw;letter-spacing:0}

/* ================= project cards: background + the film's own title logo; caption and Donate underneath =================
   Each film keeps the lettering of its own dossier (fonts lifted from there); ECHOES uses the brush lettering of its poster. */
@font-face{font-family:"T-DG";src:url(/assets/t-deadground.woff2) format("woff2");font-display:swap}
@font-face{font-family:"T-AN";src:url(/assets/t-anoastra.woff2) format("woff2");font-display:swap}
@font-face{font-family:"T-500";src:url(/assets/t-500.woff2) format("woff2");font-display:swap}
.card{display:flex;flex-direction:column;align-items:center}
.card .fr,.fly .fr{display:block;container-type:inline-size;text-decoration:none;color:var(--paper)}
.card .fr{position:relative;width:100%}
.fr .ph{display:block}
.fr .ph img{filter:brightness(.5) saturate(.85)}
.fr .lgo{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;padding:9%;color:var(--paper);line-height:1;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(0,0,0,.42),transparent 75%)}
.fr .lgo img{width:84%;height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.6));transform:none}
.fr .lgo-la-vremea-lor{font:400 19cqw/.95 var(--clasic);color:var(--perg);text-shadow:0 2px 16px rgba(0,0,0,.7)}
.fr .lgo-dead-ground{font:400 13.5cqw/1.15 "T-DG",var(--cond);letter-spacing:.1em;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.fr .lgo-a-noastra{font:400 15cqw/1.15 "T-AN",var(--cond);letter-spacing:.06em;color:#EDE6D6;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.fr .lgo-500{font:400 36cqw/1 "T-500",var(--cond);color:#F9F4EE;background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(255,1,1,.22),transparent 70%),#010101;text-shadow:0 0 30px rgba(255,1,1,.45)}
.card h3{margin-top:20px}
.card .don{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--neon);color:var(--neon);text-decoration:none;
  font:600 11px/1 "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s var(--ease)}
.card .don:hover,.card .don:focus-visible{background:var(--neon);color:#000;transform:translateY(-2px)}
.card .don:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.card .fr:focus-visible{outline:2px solid var(--neon);outline-offset:5px}

/* Am Băut Drog: sprayed lettering, acid green like the drop in its key art */
.fr .lgo-am-baut-drog{font:400 17cqw/1.02 "Rubik Spray Paint",var(--cond);color:#B6FF3C;letter-spacing:.01em;text-shadow:0 0 22px rgba(120,255,40,.45),0 2px 14px rgba(0,0,0,.85)}
.card[data-film="am-baut-drog"] .ph img{filter:brightness(.42) saturate(.8)}
.card[data-film="echoes"] .ph img{filter:brightness(.62) saturate(.95)}

/* cards with a face in the picture: the lettering sits in the lower third, on a dark fade, so the face stays clear */
.fr .lgo-echoes,.fr .lgo-am-baut-drog{align-items:end;padding-bottom:11%;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.82) 92%)}
.fr .lgo-echoes img{width:70%;justify-self:center}
.card[data-film="echoes"] .ph img,.card[data-film="am-baut-drog"] .ph img,.fly .ph img{filter:brightness(.8) saturate(.95)}

/* ================= film pages: the film's own logo as the title, one size for all; Support + full deck under it ================= */
.phero h1.plogo{font:inherit;text-transform:none;letter-spacing:0;width:min(560px,82vw);container-type:inline-size;margin:14px 0 6px}
.plogo .pl{display:block;color:var(--paper);line-height:1;text-shadow:0 2px 22px rgba(0,0,0,.75)}
.plogo .pl img{display:block;width:78%;height:auto;filter:drop-shadow(0 2px 18px rgba(0,0,0,.7))}
.plogo .pl-la-vremea-lor{font:400 24cqw/.92 var(--clasic);color:var(--perg)}
.plogo .pl-dead-ground{font:400 17cqw/1.12 "T-DG",var(--cond);letter-spacing:.1em}
.plogo .pl-a-noastra{font:400 17cqw/1.12 "T-AN",var(--cond);letter-spacing:.06em;color:#EDE6D6}
.plogo .pl-500{font:400 44cqw/.95 "T-500",var(--cond);color:#F9F4EE;text-shadow:0 0 34px rgba(255,1,1,.6)}
.plogo .pl-am-baut-drog{font:400 21cqw/1 "Rubik Spray Paint",var(--cond);color:#B6FF3C;text-shadow:0 0 26px rgba(120,255,40,.45),0 2px 16px rgba(0,0,0,.85)}
.pact{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pact .btn{min-width:250px}
.facts .pact .btn{margin-top:0}
.phero.solo{min-height:100vh;min-height:100svh}
.phero .media::after{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 30%,rgba(10,9,9,.78) 70%,#0a0909 100%)}
.phero[data-film="500"] .media img{opacity:.55}
@media(max-width:640px){.pact{align-items:stretch}.pact .btn{min-width:0}}

/* film logos: one box for all, each lettering sized to fill it */
.phero h1.plogo{width:min(430px,80vw);min-height:clamp(150px,23vh,215px);display:flex;align-items:flex-end;margin:18px 0 10px}
.plogo .pl{width:100%}
.plogo .pl img{width:74%}
.plogo .pl-la-vremea-lor{font-size:17cqw}
.plogo .pl-dead-ground{font-size:16cqw}
.plogo .pl-a-noastra{font-size:16cqw}
.plogo .pl-500{font-size:42cqw}
.plogo .pl-am-baut-drog{font-size:15.5cqw}
.phero .in{padding-top:120px}
.phero .media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.2) 45%,transparent 70%)}
.phero[data-film="500"] .media img{display:none}
.phero[data-film="500"] .media{background:radial-gradient(ellipse 50% 45% at 22% 55%,rgba(255,1,1,.2),transparent 70%),#050505}

/* ================= film page text: a sheet of parchment =================
   the statement in ink with its key words sprayed on; the first paragraph opens with a red manuscript initial;
   the closing line is written by hand; the film's sheet is a dark card laid on the paper */
.pbody.paper{padding:12vh clamp(16px,4vw,60px);overflow:hidden}
.pbody.paper .big{color:#17100a;font-size:clamp(30px,3.9vw,60px);line-height:1.12}
.pbody.paper .big em{display:inline-block;font:400 1.22em/.9 var(--graf);text-transform:none;color:var(--neon);-webkit-text-stroke:.085em #0b0b0b;paint-order:stroke fill;text-shadow:.03em .05em 0 #0b0b0b;transform:rotate(-3deg);padding:0 .12em;vertical-align:baseline}
.pbody.paper .txt p{color:#33261a;font-size:clamp(16px,1.2vw,18.5px);line-height:1.75;margin-top:24px}
.pbody.paper .txt p.big{margin-top:0;margin-bottom:14px;line-height:1.12;color:#17100a}
.pbody.paper .dropcap::first-letter{font:400 5.2em/.74 var(--clasic);color:#7a1e12;padding:.08em .14em 0 0}
.pbody.paper .txt p.hand{font:400 clamp(26px,2.5vw,40px)/1.15 var(--clasic);color:#6e1d12;margin-top:38px;max-width:20em;transform:rotate(-1.5deg);transform-origin:left top}
.pbody.paper .facts{background:#0c0b0d;color:var(--paper);padding:10px clamp(18px,2vw,30px) 28px;border-radius:6px;box-shadow:0 30px 60px -25px rgba(40,20,5,.7);transform:rotate(1deg)}
.pbody.paper .facts .pact{margin-top:24px}
.pbody.paper .facts .pact .btn{min-width:0;width:100%}
.pbody.paper+.gal{padding-top:10vh}

/* film hero: content sits as one block at the bottom left; larger logo box */
/* revealed children also carry the class 'in': keep the block padding on the wrapper only */
.phero>.in{display:block;height:auto;padding-top:110px}
.phero>.in>.rv{padding:0;width:auto}
.phero>.in>h1.plogo{width:min(520px,82vw);min-height:0;display:block;margin:20px 0 4px}
.phero .kicker{margin:0}
.phero .meta{margin-top:22px}
.pbody.paper .txt p.big{font-size:clamp(30px,3.9vw,60px);margin-bottom:34px}

.plogo .pl-la-vremea-lor{font-size:12.5cqw;white-space:nowrap}
.pbody.paper .facts{align-self:start}
/* 'filmul' on the Support button: written by hand, lower case */
.btn .hw{font:400 2.05em/.5 var(--clasic);font-style:normal;text-transform:none;letter-spacing:0;margin-left:.1em;transform:translateY(-.04em) rotate(-3deg);display:inline-block}
/* film text: graffiti words without an outline; the handwritten line sits straight; 'Next film' clear of the handwriting below it */
.pbody.paper .big em{-webkit-text-stroke:0;text-shadow:0 .03em .05em rgba(0,0,0,.55),0 0 .12em rgba(0,0,0,.35);transform:none;color:#b4e000}
.pbody.paper .txt p.hand{transform:none}
.next small{display:block;margin-bottom:clamp(34px,6vh,70px);position:relative;z-index:2}

.next b{margin-top:.2em;line-height:1.25}
.next{padding-top:13vh}
/* who supported the film: a ruled note under the text */
.pbody.paper .txt p.sup{margin-top:40px;padding-top:16px;border-top:1.5px solid rgba(23,16,10,.55);font:700 12px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#17100a;max-width:34em}
/* the statement: always three lines, each kept whole; site.js fits the size to the column */
.pbody .big .ln{display:block;white-space:nowrap}
.next small{display:inline-block;background:#0b0b0b;color:var(--neon);padding:11px 16px;border-radius:999px;margin-bottom:0;position:relative;z-index:3}
.next b{margin-top:.5em;line-height:1.25}
.next>.script{top:22%}
/* ================= lower home: black + graffiti / paper + handwriting, alternating ================= */
/* giant titles on black are sprayed */
.work.part .giant{font-family:var(--graf);font-weight:400;text-transform:none;letter-spacing:0}
.work.part .giant{top:8vh;left:0;right:0;transform:none;text-align:center;font-size:clamp(90px,21vw,400px);line-height:1;
  background:linear-gradient(180deg,rgba(215,255,46,.55),rgba(215,255,46,.04) 90%),var(--noise);background-size:auto,120px;background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- gallery accordion on paper: one frame open in colour, the rest narrow and sepia; hover opens (700ms, ease out) ---- */
.frames.acc{padding:15vh clamp(16px,4vw,60px) 12vh}
.frames.acc .giant{font-size:clamp(64px,11vw,190px);margin:4vh 0 3vh}
.acc .strip{display:flex;gap:8px;height:min(62vh,640px);min-height:280px}
.acc .tile{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;transition:flex-grow .7s cubic-bezier(.22,1,.36,1);will-change:flex-grow;background:#1a1410}
.acc .tile.on{flex-grow:4.2}
.acc .tile .im{position:absolute;top:0;bottom:0;left:50%;width:var(--aw,60vw);transform:translateX(-50%)}
.acc .tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.4) brightness(.95);transition:filter .7s cubic-bezier(.22,1,.36,1)}
.acc .tile.on img{filter:none}
.acc .tile .cap{position:absolute;left:14px;bottom:12px;font:600 11px/1 "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.72);padding:8px 10px;border-radius:3px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease);white-space:nowrap}
.acc .tile.on .cap{opacity:1;transform:none}
.acc .row{display:flex;align-items:center;gap:clamp(20px,6vw,96px);margin-top:32px;color:#17100a}
.acc .row h3{font:700 22px/1.2 var(--sans);flex:none;max-width:240px}
.acc .row p{max-width:28em;color:rgba(23,16,10,.8)}
.acc .row .btn{margin-left:auto;flex:none}
.btn.dark{background:#17121a;color:#f4f1ea;border-color:#17121a}
.btn.dark:hover{background:#000}
@media(max-width:760px){.acc .strip{height:52vh;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*clamp(16px,4vw,60px));padding:0 clamp(16px,4vw,60px);gap:12px}
  .acc .tile,.acc .tile.on{flex:none;width:64vw;scroll-snap-align:center}.acc .tile .im{width:100%;left:0;transform:none}.acc .tile .cap{opacity:1;transform:none}
  .acc .row{flex-direction:column;align-items:flex-start;gap:12px}.acc .row .btn{margin-left:0}}

/* ---- partners: one picture in the middle that changes, name and text bottom left, dots, button right, names running along the bottom ---- */
.work.part{height:calc(3*80vh + 100vh)}
.work.part .stack{width:min(46vw,640px);aspect-ratio:16/10;margin-top:4vh}
.work.part .stack figure{padding:0;background:none;border-radius:6px;overflow:hidden;box-shadow:0 40px 90px -30px #000;opacity:0;transform:rotate(-8deg) scale(.86) translateY(6vh);filter:none;transition:opacity .6s,transform .9s cubic-bezier(.22,1,.36,1)}
.work.part .stack figure.seen{transform:rotate(-8deg) scale(.86) translateY(6vh)}
.work.part .stack figure.on{opacity:1;transform:rotate(-5deg)}
.work.part .info{left:calc(clamp(16px,4vw,60px) + 34px);bottom:17vh;width:min(300px,calc(100vw - 90px));min-height:150px;padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.work.part .info div{inset:0}
.work.part .info h3{font:700 20px/1.25 var(--sans);margin-bottom:12px;color:var(--paper)}
.work.part .info p{font-size:14px;line-height:1.6;color:rgba(244,241,234,.62)}
.work.part .dots{left:clamp(16px,4vw,60px);bottom:auto;top:calc(100vh - 17vh - 150px);gap:8px}
.work.part .dots i{width:6px;height:6px;border-radius:6px}
.work.part .dots i.on{height:26px}
.work.part .more{background:#f4f1ea;color:#0b0b0b;border-color:#f4f1ea;right:clamp(16px,4vw,60px);bottom:18vh}
.work.part .marq{padding:26px 0}
.work.part .marq div{font-size:22px;color:rgba(244,241,234,.5);gap:90px;padding-right:90px}
.work.part .marq span::before{margin-right:90px}
@media(max-width:760px){.work.part .stack{width:78vw;margin-top:-14vh}.work.part .more{bottom:11vh}.work.part .info{bottom:22vh}.work.part .dots{top:auto;bottom:calc(22vh + 100px)}}

/* ---- manifesto on paper: ink that fills in, key words written by hand ---- */
.mani.paper{background-color:#e3d6b8}
.mani.paper .script{position:absolute}
.mani.paper .stage{position:sticky}
.mani.paper p span{color:rgba(23,16,10,.16)}
.mani.paper p span.on{color:#17100a}
.mani.paper p span.hl{font-family:var(--clasic);text-transform:none;font-size:1.12em;font-weight:400}
.mani.paper p span.hl.on{color:#7a1e12;text-shadow:none}

/* ---- menu: a tall panel bottom left ---- */
#menu{width:min(372px,calc(100vw - 24px));padding:32px 32px 22px;border-radius:16px;background:rgba(30,26,34,.86);min-height:min(78vh,720px);display:flex;flex-direction:column}
#menu>img{height:44px;width:auto;align-self:flex-start;margin-bottom:0}
#menu nav{margin:auto 0;padding:28px 0;gap:4px}
#menu nav a{font:700 30px/1.5 var(--sans)}
#menu .mrow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
#menu .mrow .th{height:74px;width:auto;margin:0;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.soc{display:flex;gap:16px;align-items:center}
.soc a{display:block;width:24px;height:24px;color:var(--paper);opacity:.85;transition:opacity .2s,transform .3s var(--ease),color .2s}
.soc a:hover{opacity:1;color:var(--neon);transform:translateY(-2px)}
.soc svg{width:100%;height:100%;display:block}
footer .soc{justify-content:center;margin:26px 0 6px}
footer .soc:empty,#menu .soc:empty{display:none}
@media(max-height:640px){#menu{min-height:0}#menu nav a{font-size:22px}#menu .mrow .th{display:none}}

/* ================= chapter hand-overs =================
   .xs sections overlap the one before by --xo; site.js pins the previous chapter at its end and cuts the top edge of the
   next one on a diagonal that starts flat at the bottom of the screen and steepens as it climbs. */
.xs{--xo:22vh;margin-top:calc(-1*var(--xo));clip-path:polygon(0 var(--xo),100% var(--xo),100% 100%,0 100%)}
.frames.acc.xs{padding-top:calc(var(--xo) + 12vh);z-index:3}
.work.part.xs{z-index:4}.mani.xs{z-index:5}.call.xs{z-index:6;padding-top:calc(var(--xo) + 12vh)}
footer{z-index:7}
.xs>.chap,.xs>.stage>.chap{z-index:4}
.frames.xs>.chap{top:calc(var(--xo) + 6vh);color:#17100a}.frames.xs>.chap::after{background:#17100a}
.work.part.xs .chap,.mani.xs .chap{top:calc(var(--xo) + 30px)}
.mani.xs .chap{color:#17100a}.mani.xs .chap::after{background:#17100a}
.call.xs>.chap{top:calc(var(--xo) + 6vh)}
.frames.acc .giant{margin-top:6vh}
.work.part .info{bottom:11vh}.work.part .more{bottom:12vh}.work.part .dots{top:calc(100vh - 11vh - 150px)}

/* partners: name on one line; the backed project's logo over its picture */
.work.part .info{width:min(520px,calc(100vw - 90px))}
.work.part .info h3{white-space:nowrap}
.work.part .info p{max-width:300px}
.work.part .stack figcaption.plogo{position:absolute;inset:0;display:grid;place-items:center;container-type:inline-size;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,.15) 80%);margin:0}
.work.part .stack .pl{width:auto;text-align:center}
.work.part .stack .pl img{width:40cqw;margin:0 auto}
.work.part .stack .pl-la-vremea-lor{font-size:11cqw}
@media(max-width:760px){.work.part .info h3{white-space:normal}}

/* top bar: logo left, menu button right, nothing in between */
.bar .name{display:none}
/* last chapter: the menu panel is part of the page, so the text makes room for it on wide screens */
@media(min-width:1100px){.call.xs .in{margin-left:min(300px,20vw)}}

/* ================= chapter hand-overs, second version: full-screen diagonal wipe over a pinned chapter =================
   every .xs chapter starts one screen early (margin-top:-100vh) with its content in a pinned .stage; site.js uncovers it. */
.xs{margin-top:-100vh;margin-top:-100svh;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);will-change:clip-path}
.xs .chap,.frames.xs .stage>.chap,.work.part.xs .chap,.mani.xs .chap,.call.xs .chap{top:128px}
.frames.acc.xs{padding:0;height:215vh;overflow:visible}
.frames.acc.xs .stage{padding:150px clamp(16px,4vw,60px) 4vh;display:flex;flex-direction:column;justify-content:flex-end}
.frames.acc.xs .stage>.script{position:absolute;inset:-12% -20%;overflow:hidden;pointer-events:none}
.frames.acc.xs .giant{font-size:clamp(54px,8.6vw,150px);margin:0 0 2.5vh}
.frames.acc.xs .strip{height:auto;flex:1 1 auto;min-height:200px;max-height:56vh}
.frames.acc.xs .row{margin-top:22px}
.frames.xs .chap{color:#17100a}.frames.xs .chap::after{background:#17100a}
.mani.paper.xs .stage>.script{position:absolute;inset:-12% -20%;overflow:hidden;pointer-events:none}
.call.xs{display:block;padding:0;min-height:0;height:200vh;overflow:visible;text-align:center}
.call.xs .stage{display:grid;place-items:center;padding:0 16px}
@media(prefers-reduced-motion:reduce){.xs{margin-top:0;clip-path:none}}

/* ================= chapter hand-overs, final: fixed diagonal edge, previous chapter held in place =================
   (overrides the two earlier attempts above) */
@font-face{font-family:"DeiGratia Chap";src:url(/assets/deigratia-chap.woff) format("woff");font-display:swap}
.chap{font-family:"DeiGratia Chap",var(--clasic)}
.xs{margin-top:-10vw;clip-path:polygon(0 10vw,100% 0,100% 100%,0 100%);will-change:auto}
.frames.acc.xs{height:auto;padding:0;overflow:hidden}
.frames.acc.xs .stage{position:relative;top:auto;height:auto;overflow:hidden;display:block;padding:calc(10vw + 120px) clamp(16px,4vw,60px) 10vh}
.frames.acc.xs .giant{font-size:clamp(64px,11vw,190px);margin:0 0 3vh}
.frames.acc.xs .strip{height:min(58vh,600px);max-height:none;flex:none}
.frames.acc.xs .row{margin-top:32px}
.frames.xs .stage>.chap{top:calc(10vw + 44px)}
.work.part.xs .chap,.mani.xs .chap{top:128px}
.call.xs{height:auto;min-height:100vh;min-height:100svh;display:block;padding:0;overflow:hidden}
.call.xs .stage{position:relative;top:auto;height:auto;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:calc(10vw + 12vh) 16px 10vh;overflow:hidden}
.call.xs .chap{top:calc(10vw + 44px)}
@media(prefers-reduced-motion:reduce){.xs{margin-top:-10vw;clip-path:polygon(0 10vw,100% 0,100% 100%,0 100%)}}

/* ================= dotted quote after the film strip =================
   the film chapter stays underneath (same colour, same grain); its cards run off to the left while the sentence
   arrives from the right as dots. site.js draws the canvas and sets --qf on .films to fade the strip furniture. */
.quote{position:relative;z-index:3;height:430vh;margin-top:-100vh;margin-top:-100svh;background:none;pointer-events:none}
.quote .stage{background:none}
.quote canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.quote .big{position:absolute;left:-999em}
.quote .sub{position:absolute;left:clamp(16px,4vw,60px);bottom:7vh;max-width:26em;font:500 clamp(12px,1vw,15px)/1.7 "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.7);opacity:var(--qs,0)}
.quote .chap{opacity:var(--qs,0)}
.films .giant,.films .dates,.films .rules,.films .reel,.films .chap{opacity:var(--qf,1)}
.frames.acc.xs{z-index:4}.work.part.xs{z-index:5}.call.xs{z-index:6}
@media(prefers-reduced-motion:reduce){.quote{height:auto;margin-top:0;background:#0b0a0c;padding:18vh clamp(16px,4vw,60px)}.quote .stage{position:static;height:auto}.quote canvas{display:none}
  .quote .big{position:static;font:600 clamp(40px,8vw,120px)/1 var(--cond);text-transform:uppercase;color:var(--paper)}.quote .sub,.quote .chap{position:static;opacity:1;margin-top:20px}}

/* ================= wall under the black chapters ================= */
.films .stage{background:radial-gradient(ellipse 90% 70% at 50% 0,rgba(215,255,46,.07),transparent 60%),linear-gradient(rgba(11,10,12,.8),rgba(11,10,12,.8)),url(/assets/perete.jpg) center/cover #0b0a0c}
.work.part .stage{background:linear-gradient(rgba(11,10,12,.8),rgba(11,10,12,.8)),url(/assets/perete.jpg) center/cover #0b0a0c}
.work.part .stage::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--noise);background-size:180px;opacity:.3;mix-blend-mode:overlay}
.call.xs .stage{background:linear-gradient(rgba(11,10,12,.78),rgba(11,10,12,.78)),url(/assets/perete.jpg) center/cover #0b0a0c}
.call.xs .bgimg{opacity:.16;mix-blend-mode:screen}
/* the sprayed title lets the wall show through the paint */
.work.part .giant{background:linear-gradient(180deg,rgba(215,255,46,.62),rgba(215,255,46,.05) 92%),url(/assets/perete.jpg) center/900px;background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text;color:transparent;filter:contrast(1.25) brightness(1.5)}

/* ================= at a cut: colour first, content after ================= */
.xs .stage>*:not(.script):not(.bgimg):not(canvas){transition:opacity .7s ease,translate .9s cubic-bezier(.22,1,.36,1)}
.xs:not(.seen) .stage>*:not(.script):not(.bgimg):not(canvas){opacity:0;translate:0 34px}
.xs.seen .stage>*:nth-child(3){transition-delay:.08s}.xs.seen .stage>*:nth-child(4){transition-delay:.16s}.xs.seen .stage>*:nth-child(5){transition-delay:.24s}.xs.seen .stage>*:nth-child(6){transition-delay:.3s}
@media(prefers-reduced-motion:reduce){.xs:not(.seen) .stage>*:not(.script):not(.bgimg):not(canvas){opacity:1;translate:none}}

/* ================= quote, reference mechanism: real centred text; site.js scales it, draws the dots and wipes the lines ================= */
.quote{height:400vh}
.quote .qw{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% - 5.3vh));text-align:center;width:max-content;max-width:none}
.quote h2{font:600 clamp(48px,9.5vw,190px)/.92 var(--cond);text-transform:uppercase;letter-spacing:0;color:#f4f1ea;white-space:nowrap;transform-origin:50% 50%;visibility:hidden;will-change:transform}
.quote .ql{display:block;clip-path:polygon(0 -15%,0 -15%,-18% 115%,0 115%)}
.quote .qw .sub{position:static;margin:3.2vh auto 0;max-width:30em;opacity:var(--qs,0);font:500 clamp(12px,1vw,15px)/1.7 "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.85)}
.quote .chap{opacity:var(--qc,0)}
@media(prefers-reduced-motion:reduce){.quote h2{visibility:visible;white-space:normal}.quote .ql{clip-path:none}.quote .qw{position:static;transform:none;width:auto}.quote .qw .sub,.quote .chap{opacity:1}}

.quote .qw .sub{transform:translateY(var(--ql,0px))}
/* sprayed words inside the quote */
.quote h2 em{font:400 1.1em/.8 var(--graf);font-style:normal;text-transform:none;color:var(--neon);padding:0 .05em;text-shadow:0 0 .12em rgba(215,255,46,.35)}
.quote h2{font-size:clamp(44px,8.4vw,170px);line-height:1.02}
/* ================= quote: caption on one line; three framed pictures rise over it ================= */
.quote{height:536vh}
.quote .qw .sub{white-space:nowrap;max-width:none}
.quote .qph{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none}
.quote .qph figure{grid-area:1/1;margin:0;width:clamp(260px,26vw,620px);max-width:calc((100vh - 120px)*409/564);padding:clamp(6px,.7vw,11px);border-radius:4px;background:linear-gradient(175deg,#F6F3EF 0%,#F0E4D4 100%);box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translate3d(0,200vh,0);will-change:transform}
.quote .qph img{display:block;width:100%;aspect-ratio:409/564;object-fit:cover}
@media(prefers-reduced-motion:reduce){.quote .qph{display:none}}

/* ================= partners: a plain section that arrives from below, same colour; changes by itself ================= */
.work.part{height:auto;min-height:100vh;min-height:100svh;margin-top:0;clip-path:none;z-index:4}
.work.part .stage{position:relative;top:auto;height:100vh;height:100svh}
.frames.acc.xs{z-index:5}
.work.part .stack figure{transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.work.part .dots{cursor:pointer}
.work.part .dots i{position:relative;overflow:hidden;background:rgba(246,243,239,.35);cursor:pointer;transition:height .5s cubic-bezier(.22,1,.36,1)}
.work.part .dots i.on{height:34px;background:rgba(246,243,239,.35)}
.work.part .dots i b{position:absolute;inset:0;border-radius:inherit;background:#f6f3ef;transform:translate3d(0,-100%,0)}
.work.part .dots i:not(.on) b{transform:translate3d(0,-100%,0)!important}

/* room under the partners for the next chapter's slanted edge (same allowance as the reference) */
.work.part{padding-bottom:calc(10vw + 44px);background:linear-gradient(rgba(11,10,12,.8),rgba(11,10,12,.8)),url(/assets/perete.jpg) center/cover #0b0a0c}
.work.part .stage{background:none}
/* partners sit on the same wall as the quote: the wall belongs to the pinned film chapter underneath and does not move,
   only the partners' content travels over it (the reference keeps its textures fixed to the screen in the same way) */
.work.part,.work.part .stage{background:none}
.work.part .stage::after{display:none}
/* ================= Partners title, reference construction ================= */
.work.part .giant{position:absolute;top:96px;left:0;right:0;transform:none;text-align:center;white-space:nowrap;line-height:.85;letter-spacing:-.01em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#9fca1c;filter:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,0) 96%);mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,0) 96%)}
/* the wall, fixed to the screen like the wall behind, multiplied over the title only (pictures and text sit above it) */
.work.part .stage::after{display:block;content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:url(/assets/perete-lum.jpg) center/cover fixed;mix-blend-mode:multiply;opacity:1}
.work.part .stack,.work.part .info,.work.part .dots,.work.part .more,.work.part .chap{z-index:2}
.work.part .stack{position:relative}

/* the multiply layer cannot reach the wall behind the section (separate stacking group), so the texture is painted
   inside the letters instead: same picture, fixed to the screen, multiplied with the flat colour */
.work.part .stage::after{display:none}
.work.part .giant{background:url(/assets/perete-lum.jpg) center/cover fixed,#a6d41c;background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text;color:transparent}
.work.part.work.part .chap{top:84px}
/* chapter label clear above the Partners title */
.work.part.work.part .chap{top:84px}
.work.part .giant{top:150px}
/* ================= partners pinned + gallery underneath (reference desktop logic) ================= */
.work.part{height:calc(var(--pn,3)*100vh + 220vh);min-height:0;padding-bottom:0}
.work.part .stage{position:sticky;top:0;height:100vh;height:100svh;transform-origin:50% 50%;will-change:transform}
.work.part .stack{will-change:transform}
.work.part .info,.work.part .dots,.work.part .more{translate:0 var(--ps,0px)}
.frames.acc.und{position:relative;z-index:5;margin-top:-220vh;height:220vh;padding:0;overflow:visible;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}
.frames.acc.und .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:96px clamp(16px,calc(3vw + 3rem),110px) clamp(32px,5.5vw,80px)}
.frames.acc.und .stage>.script{position:absolute;inset:-12% -20%;overflow:hidden;pointer-events:none}
.frames.acc.und .chap{position:static;margin:0 0 6px;color:#17100a;flex:none}.frames.acc.und .chap::after{background:#17100a}
.frames.acc.und .giant{font-size:clamp(44px,10vw,180px);line-height:.9;margin:0;flex:none}
.frames.acc.und .strip{flex:1 1 0;min-height:0;height:auto;max-height:none;margin-top:clamp(18px,2.2vw,32px)}
.frames.acc.und .row{margin-top:clamp(18px,2.2vw,32px);flex:none}
@media(prefers-reduced-motion:reduce){.work.part{height:auto}.work.part .stage{position:relative}.frames.acc.und{margin-top:0;height:auto;clip-path:none}.frames.acc.und .stage{position:relative}}

.frames.acc.und .stage{padding-top:84px}
.frames.acc.und .chap{margin:0 0 clamp(26px,3.4vw,52px)}
/* ================= closing chapter: centred on the wall ================= */
.call.xs .bgimg{display:none}
.call.xs .stage>.in{margin-left:0}
.call.xs h2{font-size:clamp(40px,6.4vw,104px);max-width:9.5em}
/* (revealed elements also carry the class 'in', so the text block is addressed as a direct child of the stage) */
@media(min-width:1100px){.call.xs .stage>.in{margin-left:0;max-width:min(52vw,820px)}.call.xs .stage>.in .lead{max-width:30em}}

/* ================= menu: a sheet of the same parchment, ink lettering ================= */
#menu{background:#e3d6b8 url(/assets/pergament-fin.jpg) center/cover;background-blend-mode:multiply;color:#17100a;border:0;border-radius:6px;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 30px 70px -20px rgba(0,0,0,.75),inset 0 0 90px rgba(84,50,16,.28);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
#menu>img{height:52px}
#menu nav{gap:0}
#menu nav a{font:600 clamp(26px,2.5vw,36px)/1.32 var(--cond);text-transform:uppercase;letter-spacing:.01em;color:#17100a}
#menu nav a:hover,#menu nav a:focus-visible{color:#7a1e12;transform:translateX(10px)}
#menu .foot{border-top:1.5px solid rgba(23,16,10,.55);color:rgba(23,16,10,.7);font:500 10.5px/1.5 "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
#menu .foot a{color:#17100a;border-color:rgba(23,16,10,.55)}
#menu .foot a:hover{border-color:#7a1e12;color:#7a1e12}
#menu .soc a{color:#17100a}
#menu .soc a:hover{color:#7a1e12}
#menu .mrow .th{filter:drop-shadow(0 6px 12px rgba(60,35,10,.4))}

.call.xs .stage{width:100%;max-width:none;margin:0;box-sizing:border-box;justify-self:stretch}
.call.xs{display:block}
/* the old left offset was written for the text block but also hit every revealed child (they carry the class 'in' too) */
.call.xs .stage>.in>*{margin-left:auto;margin-right:auto}
/* ================= sponsorship contract page ================= */
.cpage{padding:150px clamp(16px,4vw,60px) 12vh;overflow:hidden;min-height:100vh}
.cpage .chead{max-width:1280px;margin:0 auto 5vh}
.cpage .kicker{color:#6e1d12}
.cpage h1{font:600 clamp(44px,7vw,110px)/.95 var(--cond);text-transform:uppercase;color:#17100a;margin:10px 0 14px}
.cpage h1 em{font:400 1.05em/.8 var(--clasic);font-style:normal;text-transform:none;color:#7a1e12}
.cpage .lead{max-width:40em;color:#33261a;font-size:17px}
.cgrid{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:clamp(24px,4vw,64px);max-width:1280px;margin:0 auto;align-items:start}
.cpage form{background:#0c0b0d;color:var(--paper);border-radius:8px;padding:26px clamp(18px,2vw,28px) 28px;box-shadow:0 30px 60px -25px rgba(40,20,5,.7);position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto}
.cpage form h2{font:600 12px/1 "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--neon);margin:22px 0 12px}
.cpage form h2:first-child{margin-top:0}
.cpage label{display:block;margin-bottom:10px}
.cpage label>span{display:block;font:600 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,234,.6);margin-bottom:5px}
.cpage input[type=text],.cpage input[type=email],.cpage select{width:100%;box-sizing:border-box;background:#17151a;border:1px solid rgba(244,241,234,.18);border-radius:6px;color:var(--paper);font:500 15px/1.3 var(--sans);padding:11px 12px}
.cpage input:focus,.cpage select:focus{outline:2px solid var(--neon);outline-offset:1px;border-color:transparent}
.cpage .hint{font-size:13px;color:rgba(244,241,234,.6);margin:0 0 8px}
.cpage .sigbox{position:relative;background:#f4f1ea;border-radius:6px;height:150px;touch-action:none}
.cpage canvas.sig{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.cpage .sig-clear{position:absolute;right:8px;top:8px;background:#17100a;color:#f4f1ea;border:0;border-radius:999px;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;cursor:pointer}
.cpage .chk{display:flex;gap:10px;align-items:flex-start;margin:14px 0 16px}.cpage .chk span{font:400 13.5px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:rgba(244,241,234,.85);margin:0}
.cpage .chk input{margin-top:3px;accent-color:#D7FF2E;width:17px;height:17px;flex:none}
.cpage .c-go{width:100%}.cpage .c-go:disabled{opacity:.4;cursor:not-allowed}
.cpage .c-msg{min-height:1.4em;margin:10px 0 0;font-size:13px;color:rgba(244,241,234,.7)}
.cpage .c-done{margin-top:14px;padding:14px;border:1px solid var(--neon);border-radius:6px;font-size:14px;line-height:1.5}.cpage .c-done .btn{margin-top:12px;background:#f4f1ea;color:#0b0b0b;border-color:#f4f1ea}
.cwrap{position:relative}
.csheet{background:#fffdf8;color:#16130f;padding:clamp(22px,4vw,58px);box-shadow:0 30px 70px -30px rgba(40,20,5,.6),0 0 0 1px rgba(23,16,10,.08);font:400 14px/1.62 Georgia,"Times New Roman",serif}
.csheet p{margin:0 0 9px}
.csheet .c-org{font-weight:700;font-size:16px;margin-bottom:2px}.csheet .c-small{font-size:12px;margin-bottom:1px;color:#444}
.csheet .c-title{font-weight:700;font-size:21px;text-align:center;margin:26px 0 6px}.csheet .c-center{text-align:center}
.csheet .c-h{font-weight:700;margin:18px 0 6px}
.csheet .c-sign{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.csheet .c-sign b{display:block;margin-bottom:6px}.csheet .c-sign span{display:block;font-size:13px}
.csheet .c-sig{display:block;height:78px;margin-top:8px;border-bottom:1px solid #999;background:center/contain no-repeat;font-style:normal}
.csheet .c-wait{font-size:11.5px;color:#888;display:flex;align-items:flex-end;padding-bottom:6px}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}.cpage form{position:static;max-height:none}}

.cpage h1{margin:10px 0 40px;line-height:1.05}
.cpage h1 em{font-size:.92em}
/* closing text centred on the full width again (no panel beside it) */
@media(min-width:1100px){.call.xs .stage>.in{max-width:none}}
.call.xs h2{font-size:clamp(44px,8vw,120px);max-width:11em}
/* film pages: gallery background edge to edge (it used to stop at 1400px and left darker blocks at the sides) */
.gal{max-width:none;padding-left:max(clamp(16px,4vw,60px),calc((100vw - 1400px)/2));padding-right:max(clamp(16px,4vw,60px),calc((100vw - 1400px)/2))}
/* closing block on inner pages: the wall, like on the home page (the cinema photo was cut off at the top) */
.call:not(.xs){background:linear-gradient(rgba(11,10,12,.78),rgba(11,10,12,.78)),url(/assets/perete.jpg) center/cover #0b0a0c}
.call:not(.xs) .bgimg{display:none}

/* last chapter with the menu panel beside it: text block narrow enough to clear the panel, still centred on the screen */
@media(min-width:1100px){.call.xs .stage>.in{max-width:min(46vw,700px)}.call.xs h2{font-size:clamp(40px,5.6vw,96px)}}
@media(max-height:820px){#menu{min-height:0}#menu nav{padding:14px 0}#menu nav a{font-size:26px}}
.cpage .sig-up{display:inline-block;margin:10px 0 0;cursor:pointer}
.cpage .sig-up span{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--paper);border:1px solid rgba(244,241,234,.4);border-radius:999px;padding:9px 14px;margin:0}
.cpage .sig-up:hover span{border-color:var(--neon);color:var(--neon)}
.csheet .c-sig.c-ours{background-position:left center}
.cpage .c-over{margin:6px 0 4px;padding:14px;border:1px solid var(--neon);border-radius:6px;font-size:14px;line-height:1.5}.cpage .c-over .btn{margin-top:12px;padding:12px 18px;font-size:12px}
.cpage .c-done .c-ok{display:block}
/* language switch in the top bar, next to the menu button */
.bar .lang{margin-left:auto;margin-right:18px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-decoration:none;color:#fff;border:1.5px solid #fff;border-radius:999px;padding:8px 11px;transition:background .2s,color .2s}
.bar .lang:hover,.bar .lang:focus-visible{background:#fff;color:#000}
/* language switch: a round button beside the sound button, bottom right */
.lang{position:fixed;right:calc(clamp(14px,2.4vw,34px) + 54px);bottom:clamp(14px,2.4vw,34px);z-index:85;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(120,116,112,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font:700 12px/1 var(--sans);letter-spacing:.08em;text-decoration:none;transition:background .2s,color .2s,transform .3s var(--ease)}
.lang:hover,.lang:focus-visible{background:var(--neon);color:#000;transform:translateY(-2px)}
.lang:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* ================= small screens and short screens (found in the device check) ================= */
html,body{overflow-x:clip}
/* partners: the picture never grows taller than the space between title and text */
.work.part .stack{width:min(46vw,640px,calc(46vh*1.6))}
/* film text and contract: long unbreakable lines must not widen their column */
.pbody .cols>*,.cgrid>*{min-width:0}
.csheet{overflow-wrap:anywhere}
@media(max-width:760px){
  /* quote: the caption may wrap */
  .quote .qw .sub{white-space:normal;max-width:84vw}
  /* partners: one screen per partner, then the gallery simply follows (no pinned wipe on phones) */
  .work.part{height:calc(var(--pn,3)*100vh + 100vh)}
  .work.part .stack{width:82vw;margin-top:-10vh}
  .work.part .giant{top:120px}
  .work.part .info{left:calc(clamp(16px,4vw,60px) + 26px);bottom:19vh;width:calc(100vw - 80px)}
  .work.part .info h3{white-space:normal}
  .work.part .dots{top:auto;bottom:calc(19vh + 96px)}
  .work.part .more{right:auto;left:clamp(16px,4vw,60px);bottom:8vh}
  .frames.acc.und{margin-top:-10vw;height:auto;clip-path:polygon(0 10vw,100% 0,100% 100%,0 100%)}
  .frames.acc.und .stage{position:relative;height:auto;display:block;padding:calc(10vw + 84px) clamp(16px,4vw,60px) 9vh}
  .frames.acc.und .chap{margin-bottom:18px}
  .frames.acc.und .giant{font-size:clamp(44px,15vw,96px)}
  .frames.acc.und .strip{height:52vh;flex:none;margin-top:18px}
  /* film page */
  .pbody.paper .facts{transform:none}
  .phero>.in{padding-top:96px}
  .quote h2{font-size:clamp(34px,10.5vw,80px)}
  .lang{right:calc(clamp(14px,2.4vw,34px) + 52px)}
}

/* phones: the two entry blocks sit at the bottom as parchment cards over the knight, so their text stays readable */
@media(max-width:760px){
  .hero .side,.hero .side.l,.hero .side.r{top:auto;bottom:78px;width:45vw;max-width:none;z-index:6;display:block;text-align:center;padding:12px 10px 12px;border-radius:4px;
    background:rgba(232,220,190,.93);box-shadow:0 14px 30px -14px rgba(60,35,10,.7),inset 0 0 0 1px rgba(23,16,10,.12);transform:none}
  .hero .side.l{left:3vw;right:auto}.hero .side.r{right:3vw;left:auto}
  .hero .side .sg{font-size:clamp(26px,8vw,36px);margin:0 0 6px;transform:none;white-space:nowrap;display:block}
  .hero .side p{font-size:12px;line-height:1.4;margin:0 0 8px}
  .hero .side u{font-size:10.5px}
}
/* ================= Formular 230 page (shares the contract page's form styles) ================= */
.f230 .row4{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.f230 .finfo{background:#fffdf8;color:#16130f;padding:clamp(22px,3.4vw,46px);box-shadow:0 30px 70px -30px rgba(40,20,5,.6),0 0 0 1px rgba(23,16,10,.08)}
.f230 .finfo h2{font:600 clamp(24px,2.4vw,34px)/1.1 var(--cond);text-transform:uppercase;margin:0 0 14px}
.f230 .finfo h2:not(:first-child){margin-top:34px}
.f230 .finfo ol{margin:0;padding-left:1.2em;display:grid;gap:10px}.f230 .finfo li,.f230 .finfo p{font-size:16px;line-height:1.6;color:#2a2018}
.f230 .finfo .fnote{font-size:13px;color:#6b5d4d;margin-top:22px}
@media(max-width:520px){.f230 .row4{grid-template-columns:repeat(3,1fr)}}

/* privacy policy and small legal links */
.legalp .ltext{max-width:760px;margin:0 auto;background:#fffdf8;color:#16130f;padding:clamp(22px,4vw,56px);box-shadow:0 30px 70px -30px rgba(40,20,5,.6),0 0 0 1px rgba(23,16,10,.08)}
.legalp .chead{max-width:760px}
.legalp h2{font:600 clamp(22px,2.2vw,30px)/1.15 var(--cond);text-transform:uppercase;margin:34px 0 12px}.legalp h2:first-child{margin-top:0}
.legalp p{font-size:16px;line-height:1.7;margin:0 0 12px;color:#2a2018}
footer .legal a{color:inherit;text-decoration:underline}
.cpage .chk a{color:var(--neon)}
/* social marks: manuscript-style, also shown unlinked */
.soc{gap:20px}
.soc a,.soc span{display:block;width:44px;height:44px;color:var(--paper);opacity:.85;transition:opacity .2s,transform .3s var(--ease),color .2s}
.soc a:hover{opacity:1;color:var(--neon);transform:translateY(-2px)}
.soc i{display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
#menu .soc a,#menu .soc span{color:#17100a}
#menu .soc a:hover{color:#7a1e12}
/* loader caption fits a phone in one line */
@media(max-width:760px){#loader .in::after{font-size:3.1vw;white-space:nowrap}}
/* phone hero: no cards, only the two titles with their link, floating slightly out of step (7 s there and back) */
@media(max-width:760px){
.side,.hero .side.l,.hero .side.r{width:44vw;padding:0;background:none;box-shadow:none;border-radius:0;bottom:92px;animation:sidefloat 6.4s ease-in-out infinite}
.hero .side.r{animation-duration:7.5s;animation-delay:-1.27s}
.side p{display:none}
.side .sg{font-size:clamp(22px,6.6vw,30px);margin:0 0 4px;color:#f3e7c9;text-shadow:0 1px 0 rgba(20,10,4,.9),0 0 14px rgba(20,10,4,.85),0 0 30px rgba(20,10,4,.6)}
.side u{font-size:10px;color:#f3e7c9;border-bottom-color:var(--neon);text-shadow:0 0 10px rgba(20,10,4,.95),0 1px 0 rgba(20,10,4,.9)}
}
@keyframes sidefloat{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
/* phones, native flow (class set by site.js): fixed slanted edge between hero and films, no full-page blend layer,
   no backgrounds pinned to the screen, no rubber-band at the ends */
html.nf,html.nf body{overscroll-behavior-y:none}
html.nf body::after{display:none}
html.nf .films{margin-top:-10vw;height:calc(var(--n,5)*75vh + 100vh);clip-path:polygon(0 10vw,100% 0,100% 100%,0 100%)}
html.nf .work.part .giant{background-attachment:scroll}
/* phones: Partners as a swipe rail in normal flow (built by site.js), same pieces as on desktop */
html.nf .work.part{height:auto;min-height:0}
html.nf .work.part .stage{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:84px 0 calc(10vw + 72px);transform:none!important;will-change:auto;overflow:hidden}
html.nf .work.part.work.part .chap{position:static;margin:0 clamp(16px,4vw,60px) 14px;flex:none}
html.nf .work.part .giant{position:static;margin:0;text-align:center;flex:none}
html.nf .work.part .rail{position:relative;z-index:2;flex:none;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 7vw 8px;margin-top:-4vw;scrollbar-width:none;overscroll-behavior-x:contain}
html.nf .work.part .rail::-webkit-scrollbar{display:none}
html.nf .work.part .rail article{flex:none;width:86vw;scroll-snap-align:center}
html.nf .work.part .rail figure{position:relative;margin:0;aspect-ratio:16/10;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -30px #000;transform:rotate(-3deg) scale(.93)}
html.nf .work.part .rail figure>img{display:block;width:100%;height:100%;object-fit:cover}
html.nf .work.part .rail figcaption.plogo{position:absolute;inset:0;display:grid;place-items:center;container-type:inline-size;margin:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,.15) 80%)}
html.nf .work.part .rail .pl{width:auto;text-align:center}
html.nf .work.part .rail .pl img{width:40cqw;margin:0 auto}
html.nf .work.part .rail .pl-la-vremea-lor{font-size:11cqw}
html.nf .work.part .rail .txt{padding:22px 6px 0}
html.nf .work.part .rail .txt h3{font:700 20px/1.25 var(--sans);margin-bottom:10px;color:var(--paper)}
html.nf .work.part .rail .txt p{font-size:14px;line-height:1.6;color:rgba(244,241,234,.62)}
html.nf .work.part .dots{position:static;z-index:2;display:flex;align-items:center;gap:14px;margin:24px 7vw 0;translate:none;flex:none}
html.nf .work.part .dots i{flex:none;width:8px;height:8px;border-radius:8px;transition:width .5s cubic-bezier(.22,1,.36,1)}
html.nf .work.part .dots i.on{width:34px;height:8px}
html.nf .work.part .dots i b{transform:translate3d(-100%,0,0)}
html.nf .work.part .dots i:not(.on) b{transform:translate3d(-100%,0,0)!important}
html.nf .work.part .more{position:static;z-index:2;align-self:flex-start;margin:28px 7vw 0;translate:none;flex:none}
@media(max-width:760px){
/* Coproduse: the heading keeps clear of the chapter line above and of the pictures below (tall capitals, long tails) */
.frames.acc.und .chap{margin-bottom:0}
.frames.acc.und .giant{display:block;line-height:1;padding:.3em 0 .42em}
.frames.acc.und .strip{margin-top:0}
/* hero titles in the manuscript red, as on desktop, with a parchment glow so they hold on the armour */
.side .sg{color:#6e1d12;text-shadow:0 0 8px rgba(243,231,201,.95),0 0 18px rgba(243,231,201,.9),0 0 34px rgba(243,231,201,.7)}
}
/* film pages on phones: hero framed on its subject, four pictures (2 x 2), next film's title on one line */
.gal figure.m4{display:none}
@media(max-width:760px){
.phero .media img{object-position:var(--hx,50%) 50%}
.gal{grid-template-columns:1fr 1fr}
.gal figure.m4{display:block}
.next>b{white-space:nowrap;font-size:min(15vw,calc(150vw/var(--nl,10)))}
}
/* ---- audit fixes ---- */
/* the quote's chapter label comes in as the film strip leaves */
.quote .stage .chap{opacity:var(--qch,0)}
/* partners (desktop): name and line easier to read */
@media(min-width:761px){.work.part .info h3{font-size:clamp(20px,1.7vw,28px)}.work.part .info p{font-size:clamp(14px,1.05vw,17px);max-width:360px}}
/* phones: film cards further apart; chapter label clear above the title */
html.nf .films .track{gap:17vw}
html.nf .films .chap{top:62px}
html.nf .films .giant{top:92px}
@media(max-width:760px){
/* hero titles: red as on desktop, on a denser parchment glow so they read on the armour */
.side .sg{text-shadow:0 0 3px #f3e7c9,0 0 6px #f3e7c9,0 0 10px rgba(243,231,201,.95),0 0 18px rgba(243,231,201,.9),0 0 30px rgba(243,231,201,.75)}
/* English quote fits the screen */
html[lang=en] .quote h2{font-size:clamp(30px,9.2vw,72px)}
/* footer links: one per line, tall enough for a finger */
footer .cols p a{display:block;padding:8px 0}
footer .cols p br{display:none}
}
/* frequently asked questions (Form 230 and contract pages): a white sheet like the other text blocks on these pages */
.faq{max-width:1280px;margin:7vh auto 0;background:#fffdf8;color:#16130f;padding:clamp(22px,3.4vw,46px);box-shadow:0 30px 70px -30px rgba(40,20,5,.6),0 0 0 1px rgba(23,16,10,.08)}
.faq h2{font:600 clamp(24px,2.4vw,34px)/1.1 var(--cond);text-transform:uppercase;margin:0 0 12px}
.faq details{border-top:1px solid rgba(23,16,10,.14)}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;font:700 17px/1.35 var(--sans);color:#17100a}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 26px/1 var(--sans);color:#6e1d12;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 0 18px;max-width:62em;font-size:16px;line-height:1.65;color:#2a2018}
/* film cards: each floats a little, out of step with its neighbours; on phones the middle card comes forward (values in site.js) */
@keyframes cardfloat{0%,100%{translate:0 1.3%}50%{translate:0 -1.3%}}
.films .card{animation:cardfloat 6.4s ease-in-out infinite}
.films .card:nth-child(3n+2){animation-duration:7.5s}
.films .card:nth-child(3n){animation-duration:8.6s}
.films .card:nth-child(2){animation-delay:-1.27s}.films .card:nth-child(3){animation-delay:-2.54s}.films .card:nth-child(4){animation-delay:-3.81s}
.films .card:nth-child(5){animation-delay:-5.08s}.films .card:nth-child(6){animation-delay:-6.35s}.films .card:nth-child(7){animation-delay:-7.62s}
.card .fr{transform:translateZ(calc(var(--tzp,0px) + var(--tz,0px))) rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--ryp,0deg))) rotateZ(var(--rz,0deg)) scale(calc(var(--scp,1)*var(--sc,1)))}
/* loader, phones, first visit: the caption asks for one tap (it is what lets the music start) */
#loader.gate{cursor:pointer}
#loader.gate .in::after{content:"atinge pentru a intra";color:var(--perg);font-size:max(4.6vw,17px);animation:gatepulse 1.6s ease-in-out infinite}
html[lang=en] #loader.gate .in::after{content:"tap to enter"}
@keyframes gatepulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#loader.gate .in::after{animation:none}.films .card{animation:none}
  *{animation:none!important;transition-duration:.01s!important}
  .rv{opacity:1;transform:none}
}