:root{
  --bg:#07070B; --fg:#F2EFEA; --fg2:rgba(242,239,234,.74); --fg3:rgba(242,239,234,.5);
  --gold:#F4C46A; --blue:#71A7FF; --lab:#1534F5; --lab2:#0B1FB8;
  --f:'Inter Tight',system-ui,-apple-system,sans-serif; --fs:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1); --pad:clamp(20px,4vw,64px);
  --ink:#1A0F6B; --blush:#FFD3E6; --paper:#FBE6EF; --sun:#FFC83A; --hot:#E4045D; --fd:'Anton',Impact,sans-serif;   /* from v1 */
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
/* round 42: the fixed layers are 100vh tall, not "as tall as the window": on phones the window shrinks and grows as the browser's bars slide in and out,
   and a layer that followed them would be stretched or re-drawn on every scroll (main.js measures the same 100vh) */
#gl{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:0;display:block;touch-action:pan-y}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,rgba(7,7,11,0) 58%,rgba(7,7,11,.8) 100%)}
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,2%)}50%{transform:translate(2%,-2%)}75%{transform:translate(-1%,-2%)}100%{transform:translate(0,0)}}
main{position:relative;z-index:3;pointer-events:none}
main a,main button,main .chips,main .tool,main .latest-row{pointer-events:auto}

/* the Lab's own world: a fixed blue layer that a circle opens */
.lab-world{position:fixed;left:0;right:0;top:0;height:100vh;z-index:2;background:radial-gradient(90% 80% at 50% 40%,var(--lab) 0%,var(--lab2) 100%);clip-path:circle(0% at 50% 60%);pointer-events:none;will-change:clip-path}
.lab-world canvas{position:absolute;inset:0;width:100%;height:100%}

/* the hero game: ship, shots, pixels and score, over the WebGL invaders */
#game{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:2;pointer-events:none;image-rendering:pixelated}
.games{position:absolute;z-index:4;display:flex;flex-wrap:wrap;gap:8px}
.game-pad{display:none;position:absolute;z-index:3;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.games button{font:12px/1 "Press Start 2P",monospace;color:var(--fg2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:10px 12px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.games button:hover{color:var(--fg);border-color:rgba(244,196,106,.7)}
.games button.on{color:#17171C;background:var(--gold);border-color:var(--gold)}
.games .prev,.games .next{display:none}
.games.compact{flex-wrap:nowrap;justify-content:space-between;align-items:center}
.games.compact [data-g]{display:none}.games.compact [data-g].on{display:block;flex:1;text-align:center}
.games.compact .prev,.games.compact .next{display:block;min-width:44px}

/* loader */
.loader{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity 1s var(--ease),visibility 1s}
.loader.done{opacity:0;visibility:hidden}
.loader .ring{position:relative;width:96px;height:96px}
.loader svg{width:100%;height:100%;transform:rotate(-90deg)}
.loader circle{fill:none;stroke:rgba(242,239,234,.12);stroke-width:1.5}
.loader circle.p{stroke:var(--gold);stroke-dasharray:276.5;stroke-dashoffset:276.5;stroke-linecap:round;transition:stroke-dashoffset .3s}
.loader .ring span{position:absolute;inset:0;display:grid;place-items:center;font:500 18px/1 var(--f);font-variant-numeric:tabular-nums}
.loader p{margin:0;font:italic 400 22px/1 var(--fs);color:var(--fg2)}

.label{position:fixed;left:0;top:0;z-index:40;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:14px;background:rgba(14,14,20,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(255,255,255,.08);opacity:0;transition:opacity .3s}
.label.on{opacity:1}
.label b{font:600 16px/1.25 var(--f);white-space:nowrap}
.label i{font:italic 400 17px/1.2 var(--fs);color:var(--gold)}

/* top bar */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;height:44px;display:flex;align-items:center;gap:53px;padding:0 var(--pad);transition:transform .6s var(--ease),color .3s,background .3s}
.bar.hide{transform:translateY(-110%)}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 rgba(10,15,30,.08),0 10px 24px -18px rgba(10,15,30,.4);transition:opacity .35s,background .35s,box-shadow .35s}
.bar.band::before{opacity:1}
.bar.band-dark::before{background:rgba(2,12,24,.66);box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 24px -18px rgba(0,0,0,.6)}   /* round 27: the always-there header's band (main.js picks light or dark) */
.chips-bar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:46px;background:#160D45;opacity:0}   /* once pinned, the strip reaches the top edge */
.chips-bar.stuck::before{opacity:1}
/* over a light ground (the white hero) the top bar turns ink — no band behind it (a band cut the name as it scrolled under); an item with the black games panel under it turns light (main.js → over-dark) */
.bar.light{--fg:#1A0F6B;--fg2:rgba(26,15,107,.72);color:#1A0F6B}
.bar.light .over-dark{--fg:#F2EFEA;--fg2:rgba(242,239,234,.74);color:var(--fg2)}
.bar.light .logo.over-dark,.bar.light nav a.on.over-dark,.bar.light nav a.over-dark:hover{color:var(--fg)}
.bar.light .lang .cur.over-dark{color:var(--fg);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.bar.light .lang .cur{background:rgba(26,15,107,.06);border-color:rgba(26,15,107,.25)}
.logo{display:flex;align-items:center;gap:11.5px;font:600 19.5px/1 var(--f);letter-spacing:-.01em;transition:color .3s}
.bar nav{display:flex;gap:34.5px}
.bar nav a{font-size:18.5px;font-weight:600;letter-spacing:-.005em;color:var(--fg2);transition:color .3s;position:relative;padding:4px 0}   /* round 28 (Ran: "hard to read… a bit bigger or bolder or both"): both */
.bar nav a:hover,.bar nav a.on{color:var(--fg)}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;border-radius:2px;background:currentColor;transform:scaleX(0);transition:transform .35s var(--ease)}
.bar nav a.on::after{transform:scaleX(1)}   /* round 27 (Ran: "the dot under a selected item is not clear enough, make it a stripe below the selected item" — his own exception to the no-accent-bar rule): a line under the item in its own colour */
.lang{margin-left:auto;position:relative}
/* round 27 (Ran: "design the language menu"): the pill = globe + code + chevron (15 % bigger with the header); the menu = a white card, each language
   with its code; the chosen one tinted with a tick (no stripes); it drops in softly */
.lang .cur{display:flex;align-items:center;gap:7px;color:var(--fg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 10px 5px 6px;font:600 16px/1 var(--f);letter-spacing:.02em;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s,border-color .25s,color .3s}
.lang .cur .chev{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.lang .flag{display:block;width:26px;height:18px;border-radius:4px;box-shadow:0 0 0 1px rgba(10,15,30,.14)}
.lang .cur-flag{display:block;line-height:0}
.lang .cur-flag .flag{border-radius:50%;width:22px;height:22px}   /* round 28: flags only */
.lang .cur .chev{width:11.5px;height:11.5px;stroke-width:1.7;transition:transform .3s var(--ease)}
.lang.open .cur .chev{transform:rotate(180deg)}
.lang .cur:focus-visible,.lang .menu button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang .menu{position:absolute;right:0;top:calc(100% + 8px);display:flex;flex-direction:row;gap:4px;padding:6px;border-radius:16px;background:#fff;color:var(--ink);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.06),0 18px 40px -14px rgba(var(--ink-rgb),.35),0 0 0 1px rgba(var(--ink-rgb),.08);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .2s,transform .3s var(--ease),visibility 0s .3s}
.lang.open .menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s var(--ease),visibility 0s}
.lang .menu button{display:grid;place-items:center;background:none;border:0;padding:9px 10px;border-radius:11px;cursor:pointer;transition:background .2s,transform .2s}
.lang .menu .flag{width:34px;height:23px;border-radius:5px}
.lang .menu button:hover{background:rgba(var(--ink-rgb),.05)}
.lang .menu button[aria-selected=true]{background:rgba(var(--ink-rgb),.09)}
.lang .menu button[aria-selected=true] .flag{box-shadow:0 0 0 1px rgba(10,15,30,.14),0 0 0 3px #fff,0 0 0 4.5px var(--ink)}

h2{font:500 clamp(56px,7vw,112px)/.92 var(--f);letter-spacing:-.045em;margin:0}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:680px;padding:0 var(--pad)}   /* round 42: svh = the screen with the phone's browser bars showing, so the first screen ends above them (main.js raises min-height on short phones) */
.hero-cats{position:absolute;left:var(--pad);right:var(--pad);top:56px;z-index:5;display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.hero-cats::-webkit-scrollbar{display:none}
.hc{flex:0 0 auto;font:600 15px/1 var(--f);color:var(--fg2);background:rgba(255,255,255,.04);border:1px solid rgba(242,239,234,.28);border-radius:999px;padding:9px 15px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.hc:hover{color:var(--fg);border-color:rgba(242,239,234,.65)}
.hc.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hero-in{position:absolute;left:var(--pad);top:calc(clamp(110px,17vh,170px) + 18px);max-width:44vw;width:max-content}   /* its width = the text, so the game can sit right next to it */
.name{margin:0;font:500 clamp(76px,9.4vw,160px)/.86 var(--f);letter-spacing:-.06em}
.name .ln{display:block;overflow:hidden;padding-bottom:.04em}
.name .ln>span{display:block}
.line{margin:26px 0 0;font-size:clamp(19px,1.5vw,23px);color:var(--fg2)}
.line em{font:italic 400 1.25em/1 var(--fs);color:var(--fg)}
.go{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:40px;color:var(--fg);width:max-content}   /* round 27: the arrow centred under the text, as in Ran's picture */
.go-t{font:600 clamp(24px,2vw,30px)/1 var(--f);letter-spacing:-.01em;transition:color .25s}
.go:hover .go-t{color:var(--gold)}
/* the big arrow: bobs down; when you scroll (or click) it turns to point up and burns away in flames (main.js → goFx) */
.go-arrow{position:relative;display:block;width:85.4%;aspect-ratio:311/309;margin-top:18.7%;contain:inline-size;animation:goBob 1.5s ease-in-out infinite}   /* Ran's picture, measured: 85 % of the text's width, nearly square, 19 % of it below the text */
.go-arrow svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:butt}
@keyframes goBob{0%,100%{translate:0 0}50%{translate:0 12px}}
@media (prefers-reduced-motion:reduce){.go-arrow{animation:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(244,196,106,.55)}70%{box-shadow:0 0 0 14px rgba(244,196,106,0)}100%{box-shadow:0 0 0 0 rgba(244,196,106,0)}}
.drag-hint{position:absolute;right:var(--pad);top:clamp(110px,17vh,170px);margin:0;font:italic 400 18px/1 var(--fs);color:var(--fg3)}

/* latest: parked further down the page for now (after the Lab) */
.latest{position:relative;z-index:2;padding:16vh var(--pad) 6vh}
.latest-k{margin:0 0 14px;font:600 15px/1 var(--f);color:var(--gold);display:flex;align-items:center;gap:10px}
.latest-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.latest-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1200px}
.lt{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:10px;border-radius:18px;background:rgba(18,18,26,.62);box-shadow:0 0 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .5s var(--ease),box-shadow .4s,background .4s}
.lt:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(244,196,106,.55),0 18px 40px -10px rgba(0,0,0,.6);background:rgba(26,26,36,.75)}
.lt .ph{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#111}
.lt .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.lt:hover .ph img{transform:scale(1.08)}
.lt h3{margin:0;font:600 16px/1.25 var(--f)}
.lt p{margin:4px 0 0;font-size:14px;line-height:1.35;color:var(--fg2)}

/* work: the wall is in WebGL, the section gives it scroll length */
.work{position:relative}
/* section titles: v1's big Anton */
.big{font:400 clamp(72px,10vw,168px)/.86 var(--fd);margin:0;letter-spacing:-.005em;text-transform:uppercase}
.work-head{padding:clamp(90px,12vh,130px) var(--pad) 0;color:var(--fg)}
/* the categories: one row, big and clear, pinned under the top bar while the wall scrolls */
.chips-bar{position:sticky;top:44px;z-index:2;padding:22px var(--pad) 18px;background:transparent;transition:background .3s}
.chips-bar.stuck{background:#160D45;box-shadow:0 14px 24px -14px rgba(0,0,0,.6)}   /* a solid strip: the wall slides under it */
.chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.chips-bar.in:not(.done) .chips{overflow:visible}   /* while the wave plays nothing clips the buttons; the row scrolls sideways again after */
.chips::-webkit-scrollbar{display:none}
.chip{flex:1 1 auto;white-space:nowrap;font:700 clamp(14px,1.2vw,19px)/1 var(--f);color:var(--fg);background:rgba(22,13,69,.6);border:2px solid rgba(242,239,234,.85);border-radius:999px;padding:13px 14px;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s,color .25s,transform .4s var(--ease)}
.chip sup{font-size:12px;font-weight:600;margin-left:6px;opacity:.6;vertical-align:top}
.chip:hover{transform:translateY(-2px)}
/* the categories rise from below one by one, each ~7 frames after the one before (no bounce) */
.chips-bar:not(.in) .chip{opacity:0;transform:translateY(56px)}
.chips-bar.in .chip{animation:chipUp .65s cubic-bezier(.22,.7,.3,1) backwards;animation-delay:calc(var(--i) * 110ms)}
@keyframes chipUp{0%{opacity:0;transform:translateY(56px)}100%{opacity:1;transform:none}}
.chips-bar.out .chip{animation:chipDown .45s cubic-bezier(.5,0,.75,.3) both;animation-delay:calc(var(--r) * 80ms)}   /* backwards: the last button leaves first */
@keyframes chipDown{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(56px)}}
.chips-bar.out .chips{overflow:visible}
@media (prefers-reduced-motion:reduce){.chips-bar.in .chip,.chips-bar.out .chip{animation:none}}
.chip.on{background:var(--fg);color:var(--bg)}.chip.on sup{opacity:.75}
.more-wrap{position:fixed;left:0;right:0;bottom:5vh;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:4;opacity:0;transform:translateY(30px);pointer-events:none;transition:opacity .5s,transform .7s var(--ease)}
.more-wrap.show{opacity:1;transform:none}
.more-wrap.show .more{pointer-events:auto}
.more{pointer-events:none;padding:18px 30px;border-radius:999px;border:0;background:var(--gold);color:#121018;font:700 17px/1 var(--f);cursor:pointer;box-shadow:0 18px 40px -12px rgba(244,196,106,.45);transition:transform .5s var(--ease)}
.more:hover{transform:translateY(-3px) scale(1.02)}
.more-note{margin:0;font-size:15px;color:var(--fg3)}
.more-wrap.gone{display:none}

/* LAB: own colour, own background animation, a vertical grid of tool thumbnails */
.lab{position:relative;padding:10vh var(--pad) 22vh}
.lab-head{max-width:620px;margin-bottom:64px}
.lab-head p{margin:20px 0 0;font-size:21px;color:rgba(255,255,255,.82);max-width:34ch}
/* the tools as collectible cards (v1): dealt face down, they flip as they arrive and flip back when you scroll up */
.lab .big{color:var(--sun)}
.deckgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,38px);perspective:1600px}
.tc{position:relative;display:block;aspect-ratio:5/7;transform-style:preserve-3d;transition:transform .9s var(--ease);color:#fff}
.tc .fc,.tc .bk{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.tc .bk{transform:rotateY(180deg);background:radial-gradient(circle at 50% 50%,rgba(255,200,58,.25) 0 16%,transparent 16.5%),repeating-linear-gradient(45deg,#1c1830 0 10px,#141124 10px 20px);border:7px solid var(--sun);display:grid;place-items:center;font:400 64px/1 var(--fd);color:var(--sun)}
.tc .fc{background:linear-gradient(165deg,#24202f,#121019);border:1.5px solid rgba(255,200,58,.4);display:flex;flex-direction:column;padding:12px;box-shadow:0 40px 70px -30px rgba(0,0,0,.9)}
.tc .ph{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#000}
.tc .ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.tc .num{display:flex;align-items:baseline;justify-content:space-between;margin:18px 6px 0}
.tc .num b{font:400 56px/.9 var(--fd);color:var(--sun)}
.tc .num i{font:italic 400 19px/1 var(--fs);color:rgba(255,255,255,.62)}
.tc h3{margin:14px 6px 0;font:400 clamp(30px,2.6vw,42px)/.95 var(--fd);text-transform:uppercase;letter-spacing:.005em}
.tc p{margin:12px 6px 0;font-size:16px;line-height:1.45;color:rgba(255,255,255,.76)}
.tc .foil{position:absolute;inset:0;border-radius:22px;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;transition:opacity .4s;
  background:linear-gradient(115deg,transparent 20%,rgba(255,80,180,.55) 36%,rgba(80,220,255,.55) 48%,rgba(255,230,90,.55) 60%,transparent 76%);background-size:220% 220%}
.tc:hover .foil{opacity:.75}
.tc.down{transform:rotateY(180deg) translateY(60px)}

/* clients: a full-width bright strip, three rows drifting (v1) */
.clients{position:relative;z-index:3;background:#fff;padding:60px 0 20px;overflow:hidden}
.marq{display:flex;align-items:center;gap:72px;width:max-content;min-height:104px;margin-bottom:40px;padding-right:72px;will-change:transform}
.clogo{flex:0 0 auto;display:flex;align-items:center}   /* the logos straight on the white strip, no frames */
.clogo.dark{background:var(--ink);border-radius:10px;padding:8px 12px}   /* white logos need a dark backing or they vanish */
.clogo img{display:block;width:var(--w);height:var(--h);object-fit:contain}   /* --w/--h: each logo's own size so they all look equal (main.js → logoSize) */

/* about */
.about{height:220vh}
.pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 var(--pad)}
.side{max-width:440px;position:relative}
.side.right{margin-left:auto}
.lead{margin:22px 0 0;font-size:clamp(20px,1.7vw,26px);line-height:1.4;max-width:26ch}
.photo{position:absolute;left:calc(var(--pad) + 22vw);top:50%;width:min(30vh,300px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  display:grid;place-items:center;text-align:center;font:italic 400 20px/1.2 var(--fs);color:var(--fg3);background:radial-gradient(circle at 35% 30%,#1d1d29,#0b0b11);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 80px rgba(113,167,255,.18)}
.btn{display:inline-flex;align-items:center;gap:12px;margin-top:40px;padding:15px 24px;border-radius:999px;background:var(--fg);color:#0b0b10;font-weight:600;font-size:16px;transition:transform .5s var(--ease)}
.btn span{transition:transform .5s var(--ease)}.btn:hover{transform:translateY(-2px)}.btn:hover span{transform:translateX(5px)}

/* CONTACT (v1's layout) */
.contact{position:relative;z-index:3;background:var(--sun);color:var(--ink);padding:150px var(--pad) 40px;overflow:hidden}
.hello{margin:0;font:400 clamp(90px,17vw,300px)/.82 var(--fd);white-space:nowrap;text-transform:uppercase}
.email{display:inline-block;margin-top:40px;font:italic 400 clamp(36px,5.4vw,92px)/1 var(--fs);border-bottom:2px solid var(--ink);padding-bottom:6px;transition:color .3s}
.email:hover{color:var(--hot);border-color:var(--hot)}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:56px}
.socials a{padding:12px 20px;border:1.5px solid var(--ink);border-radius:999px;font-weight:600;font-size:16px;transition:background .3s,color .3s}
.socials a:hover{background:var(--ink);color:var(--sun)}
.foot{display:flex;justify-content:space-between;margin-top:140px;font-size:15px;font-weight:500}

@media (max-width:900px){
  .hero-cats{top:50px}
  .bar nav{display:none}
  .hero-in{max-width:none;top:auto;bottom:44px}   /* round 42: a tighter name block, so it and the game panel share a phone's screen */
  .line{margin-top:14px;font-size:17px}
  .go{margin-top:20px}.go-t{font-size:20px}
  .go-arrow{width:62%;margin-top:12%}
  .name{font-size:18vw}
  .game-pad{display:block}
  .latest{padding-top:10vh}
  .drag-hint{display:none}
  .latest-row{grid-template-columns:1fr;max-width:none;gap:8px}
  .lt{grid-template-columns:84px 1fr}
  .chips-bar{top:44px;padding-top:14px;padding-bottom:12px}
  .chips-bar::before{height:46px}
  .chip{flex:0 0 auto;font-size:15px;padding:11px 16px}
  .deckgrid{grid-template-columns:1fr}
  .tc{aspect-ratio:4/5}
  .tc .num b{font-size:36px}.tc h3{font-size:22px}.tc p{font-size:14px}
  .clogo img{width:calc(var(--w) * .68);height:calc(var(--h) * .68)}.marq{gap:44px;padding-right:44px;min-height:72px;margin-bottom:26px}.clients{padding:40px 0 14px}
  .hello{font-size:21vw}
  .pin{align-items:flex-end;padding-bottom:9vh}
  .side.right{margin:0;padding:22px;border-radius:20px;background:rgba(10,10,14,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .photo{left:50%;top:32%}
  .lever{height:170px}.lever .stick{height:110px}.lever.pull .knob{transform:translateY(100px)}
  .cab{padding:22px 18px 18px}
  .reel,.sym{width:18vw;height:18vw}
  .reels{gap:7px;padding:7px}
  .win-line{top:calc(22px + 7px + 9vw)}
  .lever{width:36px;margin-left:4px}
  .lever .knob{width:32px;height:32px;margin-left:-16px}
}
@media (prefers-reduced-motion:reduce){.grain,.lights i{animation:none}}
.prize.on ~ .plain-mail{display:none}

/* WHITE HERO (test, 2026-10-14; main.js HERO = 'white' / ?hero=white): the top section on white, the games area stays a black panel.
   Everything in the hero that sat on black goes to v1's ink; inside the black panel the game tabs keep their light colours. */
.hero-white .hero{--fg:#1A0F6B;--fg2:rgba(26,15,107,.74);--fg3:rgba(26,15,107,.5);--bg:#fff;color:var(--fg)}
.hero-white .hc{background:rgba(26,15,107,.04);border-color:rgba(26,15,107,.3)}
.hero-white .hc:hover{border-color:rgba(26,15,107,.75)}
.hero-white .hc.on{background:var(--fg);color:#fff;border-color:var(--fg)}
.hero-white .go:hover .go-t{color:var(--hot)}
.hero-white .games{--fg:#F2EFEA;--fg2:rgba(242,239,234,.74)}
.hero-white .work-head{position:relative}
.hero-white .work-head .big.ink{position:absolute;left:var(--pad);top:clamp(90px,12vh,130px);color:#1A0F6B;pointer-events:none}   /* the WORK title's ink copy (main.js cuts it along the wave line) */
.hero-white .loader{background:#fff;color:#1A0F6B}
.hero-white .loader circle{stroke:rgba(26,15,107,.12)}
.hero-white .loader circle.p{stroke:var(--hot)}
.hero-white .loader p{color:rgba(26,15,107,.74)}

/* v5 SKY HERO (Ran 2026-10-18; main.js HERO = 'sky', ?sky=blue | green): ink text over a live painted sky, the game area as a glossy glass screen.
   ink = the text colour measured in his two pictures; air = the sky's colour (loader) */
.hero-sky{--ink:#0A0F1E;--ink-rgb:10,15,30;--air:#86AEB6}
.hero-sky[data-sky=green]{--ink:#06221A;--ink-rgb:6,34,26;--air:#8DB295}
.hero-sky .hero{--fg:var(--ink);--fg2:rgba(var(--ink-rgb),.8);--fg3:rgba(var(--ink-rgb),.55)}
.hero-sky .hc{background:#fff;border-color:rgba(var(--ink-rgb),.5)}   /* round 22 (Ran): the unselected ones white, not see-through */
.hero-sky .hc:hover{border-color:var(--ink)}
.hero-sky .hc.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero-sky .bar.light{--fg:var(--ink);--fg2:rgba(var(--ink-rgb),.88);color:var(--ink)}
.hero-sky .bar.light .lang .cur{background:rgba(255,255,255,.12);border-color:rgba(var(--ink-rgb),.4)}
.hero-sky .loader{background:var(--air);color:var(--ink)}
.hero-sky .loader p{color:rgba(var(--ink-rgb),.78)}
.hero-sky .loader circle{stroke:rgba(var(--ink-rgb),.15)}
#skyFront{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:30;pointer-events:none;visibility:hidden}
.sky-switch{position:fixed;right:16px;bottom:16px;z-index:60;display:none;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px -10px rgba(0,0,0,.4);transition:opacity .4s}
.hero-sky.pours .sky-switch{display:flex}   /* round 42: the pour switcher only with ?pours in the address (a working control, not for visitors) */
.sky-switch a{font:600 13px/1 var(--f);color:var(--ink);padding:9px 14px;border-radius:999px}
.sky-switch a.on{background:var(--ink);color:#fff}
.sky-switch.away{opacity:0;pointer-events:none}
.sky-switch button{font:600 13px/1 var(--f);color:var(--ink);padding:9px 14px;border-radius:999px;background:none;border:0;cursor:pointer}
.sky-switch button.on{background:var(--ink);color:#fff}   /* round 25: the pour switcher */
.hero-sky .chips-bar{overflow-x:clip}   /* round 5: the rising buttons used to stick out sideways on phones and widen the page for ~2 s, right as Work opens */

/* round 6: the longer line wraps under the name, so the text block (and the game next to it) keeps its width; phones use the full width */
.hero-sky .line{min-width:100%;max-width:calc(30vw - 56px - var(--pad));text-wrap:pretty;line-height:1.35;font-weight:600;color:var(--fg)}   /* round 7: one style, bolder (no italic serif) */   /* as wide as it can be without pushing the game (gameLayout: the panel starts at 30vw) */
@media (max-width:900px){.hero-sky .hero-in{width:auto;right:var(--pad)}.hero-sky .line{min-width:0;max-width:none}}

/* round 6 — CONTACT at the bottom of the ocean (Ran: "the contact is in the bottom of the ocean… an octopus sitting on treasures and gold, animated and
   realistic… small fishes and bubbles"; "too long a scroll from About to Contact in which nothing happens"). The About pin is shorter, and after it you
   sink through the water (the section's background, darker as you go down; sea.js draws the surface, light, specks, bubbles and fish in page space)
   onto the floor: art/octopus.mp4, its top faded into the water. */
.hero-sky .about{height:100vh}   /* round 7: no pinned scroll at all (and no orbiting works) */
.hero-sky .pin{padding-bottom:16vh}.hero-sky .photo{top:42%}   /* About sits above the sea, whose surface shows along its bottom */
.sea{--sea0:#5E928F;--sea1:#2D6870;--sea2:#1B4654;padding:0;color:#F2EFEA;overflow:clip;
  background:linear-gradient(180deg,var(--sea0) 0,var(--sea1) 22%,var(--sea2) 50%,var(--sea2) 100%) 0 128px/100% calc(100% - 128px) no-repeat}
.hero-sky .sea{margin-top:calc(-16vh - 110px)}   /* round 7: the sea starts inside About — its surface (110px into this section) runs along About's bottom */
[data-sky=green] .sea{--sea0:#649A8D;--sea1:#2F6C6E}
.sea-fx{position:sticky;top:0;display:block;width:100%;height:100vh;margin-bottom:-100vh;z-index:1;pointer-events:none}
.sea-down{height:calc(110px + 20vh)}   /* round 7: less empty water (was 40vh below a whole screen of rising water) */
.sea-floor{position:relative;min-height:100vh;display:flex;flex-direction:column;padding:15vh var(--pad) 32px}
.sea-floor::after{content:'';position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(rgba(6,18,22,0),rgba(6,18,22,.6));z-index:1;pointer-events:none}
.sea-octo{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%);mask-image:linear-gradient(180deg,transparent 0,#000 26%)}
.sea-in,.sea .foot{position:relative;z-index:2}
.sea .hello{font-size:clamp(80px,11vw,190px);line-height:.84;white-space:normal;text-shadow:0 2px 30px rgba(4,20,26,.35)}
.sea .hello span{display:block}
.sea .email{margin-top:34px;color:#F2EFEA;border-color:rgba(242,239,234,.85);font-size:clamp(30px,3.6vw,60px)}
.sea .email:hover{color:var(--gold);border-color:var(--gold)}
.sea .socials{margin-top:40px;max-width:36vw}
.sea .socials a{border:0;padding:13.5px 21.5px;color:#fff;background:#000}   /* round 28 (Ran: "footer social buttons — black and no outline") */
.sea .socials a:hover{background:#1d1d22;color:var(--gold)}
.sea .foot{margin-top:auto;color:rgba(242,239,234,.9)}
@media (max-width:900px){
  .sea-down{height:calc(110px + 16vh)}
  .sea-floor{padding-top:10vh}
  .hero-sky .pin{padding-bottom:26vh}.hero-sky .photo{top:26%}
  .sea-octo{height:58%;object-position:82% 100%}   /* round 14: the collage octopus — the octopus and most of the open chest */
  .sea .hello{font-size:19vw}
  .sea .socials{max-width:none}
}

/* round 7 (Ran: "the cards on the Lab are too tall and no content in them, trim them shorter"): a card is as tall as its picture + text.
   The front face is in the flow and sets the height; the back face (for the flip) covers it. Cards in a row match the tallest. */
.hero-sky .tc{display:flex;aspect-ratio:auto}
.hero-sky .tc .fc{position:relative;inset:auto;flex:1;padding-bottom:22px}
@media (max-width:900px){.hero-sky .tc{aspect-ratio:auto}}
/* round 7 (Ran: "each social media link needs a clear relevant icon, and do not underline my email address") */
.sea .email{border-bottom:0;padding-bottom:0}
.sea .socials a{display:inline-flex;align-items:center;gap:10px}
.sea .socials svg{width:19px;height:19px;flex:none}

/* round 9 (Ran: "use this background — the sky and clouds only — for the About instead of the dark"): art/about-sky.webp = his stage sketch with the
   whale, curtain, spotlight, floor and interface removed (Nano Banana Pro edit, art/raw/about/); About's text turns ink like the hero's */
.hero-sky .about{background:#A9C2B6 url(art/about-sky.webp) center 30%/cover no-repeat;--fg:var(--ink);--fg2:rgba(var(--ink-rgb),.8);color:var(--ink)}
.hero-sky .about .lead{color:rgba(var(--ink-rgb),.82)}
.hero-sky .about .btn{background:var(--ink);color:#F2EFEA}
@media (max-width:900px){.hero-sky .side.right{background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.5)}}
.hero-sky .about .photo{background:rgba(255,255,255,.26);color:rgba(var(--ink-rgb),.6);box-shadow:0 0 0 1.5px rgba(255,255,255,.7) inset,0 20px 50px -20px rgba(10,30,40,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}   /* the placeholder as light glass on the sky (it was a dark disc for the dark ground) */
@media (max-width:900px){.hero-sky .about .photo{top:19%;width:min(24vh,220px)}}

/* round 10: the whale floats behind About's text (whale.js); the sea's top is toned to About's sky (sea.js: sky-coloured skin, warm glints, a haze over the water) */
.whale-fx{display:none}
.hero-sky .about{position:relative}
.hero-sky .whale-fx{display:block;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-sky .about .pin{z-index:1}
@media (max-width:900px){.hero-sky .pin{padding-bottom:22vh}.hero-sky .about .photo{top:27%;width:min(18vh,160px)}}   /* phones: room for the whale above the photo */

/* round 11 (Ran: "the text on the left, the whale above it, my photo on the right, and the ship goes right to left") */
@media (min-width:901px){
  .hero-sky .pin{align-items:flex-start;padding-top:40vh;padding-bottom:0}   /* round 28: 10vh lower, under the whale */
  .hero-sky .side.right{margin-left:calc(11vw - var(--pad))}   /* lined up under the whale (whale.js) */
  .hero-sky .about .lead{max-width:34ch}
  .hero-sky .about .btn{margin-top:28px}
  .hero-sky .about .photo{left:calc(100% - var(--pad) - 22vw)}
}
@media (max-width:900px){.hero-sky .about .photo{left:70%}}

/* v5 round 19 (Ran: "change the background of lab to this image"): the Lab's world is his cream wall (art/lab-wall-wide.webp on desktop, -phone on phones),
   sliding slowly up as you scroll through the Lab (main.js); the old blue and its dot field are off in the sky versions */
.lab-wall{display:none}
.hero-sky .lab-world{background:#E9E2D2}
.hero-sky .lab-wall{display:block;position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform}
.hero-sky #labFx{display:none}
.hero-sky .lab .big{color:var(--ink)}
.hero-sky .lab-head p{color:rgba(var(--ink-rgb),.78)}
.hero-sky .tc .fc{box-shadow:0 34px 60px -30px rgba(70,52,26,.5)}   /* a softer, warm shadow on the light wall (it was black on blue) */
.hero-sky .chips-bar.stuck,.hero-sky .chips-bar.stuck::before{background:#010D1B}   /* round 24: the pinned strip in the starry sky's navy (was indigo #160D45) */
.hero-sky .chip:not(.on){background:rgba(1,13,27,.6)}   /* the buttons the same navy (were indigo) */

/* rounds 28–30: four rounds of font options tried; Ran: "i dont like any of the fonts so let's keep it as is" (round 31) — Inter Tight + Anton stay, the switcher is gone */


/* round 30 (Ran: "in the about me page there has to be a much longer text, look at the one in my current site. font can get smaller"):
   his ranaviv.com About text in smaller type; About grows with it (no longer one screen tall), the whale stays where it was (whale.js: of the screen height) */
.bio{margin-top:22px}
.bio p{margin:0 0 1em;font-size:clamp(15px,1.12vw,17.5px);line-height:1.62;text-wrap:pretty}
.bio p:last-child{margin-bottom:0}
.hero-sky .about .bio{color:rgba(var(--ink-rgb),.84)}
.hero-sky .about{height:auto;min-height:100vh}
.hero-sky .about .pin{position:relative;height:auto;min-height:100vh}
@media (min-width:901px){
  .hero-sky .about .pin{padding-bottom:calc(16vh + 90px)}   /* clear of the sea, whose surface overlaps About's bottom 16vh */
  .hero-sky .about .side.right{max-width:min(600px,46vw)}
  .hero-sky .about .photo{top:42vh}
}
@media (max-width:900px){
  .hero-sky .about .pin{align-items:flex-start;padding-top:calc(27vh + min(9vh,80px) + 26px);padding-bottom:calc(16vh + 60px)}   /* the panel under the whale and the photo */
  .hero-sky .about .photo{top:27vh}
  .bio p{font-size:15px;line-height:1.58}
}

/* v5 round 32: living cells behind the AI Lab (cells.js) instead of the wall picture; their switcher sits bottom left (the pour switcher is bottom right) */
.hero-sky .lab-world.cells-on .lab-wall{display:none}
/* round 33: on the dark Neon look the Lab's title and line are light */
.hero-sky .lab.on-dark .big{color:#fff}
.hero-sky .lab.on-dark .lab-head p{color:rgba(255,255,255,.8)}

/* round 37 (Ran: "the about me text is too small and long, put it inside a box that can continue into behind the waves"): bigger type in a frosted-glass
   box (the photo circle's glass); the box runs on past the waterline, so the sea's waves wash over its lower part — all the text ends above the water.
   --sink: how far the box goes on below the text (its last 16vh + 60px are under the sea, which is drawn over About). */
.hero-sky .about .bio{--sink:calc(16vh + 130px);margin-top:26px;padding:40px 44px var(--sink);margin-bottom:calc(-16vh - 60px);border-radius:28px;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(14px) saturate(1.08);backdrop-filter:blur(14px) saturate(1.08);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.72) inset,0 24px 60px -28px rgba(10,30,40,.4);color:rgba(var(--ink-rgb),.9)}
.hero-sky .about .bio p{font-size:clamp(18px,1.42vw,21px);line-height:1.6;margin-bottom:.9em}
.hero-sky .about .bio p:last-child{margin-bottom:0}
@media (min-width:901px){
  .hero-sky .about .side.right{max-width:min(720px,50vw)}
  .hero-sky .about .pin{padding-bottom:16vh}   /* the box itself now keeps the text clear of the water */
}
@media (max-width:900px){
  .hero-sky .about .side.right{background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}   /* phones: the box is the bio itself (no box in a box) */
  .hero-sky .about .bio{--sink:calc(16vh + 110px);padding:24px 22px var(--sink);margin-bottom:calc(-16vh - 50px);border-radius:22px}
  .hero-sky .about .bio p{font-size:17px;line-height:1.56}
  .hero-sky .about .pin{padding-bottom:16vh}
}

/* round 42 (Ran: "adjust it to mobile; make sure it works on desktop and mobile on any browser, so that people that open the link from WhatsApp see it well") */
/* the phone menu: ☰ in the bar (the bar's own colour), the four items over the page on frosted white */
.burger{display:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--fg);-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:49;touch-action:none;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:44px var(--pad) 0;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);color:#0A0F1E;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.mnav.open{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.mnav a{font:600 clamp(36px,9.5vw,48px)/1.15 var(--f);letter-spacing:-.03em;color:rgba(10,15,30,.62);padding:6px 0;transform:translateY(14px);opacity:0;transition:transform .5s var(--ease),opacity .4s,color .25s}
.mnav.open a{transform:none;opacity:1}
.mnav.open a:nth-child(2){transition-delay:.05s}.mnav.open a:nth-child(3){transition-delay:.1s}.mnav.open a:nth-child(4){transition-delay:.15s}
.mnav a.on,.mnav a:hover{color:#0A0F1E}
.menu-open .bar{color:#0A0F1E;--fg:#0A0F1E;--fg2:rgba(10,15,30,.8)}   /* the bar's logo and ☰ in ink over the white menu, whatever section is under it */
.menu-open .bar::before{opacity:0!important}
@media (max-width:900px){.burger{display:flex;margin-left:auto}.lang{margin-left:6px}}

/* the PLAIN page (fallback.js: no WebGL 2, or the page never started): the painted sky behind the name, the works as a simple grid on the starry sky,
   the Lab cards on the cream wall, About and Say hello as they are. Nothing moves, everything reads. */
.no-gl #gl,.no-gl #game,.no-gl #skyFront,.no-gl .lab-world,.no-gl .vignette,.no-gl .sky-switch,.no-gl .game-pad,.no-gl .games,.no-gl .more-wrap,.no-gl #workUi,.no-gl .hero-cats,.no-gl .sea-fx,.no-gl .whale-fx{display:none!important}
.no-gl .bar{color:#0A0F1E;--fg:#0A0F1E;--fg2:rgba(10,15,30,.8)}
.no-gl .bar::before{opacity:1}
.no-gl .hero{background:#86AEB6 url(art/sky-blue.webp) center bottom/cover no-repeat;--fg:#0A0F1E;--fg2:rgba(10,15,30,.8);color:#0A0F1E}
.no-gl .hero-in{top:auto;bottom:12vh}
.no-gl .name .ln>span,.no-gl .line,.no-gl .go{transform:none!important;opacity:1!important}
.no-gl .work{background:#010D1B url(art/work-stars.webp) center/cover;margin-top:0!important;height:auto!important;padding-bottom:70px;color:#F2EFEA}
.no-gl .work-head{color:#F2EFEA;padding-bottom:10px}
.plain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px;padding:24px var(--pad) 0}
.plain-grid a{display:block;color:#F2EFEA}
.plain-grid img{display:block;width:100%;aspect-ratio:1.279;object-fit:cover;border-radius:12px;background:#121218}
.plain-grid span{display:block;margin-top:9px;font:600 15px/1.3 var(--f)}
@media (max-width:900px){.plain-grid{grid-template-columns:1fr 1fr;gap:16px 12px}.plain-grid span{font-size:14px}}
.no-gl .lab{background:#E9E2D2}
.no-gl .lab .big{color:#0A0F1E}.no-gl .lab-head p{color:rgba(10,15,30,.78)}
.no-gl .tc .fc{box-shadow:0 24px 50px -30px rgba(70,52,26,.5)}
.no-gl .hero-sky .about .bio{margin-bottom:0;padding-bottom:40px}
.no-gl .sea{margin-top:0}

/* round 44 (Ran: "space a bit between say and hello, i don't like this style where 2 lines touch each other"): the two lines of the big title apart */
.sea .hello{line-height:.94}
.sea .hello span+span{margin-top:.05em}   /* round 46 (Ran: "now make the line spacing between say and hello a bit smaller"): the gap ≈ a quarter of the type size (was ≈ .39) */

/* round 48 (Ran: "remove all the empty space between the about title and the logos above"): desktop — ABOUT starts right under the client logos
   (it sat 40vh down since round 28, to leave room for the whale above the text; the whale floats beside the text since round 43). The photo circle
   moves up with it: its top level with the title's. Phones unchanged (the whale and the photo still sit above the text there). */
@media (min-width:901px){
  .hero-sky .about .pin{padding-top:82px}   /* round 49 (Ran: "add 30 pixels above the about title and extra 10 pixels between the about title and the text box"); round 50: "add 20 px more" */
  .hero-sky .about .photo{top:calc(82px + min(30vh,300px) / 2)}
  .hero-sky .about .bio{margin-top:36px}
}

/* round 51 — Ran's phone notes (phones only; desktop unchanged) */
@media (max-width:900px){
  .hero-cats{pointer-events:auto;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}   /* 1. "the main nav doesn't scroll horizontally": the row itself takes the finger (it let touches through to the page) */
  .chips{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .hero-sky .games,.hero-sky .game-pad{display:none!important}   /* 2. no game on phones (main.js NOGAME) */
  .bar{gap:6px}.burger{order:-1;margin-left:-11px}.lang{margin-left:auto}   /* 3. the ☰ on the left of "Ran Aviv" (its lines on the page margin) */
  .hero-sky .line{font-size:24px}   /* 4. "I am an Art Director…" 17 → 24 px */
  .big{font-size:calc(clamp(72px,10vw,168px) + 15px)}   /* 6. the big titles (WORK, AI LAB, ABOUT) +15 px */
  .sea .hello{font-size:calc(19vw + 15px)}   /* …and SAY HELLO */
  .lab{padding-bottom:calc(11vh + 10px)}   /* 8. last Lab card → the logos: half at every height (166 → 83 px at 390×844, 127 → 63 at 375×667) */
  .sea-down{height:calc(110px + 6.4vh)}.sea-floor{padding-top:4vh}   /* 10. the water → SAY HELLO: 60 % less (16vh + 10vh → 6.4vh + 4vh) */
  .sea .socials{flex-wrap:nowrap;gap:8px;max-width:none}   /* 11. the socials: icons only, one line, above the octopus */
  .sea .socials a{flex:1 1 0;max-width:52px;aspect-ratio:1;padding:0;justify-content:center;border-radius:50%}
  .sea .socials a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sea .socials svg{width:21px;height:21px}
  .hero-sky .about .photo{top:calc(27vh + 50px)}   /* 9. the bigger whale: the photo circle and ABOUT move down to clear its fin */
  .hero-sky .about .pin{padding-top:calc(27vh + min(9vh,80px) + 76px)}
}

/* round 52 (Ran, phones: "you removed the game part on mobile, so move the title and text up"): the name block sits under the category row
   (it sat at the bottom of the screen, under the game) — the clouds keep the bottom of the first screen */
@media (max-width:900px){
  .hero-sky .hero-in{top:calc(96px + 4vh);bottom:auto}
}

/* round 54 (Ran, phones: "the categories menu cannot be cropped when it gets to the margins. it should use full screen width"): both category rows run
   edge to edge; at rest the first button still starts on the page margin, and scrolled to the end the last one stops on the margin (a spacer, since
   some browsers drop a scroller's end padding) */
@media (max-width:900px){
  .hero-cats{left:0;right:0;padding:2px 0 2px var(--pad)}
  .hero-cats::after{content:"";flex:0 0 calc(var(--pad) - 7px)}
  .chips-bar{padding-left:0;padding-right:0}
  .chips{padding:2px 0 2px var(--pad)}
  .chips::after{content:"";flex:0 0 calc(var(--pad) - 8px)}
}

/* round 56 (2026-10-21): a clicked work grows out of the wall into the project page (main.js openWork) */
.grow{position:fixed;z-index:95;overflow:hidden;border-radius:12px;pointer-events:none;will-change:left,top,width,height}
.grow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.grow i{position:absolute;inset:0;opacity:0}
.chips-bar.instant .chip{animation:none!important;opacity:1;transform:none}   /* round 56: arriving at Work from a project page, the buttons are simply there */
/* round 57: the works as plain links for keyboard and screen-reader visitors (main.js wallListBuild) — never seen; fixed, so focusing one never makes the browser jump the page */
.wall-list{position:fixed;left:0;top:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;list-style:none;pointer-events:none}
/* the ring around the work that has the keyboard's focus (main.js kbRingDraw): 2 px, light on the night sky, under the pinned Work buttons */
.kb-ring{position:fixed;left:0;top:0;z-index:1;border:2px solid var(--fg);pointer-events:none;opacity:0;transition:opacity .15s}
.kb-ring.on{opacity:1}
.no-gl .wall-list,.no-gl .kb-ring{display:none!important}

/* round 58 — Ran: "i don't like my huge name there. change it to Hi, I'm Ran Aviv. An Art Director..." — the giant two-line name (160 px on
   desktop, 18vw on phones) becomes a one-line greeting at headline size; the description line under it keeps its size */
.hero-sky .name{font:600 clamp(40px,3.4vw,60px)/1.06 var(--f);letter-spacing:-.025em}
@media (max-width:900px){.hero-sky .name{font-size:clamp(30px,9.4vw,42px)}}
/* round 58 — Ran: "we must hide the language menu for now and continue editing the hebrew later" (its code stays; remove this line to bring it back) */
.lang{display:none!important}
/* round 58 — Ran's photo in the About circle (was the "Your photo goes here" placeholder); the glass ring drawn over the picture */
.photo.has-img{overflow:hidden}
.photo.has-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.photo.has-img::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.7) inset;pointer-events:none}

/* round 59 — the Hebrew homepage (?lang=he, he.js): right to left; the Latin fonts first (brand names keep their look), Hebrew letters in
   Heebo (text) and Karantina (the big titles: condensed like Anton) */
html[lang="he"]{--f:'Inter Tight','Heebo',system-ui,-apple-system,sans-serif;--fd:'Anton','Karantina',Impact,sans-serif}
html[lang="he"] .big,html[lang="he"] .sea .hello{font-weight:700}
/* the layout mirrors through dir="rtl" (bar, category rows, Lab cards, text); the hero mirrors too (main.js gameLayout: the game on the left).
   About and Say hello keep their composition (the photo, the whale and the octopus are placed for it): only their text runs right to left. */
@media (min-width:901px){html[dir="rtl"] .hero-in{left:auto;right:var(--pad)}}   /* desktop: the text on the right; phones keep the full width */
html[dir="rtl"] #games,html[dir="rtl"] .clients{direction:ltr}
html[dir="rtl"] .about .pin,html[dir="rtl"] .sea-in{direction:ltr}
html[dir="rtl"] .about .side,html[dir="rtl"] .sea .hello{direction:rtl}
html[dir="rtl"] .sea .hello{text-align:left}
@media (max-width:900px){
  html[dir="rtl"] .burger{margin-left:0;margin-right:-11px}
  html[dir="rtl"] .hero-cats{padding:2px var(--pad) 2px 0}
  html[dir="rtl"] .chips{padding:2px var(--pad) 2px 0}
}
/* the Lab's title + line stay on the left like the English page (the tube stands in the middle and pours to the right): the block hugs its text */
@media (min-width:901px){html[dir="rtl"] .lab-head{width:fit-content;margin-left:0;margin-right:auto}}
/* small italic labels: Hebrew has no italic — upright Heebo instead of the slanted serif */
html[lang="he"] .num i,html[lang="he"] .tc i:not(.foil){font-family:var(--f);font-style:normal}

/* round 60 — Ran's notes */
/* 1. desktop: the photo's top level with the text box's top (ABOUT starts 82px down, its height = .86 × its size, then 36px to the box) */
@media (min-width:901px){.hero-sky .about .photo{top:calc(82px + .86 * clamp(72px,10vw,168px) + 36px + min(30vh,300px) / 2)}}
/* 2. phones: the photo beside ABOUT, the two on one line above the box (the photo centred on the title's line, on the right; in Hebrew on the left) */
@media (max-width:900px){
  .hero-sky .about .photo{width:112px;left:calc(100% - var(--pad) - 56px);top:calc(27vh + min(9vh,80px) + 76px + .43 * (clamp(72px,10vw,168px) + 15px))}
  html[dir="rtl"].hero-sky .about .photo{left:calc(var(--pad) + 56px)}   /* .hero-sky is on <html> itself */
}
/* 4. "See my work" the same size as "I'm an Art Director…" (desktop clamp(19px,1.5vw,23px), phones 24px) */
.hero-sky .go-t{font-size:clamp(19px,1.5vw,23px)}
@media (max-width:900px){.hero-sky .go-t{font-size:24px}}
/* 5. phones: the links in one line like the desktop bar — no ☰ menu and no "Ran Aviv" */
@media (max-width:900px){
  .bar{gap:24px}
  .bar .logo,.burger{display:none!important}
  .bar nav{display:flex;gap:24px}
  .bar nav a{font-size:17px}
}

/* round 61 — Ran's notes */
/* "See my work": black, never pink (the white hero's hover turned it pink — on phones a tap leaves it "hovered"), bold, 2 px smaller than the
   line above, and the whole unit (text + arrow) bobs together, a bit further below the paragraph */
.hero-sky .go,.hero-sky .go:hover .go-t{color:var(--ink)}
.hero-sky .go-t{font-weight:700;font-size:calc(clamp(19px,1.5vw,23px) - 2px)}
.hero-sky .go{margin-top:56px;animation:goBob 1.5s ease-in-out infinite}
.hero-sky .go-arrow{animation:none}
@media (max-width:900px){.hero-sky .go-t{font-size:22px}.hero-sky .go{margin-top:32px}}
@media (prefers-reduced-motion:reduce){.hero-sky .go{animation:none}}
/* phones: the hero's category row 6 px lower */
@media (max-width:900px){.hero-cats{top:56px}}

/* round 63 (2026-10-23, Ran: "in the work categories buttons, put them all even if they break to more than one line, instead of having them
   scrollable"): the Work row wraps onto more lines instead of scrolling sideways (desktop and phones). Phones: each button its own width,
   on the page margins (round 54's edge-to-edge scroller undone). The hero's top category row is unchanged. */
.chips{flex-wrap:wrap;overflow:visible}
@media (max-width:900px){
  .chips,html[dir="rtl"] .chips{padding:2px var(--pad)}
  .chips::after{content:none}
  .chip{flex:0 0 auto}
}