// Site — refined V3 as main portfolio. Tweakable accent, project layout, and effects.

const hexToRgb = (hex) => {
  const h = hex.replace('#','');
  const b = parseInt(h.length===3 ? h.split('').map(c=>c+c).join('') : h, 16);
  return `${(b>>16)&255}, ${(b>>8)&255}, ${b&255}`;
};

const useReveal = (threshold = 0.15) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (typeof IntersectionObserver === 'undefined') { el.classList.add('is-visible'); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { el.classList.add('is-visible'); io.unobserve(el); } });
    }, { threshold, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [threshold]);
  return ref;
};

const useCountUp = (target, duration = 1400, startWhenVisible = true) => {
  const [val, setVal] = React.useState(startWhenVisible ? 0 : target);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!startWhenVisible) return;
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    const run = () => {
      const t0 = performance.now();
      const tick = (now) => {
        const p = Math.min((now - t0) / duration, 1);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(Math.round(eased * target));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    };
    if (typeof IntersectionObserver === 'undefined') { run(); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { run(); io.unobserve(el); } });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, [target, duration, startWhenVisible]);
  return [val, ref];
};

const magneticProps = (strength = 0.22) => ({
  onMouseMove: (e) => {
    const el = e.currentTarget;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left - r.width / 2) * strength;
    const y = (e.clientY - r.top - r.height / 2) * strength;
    el.style.transform = `translate(${x}px, ${y}px)`;
  },
  onMouseLeave: (e) => { e.currentTarget.style.transform = ''; },
});

const Site = () => {
  const [lang, setLang] = React.useState(() => localStorage.getItem('dfm_lang') || 'it');
  const [tweaks, setTweaks] = React.useState(window.__TWEAKS);
  const [tweakOpen, setTweakOpen] = React.useState(false);
  const [tweakActive, setTweakActive] = React.useState(false);
  const [cursor, setCursor] = React.useState({x:-500,y:-500});
  const [filter, setFilter] = React.useState('all');
  const [expanded, setExpanded] = React.useState(null);
  const [scrollY, setScrollY] = React.useState(0);
  const [scrollPct, setScrollPct] = React.useState(0);
  const t = (it, en) => lang === 'it' ? it : en;

  const profileRef = useReveal();
  const workRef = useReveal();
  const experienceRef = useReveal();
  const expertiseRef = useReveal();
  const contactRef = useReveal();

  React.useEffect(() => { localStorage.setItem('dfm_lang', lang); }, [lang]);

  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const y = h.scrollTop || window.pageYOffset || 0;
      setScrollY(y);
      const denom = (h.scrollHeight - h.clientHeight) || 1;
      setScrollPct(Math.min(Math.max(y / denom, 0), 1));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);

  // Tweaks protocol
  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') { setTweakActive(true); setTweakOpen(true); }
      if (e.data?.type === '__deactivate_edit_mode') { setTweakActive(false); setTweakOpen(false); }
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setTweak = (k, v) => {
    const next = {...tweaks, [k]: v};
    setTweaks(next);
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{[k]: v}}, '*');
  };

  // Accent color as CSS var
  const cssVars = {
    '--accent': tweaks.accent,
    '--accent-rgb': hexToRgb(tweaks.accent),
  };

  const wrapRef = React.useRef(null);
  const onMove = (e) => {
    if (!tweaks.showCursor) return;
    const r = wrapRef.current?.getBoundingClientRect();
    if (!r) return;
    setCursor({x: e.clientX - r.left, y: e.clientY - r.top});
  };

  const sectors = ['all', 'AI', 'Robotics', 'Medical'];
  const visible = filter === 'all' ? window.PROJECTS : window.PROJECTS.filter(p => p.sector === filter);

  const heading = () => {
    const em = (x) => tweaks.headingStyle === 'sans'
      ? <span style={{color:'var(--accent)'}}>{x}</span>
      : <em style={{fontFamily:'"Instrument Serif", serif', fontStyle:'italic', fontWeight:400, color:'var(--accent)'}}>{x}</em>;
    const word = (content, delay) => (
      <span className="word-mask"><span className="word-in" style={{animationDelay: delay + 'ms'}}>{content}</span></span>
    );
    return <>
      {word('Industrial', 80)}
      <br/>
      {word('AI,', 260)} {word(em('shipped.'), 440)}
    </>;
  };

  return (
    <div ref={wrapRef} onMouseMove={onMove} style={{...S.page, ...cssVars}}>
      <div className="scroll-progress" style={{transform: `scaleX(${scrollPct})`}} />
      {tweaks.showCursor && <div style={{...S.glow, left:cursor.x, top:cursor.y}}/>}

      <div style={S.frame}>
        <div style={S.colLine}/>
        <div style={{...S.colLine, left:'33.333%'}}/>
        <div style={{...S.colLine, left:'66.666%'}}/>
        <div style={{...S.colLine, left:'100%'}}/>
      </div>

      {/* top */}
      <div style={S.top}>
        <div style={S.logo}>DFM<span style={{color:'var(--accent)'}}>.</span></div>
        <div style={S.nav}>
          <a className="nav-link" href="#profile" style={S.navLink}>01 {t('Profilo','Profile')}</a>
          <a className="nav-link" href="#work" style={S.navLink}>02 {t('Lavori','Work')}</a>
          <a className="nav-link" href="#experience" style={S.navLink}>03 {t('Percorso','Career')}</a>
          <a className="nav-link" href="#expertise" style={S.navLink}>04 {t('Competenze','Expertise')}</a>
          <a className="nav-link" href="#contact" style={S.navLink}>05 {t('Contatti','Contact')}</a>
        </div>
        <div style={S.langWrap}>
          <span onClick={()=>setLang('it')} style={{...S.lang, ...(lang==='it'?S.langOn:{})}}>IT</span>
          <span onClick={()=>setLang('en')} style={{...S.lang, ...(lang==='en'?S.langOn:{})}}>EN</span>
        </div>
      </div>

      {/* hero */}
      <div style={S.hero}>
        <div style={S.heroTag}>
          <span style={S.live}>● LIVE</span>
          <span style={S.sep}>—</span>
          <span>{t('Accetto nuovi progetti per il 2026','Accepting 2026 engagements')}</span>
          <span style={S.sep}>—</span>
          <span>Broni, IT</span>
        </div>
        <h1 className="hero-h1" style={{...S.h1, transform: `translateY(${scrollY * -0.12}px)`}}>{heading()}</h1>
        <div style={S.subhead}>
          {t(
            'Progetto e dispiego sistemi AI multi-agent on-premise e automazione industriale. 20 anni sul campo tra robotica, automotive e laboratori medicali — oggi trasformo know-how aziendale in sistemi autonomi.',
            'I design and deploy on-premise multi-agent AI systems and industrial automation. 20 years in the field across robotics, automotive and medical labs — today I turn company know-how into autonomous systems.'
          )}
        </div>
        <div style={S.heroMeta}>
          <MetaCol label={t('Ruolo','Role')} value="AI & Robotics Engineer" />
          <MetaCol label={t('Base','Based')} value="Broni, Italy" />
          <CounterCol label={t('Esperienza','Experience')} to={20} suffix={` ${t('anni','years')}`} />
          <CounterCol label={t('Dispiegato in','Deployed in')} to={8} suffix={` ${t('paesi','countries')}`} />
        </div>
      </div>

      {/* marquee */}
      {tweaks.showMarquee && (
        <div className="marquee-wrap" style={S.marquee}>
          <div className="marquee-track" style={S.marqueeTrack}>
            {[...Array(2)].map((_,k)=>(
              <div key={k} style={S.marqueeRow}>
                {['ABB','COMAU','INPECO','SIEMENS HEALTHINEERS','MERCEDES-BENZ','VOLKSWAGEN','JEEP','RENAULT','DAVITA','EUROELETTRICA'].map(x=>(
                  <span key={x+k} style={S.marqueeItem}>{x}<span style={{color:'var(--accent)', margin:'0 48px', fontSize:22}}>✦</span></span>
                ))}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* profile */}
      <div id="profile" ref={profileRef} className="reveal" style={S.block}>
        <div style={S.blockLabel}>
          <span>01 / {t('Profilo','Profile')}</span>
          <span style={{opacity:.4}}>{t('Chi sono e come lavoro','Who I am and how I work')}</span>
        </div>
        <div style={S.bioRow}>
          <div style={S.bioBig}>
            {lang==='it' ? window.BIO.it : window.BIO.en}
          </div>
          <div>
            <div style={S.bioSide}>{lang==='it' ? window.BIO.it2 : window.BIO.en2}</div>
            <div style={S.chipRow}>
              {['AI Multi-Agent','RAG on-premise','Robotics','TLA Medical','20y field'].map(c=>(
                <span key={c} style={S.chip}>{c}</span>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* work */}
      <div id="work" ref={workRef} className="reveal" style={S.block}>
        <div style={S.blockLabel}>
          <span>02 / {t('Lavori selezionati','Selected work')} · {visible.length}</span>
          <span style={{opacity:.4}}>{t('Filtra per dominio','Filter by domain')}</span>
        </div>
        <div style={S.filters}>
          {sectors.map(s => (
            <span key={s} onClick={()=>setFilter(s)}
              style={{...S.filter, ...(filter===s?S.filterOn:{})}}>
              {s === 'all' ? t('Tutti','All') : s}
            </span>
          ))}
        </div>
        {tweaks.projectLayout === 'list' ? (
          <ListLayout visible={visible} lang={lang} t={t} expanded={expanded} setExpanded={setExpanded} />
        ) : tweaks.projectLayout === 'featured' ? (
          <FeaturedLayout visible={visible} lang={lang} t={t} />
        ) : (
          <GridLayout visible={visible} lang={lang} t={t} />
        )}
      </div>

      {/* experience */}
      <div id="experience" ref={experienceRef} className="reveal" style={S.block}>
        <div style={S.blockLabel}>
          <span>03 / {t('Percorso','Career')}</span>
          <span style={{opacity:.4}}>{t('Aziende e ruoli','Companies and roles')}</span>
        </div>
        <div style={S.expList}>
          {window.EXPERIENCE.map((e,i) => (
            <div key={i} className="exp-row" style={S.expRow}>
              <div style={S.expYears}>{e.years}{e.years_end && <div style={S.expEnd}>{e.years_end}</div>}</div>
              <div style={S.expMain}>
                <div className="exp-title" style={S.expRole}>{lang==='it'?e.role_it:e.role_en}</div>
                <div style={S.expCo}>{e.company} <span style={{opacity:.5}}>· {e.location}</span></div>
                <div style={S.expBody}>{lang==='it'?e.body_it:e.body_en}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* expertise */}
      <div id="expertise" ref={expertiseRef} className="reveal" style={S.block}>
        <div style={S.blockLabel}>
          <span>04 / {t('Competenze','Expertise')}</span>
          <span style={{opacity:.4}}>{t('Stack e capacità','Stack & capabilities')}</span>
        </div>
        <div style={S.skillGrid}>
          {window.SKILLS[lang].map((g, gi) => (
            <div key={g.group} style={S.skillCol}>
              <div style={S.skillNum}>0{gi+1}</div>
              <div style={S.skillGrp}>{g.group}</div>
              <div>{g.items.map(i => <div key={i} style={S.skillItem}>— {i}</div>)}</div>
            </div>
          ))}
        </div>
        <div style={S.langLine}>
          <div style={S.langLineLbl}>{t('Lingue','Languages')}</div>
          <div style={S.langLineItems}>
            {window.LANGS_SPOKEN.map(l => (
              <span key={l.lang} style={S.langLineItem}>
                <b>{l.lang}</b> <span style={{opacity:.5}}>· {lang==='it'?l.level_it:l.level_en}</span>
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* contact */}
      <div id="contact" ref={contactRef} className="reveal" style={S.contact}>
        <div style={S.blockLabel}>
          <span>05 / {t('Parliamone','Let\u2019s talk')}</span>
          <span style={{opacity:.4}}>{t('Risposta entro 24h','Reply within 24h')}</span>
        </div>
        <div style={S.cBig}>
          {t(
            'Hai un processo industriale che vuoi trasformare in un sistema autonomo?',
            'Got an industrial process you want to turn into an autonomous system?'
          )}
        </div>
        <div style={S.cLinks}>
          <a className="c-link magnetic" href={`mailto:${window.PROFILE.email}`} style={S.cLink} {...magneticProps()}>
            <span style={S.cLinkLabel}>Email</span>
            <span className="c-val" style={S.cLinkVal}>{window.PROFILE.email} →</span>
          </a>
          <a className="c-link magnetic" href={`https://${window.PROFILE.linkedin}`} style={S.cLink} {...magneticProps()}>
            <span style={S.cLinkLabel}>LinkedIn</span>
            <span className="c-val" style={S.cLinkVal}>davide-francesco-maggi →</span>
          </a>
          <a className="c-link magnetic" href={`https://${window.PROFILE.demo}`} style={S.cLink} {...magneticProps()}>
            <span style={S.cLinkLabel}>Demo live</span>
            <span className="c-val" style={S.cLinkVal}>Synapse (multi-agent) →</span>
          </a>
          <a className="c-link magnetic" href="uploads/Davide_Francesco_Maggi_CV (1) (1).pdf" download style={S.cLink} {...magneticProps()}>
            <span style={S.cLinkLabel}>CV PDF</span>
            <span className="c-val" style={S.cLinkVal}>Maggi_CV.pdf ↓</span>
          </a>
        </div>
      </div>

      <div style={S.foot}>
        <span>© 2026 Davide Francesco Maggi</span>
        <span>{t('Costruito a mano','Handcrafted')} · Broni, IT</span>
      </div>

      {/* Tweaks panel */}
      {tweakActive && (
        <div style={{...S.tweakPanel, transform: tweakOpen ? 'translateX(0)' : 'translateX(calc(100% - 44px))'}}>
          <div style={S.tweakHead} onClick={()=>setTweakOpen(!tweakOpen)}>
            <span style={{letterSpacing:'.1em', textTransform:'uppercase', fontSize:11}}>Tweaks</span>
            <span style={{opacity:.5, fontSize:11}}>{tweakOpen?'✕':'◀'}</span>
          </div>
          <div style={S.tweakBody}>
            <div style={S.tweakGroup}>
              <div style={S.tweakLbl}>Accent</div>
              <div style={S.swatchRow}>
                {['#ff5c3a','#d4a956','#7dd87f','#6ea8ff','#c96afe','#ffffff'].map(c => (
                  <span key={c} onClick={()=>setTweak('accent', c)}
                    style={{...S.swatch, background:c, border: tweaks.accent===c ? '2px solid #fff' : '2px solid transparent'}}/>
                ))}
              </div>
            </div>
            <div style={S.tweakGroup}>
              <div style={S.tweakLbl}>Heading style</div>
              <div style={S.optRow}>
                {[['mixed','Sans + serif italic'],['sans','All sans'],['serif','All serif']].map(([k,lbl])=>(
                  <span key={k} onClick={()=>setTweak('headingStyle', k)}
                    style={{...S.opt, ...(tweaks.headingStyle===k?S.optOn:{})}}>{lbl}</span>
                ))}
              </div>
            </div>
            <div style={S.tweakGroup}>
              <div style={S.tweakLbl}>Project layout</div>
              <div style={S.optRow}>
                {[['grid3','Grid 3-col'],['list','List with detail'],['featured','Featured + grid']].map(([k,lbl])=>(
                  <span key={k} onClick={()=>setTweak('projectLayout', k)}
                    style={{...S.opt, ...(tweaks.projectLayout===k?S.optOn:{})}}>{lbl}</span>
                ))}
              </div>
            </div>
            <div style={S.tweakGroup}>
              <div style={S.tweakLbl}>Effects</div>
              <div style={S.optRow}>
                <span onClick={()=>setTweak('showMarquee', !tweaks.showMarquee)}
                  style={{...S.opt, ...(tweaks.showMarquee?S.optOn:{})}}>Marquee</span>
                <span onClick={()=>setTweak('showCursor', !tweaks.showCursor)}
                  style={{...S.opt, ...(tweaks.showCursor?S.optOn:{})}}>Cursor glow</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const MetaCol = ({label, value}) => (
  <div>
    <div style={S.heroMetaLabel}>{label}</div>
    <div style={S.heroMetaVal}>{value}</div>
  </div>
);

const CounterCol = ({label, to, suffix}) => {
  const [val, ref] = useCountUp(to, 1400);
  return (
    <div ref={ref}>
      <div style={S.heroMetaLabel}>{label}</div>
      <div style={S.heroMetaVal}>{val}{suffix}</div>
    </div>
  );
};

const GridLayout = ({visible, lang, t}) => {
  const gridRef = useReveal(0.08);
  return (
    <div ref={gridRef} className="stagger-parent" style={S.pGrid}>
      {visible.map((p, i) => (
        <div key={p.id} className="p-card stagger-child" style={{...S.pCard, transitionDelay: `${i * 70}ms`, ...(p.featured?S.pFeatured:{})}}>
          <div style={S.pHead}>
            <span style={S.pYear}>{p.year}</span>
            <span style={S.pSector}>{p.sector}</span>
          </div>
          <div style={S.pTitle}>{lang==='it'?p.title_it:p.title_en}</div>
          <div style={S.pClient}>{p.client}</div>
          <div style={S.pSum}>{lang==='it'?p.summary_it:p.summary_en}</div>
          <div style={S.pTags}>{p.tags.slice(0,4).map(x=><span key={x} style={S.pTag}>{x}</span>)}</div>
          {p.featured && <div style={S.pStar}>★ {t('Di punta','Featured')}</div>}
        </div>
      ))}
    </div>
  );
};

const ListLayout = ({visible, lang, t, expanded, setExpanded}) => (
  <div style={{border:'1px solid rgba(255,255,255,.08)'}}>
    {visible.map((p,i) => (
      <div key={p.id}>
        <div onClick={()=>setExpanded(expanded===p.id?null:p.id)}
             className="p-card"
             style={{display:'grid', gridTemplateColumns:'100px 1fr 180px 100px 40px', gap:20, alignItems:'center',
                     padding:'22px 28px', borderBottom:'1px solid rgba(255,255,255,.08)', cursor:'pointer',
                     background: p.featured ? 'rgba(var(--accent-rgb),.04)' : 'transparent'}}>
          <span style={{fontFamily:'"IBM Plex Mono", monospace', fontSize:12, opacity:.6}}>{p.year}</span>
          <div>
            <div style={{fontSize:20, fontWeight:500, letterSpacing:'-.01em'}}>{lang==='it'?p.title_it:p.title_en}</div>
            <div style={{fontSize:13, opacity:.5, marginTop:4}}>{lang==='it'?p.kind_it:p.kind_en}</div>
          </div>
          <span style={{fontSize:13, opacity:.7}}>{p.client}</span>
          <span style={{fontSize:11, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--accent)'}}>{p.sector}</span>
          <span style={{fontSize:14, opacity:.5, textAlign:'right'}}>{expanded===p.id?'−':'+'}</span>
        </div>
        {expanded===p.id && (
          <div style={{padding:'22px 28px 28px 148px', background:'rgba(255,255,255,.02)', borderBottom:'1px solid rgba(255,255,255,.08)'}}>
            <div style={{fontSize:16, lineHeight:1.6, maxWidth:720, marginBottom:16}}>{lang==='it'?p.summary_it:p.summary_en}</div>
            <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>{p.tags.map(x=><span key={x} style={S.pTag}>{x}</span>)}</div>
          </div>
        )}
      </div>
    ))}
  </div>
);

const FeaturedLayout = ({visible, lang, t}) => {
  const feat = visible.filter(p=>p.featured);
  const rest = visible.filter(p=>!p.featured);
  return (
    <div>
      {feat.map(p => (
        <div key={p.id} className="p-card" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, border:'1px solid rgba(255,255,255,.08)', marginBottom:20}}>
          <div style={{padding:44, background:'rgba(var(--accent-rgb),.06)', borderRight:'1px solid rgba(255,255,255,.08)'}}>
            <div style={{fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--accent)', marginBottom:20}}>★ {t('In evidenza','Featured')} · {p.year}</div>
            <div style={{fontSize:40, fontWeight:500, letterSpacing:'-.02em', lineHeight:1.1}}>{lang==='it'?p.title_it:p.title_en}</div>
            <div style={{marginTop:12, fontSize:16, opacity:.7}}>{p.client} · {lang==='it'?p.kind_it:p.kind_en}</div>
          </div>
          <div style={{padding:44}}>
            <div style={{fontSize:16, lineHeight:1.6, marginBottom:24}}>{lang==='it'?p.summary_it:p.summary_en}</div>
            <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>{p.tags.map(x=><span key={x} style={S.pTag}>{x}</span>)}</div>
          </div>
        </div>
      ))}
      <GridLayout visible={rest} lang={lang} t={t} />
    </div>
  );
};

const S = {
  page: { background:'#0a0a0a', color:'#f2f0ec', minHeight:'100vh', position:'relative', overflow:'hidden' },
  glow: { position:'fixed', width:600, height:600, borderRadius:'50%', background:'radial-gradient(circle, rgba(var(--accent-rgb),.1) 0%, transparent 60%)', transform:'translate(-50%,-50%)', pointerEvents:'none', zIndex:1, transition:'transform .08s linear' },
  frame: { position:'absolute', inset:0, pointerEvents:'none', zIndex:1 },
  colLine: { position:'absolute', top:0, bottom:0, left:0, width:1, background:'rgba(255,255,255,.035)' },

  top: { display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'center', padding:'22px 48px', borderBottom:'1px solid rgba(255,255,255,.08)', position:'sticky', top:0, zIndex:10, background:'rgba(10,10,10,.85)', backdropFilter:'blur(12px)' },
  logo: { fontSize:20, fontWeight:700, letterSpacing:'-.02em' },
  nav: { display:'flex', gap:30, justifyContent:'center' },
  navLink: { fontSize:11, letterSpacing:'.08em', opacity:.55, cursor:'pointer', textTransform:'uppercase', transition:'opacity .15s' },
  langWrap: { display:'flex', gap:6, justifyContent:'flex-end', fontSize:11 },
  lang: { cursor:'pointer', opacity:.4, padding:'5px 10px', border:'1px solid transparent', letterSpacing:'.08em' },
  langOn: { opacity:1, border:'1px solid rgba(255,255,255,.25)' },

  hero: { padding:'120px 48px 90px', maxWidth:1440, margin:'0 auto', position:'relative', zIndex:2 },
  heroTag: { display:'flex', gap:14, alignItems:'center', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', marginBottom:56, opacity:.75, flexWrap:'wrap' },
  live: { color:'var(--accent)', fontSize:9, animation:'v3blink 1.8s infinite' },
  sep: { opacity:.3 },
  h1: { fontSize:'clamp(72px, 11vw, 172px)', fontWeight:500, lineHeight:.88, letterSpacing:'-.045em', margin:0 },
  subhead: { marginTop:56, fontSize:22, lineHeight:1.5, maxWidth:820, opacity:.78, fontWeight:400 },
  heroMeta: { marginTop:96, display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:30, paddingTop:32, borderTop:'1px solid rgba(255,255,255,.1)' },
  heroMetaLabel: { fontSize:11, letterSpacing:'.08em', textTransform:'uppercase', opacity:.5, marginBottom:10 },
  heroMetaVal: { fontSize:20, fontWeight:500 },

  marquee: { overflow:'hidden', padding:'26px 0', borderTop:'1px solid rgba(255,255,255,.08)', borderBottom:'1px solid rgba(255,255,255,.08)', background:'rgba(255,255,255,.015)', position:'relative', zIndex:2 },
  marqueeTrack: { display:'flex', animation:'v3marquee 50s linear infinite', whiteSpace:'nowrap' },
  marqueeRow: { display:'flex', alignItems:'center' },
  marqueeItem: { fontSize:30, fontWeight:500, letterSpacing:'-.01em', whiteSpace:'nowrap' },

  block: { padding:'120px 48px', maxWidth:1440, margin:'0 auto', position:'relative', zIndex:2 },
  blockLabel: { display:'flex', justifyContent:'space-between', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', opacity:.65, marginBottom:48, paddingBottom:18, borderBottom:'1px solid rgba(255,255,255,.1)' },

  bioRow: { display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:80 },
  bioBig: { fontSize:30, lineHeight:1.35, letterSpacing:'-.01em', fontWeight:400 },
  bioSide: { fontSize:16, lineHeight:1.6, opacity:.7, marginBottom:28, fontStyle:'italic' },
  chipRow: { display:'flex', flexWrap:'wrap', gap:8 },
  chip: { fontSize:12, padding:'7px 14px', border:'1px solid rgba(255,255,255,.2)', borderRadius:999, letterSpacing:'.02em' },

  filters: { display:'flex', gap:6, marginBottom:32 },
  filter: { fontSize:11, letterSpacing:'.08em', textTransform:'uppercase', padding:'9px 16px', cursor:'pointer', border:'1px solid rgba(255,255,255,.15)', opacity:.65, transition:'all .15s' },
  filterOn: { opacity:1, background:'var(--accent)', borderColor:'var(--accent)', color:'#0a0a0a' },

  pGrid: { display:'grid', gridTemplateColumns:'repeat(3,1fr)', border:'1px solid rgba(255,255,255,.08)' },
  pCard: { padding:32, borderRight:'1px solid rgba(255,255,255,.08)', borderBottom:'1px solid rgba(255,255,255,.08)', transition:'background .2s', cursor:'pointer', position:'relative' },
  pFeatured: { background:'rgba(var(--accent-rgb),.05)' },
  pHead: { display:'flex', justifyContent:'space-between', fontSize:11, letterSpacing:'.08em', textTransform:'uppercase', opacity:.55, marginBottom:26 },
  pYear: {},
  pSector: { color:'var(--accent)' },
  pTitle: { fontSize:24, fontWeight:500, letterSpacing:'-.01em', lineHeight:1.15 },
  pClient: { marginTop:8, fontSize:13, opacity:.6 },
  pSum: { marginTop:16, fontSize:13, lineHeight:1.55, opacity:.82 },
  pTags: { marginTop:20, display:'flex', flexWrap:'wrap', gap:5 },
  pTag: { fontSize:10, letterSpacing:'.03em', padding:'3px 8px', background:'rgba(255,255,255,.06)', borderRadius:2 },
  pStar: { position:'absolute', top:14, right:16, fontSize:10, letterSpacing:'.08em', color:'var(--accent)', textTransform:'uppercase', fontWeight:500 },

  expList: {},
  expRow: { display:'grid', gridTemplateColumns:'160px 1fr', gap:40, padding:'32px 0', borderBottom:'1px solid rgba(255,255,255,.08)', cursor:'default' },
  expYears: { fontFamily:'"IBM Plex Mono", monospace', fontSize:14, opacity:.7, letterSpacing:'.02em' },
  expEnd: { opacity:.5, fontSize:12, marginTop:2 },
  expMain: {},
  expRole: { fontSize:26, fontWeight:500, letterSpacing:'-.01em', transition:'color .15s' },
  expCo: { marginTop:6, fontSize:14, opacity:.75 },
  expBody: { marginTop:12, fontSize:15, lineHeight:1.6, opacity:.75, maxWidth:720 },

  skillGrid: { display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:64 },
  skillCol: {},
  skillNum: { fontSize:52, fontWeight:400, color:'var(--accent)', marginBottom:12, letterSpacing:'-.02em', fontFamily:'"Instrument Serif", serif', fontStyle:'italic' },
  skillGrp: { fontSize:18, fontWeight:500, marginBottom:22, paddingBottom:14, borderBottom:'1px solid rgba(255,255,255,.15)' },
  skillItem: { fontSize:14, padding:'6px 0', opacity:.82 },
  langLine: { marginTop:56, paddingTop:24, borderTop:'1px solid rgba(255,255,255,.08)', display:'grid', gridTemplateColumns:'160px 1fr', gap:40 },
  langLineLbl: { fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', opacity:.55 },
  langLineItems: { display:'flex', flexWrap:'wrap', gap:28, fontSize:15 },
  langLineItem: {},

  contact: { padding:'140px 48px 80px', maxWidth:1440, margin:'0 auto', position:'relative', zIndex:2, borderTop:'1px solid rgba(255,255,255,.1)' },
  cBig: { fontSize:'clamp(44px, 6.5vw, 92px)', fontWeight:500, lineHeight:1.02, letterSpacing:'-.035em', margin:'10px 0 72px', maxWidth:1200 },
  cLinks: { display:'grid', gridTemplateColumns:'repeat(2,1fr)', border:'1px solid rgba(255,255,255,.1)' },
  cLink: { display:'flex', justifyContent:'space-between', alignItems:'center', padding:'32px 36px', borderRight:'1px solid rgba(255,255,255,.1)', borderBottom:'1px solid rgba(255,255,255,.1)', transition:'background .2s' },
  cLinkLabel: { fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', opacity:.5 },
  cLinkVal: { fontSize:24, fontWeight:500, letterSpacing:'-.01em', transition:'color .15s' },

  foot: { display:'flex', justifyContent:'space-between', padding:'28px 48px', fontSize:11, opacity:.4, letterSpacing:'.08em', textTransform:'uppercase', borderTop:'1px solid rgba(255,255,255,.08)', position:'relative', zIndex:2 },

  tweakPanel: { position:'fixed', right:0, top:'50%', transform:'translateY(-50%)', width:280, background:'#141414', border:'1px solid rgba(255,255,255,.15)', borderRight:'none', zIndex:100, transition:'transform .25s', fontSize:12 },
  tweakHead: { display:'flex', justifyContent:'space-between', padding:'14px 16px', borderBottom:'1px solid rgba(255,255,255,.1)', cursor:'pointer', background:'#1a1a1a' },
  tweakBody: { padding:'16px' },
  tweakGroup: { marginBottom:18 },
  tweakLbl: { fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', opacity:.55, marginBottom:8 },
  swatchRow: { display:'flex', gap:8 },
  swatch: { width:28, height:28, borderRadius:'50%', cursor:'pointer', transition:'transform .1s' },
  optRow: { display:'flex', flexWrap:'wrap', gap:4 },
  opt: { fontSize:11, padding:'6px 10px', border:'1px solid rgba(255,255,255,.15)', cursor:'pointer', opacity:.7, transition:'all .15s' },
  optOn: { opacity:1, background:'var(--accent)', borderColor:'var(--accent)', color:'#0a0a0a' },
};

window.Site = Site;