/* ============================================================
   Raphaël Rubrice — fluorescence field
   Design system: dark-field microscope × single-cell latent space
   ============================================================ */

/* ---- tokens ---- */
:root{
  /* surfaces — tinted near-black, never pure */
  --bg:        #070c0a;
  --bg-2:      #0b1310;
  --bg-3:      #0f1a15;
  --line:      #1a2620;
  --line-soft: #131d18;

  /* ink */
  --ink:    #ecf3ee;
  --muted:  #8ca295;
  --faint:  #5c6f64;

  /* green signal ramp — GFP / embedding encoding, used as a RANGE not a flat accent */
  --g-deep:   #0e6e55;
  --g-mid:    #1fb877;
  --g-bright: #54e892;
  --g-lime:   #b8f76a;
  --accent:   #34d98c;   /* readable link green on dark */
  --accent-d: #1c8d5e;

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* fluid scale */
  --t--1: clamp(0.74rem, 0.71rem + 0.14vw, 0.82rem);
  --t-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --t-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --t-2:  clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --t-3:  clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  --t-4:  clamp(2.7rem, 1.7rem + 4.6vw, 5.6rem);

  /* space — 8px base */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;  --s6: 4.5rem; --s7: 7rem;  --s8: 10rem;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.68,.32,1);

  --gradient: linear-gradient(100deg, var(--g-deep), var(--g-mid) 38%, var(--g-bright) 70%, var(--g-lime));
}

/* ---- reset ---- */
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:var(--t-0); line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }

/* faint background grain + cell-field tint, fixed so it doesn't scroll-jank */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(31,184,119,.10), transparent 60%),
    radial-gradient(700px 500px at 8% 108%, rgba(14,110,85,.10), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- layout helpers ---- */
.wrap{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; }
.eyebrow{
  font-family:var(--mono); font-size:var(--t--1); letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); font-weight:500;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:""; width:1.6rem; height:1px; background:var(--accent); opacity:.6; }

/* ---- skip link ---- */
.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--g-bright); color:#04140d; padding:.6rem 1rem; border-radius:4px;
  font-family:var(--mono); font-size:var(--t--1);
}
.skip:focus{ left:.8rem; top:.8rem; }

/* ============================================================
   header / nav
   ============================================================ */
.top{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(7,12,10,.86), rgba(7,12,10,.5));
  border-bottom:1px solid var(--line-soft);
}
.top .wrap{ display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand{
  font-family:var(--mono); font-size:var(--t--1); letter-spacing:.04em; color:var(--ink);
  display:flex; align-items:center; gap:.6rem; font-weight:500;
}
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--g-bright); box-shadow:0 0 10px 1px rgba(84,232,146,.8);
}
.nav{ display:flex; gap:1.6rem; align-items:center; }
.nav a{
  font-family:var(--mono); font-size:var(--t--1); letter-spacing:.06em;
  color:var(--muted); text-transform:lowercase; position:relative; padding:.2rem 0;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--accent); transition:width .25s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ width:100%; }
.nav-toggle{ display:none; }

/* ============================================================
   hero
   ============================================================ */
.hero{ position:relative; min-height:clamp(560px, 92vh, 920px); display:flex; align-items:center; }
#field{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
/* scrim keeps left-aligned headline readable over the cell cloud */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(95deg, var(--bg) 8%, rgba(7,12,10,.72) 38%, rgba(7,12,10,.15) 70%, transparent),
    linear-gradient(to top, var(--bg), transparent 22%);
}
.hero .wrap{ position:relative; z-index:2; padding:var(--s6) 0; }
.hero-inner{ max-width:46rem; }
.hero h1{
  font-family:var(--display); font-weight:430;
  font-size:var(--t-4); line-height:1.01; letter-spacing:-.022em;
  margin:.7rem 0 0; font-optical-sizing:auto;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
.hero h1 .glow{
  background:var(--gradient); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-style:italic;
  font-variation-settings:"WONK" 1; padding-right:.05em;
}
.hero p.lede{
  font-size:var(--t-1); color:var(--ink); max-width:38rem;
  margin:var(--s3) 0 0; line-height:1.5; font-weight:350;
}
.hero p.lede b{ color:var(--ink); font-weight:600; }
.hero .meta{
  margin-top:var(--s4); display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem; align-items:center;
}
.hero-avatar{
  width:176px; height:176px; border-radius:50%; overflow:hidden;
  border:1.5px solid rgba(52,217,140,.35);
  box-shadow:0 0 22px rgba(52,217,140,.12);
  margin-bottom:var(--s3);
}
.hero-avatar img{ width:100%; height:100%; object-fit:cover; }
.hero-intro{
  display:flex; align-items:center; gap:var(--s4); margin:var(--s3) 0 0;
}
.hero-intro .hero-avatar{ margin-bottom:0; flex-shrink:0; }
.hero-intro h1{ margin:0; }
.work-citation{
  font-family:var(--mono); font-size:var(--t--1); color:var(--muted);
  line-height:1.6; letter-spacing:.02em; margin:0 0 var(--s3);
}
.work-citation em{ color:var(--muted); font-style:italic; }
.work-citation strong{ color:var(--ink); font-weight:600; font-style:normal; }
.work-citation .me{ color:var(--accent); font-weight:600; }
.work-with{
  font-family:var(--mono); font-size:var(--t--1); color:var(--ink);
  margin:var(--s2) 0 0; letter-spacing:.02em; line-height:1.6;
}
.work-with::before{ content:"with "; color:var(--accent); font-weight:500; }
.work-with a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.work-with a:hover{ color:var(--accent); }
.btn{
  font-family:var(--mono); font-size:var(--t--1); letter-spacing:.04em;
  padding:.72rem 1.15rem; border-radius:7px; display:inline-flex; gap:.55rem; align-items:center;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn-solid{ background:var(--g-bright); color:#04140d; font-weight:600; }
.btn-solid:hover{ transform:translateY(-2px); background:var(--g-lime); }
.btn-ghost{ color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* instrument readout */
.readout{
  position:absolute; right:1.6rem; bottom:1.4rem; z-index:2;
  font-family:var(--mono); font-size:.7rem; color:var(--faint);
  letter-spacing:.04em; text-align:right; line-height:1.7; pointer-events:none;
  display:none;
}
.readout b{ color:var(--accent); font-weight:500; }

/* ============================================================
   sections
   ============================================================ */
section{ position:relative; }
.band{ padding-block:var(--s7); }
.band-tight{ padding-block:var(--s6); }
.section-head{ max-width:42rem; margin-bottom:var(--s5); }
.section-head h2{
  font-family:var(--display); font-weight:440; font-size:var(--t-3);
  letter-spacing:-.015em; line-height:1.06; margin:var(--s2) 0 0;
}
.section-head p{ color:var(--muted); margin:var(--s2) 0 0; font-size:var(--t-1); font-weight:350; line-height:1.5; }

/* ---- trajectory ---- */
.traj{ border-top:1px solid var(--line); }
.traj-row{
  display:grid; grid-template-columns:3.2rem 8.5rem 1fr; gap:var(--s3);
  padding:var(--s4) 0; border-bottom:1px solid var(--line-soft);
  align-items:start; transition:background .3s var(--ease);
}
.traj-row:hover{ background:linear-gradient(90deg, rgba(31,184,119,.05), transparent 60%); }
.traj-num{ font-family:var(--mono); color:var(--accent); font-size:var(--t--1); padding-top:.4rem; }
.traj-when{ font-family:var(--mono); color:var(--muted); font-size:var(--t--1); padding-top:.45rem; letter-spacing:.02em; }
.traj-what h3{ font-size:var(--t-1); margin:0 0 .25rem; font-weight:600; letter-spacing:-.01em; }
.traj-what h3 .place{ color:var(--accent); }
.traj-what p{ margin:0; color:var(--muted); font-size:var(--t-0); max-width:42rem; }
.traj-row.future .traj-num{ color:var(--g-lime); }
.traj-row.future .traj-what h3 .place{ color:var(--g-lime); }

/* ---- research vision ---- */
.vision{ background:
   linear-gradient(180deg, transparent, rgba(14,110,85,.06) 50%, transparent);
   border-block:1px solid var(--line); }
.vision .q{
  font-family:var(--display); font-weight:420; font-size:var(--t-3);
  line-height:1.12; letter-spacing:-.014em; max-width:24ch; margin:0;
}
.vision .q em{ color:transparent; background:var(--gradient); -webkit-background-clip:text; background-clip:text; font-style:italic; }
.vision-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:start; margin-top:var(--s4); }
.vision-body p{ color:var(--muted); font-size:var(--t-1); line-height:1.55; margin:0 0 var(--s3); font-weight:350; }
.vision-body p b{ color:var(--ink); font-weight:600; }
.fields{ display:flex; flex-direction:column; gap:.9rem; margin-top:var(--s2); }
.field-chip{
  font-family:var(--mono); font-size:var(--t--1); letter-spacing:.03em; color:var(--muted);
  border:1px solid var(--line); border-left:2px solid var(--accent);
  padding:.7rem .9rem; border-radius:0 6px 6px 0; background:var(--bg-2);
}
.field-chip b{ color:var(--ink); display:block; font-weight:600; letter-spacing:0; font-family:var(--body); margin-bottom:.1rem; }

/* ---- work ---- */
.work-item{
  display:grid; grid-template-columns:1fr; gap:var(--s2);
  padding:var(--s5) 0; border-top:1px solid var(--line);
}
.work-item:last-child{ border-bottom:1px solid var(--line); }
.work-meta{ font-family:var(--mono); font-size:var(--t--1); color:var(--muted); letter-spacing:.03em; display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.work-meta .award{ color:var(--g-lime); }
.work-item h3{
  font-family:var(--display); font-weight:440; font-size:var(--t-2);
  letter-spacing:-.012em; line-height:1.1; margin:0; max-width:24ch;
}
.work-item h3 .sub{ display:block; font-family:var(--body); font-size:var(--t-0); color:var(--muted); font-weight:400; letter-spacing:0; margin-top:.4rem; }
.work-item p{ margin:0; color:var(--muted); max-width:62ch; line-height:1.6; }
.work-links{ display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:.4rem; }
.work-links a{
  font-family:var(--mono); font-size:var(--t--1); color:var(--ink); letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.45rem; transition:color .2s var(--ease);
}
.work-links a .arr{ color:var(--accent); transition:transform .2s var(--ease); }
.work-links a:hover{ color:var(--accent); }
.work-links a:hover .arr{ transform:translate(2px,-2px); }
@media (min-width:760px){
  .work-item{ grid-template-columns:15rem 1fr; gap:var(--s4); }
  .work-left{ position:sticky; top:80px; align-self:start; }
}

/* ---- distinctions ---- */
.dist{ border-top:1px solid var(--line); }
.dist-list{ display:grid; gap:0; }
.dist-row{
  display:grid; grid-template-columns:1fr auto; gap:var(--s3); align-items:baseline;
  padding:var(--s3) 0; border-bottom:1px solid var(--line-soft);
}
.dist-row .d-name{ font-size:var(--t-1); font-weight:500; }
.dist-row .d-name span{ color:var(--muted); font-weight:400; font-size:var(--t-0); }
.dist-row .d-tag{ font-family:var(--mono); font-size:var(--t--1); color:var(--accent); letter-spacing:.04em; white-space:nowrap; }

/* ---- contact ---- */
.contact{ border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(31,184,119,.04)); }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:var(--s5); }
.contact h2{ font-family:var(--display); font-weight:440; font-size:var(--t-3); letter-spacing:-.015em; margin:var(--s2) 0 0; line-height:1.06; }
.contact p.where{ color:var(--muted); font-size:var(--t-1); max-width:40ch; margin:var(--s3) 0 0; font-weight:350; line-height:1.5; }
.contact p.where b{ color:var(--ink); font-weight:600; }
.links-col{ display:flex; flex-direction:column; gap:0; }
.link-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:var(--t-0); color:var(--ink);
  transition:padding-left .2s var(--ease), color .2s var(--ease);
}
.link-row:first-child{ border-top:1px solid var(--line); }
a.link-row:hover{ padding-left:.6rem; color:var(--accent); }
.link-static{ cursor:default; }
.link-row .lbl{ color:var(--muted); font-size:var(--t--1); letter-spacing:.1em; text-transform:uppercase; }
.link-row .val{ display:flex; align-items:center; gap:.7rem; }
@media (min-width:820px){
  .contact-grid{ grid-template-columns:1fr 1fr; gap:var(--s7); align-items:center; }
}

/* footer */
footer{ padding:var(--s5) 0 var(--s6); border-top:1px solid var(--line-soft); }
footer .wrap{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between; align-items:center; }
footer small{ font-family:var(--mono); font-size:var(--t--1); color:var(--faint); letter-spacing:.03em; }
footer .sig{ font-family:var(--mono); font-size:var(--t--1); color:var(--muted); }
footer .sig b{ color:var(--accent); font-weight:500; }

/* ============================================================
   motion — scroll reveal (varied, not uniform)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.06s; }
.reveal.d2{ transition-delay:.13s; }
.reveal.d3{ transition-delay:.2s; }
.reveal.slide{ transform:translateX(-22px); }
.reveal.slide.in{ transform:none; }

:focus-visible{ outline:2px solid var(--g-bright); outline-offset:3px; border-radius:3px; }
:focus:not(:focus-visible){ outline:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* ============================================================
   responsive
   ============================================================ */
@media (min-width:640px){ .readout{ display:block; } }

@media (max-width:720px){
  .nav{
    position:fixed; inset:62px 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:0; max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  .nav.open{ max-height:340px; }
  .nav a{ padding:1rem 1.4rem; border-bottom:1px solid var(--line-soft); font-size:var(--t-0); width:100%; }
  .nav a::after{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;
    padding:.4rem; width:34px;
  }
  .nav-toggle span{ height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .traj-row{ grid-template-columns:2.4rem 1fr; gap:var(--s2) var(--s3); }
  .traj-when{ grid-column:2; padding-top:0; margin-top:-.2rem; }
  .traj-what{ grid-column:2; }
  .vision-grid{ grid-template-columns:1fr; gap:var(--s4); }
  .dist-row{ grid-template-columns:1fr; gap:.3rem; }
  .dist-row .d-tag{ order:-1; }
}

@media (max-width:560px){
  .hero-intro{ flex-direction:column; align-items:flex-start; }
}