/* 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}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01s!important}
  .rv{opacity:1;transform:none}
}