/* ============================================================================
   Dr. Amine Marref — academic profile  (v2)
   Direction: "the measured profile." A confident dark hero (bright trace on a
   dark instrument panel) resolves into calm, precise light content. One green
   accent carried from the CV. Strict grid, generous whitespace, restraint.
   ========================================================================== */

:root {
  --ink:      #131a2b;
  --ink-2:    #1f2942;
  --paper:    #f4f6f8;
  --paper-2:  #ebeef2;
  --card:     #ffffff;
  --text:     #1c2333;
  --muted:    #5a6678;
  --faint:    #8a94a4;
  --line:     #dfe4ea;
  --line-2:   #ccd3dc;
  --accent:   #1f9d54;
  --accent-d: #1f7a3d;
  --accent-soft: #e7f4ec;
  --on-dark:  #eef2f6;
  --on-dark-mut: #9aa6b8;

  --ff-display: "Fraunces", Georgia, serif;
  --ff-body:    "Inter", system-ui, -apple-system, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --maxw: 1080px;
  --gutter: clamp(1.2rem, 5vw, 4rem);
  --r: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }
body { margin:0; font-family:var(--ff-body); font-size:16.5px; line-height:1.65; color:var(--text); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:var(--accent-d); text-decoration:none; }
a:hover { text-decoration:underline; }
em { font-style:italic; }
strong { font-weight:600; }
img { max-width:100%; display:block; }

.skip-link { position:absolute; left:-999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:.6rem 1rem; }
.skip-link:focus { left:0; }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ---- Top bar ---- */
.topbar { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:1rem; padding:1rem var(--gutter); transition:background .3s, border-color .3s, padding .3s; border-bottom:1px solid transparent; }
.topbar.scrolled { background:rgba(244,246,248,.88); backdrop-filter:saturate(150%) blur(12px); border-bottom-color:var(--line); padding-block:.7rem; }
.topbar__brand { font-family:var(--ff-display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; color:var(--on-dark); white-space:nowrap; transition:color .3s; }
.topbar.scrolled .topbar__brand { color:var(--ink); }
.topbar__brand:hover { text-decoration:none; }
.topbar__brand .mono { font-family:var(--ff-mono); font-size:.78em; color:var(--accent); }
.topbar__nav { display:flex; gap:.15rem; margin-left:auto; flex-wrap:wrap; }
.topbar__nav a { font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.02em; color:var(--on-dark-mut); padding:.35rem .7rem; border-radius:7px; transition:color .2s, background .2s; }
.topbar.scrolled .topbar__nav a { color:var(--muted); }
.topbar__nav a:hover, .topbar__nav a.is-active { color:var(--accent); text-decoration:none; }
.topbar.scrolled .topbar__nav a:hover { background:var(--accent-soft); }
.topbar__menu { display:none; flex-direction:column; gap:4px; margin-left:auto; background:none; border:0; cursor:pointer; padding:.4rem; }
.topbar__menu span { width:22px; height:2px; background:var(--on-dark); border-radius:2px; transition:.3s; }
.topbar.scrolled .topbar__menu span { background:var(--ink); }
@media (max-width:820px){
  .topbar__menu { display:flex; }
  .topbar__nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--card); border-bottom:1px solid var(--line); padding:0 var(--gutter); margin:0; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .28s ease, visibility 0s linear .28s, padding .28s ease; }
  .topbar__nav.is-open { max-height:80vh; overflow:auto; visibility:visible; padding:.5rem var(--gutter) 1rem; transition:max-height .28s ease, visibility 0s, padding .28s ease; }
  .topbar__nav a { color:var(--muted); padding:.7rem .3rem; font-size:.9rem; border-bottom:1px solid var(--line); }
}

/* ---- HERO ---- */
.hero { position:relative; background:var(--ink); color:var(--on-dark); padding-top:clamp(6rem,14vh,9rem); padding-bottom:clamp(3rem,8vh,5.5rem); overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 40%, transparent 100%); mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 40%, transparent 100%); }
.hero__inner { position:relative; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; grid-template-columns:minmax(180px,260px) 1fr; gap:clamp(1.6rem,5vw,3.5rem); align-items:center; }
.hero__portrait { position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:linear-gradient(160deg,#243049,#161f33); border:1px solid rgba(255,255,255,.1); }
.hero__portrait img { width:100%; height:100%; object-fit:cover; }
.hero__portrait .ph { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--ff-mono); font-size:.72rem; color:var(--on-dark-mut); letter-spacing:.05em; text-align:center; padding:1rem; }
.hero__portrait::after { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.16); border-radius:calc(var(--r) - 6px); pointer-events:none; }
.hero__eyebrow { font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 1.1rem; }
.hero h1 { font-family:var(--ff-display); font-weight:600; font-optical-sizing:auto; font-size:clamp(2.1rem,5.4vw,3.5rem); line-height:1.05; letter-spacing:-.025em; margin:0 0 .2rem; color:#fff; }
.hero__statement { font-family:var(--ff-display); font-weight:400; font-style:italic; font-size:clamp(1.15rem,2.6vw,1.6rem); line-height:1.4; color:var(--on-dark); margin:.6rem 0 1.4rem; max-width:34ch; }
.hero__statement .hl { font-style:normal; color:var(--accent); }
.hero__role { font-family:var(--ff-mono); font-size:.84rem; color:var(--on-dark-mut); margin:0 0 1.8rem; letter-spacing:.01em; }
.hero__role .dot { color:var(--accent); padding:0 .5rem; }
.hero__actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.01em; padding:.62rem 1.05rem; border-radius:9px; border:1px solid rgba(255,255,255,.2); color:var(--on-dark); background:transparent; transition:.18s; cursor:pointer; }
.btn:hover { border-color:var(--accent); color:#fff; text-decoration:none; transform:translateY(-1px); }
.btn--primary { background:var(--accent); border-color:var(--accent); color:#08230f; font-weight:500; }
.btn--primary:hover { background:#28b461; border-color:#28b461; color:#06200d; }
.btn svg { width:15px; height:15px; }
.section .btn { border-color:var(--line-2); color:var(--ink); }
.section .btn:hover { border-color:var(--accent-d); color:var(--accent-d); }
@media (max-width:680px){ .hero__inner { grid-template-columns:1fr; } .hero__portrait { max-width:none; } }

/* ---- Sections ---- */
.section { padding-block:clamp(3rem,7vw,5.5rem); }
.section--band { background:var(--paper-2); }
.section__head { margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.section__head h2 { max-width:24ch; }
.eyebrow { font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em; color:var(--accent-d); text-transform:lowercase; margin:0 0 .5rem; display:flex; align-items:baseline; gap:.5rem; }
.eyebrow .count { color:var(--faint); }
.section h2 { font-family:var(--ff-display); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.3rem); letter-spacing:-.02em; margin:0; color:var(--ink); line-height:1.1; }
.section__lead { font-size:1.08rem; color:var(--muted); margin:.8rem 0 0; }

/* About */
.about { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.about__bio p { margin:0 0 1rem; font-size:1.06rem; color:var(--text); }
.about__bio p:last-child { margin-bottom:0; }
.stats { display:grid; gap:0; border-top:2px solid var(--ink); }
.stat { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.stat__num { font-family:var(--ff-display); font-weight:600; font-size:1.8rem; color:var(--ink); line-height:1; letter-spacing:-.02em; }
.stat__lbl { font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.03em; color:var(--muted); text-transform:lowercase; text-align:right; }
@media (max-width:760px){ .about { grid-template-columns:1fr; } }

/* Research */
.research-lead { font-size:1.1rem; color:var(--text); max-width:64ch; margin:0 0 1.8rem; }
.area-cols { columns:2; column-gap:2.5rem; }
.area { break-inside:avoid; padding:.55rem 0 .55rem 1.4rem; position:relative; color:var(--text); border-bottom:1px solid var(--line); }
.area::before { content:""; position:absolute; left:0; top:1.05rem; width:7px; height:7px; border-radius:50%; background:var(--accent-d); }
@media (max-width:640px){ .area-cols { columns:1; } }

/* Publications */
.pub { padding:1rem 0; border-top:1px solid var(--line); }
.pub:first-child { border-top:0; }
.pub__year { font-family:var(--ff-mono); font-size:.82rem; color:var(--accent-d); padding-top:.15rem; }
.pub__title { font-family:var(--ff-display); font-weight:600; font-size:1.12rem; line-height:1.35; margin:0 0 .25rem; color:var(--ink); letter-spacing:-.01em; }
.pub__title a { color:var(--ink); }
.pub__title a:hover { color:var(--accent-d); }
.pub__meta { font-size:.92rem; color:var(--muted); margin:0; }
.pub__authors .me { color:var(--ink); font-weight:600; }
.pub__venue { font-style:italic; }
.pub__doi { font-family:var(--ff-mono); font-size:.74rem; }
.pub.is-hidden { display:none; }
@media (max-width:560px){ .pub { padding:.85rem 0; } }
.reveal-btn { margin-top:1.6rem; }

/* Timeline */
.tl__item { display:block; padding-block:1.3rem; border-top:1px solid var(--line); }
.tl__item:first-child { border-top:0; }
.tl__date { font-family:var(--ff-mono); font-size:.8rem; color:var(--muted); padding-top:.15rem; white-space:nowrap; }
.tl__date .present { color:var(--accent-d); }
.tl__title { font-family:var(--ff-display); font-weight:600; font-size:1.12rem; margin:0 0 .1rem; color:var(--ink); }
.tl__sub { font-size:.92rem; color:var(--muted); margin:0 0 .6rem; }
.tl__sub .inst { color:var(--accent-d); }
.tl__summary { margin:0 0 .5rem; color:var(--text); }
ul.points { list-style:none; margin:.3rem 0 0; padding:0; display:grid; gap:.35rem; }
ul.points li { position:relative; padding-left:1.1rem; color:var(--text); font-size:.96rem; }
ul.points li::before { content:"\203A"; position:absolute; left:0; color:var(--accent-d); font-weight:600; }
.tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.tag { font-family:var(--ff-mono); font-size:.68rem; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:.15rem .45rem; }
.section--band .tag { background:var(--card); }
@media (max-width:620px){ .tl__item { padding-block:1.1rem; } }

/* Teaching */
.teach-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.6rem; }
.teach-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.3rem; }
.section--band .teach-card { background:var(--paper); }
.teach-card .n { font-family:var(--ff-display); font-weight:600; font-size:2rem; color:var(--ink); line-height:1; letter-spacing:-.02em; }
.teach-card .l { font-family:var(--ff-mono); font-size:.76rem; color:var(--muted); margin-top:.4rem; text-transform:lowercase; letter-spacing:.02em; }
.teach-note { font-size:.95rem; color:var(--muted); margin:0; }

/* Detail disclosure */
.detail { margin-top:1.4rem; border-top:1px solid var(--line-2); }
.detail > summary { list-style:none; cursor:pointer; padding:1.1rem 0; display:flex; align-items:center; gap:.7rem; font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.03em; color:var(--ink); }
.detail > summary::-webkit-details-marker { display:none; }
.detail > summary .chev { transition:transform .25s; color:var(--accent-d); }
.detail[open] > summary .chev { transform:rotate(90deg); }
.detail__body { padding-bottom:1.5rem; }

.ctable { width:100%; border-collapse:collapse; font-size:.9rem; }
.ctable th { text-align:left; font-family:var(--ff-mono); font-weight:500; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); padding:.3rem .6rem .5rem 0; border-bottom:1px solid var(--line-2); }
.ctable td { padding:.4rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.ctable td:first-child { padding-left:0; }
.ctable .c-year { font-family:var(--ff-mono); color:var(--muted); white-space:nowrap; }
.ctable .c-inst { color:var(--accent-d); font-size:.85rem; }
.ctable .c-level { font-family:var(--ff-mono); font-size:.78rem; color:var(--muted); white-space:nowrap; }

.subhead { font-family:var(--ff-mono); font-size:.82rem; color:var(--ink-2); margin:1.6rem 0 .8rem; display:flex; gap:.5rem; align-items:baseline; }
.subhead:first-child { margin-top:0; }
.subhead .count { color:var(--faint); font-size:.76rem; }
.filterbar { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.chip { font-family:var(--ff-mono); font-size:.76rem; color:var(--muted); border:1px solid var(--line-2); background:var(--card); border-radius:18px; padding:.3rem .8rem; cursor:pointer; transition:.15s; }
.chip:hover { border-color:var(--accent-d); color:var(--accent-d); }
.chip.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }
.thesis { padding:.5rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:6rem 1fr auto; gap:0 1rem; align-items:baseline; }
.thesis__year { font-family:var(--ff-mono); font-size:.78rem; color:var(--muted); }
.thesis__role { font-size:.8rem; color:var(--ink-2); }
.thesis__role[data-role="Supervision"] { color:var(--accent-d); }
.thesis__title { color:var(--text); font-size:.92rem; }
.thesis__title .inst { color:var(--accent-d); }
.thesis__note { font-family:var(--ff-mono); font-size:.68rem; color:var(--faint); }
.thesis__level { font-family:var(--ff-mono); font-size:.74rem; color:var(--muted); white-space:nowrap; }
@media (max-width:680px){ .thesis { grid-template-columns:1fr; gap:.1rem; } .thesis__title,.thesis__level{ grid-column:1/-1; } }

.dated__item { display:block; padding-block:.85rem; border-top:1px solid var(--line); }
.dated__item:first-child { border-top:0; }
.dated__year { font-family:var(--ff-mono); font-size:.82rem; color:var(--accent-d); }
.dated__text { color:var(--text); font-size:.95rem; }
.plain { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.plain li { position:relative; padding-left:1.2rem; color:var(--text); font-size:.94rem; }
.plain li::before { content:"\00B7"; position:absolute; left:.25rem; color:var(--accent-d); font-weight:700; font-size:1.3em; line-height:1; }
.role { display:block; padding-block:.5rem; border-top:1px solid var(--line); }
.role:first-child { border-top:0; }
.role__period { font-family:var(--ff-mono); font-size:.78rem; color:var(--muted); white-space:nowrap; }
.role__duty .inst { color:var(--accent-d); }
@media (max-width:560px){ .role,.dated__item { grid-template-columns:1fr; gap:.15rem; } }

/* Skills */
.skillgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem; }
.skillcard { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; }
.section--band .skillcard { background:var(--paper); }
.skillcard h3 { font-family:var(--ff-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-d); margin:0 0 .6rem; }
.skillcard .items { display:flex; flex-wrap:wrap; gap:.35rem; }
.skillcard .items span { font-size:.82rem; color:var(--text); background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:.15rem .5rem; }
.section--band .skillcard .items span { background:var(--card); }
.langs { display:grid; gap:.7rem; max-width:340px; margin-top:1.4rem; }
.lang { display:grid; grid-template-columns:5.5rem 1fr; align-items:center; gap:1rem; }
.lang__name { font-size:.94rem; }
.lang__dots { display:flex; gap:5px; }
.lang__dots i { width:11px; height:11px; border-radius:50%; background:var(--line-2); }
.lang__dots i.on { background:var(--accent-d); }

/* Contact + footer */
.contact { background:var(--ink); color:var(--on-dark); padding-block:clamp(3rem,7vw,5rem); }
.contact h2 { font-family:var(--ff-display); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.3rem); color:#fff; margin:0 0 .6rem; letter-spacing:-.02em; }
.contact p { color:var(--on-dark-mut); margin:0 0 1.6rem; max-width:48ch; }
.contact .eyebrow { color:var(--accent); }
.contact__links { display:flex; flex-wrap:wrap; gap:.6rem; }
.footer { background:var(--ink); color:var(--on-dark-mut); border-top:1px solid rgba(255,255,255,.08); padding-block:2rem; }
.footer .wrap { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.footer__meta { font-family:var(--ff-mono); font-size:.74rem; }
.footer__links { display:flex; gap:1.2rem; flex-wrap:wrap; }
.footer__links a { font-family:var(--ff-mono); font-size:.76rem; color:var(--on-dark-mut); }
.footer__links a:hover { color:var(--accent); }

.totop { position:fixed; right:1.2rem; bottom:1.2rem; z-index:40; width:42px; height:42px; border-radius:50%; background:var(--accent); color:#06200d; border:0; cursor:pointer; font-size:1.1rem; box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:0; transform:translateY(8px); transition:.2s; }
.totop.show { opacity:1; transform:none; }
.totop:hover { background:#28b461; }
.loading { padding:8rem var(--gutter); color:var(--muted); font-family:var(--ff-mono); text-align:center; }

.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }
@media print { .topbar,.totop,.hero__actions,.contact__links,.filterbar { display:none !important; } .hero,.contact,.footer { background:#fff; color:#000; } }