/*  Density Field Dynamics — ultra-clean, research-first design
    System fonts, no external deps. Dark-mode native with CSS vars.
*/
:root{
  --bg: #0b0b10;
  --panel:#10131a;
  --text:#e9edf3;
  --muted:#a6b0c0;
  --line:#1b2130;
  --accent:#a8ff60;
  --accent-2:#60e5ff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --maxw: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  color:var(--text); background:radial-gradient(1200px 800px at 80% -10%, #14203a 0%, transparent 60%), var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* containers */
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg, transparent, rgba(255,255,255,.02)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section h2{font-size:clamp(28px,2.8vw,36px); margin:0 0 22px}
.section .muted{color:var(--muted)}

/* header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(10px); background:rgba(11,11,16,.55); border-bottom:1px solid var(--line)}
.site-header .nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:inline-flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.5px; text-decoration:none; color:var(--text)}
.brand span:first-child{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg, #1d2a48, #0f1422); border:1px solid var(--line); box-shadow:var(--shadow)}
.brand::after{content:"Density Field Dynamics"; color:var(--muted); margin-left:.6rem; font-weight:600}
.menu{display:flex; gap:20px}
.menu a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px}
.menu a:hover{color:var(--text); background:rgba(255,255,255,.04)}
.nav-toggle{display:none; background:none; border:0; width:40px; height:40px}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--text); margin:5px auto; transition:.25s}

/* hero */
.hero{padding:10px 0 10px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.hero-copy h1{font-size:clamp(38px,5vw,56px); line-height:1.05; margin:0 0 14px}
.tagline{font-size:clamp(18px,2vw,21px); color:var(--muted)}
.psi{font-feature-settings:"ss01" 1}
.cta-row{display:flex; gap:12px; margin:24px 0}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--line); color:var(--text); text-decoration:none; background:rgba(255,255,255,.03)}
.btn:hover{background:rgba(255,255,255,.06)}
.btn.primary{background:linear-gradient(135deg, #17243f, #0d1528); border-color:#1f2a42; box-shadow:var(--shadow)}
.btn.tiny{padding:8px 10px; font-size:14px; border-radius:10px}
.btn.ghost{background:transparent}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; padding:0; list-style:none}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line); font-size:13px; color:var(--muted)}

.hero-vis{position:relative}
.gridfield{height:340px; border-radius:var(--radius); background:
  radial-gradient(80% 60% at 50% 0%, rgba(168,255,96,.15), transparent 60%),
  linear-gradient(180deg, rgba(96,229,255,.15), transparent),
  repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px),
  radial-gradient(1000px 600px at 100% 0%, rgba(255,255,255,.06), transparent 60%),
  linear-gradient(135deg, #0e1220, #0b0b10);
  border:1px solid var(--line); box-shadow:var(--shadow)}
.hero-vis figcaption{color:var(--muted); font-size:13px; margin-top:10px}

/* cards & grids */
.cards{display:grid; gap:16px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; font-size:20px}

.pubs{display:grid; grid-template-columns:1fr; gap:16px}
.pub{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.pub header h3{margin:0 0 8px}
.pub .label{color:var(--accent-2); font-weight:600; font-size:13px}
.pub .meta{display:flex; gap:10px; align-items:center}
.doi{display:inline-flex; align-items:center; gap:8px; color:var(--accent); text-decoration:none; font-weight:700}
.doi::before{content:"DOI"; font-size:11px; background:rgba(168,255,96,.12); border:1px solid rgba(168,255,96,.35); color:var(--accent); padding:2px 6px; border-radius:8px}

.lab-grid{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.lab{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.bullets{margin:10px 0 0; padding-left:18px}
.bullets li{margin:6px 0}

/* details / code */
details.bib{margin-top:18px}
details summary{cursor:pointer; color:var(--muted)}
pre{background:#0e121a; border:1px solid var(--line); border-radius:12px; padding:16px; overflow:auto}

/* contact */
.contact ul{list-style:none; padding:0; margin:8px 0 0}
.contact li{margin:6px 0}
.contact a{color:var(--accent)}

/* footer */
.site-footer{border-top:1px solid var(--line); padding:36px 0 60px}
.foot{display:flex; justify-content:space-between; align-items:center; gap:16px}
.muted{color:var(--muted)}

/* responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards.three, .lab-grid{grid-template-columns:1fr; gap:14px}
  .pub{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .menu{position:fixed; inset:64px 0 auto 0; background:rgba(15,17,24,.92); border-bottom:1px solid var(--line); transform:translateY(-120%); transition:.25s; padding:14px 20px; display:grid; gap:8px}
  .menu.open{transform:translateY(0)}
  .nav-toggle{display:block}
}

/* accessibility helpers */
.sr{position:absolute; clip:rect(0 0 0 0); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
