/* ============================================================
   Iyad Assaad Nekka — palette
   ink      #05060B   base, near-black
   slate    #0D1019   raised surfaces
   violet   #7C5CFF   primary accent (nodes, links)
   azure    #3D8BFF   secondary accent (edges)
   flag     #FF4D6D   anomaly accent — used sparingly, on purpose
   paper    #E9EBF4   primary text
   mute     #868DA6   secondary text
   ============================================================ */

:root{
  --ink:#05060B;
  --slate:#0D1019;
  --slate-2:#11141F;
  --violet:#7C5CFF;
  --azure:#3D8BFF;
  --flag:#FF4D6D;
  --paper:#E9EBF4;
  --mute:#868DA6;
  --line:rgba(124,92,255,.16);
  --line-soft:rgba(233,235,244,.08);

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1080px;
  --pad:clamp(1.25rem,5vw,4rem);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

a{color:var(--azure);text-decoration:none}
a:hover{color:var(--violet)}

:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--violet);color:#fff;
  padding:.6rem 1rem;z-index:100;
}
.skip:focus{left:.5rem;top:.5rem}

/* ── ambient canvas ──────────────────────────────────────── */
#graph{
  position:fixed;inset:0;
  width:100%;height:100%;
  z-index:0;
  display:block;
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(124,92,255,.16), transparent 58%),
    radial-gradient(90% 70% at 12% 92%, rgba(61,139,255,.12), transparent 60%);
}

/* ── chrome ──────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:1rem var(--pad);
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,rgba(5,6,11,.86),rgba(5,6,11,.42));
  border-bottom:1px solid var(--line-soft);
}
.wordmark{
  font-family:var(--display);
  font-weight:700;letter-spacing:.24em;
  font-size:.8rem;
  color:var(--paper);
}
.topnav{display:flex;gap:clamp(.9rem,2.6vw,2rem)}
.topnav a{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
}
.topnav a:hover{color:var(--paper)}

/* ── hero ────────────────────────────────────────────────── */
.hero{
  position:relative;z-index:5;
  padding:clamp(3.5rem,11vh,7.5rem) var(--pad) clamp(2.5rem,7vh,4.5rem);
  max-width:var(--wrap);
  margin-inline:auto;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,6vw,4.5rem);
  align-items:center;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet);
  margin:0 0 1.4rem;
}

.hero h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.9rem,9vw,5.4rem);
  line-height:.94;
  letter-spacing:-.035em;
  margin:0 0 1.6rem;
}
.surname{
  color:transparent;
  -webkit-text-stroke:1.2px var(--violet);
  paint-order:stroke fill;
}

.lede{
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);
  line-height:1.6;
  color:var(--paper);
  max-width:34ch;
  margin:0 0 2.2rem;
  font-weight:300;
}
.lede em{color:var(--violet);font-style:italic}

.hero-links{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{
  font-family:var(--mono);
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.72rem 1.25rem;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--paper);
  transition:border-color .2s,background .2s,color .2s;
}
.btn:hover{border-color:var(--violet);background:rgba(124,92,255,.1);color:var(--paper)}
.btn-solid{background:var(--violet);border-color:var(--violet);color:#fff}
.btn-solid:hover{background:#8f74ff;border-color:#8f74ff;color:#fff}

/* portrait as a node in the graph */
.portrait{
  position:relative;margin:0;
  width:clamp(150px,26vw,232px);
  aspect-ratio:1;
  flex-shrink:0;
}
.portrait img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  filter:grayscale(.28) contrast(1.05);
  position:relative;z-index:2;
}
.portrait-ring{
  position:absolute;inset:-10px;
  border-radius:50%;
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(61,139,255,.08), 0 0 44px rgba(124,92,255,.24);
}
.portrait-ring::after{
  content:"";
  position:absolute;inset:-1px;
  border-radius:50%;
  border-top:1px solid var(--violet);
  border-right:1px solid rgba(61,139,255,.5);
  animation:orbit 14s linear infinite;
}
@keyframes orbit{to{transform:rotate(360deg)}}

/* signature readout */
.readout{
  margin-top:clamp(2.5rem,7vh,4rem);
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--mute);
  padding:.55rem .9rem;
  border:1px solid var(--line-soft);
  border-radius:2px;
  background:rgba(13,16,25,.6);
  backdrop-filter:blur(6px);
  max-width:100%;
}
.readout .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--violet);
  flex-shrink:0;
  animation:pulse 2.4s ease-in-out infinite;
}
.readout .dot.alert{background:var(--flag)}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.readout-label{
  color:var(--violet);
  text-transform:uppercase;letter-spacing:.12em;
  font-size:.66rem;
}
#readout-text{color:var(--mute)}
#readout-text .hl{color:var(--paper)}
#readout-text .flag{color:var(--flag)}

/* ── bands ───────────────────────────────────────────────── */
.band{
  position:relative;z-index:5;
  padding:clamp(3.5rem,9vh,6rem) var(--pad);
}
.band-alt{
  background:rgba(13,16,25,.72);
  backdrop-filter:blur(10px);
  border-block:1px solid var(--line-soft);
}
.wrap{max-width:var(--wrap);margin-inline:auto}

.band h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.7rem,1.2rem + 2.1vw,2.75rem);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 1.8rem;
}

.prose{max-width:62ch;color:var(--mute)}
.prose p{margin:0 0 1.1rem}
.prose strong{color:var(--paper);font-weight:500}

.note{
  font-family:var(--mono);font-size:.74rem;
  color:var(--mute);margin:0 0 2rem;
}

/* research topics */
.topics{
  list-style:none;margin:3rem 0 0;padding:0;
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.topics li{
  background:var(--ink);
  padding:1.6rem 1.5rem;
}
.topics h3{
  font-family:var(--display);
  font-size:.95rem;font-weight:600;
  letter-spacing:.01em;
  margin:0 0 .6rem;
  color:var(--paper);
}
.topics p{margin:0;font-size:.9rem;color:var(--mute);line-height:1.6}

/* papers */
.papers{
  list-style:none;counter-reset:p;
  margin:0;padding:0;
  display:grid;gap:1.5rem;
}
.papers li{
  counter-increment:p;
  position:relative;
  padding:1.6rem 1.6rem 1.5rem 3.6rem;
  border:1px solid var(--line-soft);
  border-radius:3px;
  background:rgba(5,6,11,.55);
  transition:border-color .22s,transform .22s;
}
.papers li:hover{border-color:var(--line);transform:translateY(-2px)}
.papers li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute;left:1.5rem;top:1.75rem;
  font-family:var(--mono);font-size:.74rem;
  color:var(--violet);
}
.paper-head{
  display:flex;gap:1rem;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;
  margin-bottom:.8rem;
}
.paper-head h3{
  font-family:var(--display);
  font-size:1.02rem;font-weight:500;line-height:1.4;
  margin:0;color:var(--paper);
  max-width:56ch;
}
.tag{
  font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.28rem .6rem;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--mute);
  white-space:nowrap;
}
.tag-live{color:var(--violet);border-color:rgba(124,92,255,.4)}
.papers p{margin:0 0 .5rem;color:var(--mute);font-size:.92rem}
.papers .meta{
  font-family:var(--mono);font-size:.72rem;
  color:rgba(134,141,166,.75);margin:0;
}
.profiles-line{
  margin-top:2rem;font-size:.9rem;color:var(--mute);
}

/* services */
.services{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:2.5rem;
}
.services article{
  padding:1.5rem;
  border:1px solid var(--line-soft);
  border-left:2px solid var(--azure);
  border-radius:2px;
  background:rgba(13,16,25,.5);
}
.services h3{
  font-family:var(--display);
  font-size:.95rem;font-weight:600;margin:0 0 .55rem;
  color:var(--paper);
}
.services p{margin:0;font-size:.9rem;color:var(--mute);line-height:1.6}
.visit{
  margin-top:2rem;font-size:.9rem;color:var(--mute);
}

/* contact */
.channels{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:2.5rem;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.channel{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.35rem 1.4rem;
  background:var(--ink);
  color:var(--paper);
  transition:background .2s;
}
.channel:hover{background:var(--slate-2);color:var(--paper)}
.channel-k{
  font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--violet);
}
.channel-v{font-size:.92rem;word-break:break-word}

/* footer */
footer{
  position:relative;z-index:5;
  padding:2.5rem var(--pad) 3rem;
  border-top:1px solid var(--line-soft);
  background:rgba(5,6,11,.9);
}
footer p{
  max-width:var(--wrap);margin:0 auto;
  font-size:.82rem;color:var(--mute);
}
.colophon{
  margin-top:.5rem !important;
  font-family:var(--mono);font-size:.7rem;
  color:rgba(134,141,166,.6);
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:760px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:2.25rem;
  }
  .portrait{order:-1;width:132px}
  .lede{max-width:none}
  .paper-head h3{max-width:none}
  .papers li{padding-left:1.5rem;padding-top:2.9rem}
  .papers li::before{top:1.4rem;left:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}