/* Naor Alon - generated from the mockup by build.py. Edit the mockup, then run deploy/build.py. */
:root{
  --paper:#F3F4F1;
  --paper-2:#E4E7E2;
  --ink:#0C0E0D;
  --mute:#4E5551;
  --mute-d:#A3ABA6;
  --green:#1D6A45;
  --glow:#A8F07C;
  --forest:#0E2A1E;
  --space:#040605;
  --line:rgba(12,14,13,.14);
  --font:"Google Sans", "Arial Hebrew", system-ui, sans-serif;
  --mono:"Google Sans Code", ui-monospace, monospace;
  --gutter:clamp(16px, 4vw, 56px);
  --max:1360px;
  --sec:160px;
  --rowgap:96px;
  --ease:cubic-bezier(.22,1,.36,1);
  --tilt:-3deg;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
h1,h2,h3,p,blockquote{text-wrap:balance}
p{text-wrap:pretty}
em{font-style:normal;background:linear-gradient(to top,var(--glow) 0 .34em,transparent .34em);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.04em}
.dk em,#home em,.fb em{background:none;color:var(--glow);padding:0}
::selection{background:var(--green);color:var(--paper)}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;font-family:var(--mono);font-size:12px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:16px;font-weight:500;transition:background .25s,color .25s,transform .2s var(--ease)}
.btn:hover{background:var(--green)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.grain{position:absolute;inset:-50%;width:200%;height:200%;pointer-events:none;opacity:.07;background: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(0,0)}}

/* Modes: home = space, page = paper, ov = menu over the page */
body[data-mode="home"] #page,body[data-mode="home"] #mini{display:none}
body[data-mode="page"] #home{display:none}
body[data-mode="ov"] .lens{display:none}

/* Home */
#home{--lens:clamp(120px,22vmin,220px);--gap:clamp(48px,6vmin,60px);--cy:50%;position:fixed;inset:0;z-index:30;overflow:hidden;background:var(--space);color:var(--paper)}
#space{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(120% 90% at 50% 40%,#163a2a 0%,#07100c 55%,#040605 100%)}
.ship{position:absolute;top:0;left:0;z-index:1;width:22px;height:9px;pointer-events:none;opacity:0;will-change:transform,opacity}
.ship svg{position:relative;width:100%;height:100%;overflow:visible}
.ship::before{content:"";position:absolute;right:60%;top:50%;width:90px;height:1px;margin-top:-.5px;background:linear-gradient(90deg,transparent,rgba(214,250,190,.45))}
body[data-mode="ov"] :is(.ship,.start,#vids){display:none}
.veil{position:absolute;inset:0;background:rgba(4,6,5,.74);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);display:none}
body[data-mode="ov"] #home{background:transparent}
body[data-mode="ov"] .veil{display:block}
body[data-mode="ov"] :is(#space,#home>.grain,.who,.intro){display:none}
body:not([data-mode="ov"]) .b-home{display:none}
.who{position:absolute;top:max(18px,env(safe-area-inset-top));inset-inline-start:var(--gutter);z-index:3;line-height:1.25}
.who .name{font-size:20px;font-weight:500}
.who .role{color:var(--mute-d);margin-top:2px}
.lens{position:absolute;z-index:2;left:calc(50% - var(--lens) / 2);top:calc(var(--cy) - var(--lens) / 2);width:var(--lens);height:var(--lens);border-radius:50%;-webkit-tap-highlight-color:transparent}
.lens img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:50%;-webkit-mask:radial-gradient(circle closest-side,#000 95%,transparent 99.5%);mask:radial-gradient(circle closest-side,#000 95%,transparent 99.5%);transition:transform .6s var(--ease)}
.lens:hover img{transform:scale(1.04)}
.lens .glare{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 22% 12% at 31% 20%,rgba(255,255,255,.3),rgba(255,255,255,0) 100%),radial-gradient(circle at 74% 82%,rgba(255,255,255,.12),transparent 8%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.lens:focus-visible{outline:2px solid var(--glow);outline-offset:10px}
.intro{position:absolute;z-index:2;inset-inline:var(--gutter);top:calc(var(--cy) + var(--lens) / 2 + var(--gap));text-align:center;transition:opacity .4s var(--ease),visibility .4s}
#home.open .intro{opacity:0;visibility:hidden}
.intro h1{font-weight:500;font-size:clamp(26px,3.4vw,48px);line-height:1.12;max-width:20ch;margin-inline:auto}
@keyframes strike{to{stroke-dashoffset:0}}
@keyframes write{to{opacity:1;transform:translateY(0) rotate(var(--tilt))}}
@keyframes fade{to{opacity:1}}

/* Bubbles: glass buttons, placed by script */
#bubbles{position:absolute;inset:0;z-index:3;visibility:hidden;pointer-events:none}
#bubbles.shown{visibility:visible}
#bubbles ul{list-style:none}
.bub{position:absolute;left:0;top:0;border-radius:50%;pointer-events:auto;will-change:transform,opacity;-webkit-tap-highlight-color:transparent}
/* Clear glass, monochrome: the sky shows through, a liquid rim catches the light and a sheen slides round it. No colour inside. */
@property --ra{syntax:"<angle>";inherits:false;initial-value:0deg}
.b-in{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--d) * .05);color:var(--paper);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 58%,rgba(255,255,255,.07) 86%,rgba(255,255,255,.16) 100%),radial-gradient(circle at 70% 88%,rgba(255,255,255,.1),rgba(255,255,255,0) 42%),rgba(10,12,11,.14);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28),inset 0 calc(var(--d) * -.04) calc(var(--d) * .08) rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(3px) saturate(1.3) brightness(1.08);backdrop-filter:blur(3px) saturate(1.3) brightness(1.08);
  transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--hs,1));
  animation:breathe var(--bt,6s) ease-in-out infinite alternate;
  transition:transform .55s cubic-bezier(.23,1,.32,1),box-shadow .35s,background-color .35s}
/* Window: a thin crescent of light hugging the top edge, not a painted blob */
.b-in::before{content:"";position:absolute;inset:4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,0) 86%,rgba(255,255,255,.55) 94%,rgba(255,255,255,0) 99%);
  -webkit-mask:linear-gradient(to bottom,#000 2%,transparent 34%);mask:linear-gradient(to bottom,#000 2%,transparent 34%);opacity:.8;transform:rotate(-38deg)}
/* Liquid rim: bright where it faces the light, a second reflection opposite, and the sheen drifts */
.b-in::after{content:"";position:absolute;inset:0;border-radius:50%;padding:1.3px;pointer-events:none;
  background:conic-gradient(from var(--ra),rgba(255,255,255,.95),rgba(255,255,255,.2) 14%,rgba(255,255,255,.04) 30%,rgba(255,255,255,.04) 44%,rgba(255,255,255,.55) 52%,rgba(255,255,255,.06) 64%,rgba(255,255,255,.04) 86%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  --ra:300deg;animation:sheen var(--st,14s) ease-in-out infinite alternate}
@keyframes sheen{from{--ra:285deg}to{--ra:345deg}}
@keyframes breathe{0%{scale:1 1}35%{scale:1.014 .986}70%{scale:.988 1.012}100%{scale:1.005 .995}}
#bubbles li:nth-child(2) .b-in{--bt:7.2s;--st:17s}#bubbles li:nth-child(4) .b-in{--st:12s}#bubbles li:nth-child(6) .b-in{--st:19s}
#bubbles li:nth-child(1) .b-in{--bt:6s}#bubbles li:nth-child(3) .b-in{--bt:5.4s}#bubbles li:nth-child(4) .b-in{--bt:6.6s}
#bubbles li:nth-child(5) .b-in{--bt:5.8s}#bubbles li:nth-child(6) .b-in{--bt:7.6s}#bubbles li:nth-child(7) .b-in{--bt:6.2s}
.b-ic{position:relative;z-index:1;width:calc(var(--d) * .26);height:calc(var(--d) * .26);min-width:24px;min-height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:.64;stroke-linecap:round;stroke-linejoin:round;transform:translate(calc(var(--mx,0px) * .6),calc(var(--my,0px) * .6));transition:transform .55s cubic-bezier(.23,1,.32,1)}
.b-ic *{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .4s}
.b-ic [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
#bubbles.shown .b-ic [pathLength]{animation:draw .9s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(.25s + var(--i,0) * .06s)}
@keyframes draw{to{stroke-dashoffset:0}}
.b-l,.b-s{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.b-l{position:relative;z-index:1;font-size:clamp(15px,calc(var(--d) * .12),22px);font-weight:500;line-height:1.25;letter-spacing:.005em;white-space:nowrap;text-align:center}
.b-s{position:relative;z-index:1;font-size:clamp(12px,calc(var(--d) * .08),14px);line-height:1.35;letter-spacing:.01em;margin-top:2px;color:rgba(243,244,241,.66);white-space:nowrap;text-align:center;transition:color .3s}
.bub.small .b-s{display:none}
@media (hover:hover) and (pointer:fine){
  .bub:hover .b-in{--hs:1.06;background-color:rgba(10,12,11,.22);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45),inset 0 calc(var(--d) * -.04) calc(var(--d) * .08) rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.24)}
  .bub:hover .b-s{color:var(--paper)}
}
.bub:focus-visible .b-in{--hs:1.06;outline:2px solid var(--paper);outline-offset:5px}
.bub:active .b-in{--hs:.96;transition-duration:.12s}
.bub:focus-visible{outline:none}
.bub[aria-current="page"] .b-in{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),0 10px 30px rgba(0,0,0,.18)}
/* Each drawing does one small thing on hover */
#bubbles .bub:is(:hover,:focus-visible) .ic-sheet{transform:translate(7%,-9%) rotate(3deg)}
#bubbles .bub:is(:hover,:focus-visible) .ic-glass{transform:translate(-10%,-8%) rotate(-8deg)}
#bubbles .bub:is(:hover,:focus-visible) .ic-plane{transform:translate(16%,-16%) rotate(-6deg)}
#bubbles .bub:is(:hover,:focus-visible) .ic-trail{opacity:0}
#bubbles .bub:is(:hover,:focus-visible) .ic-wave{animation:wave 1.1s ease-out infinite}
#bubbles .bub:is(:hover,:focus-visible) .ic-wave.w2{animation-delay:.18s}
@keyframes wave{0%{opacity:.25;transform:scale(.85)}50%{opacity:1}100%{opacity:.25;transform:scale(1.12)}}
#bubbles .bub:is(:hover,:focus-visible) .ic-pen{transform:translate(-10%,6%) rotate(-10deg)}
#bubbles .bub:is(:hover,:focus-visible) .ic-ink{animation:ink .7s cubic-bezier(.65,0,.35,1) both}
@keyframes ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
#bubbles .bub:is(:hover,:focus-visible) .ic-lid{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,40%,56%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
#bubbles .bub:is(:hover,:focus-visible) .ic-pupil{transform:translate(14%,0)}
#bubbles .bub:is(:hover,:focus-visible) .ic-line{animation:ink .45s cubic-bezier(.65,0,.35,1) both}
#bubbles .bub:is(:hover,:focus-visible) .ic-line.l2{animation-delay:.08s}#bubbles .bub:is(:hover,:focus-visible) .ic-line.l3{animation-delay:.16s}
.exp{position:fixed;z-index:60;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.exp.full{left:0;top:0;width:100vw;height:100vh;border-radius:0}
.exp-paper{position:absolute;inset:0;background:var(--paper);opacity:0}

/* Language pill and the mini Naor */
#lang{position:fixed;z-index:50;top:max(22px,env(safe-area-inset-top));inset-inline-end:var(--gutter);min-width:44px;height:44px;padding-inline:14px;border-radius:999px;font-size:14px;font-weight:500;text-align:center;color:var(--paper);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);transition:background .25s,color .25s}
#lang:hover{background:var(--paper);color:var(--ink)}
body[data-mode="page"] #lang{color:var(--ink);background:rgba(243,244,241,.72);box-shadow:inset 0 0 0 1px var(--line),0 6px 18px rgba(12,14,13,.08)}
body[data-mode="page"] #lang:hover{background:var(--ink);color:var(--paper)}
/* Physical left on purpose: Guy wants Naor in the bottom-left corner in both languages */
#mini{position:fixed;z-index:50;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));left:var(--gutter);width:69px;height:69px;border-radius:50%;overflow:hidden;box-shadow:0 10px 28px rgba(12,14,13,.22),0 0 0 1px rgba(12,14,13,.08);transition:box-shadow .3s}
#mini img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .5s var(--ease)}
/* Static glass glare, plus a slow shine that crosses now and then and a faint breath, so the portrait reads as a button */
#mini{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{scale:1.04}}
#mini::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.5),rgba(255,255,255,0) 34%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
#mini::after{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.42) 47%,rgba(214,250,190,.3) 53%,transparent 70%);transform:translateX(-130%);animation:shine 11s cubic-bezier(.45,0,.25,1) 3s infinite}
@keyframes shine{0%,76%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
#mini:hover img{transform:scale(1.08)}
#mini{box-shadow:0 10px 28px rgba(12,14,13,.2),0 0 0 1px rgba(29,106,69,.22),0 0 22px rgba(168,240,124,.55)}
#mini:hover{box-shadow:0 12px 32px rgba(12,14,13,.26),0 0 0 2px var(--glow),0 0 30px rgba(168,240,124,.7)}
/* Soft green mesh in the corner behind the portrait, so it reads on the paper */
#aura{position:fixed;z-index:49;bottom:-90px;left:-90px;width:300px;height:300px;pointer-events:none;border-radius:50%;background:radial-gradient(circle at 42% 58%,rgba(168,240,124,.55),transparent 55%),radial-gradient(circle at 64% 40%,rgba(29,106,69,.22),transparent 50%),radial-gradient(circle at 30% 30%,rgba(214,250,190,.5),transparent 48%);filter:blur(34px);opacity:.7;animation:aura 14s ease-in-out infinite alternate}
@keyframes aura{to{transform:translate(10px,-12px) scale(1.08) rotate(14deg)}}
body[data-mode="home"] #aura,body[data-mode="ov"] #aura{display:none}
body[data-mode="ov"] #mini{box-shadow:0 0 0 2px var(--paper),0 16px 40px rgba(0,0,0,.45)}

/* Page */
#page{min-height:100svh}
.view{padding-bottom:var(--sec)}
.sec{margin-top:var(--sec)}
.ph{padding-top:clamp(120px,12vw,176px)}
.cat{display:block;font-family:var(--mono);font-size:13px;color:var(--mute)}
.ph h1{font-weight:500;font-size:clamp(44px,7vw,112px);line-height:1.02;max-width:15ch;margin-top:16px}
.ph h1.mid{font-size:clamp(34px,4.8vw,72px);line-height:1.1;max-width:22ch}
.ph .intro-p{font-size:clamp(18px,1.5vw,21px);max-width:46ch;margin-top:28px}
/* Sections that live inside a page (cases and radio under Work, CV under About) */
.wsub{margin-top:var(--sec)}
.sub-h h2{font-weight:500;font-size:clamp(34px,4.8vw,72px);line-height:1.08;max-width:18ch;margin-top:16px;text-wrap:balance}
.sub-h .intro-p{font-size:clamp(18px,1.5vw,21px);max-width:46ch;margin-top:24px}
.wsub .cases,.wsub .spots{margin-top:56px}
.cv .cv-cols{margin-top:56px}
:is(.ph h1,.c-hero h1){outline:none}

/* Work */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:56px}
.filters button{min-height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:500;transition:background .2s,color .2s,box-shadow .2s}
.filters button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.rows{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:var(--rowgap);margin-top:56px}
.card{grid-column:span var(--span);display:flex;flex-direction:column;align-items:stretch;min-width:0}
.card .media{position:relative;display:block;aspect-ratio:var(--ar);overflow:hidden;background:var(--paper-2);border-radius:6px}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .media img{transform:scale(1.03)}
.card .count{position:absolute;bottom:12px;inset-inline-end:12px;background:var(--paper);color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .35s var(--ease)}
.card:hover .count,.card:focus-visible .count{opacity:1;transform:none}
.card .cat{margin-top:18px}
.card h3{font-weight:500;font-size:clamp(22px,1.9vw,28px);line-height:1.15;margin-top:6px}
.card h3 span{background:linear-gradient(var(--green),var(--green)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease)}
.card:hover h3 span{background-size:100% 2px}
.card .line{font-size:16px;max-width:42ch;margin-top:8px;color:var(--mute)}
.card:focus-visible,.also:focus-visible,.post:focus-visible,.case-card:focus-visible,.thumb:focus-visible{outline:2px solid var(--green);outline-offset:8px;border-radius:6px}
.feature{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:center;border-radius:6px;overflow:hidden;background:var(--forest);color:var(--paper)}
.feature video{grid-column:1/span 6;width:100%;aspect-ratio:1;object-fit:cover}
.feature .txt{grid-column:8/span 4;padding-block:40px}
.feature .label{color:var(--glow)}
.feature blockquote{font-size:clamp(26px,2.8vw,42px);font-weight:500;line-height:1.1;margin-block:16px 20px}
.also{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:center;padding:clamp(24px,3vw,40px);border-radius:6px;background:var(--paper-2);transition:background .3s}
.also:hover{background:#DBDFD9}
.also .txt{grid-column:1/span 6}
.also h3{font-weight:500;font-size:clamp(30px,3.4vw,52px);line-height:1.05;margin-block:10px 14px}
.also p{max-width:46ch}
.also .more{display:inline-flex;margin-top:22px;font-weight:500;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.also img{grid-column:8/span 5;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px}

/* Cases */
.cases{display:grid;row-gap:var(--rowgap);margin-top:72px}
.case-card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:center}
.case-card .cimg{grid-column:1/span 7;aspect-ratio:7/5}
.case-card .ctxt{grid-column:9/span 4}
.case-card:nth-child(even) .cimg{grid-column:6/span 7;order:2}
.case-card:nth-child(even) .ctxt{grid-column:1/span 4}
.duo{position:relative;display:block;overflow:hidden;border-radius:6px;background:var(--line)}
.duo img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.case-card:hover .duo img{transform:scale(1.03)}
.tag{background:var(--green);color:var(--paper)}
.case-card .cat{margin-top:16px}
.case-card h2{font-weight:500;font-size:clamp(30px,3.2vw,48px);line-height:1.06;margin-top:8px}
.case-card p{margin-top:14px;color:var(--mute);max-width:40ch}
.read{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-weight:500;border-bottom:1.5px solid currentColor}
.case-card:hover .read{border-color:var(--green)}

/* Case page */
.c-hero{position:relative;min-height:min(88svh,860px);display:flex;align-items:flex-end;background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate}
.c-hero>img,.c-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.c-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(8,9,9,.9) 0%,rgba(8,9,9,.55) 42%,rgba(8,9,9,0) 72%)}
.c-hero .wrap{width:100%;padding-block:140px clamp(40px,5vw,72px)}
.c-hero .cat{color:var(--paper)}
.c-hero h1{font-weight:500;font-size:clamp(48px,9vw,148px);line-height:.98;max-width:13ch;margin-top:16px}
.draft{background:var(--glow);color:var(--ink);margin-top:24px}
.c-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:28px;border-bottom:1px solid var(--line);margin-top:56px}
.c-meta dt{font-family:var(--mono);font-size:12px;color:var(--mute)}
.c-meta dd{font-size:20px;font-weight:500;line-height:1.25;margin-top:6px}
.c-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px)}
.c-sec h2{grid-column:1/span 4;font-family:var(--mono);font-size:13px;font-weight:400;color:var(--mute);padding-top:12px;border-top:2px solid var(--ink);align-self:start}
.c-sec .c-body{grid-column:6/span 7;font-size:clamp(22px,2.2vw,32px);font-weight:500;line-height:1.25}
.c-sec .c-body.soft{font-size:19px;font-weight:400;line-height:1.6;color:var(--mute)}
.gal{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:48px}
.thumb{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--paper-2)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.thumb:hover img{transform:scale(1.03)}
.gal video{grid-column:1/-1;width:100%;max-height:80vh;object-fit:cover;border-radius:6px;background:var(--ink)}
.c-next{display:block;padding-top:24px;border-top:2px solid var(--ink)}
.c-next h2{font-weight:500;font-size:clamp(36px,5vw,80px);line-height:1.04;margin-top:12px;max-width:16ch;transition:color .3s}
.c-next:hover h2{color:var(--green)}

/* Radio, on paper */
.spots{list-style:none;border-top:1px solid var(--line);margin-top:72px}
.spot{position:relative;display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;padding:22px 16px;margin-inline:-16px;border-radius:4px 4px 0 0;transition:background .35s var(--ease)}
.spot::after{content:"";position:absolute;inset-inline:16px;bottom:0;height:1px;background:var(--line)}
.spot:hover{background:rgba(12,14,13,.03)}
.spot.started{background:rgba(29,106,69,.06)}
.play{width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center;transition:background .2s,color .2s,box-shadow .2s,transform .15s var(--ease)}
.play:hover{background:var(--ink);color:var(--paper)}
.play:active{transform:scale(.94)}
.play svg{width:18px;height:18px;fill:currentColor}
.play .i-pause{display:none}
.spot.on .play{background:var(--green);color:var(--paper);box-shadow:none}
.spot.on .i-play{display:none}
.spot.on .i-pause{display:block}
.spot h3{font-weight:500;font-size:clamp(22px,2.2vw,32px);line-height:1.15}
.spot .client{display:block;font-size:14px;color:var(--mute)}
.spot .end{display:flex;align-items:center;gap:14px;color:var(--mute)}
.eq{display:flex;align-items:flex-end;gap:3px;height:16px;opacity:0;transition:opacity .3s}
.eq i{width:3px;height:30%;background:var(--green);border-radius:1px}
.spot.started .eq{opacity:1}
.spot.on .eq i{animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.3s!important}
.eq i:nth-child(3){animation-delay:-.6s!important}
@keyframes eq{0%{height:20%}100%{height:100%}}
.time .el{display:none}
.spot.started .time .el{display:inline}
.seek{position:absolute;inset-inline:16px;bottom:-10px;z-index:1;height:20px;display:none;cursor:pointer;touch-action:none}
.spot.started .seek{display:block}
.seek i{position:absolute;inset-inline-start:0;top:9px;height:2px;width:0;background:var(--green)}
.seek i::after{content:"";position:absolute;inset-inline-end:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--green);transform:scale(.4);opacity:0;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.seek:hover i::after,.spot.on .seek i::after{transform:scale(1);opacity:1}

/* About */
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:start}
.about-grid figure{grid-column:1/span 4;position:sticky;top:96px}
.about-grid figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:6px}
.about-grid figcaption{margin-top:12px;color:var(--mute)}
.about-copy{grid-column:6/span 7}
.about-copy .body{max-width:56ch;font-size:19px}
.about-copy .body p+p{margin-top:18px}
.does{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;border-top:1px solid var(--line);margin-top:48px;counter-reset:d;list-style:none}
.does li{padding:16px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
.does li::before{content:counter(d,decimal-leading-zero);counter-increment:d;color:var(--mute);font-family:var(--mono);font-size:12px}
.kind .k-top{display:flex;gap:14px 24px;justify-content:space-between;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line);margin-bottom:40px;color:var(--mute)}
.qlist{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.qlist li{padding-top:18px;border-top:2px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.qlist blockquote{font-size:clamp(22px,2vw,30px);font-weight:500;line-height:1.15}
.qlist cite{font-style:normal;color:var(--mute)}
.redact{background:var(--ink);color:var(--ink);border-radius:2px;padding-inline:.06em}

/* CV */
.cv-meta{display:flex;gap:clamp(24px,4vw,64px);flex-wrap:wrap;margin-top:40px}
.cv-meta dt{font-family:var(--mono);font-size:12px;color:var(--mute)}
.cv-meta dd{font-size:28px;font-weight:500;line-height:1.2}
.cv-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px)}
.cv-cols>div:first-child{grid-column:1/span 6}
.cv-cols>div:last-child{grid-column:8/span 5}
.cv-cols h3{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--mute);padding-bottom:12px}
.clist{list-style:none;border-top:1px solid var(--line);columns:2;column-gap:24px}
.clist li{padding:14px 0;border-bottom:1px solid var(--line);break-inside:avoid;font-size:19px;font-weight:500}
.cv-dl{margin-top:56px}
.cv-dl .btn{min-height:64px;padding-inline:36px;font-size:20px}

/* Blog */
.posts{list-style:none;border-top:1px solid var(--line);margin-top:72px}
.posts .empty{padding:28px 0;color:var(--mute)}
.post{display:grid;grid-template-columns:120px 1fr 200px;gap:24px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line)}
.post .date{color:var(--mute)}
.post h3{font-weight:500;font-size:clamp(24px,2.5vw,36px);line-height:1.12}
.post h3 span{background:linear-gradient(var(--green),var(--green)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease)}
.post:hover h3 span{background-size:100% 2px}
.post .dek{margin-top:8px;max-width:60ch;color:var(--mute)}
.post .side{display:flex;gap:10px;align-items:center;justify-content:flex-end;color:var(--mute)}
.postv{padding-top:clamp(120px,12vw,168px)}
.postv article{max-width:720px;margin-inline:auto}
.postv .back{display:inline-flex;align-items:center;min-height:44px;font-weight:500;border-bottom:1.5px solid currentColor;margin-bottom:48px}
.postv .pmeta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px;color:var(--mute)}
.postv h1{font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.05;outline:none}
.postv .dek{font-size:clamp(20px,1.8vw,24px);line-height:1.4;margin-block:20px 40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.postv .body p{font-size:19px;line-height:1.7}
.postv .body p+p{margin-top:1.1em}
.postv .next{display:block;max-width:720px;margin:clamp(72px,9vw,120px) auto 0;padding-block:24px 8px;border-top:2px solid var(--ink)}
.postv .next .mono{color:var(--mute)}
.postv .next h2{font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.1;margin-top:10px}
.postv .next:hover h2{color:var(--green)}

/* Contact */
.ph h1.huge{font-size:clamp(52px,9.6vw,160px);line-height:.96;max-width:none}
.mail{display:inline-block;min-height:44px;padding-block:6px;font-size:clamp(26px,4vw,56px);font-weight:500;line-height:1.1;overflow-wrap:anywhere;background:linear-gradient(var(--green),var(--green)) 0 100%/100% 2px no-repeat;transition:background-size .5s var(--ease),color .3s}
.mail:hover{color:var(--green);background-size:0 2px;background-position:100% 100%}
.c-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

/* Footer: back to space */
.fb{position:relative;overflow:hidden;isolation:isolate;background:var(--space);color:var(--paper);padding-block:clamp(96px,11vw,160px) 28px}
.fb .stars{position:absolute;inset:0;z-index:-1;opacity:.8;background:
  radial-gradient(1.5px 1.5px at 12% 22%,#dff5e6 50%,transparent 51%),radial-gradient(1px 1px at 28% 68%,#dff5e6 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 46% 34%,#dff5e6 50%,transparent 51%),radial-gradient(1px 1px at 63% 78%,#dff5e6 50%,transparent 51%),
  radial-gradient(2px 2px at 78% 18%,#dff5e6 50%,transparent 51%),radial-gradient(1px 1px at 88% 56%,#dff5e6 50%,transparent 51%),
  radial-gradient(1px 1px at 6% 84%,#dff5e6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 54% 8%,#dff5e6 50%,transparent 51%),
  radial-gradient(80% 120% at 50% 120%,rgba(29,106,69,.45),transparent 60%)}
.fb .grain{z-index:-1}
.fb-lead{color:var(--mute-d);font-size:clamp(18px,1.6vw,22px)}
.back{display:inline-flex;align-items:center;gap:clamp(14px,2vw,24px);min-height:64px;margin-top:20px;font-size:clamp(44px,8vw,128px);font-weight:500;line-height:1;text-align:start}
.back .orb{--g:.62em;--st:16s;background-color:rgba(168,240,124,.1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45),inset 0 -.09em .2em rgba(168,240,124,.38),inset 0 .05em .12em rgba(255,255,255,.12),0 0 56px rgba(168,240,124,.3);transition:transform .6s var(--ease)}
.back .orb::before{opacity:1}
.back:hover .orb{transform:scale(1.15) rotate(-20deg)}
.back:hover .bt{color:var(--glow)}
.back .bt{transition:color .3s}
.fb .mail{font-size:clamp(20px,2.4vw,32px);margin-top:48px;background-image:linear-gradient(var(--glow),var(--glow))}
.fb .mail:hover{color:var(--glow)}
.fb-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(72px,9vw,120px);padding-top:20px;border-top:1px solid rgba(243,244,241,.16);color:var(--mute-d)}

/* Lightbox */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--paper)}
dialog::backdrop{background:rgba(8,10,9,.84);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.lb{height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(12px,2vw,20px) var(--gutter)}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px}
.lb-top h3{font-weight:500;font-size:clamp(22px,2.6vw,34px)}
.lb-top .n{color:var(--mute-d);font-weight:400}
/* The image always fits the stage whole: absolute box, so the 1fr row sets the height and the image never pushes past it */
.lb-stage{position:relative;min-height:0}
.lb-stage img{position:absolute;inset:clamp(10px,1.6vw,18px) 0;margin:auto;width:auto;height:auto;max-width:100%;max-height:calc(100% - 2 * clamp(10px,1.6vw,18px));object-fit:contain;border-radius:14px;box-shadow:0 0 0 .5px rgba(255,255,255,.22),0 24px 60px rgba(0,0,0,.45)}
.lb-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-size:14px}
.lb-nav p{max-width:50ch;text-align:center;color:var(--mute-d)}
/* Lightbox controls speak the bubbles' language: clear glass, liquid rim, a drifting sheen */
.gl{position:relative;flex:none;width:var(--g,56px);height:var(--g,56px);border-radius:50%;display:grid;place-items:center;color:var(--paper);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 56%,rgba(255,255,255,.08) 84%,rgba(255,255,255,.18) 100%),radial-gradient(circle at 70% 88%,rgba(255,255,255,.1),rgba(255,255,255,0) 44%),rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3),0 8px 24px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(6px) saturate(1.3);backdrop-filter:blur(6px) saturate(1.3);
  transition:transform .45s cubic-bezier(.23,1,.32,1),background-color .3s}
.gl::before{content:"";position:absolute;inset:5%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,0) 84%,rgba(255,255,255,.6) 93%,rgba(255,255,255,0) 99%);
  -webkit-mask:linear-gradient(to bottom,#000 2%,transparent 36%);mask:linear-gradient(to bottom,#000 2%,transparent 36%);opacity:.8;transform:rotate(-38deg)}
.gl::after{content:"";position:absolute;inset:0;border-radius:50%;padding:1.2px;pointer-events:none;
  background:conic-gradient(from var(--ra),rgba(255,255,255,.95),rgba(255,255,255,.2) 14%,rgba(255,255,255,.04) 30%,rgba(255,255,255,.04) 44%,rgba(255,255,255,.55) 52%,rgba(255,255,255,.06) 64%,rgba(255,255,255,.04) 86%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  --ra:300deg;animation:sheen var(--st,15s) ease-in-out infinite alternate}
.gl svg{position:relative;width:40%;height:40%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.gl:hover{transform:scale(1.07);background-color:rgba(255,255,255,.1)}
.gl:active{transform:scale(.95);transition-duration:.12s}
.gl:focus-visible{outline:2px solid var(--glow);outline-offset:4px}
#lb-close{--g:52px;--st:13s}
#lb-next{--st:18s}
html[dir="rtl"] .lb-nav svg{transform:scaleX(-1)}

/* Hebrew */
html[lang="he"]{--mono:var(--font)}
html[dir="rtl"]{--tilt:3deg}
html[lang="he"] .ph h1{font-size:clamp(40px,6.2vw,100px);line-height:1.08}
html[lang="he"] .ph h1.mid{font-size:clamp(32px,4.4vw,66px);line-height:1.14}
html[lang="he"] .ph h1.huge{font-size:clamp(46px,8.4vw,136px);line-height:1.02}
html[lang="he"] .c-hero h1{font-size:clamp(44px,8vw,132px);line-height:1.04}
html[lang="he"] .intro h1{line-height:1.2}
html[dir="rtl"] :is(.card h3 span,.post h3 span){background-position:100% 100%}
html[dir="rtl"] .mail{background-position:100% 100%}
html[dir="rtl"] .mail:hover{background-position:0 100%}

@media (max-width:1000px){
  :root{--rowgap:72px}
  .card{--span:6!important;--ar:1!important}
  .feature video{grid-column:1/-1}
  .feature .txt{grid-column:1/-1;padding:0 24px 32px}
  .case-card .cimg,.case-card:nth-child(even) .cimg{grid-column:1/-1;order:0}
  .case-card .ctxt,.case-card:nth-child(even) .ctxt{grid-column:1/-1;margin-top:8px}
  .c-sec h2{grid-column:1/-1;margin-bottom:20px}
  .c-sec .c-body{grid-column:1/-1}
  .about-grid figure{grid-column:1/span 5}
  .about-copy{grid-column:7/span 6}
  .qlist{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .post{grid-template-columns:100px 1fr}
  .post .side{grid-column:2;justify-content:flex-start}
  .cv-cols>div:first-child,.cv-cols>div:last-child{grid-column:1/-1}
  .cv-cols>div:last-child{margin-top:56px}
}
@media (max-width:720px){
  :root{--sec:96px;--rowgap:56px}
  body{font-size:16px}
  .card{--span:12!important;--ar:4/3!important}
  .also .txt,.also img{grid-column:1/-1}
  .also img{margin-top:24px}
  .c-meta{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr}
  .about-grid figure{grid-column:1/-1;position:static;max-width:320px}
  .about-copy{grid-column:1/-1;margin-top:40px}
  .does{grid-template-columns:1fr}
  .qlist{grid-template-columns:1fr}
  .clist{columns:1}
  .spot{grid-template-columns:48px 1fr;gap:16px;padding-inline:12px;margin-inline:-12px}
  .spot::after,.seek{inset-inline:12px}
  .play{width:48px;height:48px}
  .spot .end{grid-column:2}
  .post{grid-template-columns:1fr;gap:10px}
  .post .side{grid-column:1;justify-content:flex-start;order:-1}
  .post .date{display:none}
  .lb-nav p{display:none}
}
/* Hero: the middle word turns over. All words share one grid cell, so the line never reflows */
.rot{display:inline-grid;justify-items:start;color:var(--glow);transition:inline-size .45s var(--ease)}
.rot>span{grid-area:1/1;inline-size:max-content;white-space:nowrap;opacity:0;transform:translateY(.35em);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rot>span.on{opacity:1;transform:none}
.rot>span.off{transform:translateY(-.35em)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* START beside the face: a second after load the hand-drawn arrow draws itself toward Naor, then the word pops in, swells a little and settles */
.start{position:absolute;z-index:3;top:calc(var(--cy) - var(--lens) * .25 - 44px);inset-inline-start:calc(50% + var(--lens) * .5 + 14px);display:flex;flex-direction:column;align-items:flex-start;font-family:var(--mono);font-size:18px;line-height:1;color:var(--glow);pointer-events:none;transition:opacity .4s var(--ease),visibility .4s}
.start svg{width:66px;height:54px;margin-top:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .start svg{transform:scaleX(-1)}
.start path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s cubic-bezier(.65,0,.35,1) 1s forwards}
.start path+path{animation-duration:.35s;animation-delay:1.85s}
.start span{display:inline-block;transform-origin:0 100%;animation:swell .8s cubic-bezier(.34,1.4,.64,1) 2.25s both}
html[dir="rtl"] .start span{transform-origin:100% 100%}
@keyframes swell{0%{opacity:0;scale:.6}45%{opacity:1;scale:1.2}100%{opacity:1;scale:1}}
#home.open .start{opacity:0;visibility:hidden}
/* Floating works around the face. Opening the menu folds them away */
#vids{position:absolute;inset:0;z-index:2;pointer-events:none}
.vb{position:absolute;border-radius:50%;overflow:hidden;pointer-events:auto;animation:drift var(--dt,13s) ease-in-out infinite;opacity:0;transform:scale(.6);transition:opacity .6s var(--ease),transform .6s var(--ease);box-shadow:0 12px 34px rgba(0,0,0,.28),0 0 26px rgba(170,220,255,.1);-webkit-tap-highlight-color:transparent}
.vb.on{opacity:1;transform:none}
.vb:hover .vb-in>*{transform:scale(1.06)}
.vb:focus-visible{outline:2px solid var(--glow);outline-offset:6px}
#home.open .vb{opacity:0;transform:scale(.6);pointer-events:none}
.vb-in{display:block;width:100%;height:100%;position:relative;z-index:0;isolation:isolate}
.vb-in>*{display:block;width:100%;height:100%;object-fit:cover;scale:1.08;transition:transform .6s var(--ease)}
/* Soap-bubble skin over the video: a glossy highlight, a darker belly so it reads round, a thin bright rim, and a slow iridescent film turning on the edge */
.vb::before,.vb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;will-change:transform}
.vb::before{background:radial-gradient(ellipse 30% 20% at 32% 22%,rgba(255,255,255,.85),rgba(255,255,255,.3) 45%,transparent 72%),radial-gradient(ellipse 12% 7% at 70% 82%,rgba(255,255,255,.5),transparent 100%),radial-gradient(circle at 40% 36%,rgba(255,255,255,.06) 0,transparent 46%,rgba(6,10,20,.45) 82%,rgba(220,240,255,.55) 97%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45),inset 0 0 22px rgba(170,220,255,.28)}
.vb::after{background:conic-gradient(from 0deg,rgba(255,120,220,.5),rgba(120,220,255,.45),rgba(170,255,170,.4),rgba(255,230,120,.45),rgba(255,120,220,.5));-webkit-mask:radial-gradient(circle,transparent 55%,#000 74%,#000 100%);mask:radial-gradient(circle,transparent 55%,#000 74%,#000 100%);mix-blend-mode:screen;opacity:.7;animation:film 16s linear infinite}
@keyframes film{to{rotate:360deg}}
@keyframes drift{0%,100%{translate:0 0}25%{translate:12px -15px}50%{translate:-3px -22px}75%{translate:-13px -8px}}
/* A slow flash of light crosses the portrait every few seconds */
.lens::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.34) 49%,rgba(214,250,190,.22) 53%,transparent 62%) no-repeat;background-size:300% 100%;background-position:100% 0;-webkit-mask:radial-gradient(circle closest-side,#000 80%,transparent 99%);mask:radial-gradient(circle closest-side,#000 80%,transparent 99%);animation:sweep 9s cubic-bezier(.45,0,.25,1) 2.4s infinite}
@keyframes sweep{0%{background-position:100% 0}24%,100%{background-position:0 0}}
/* Name and role sit right above the portrait, centred. They step aside while the menu is open */
.who{inset-inline:auto;left:50%;top:calc(var(--cy) - var(--lens) / 2 - 34px);transform:translate(-50%,-100%);width:max-content;max-width:calc(100vw - 2 * var(--gutter));text-align:center;text-wrap:balance;transition:opacity .4s var(--ease),visibility .4s}
#home.open .who{opacity:0;visibility:hidden}
/* Language: a glowing HE / EN pill centred under the headline on home only. Inside the pages it lives in Naor's menu */
body[data-mode="home"] #lang{top:auto;bottom:max(26px,calc(env(safe-area-inset-bottom) + 14px));left:50%;right:auto;transform:translateX(-50%);min-width:64px;height:40px;font-family:var(--mono);font-size:15px;color:var(--glow);box-shadow:inset 0 0 0 1px var(--glow),0 0 22px rgba(170,240,140,.18)}
body[data-mode="home"] #lang:hover{background:var(--glow);color:var(--ink)}
body:not([data-mode="home"]) #lang,body:not([data-mode="ov"]) .b-lang{display:none}
@media (min-width:900px) and (orientation:landscape){
  #home{--lens:clamp(180px,34vmin,380px)}
}
/* Narrow portrait screens: the About photo stacks above the copy instead of squeezing beside it */
@media (max-width:1000px) and (orientation:portrait){
  .about-grid figure{grid-column:1/-1;position:static;max-width:560px}
  .about-copy{grid-column:1/-1;margin-top:40px}
  .about-copy .body{font-size:clamp(18px,2.6vw,21px);max-width:none}
}
@media (max-width:720px){
  .about-grid figure{max-width:none}
  .about-copy .body{font-size:18px}
}
/* Portrait screens (phones, tall browser windows): width is the short side, so the home scales off it and the group sits a little higher */
@media (orientation:portrait){
  #home{--lens:clamp(150px,min(46vw,32svh),320px)}
  .intro h1{font-size:clamp(30px,7.6vw,58px);line-height:1.32;max-width:14ch}
  html[lang="he"] .intro h1{line-height:1.36;max-width:16ch;text-wrap:balance}
  .who .name{font-size:clamp(20px,4.6vw,26px)}
  .who .role{font-size:clamp(13px,3vw,16px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}
  .grain,.ship,#mini,#mini::after,.b-in,.b-in::after,.gl::after,.b-ic *,#aura{animation:none}
  .b-ic [pathLength]{stroke-dashoffset:0}
  .start svg,.start path,.start span,.vb,.vb::after,.lens::after{animation:none}
  .start path{stroke-dashoffset:0}
  .rot{transition:none}
}