/* =========================================================
   Tarik [Lastname] — site styles
   Deep-water dark theme. One family (Archivo), contrast by
   width and weight rather than by mixing typefaces.
   ========================================================= */

:root{
  --deep:#0E1A20;
  --surface:#152830;
  --line:rgba(150,190,195,.16);
  --line-strong:rgba(150,190,195,.30);
  --text:#DDE7E5;
  --muted:#8FA6AC;
  --tide:#5FB8D4;
  --verd:#7FCBB4;
  --brass:#D8A94A;
  --font:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--deep);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  font-weight:350;
  font-stretch:100%;
  -webkit-font-smoothing:antialiased;
}

::selection{background:rgba(95,184,212,.28)}

a{color:var(--tide);text-decoration:none;border-bottom:1px solid rgba(95,184,212,.32)}
a:hover{border-bottom-color:var(--tide)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;border-radius:2px;
}

h1,h2,h3{
  font-weight:600;
  font-stretch:112%;
  letter-spacing:-.012em;
  line-height:1.14;
  margin:0;
}

p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* ---------- shell + rail ---------- */
.shell{max-width:1220px;margin:0 auto;padding:0 22px}
@media (min-width:960px){
  .shell{display:grid;grid-template-columns:246px minmax(0,1fr);gap:76px;padding:0 40px}
}

.rail{padding:26px 0 6px;border-bottom:1px solid var(--line)}
@media (min-width:960px){
  .rail{position:sticky;top:0;height:100vh;padding:56px 0 38px;border-bottom:0;display:flex;flex-direction:column}
}

.brand{display:flex;align-items:center;gap:11px;border:0;margin-bottom:.5rem;width:max-content}
.logomark{flex:0 0 auto;width:40px;height:40px;overflow:visible}
.logomark path{fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.brandname{
  font-size:1.16rem;font-weight:600;font-stretch:112%;
  letter-spacing:-.012em;line-height:1.15;color:var(--text);
}
.brand:hover .brandname{color:var(--tide)}

.role{font-size:.95rem;color:var(--muted);line-height:1.55;margin:0 0 1.5rem;font-weight:400}

.railnav{font-size:1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;margin-bottom:1.2rem}
.railnav a{border:0;color:var(--muted);font-weight:400}
.railnav a:hover{color:var(--text)}
.railnav a[aria-current="page"]{color:var(--brass);font-weight:500}
@media (min-width:960px){
  .railnav{flex-direction:column;gap:.6rem;margin-bottom:auto}
  .railnav a{padding-left:15px;border-left:2px solid var(--line);line-height:1.3}
  .railnav a:hover{border-left-color:var(--line-strong)}
  .railnav a[aria-current="page"]{border-left-color:var(--brass)}
}

.railfoot{font-size:.79rem;color:var(--muted);line-height:1.9;padding-top:1rem}
.railfoot a{border:0;display:block;color:var(--muted);width:max-content}
.railfoot a:hover{color:var(--tide)}

/* ---------- page body ---------- */
main{padding:38px 0 110px}
@media (min-width:960px){main{padding:60px 0 130px}}

.measure{max-width:80ch}
.pagetitle{font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.05;letter-spacing:-.022em;margin-bottom:1rem}
.standfirst{font-size:1.08rem;line-height:1.55;color:var(--muted);max-width:80ch;margin-bottom:2.8rem;font-weight:350}

.block{padding:42px 0;border-top:1px solid var(--line)}
.block:first-of-type{border-top:0;padding-top:0}
@media (min-width:960px){.block{padding:54px 0}}
.blockhead{font-size:1rem;font-weight:600;font-stretch:100%;letter-spacing:.01em;color:var(--muted);margin:0 0 1rem}

/* ---------- home hero ---------- */
.hero h1{
  font-size:clamp(1.5rem,5.5vw,3.6rem);line-height:1;
  letter-spacing:-.026em;margin-bottom:1.1rem;max-width:25ch;font-weight:350;
}
.lede{font-size:clamp(1.05rem,1.9vw,1.26rem);line-height:1.5;max-width:90ch;margin:0 0 2.3rem;color:var(--text);font-weight:350}
.lede em{font-style:normal;color:var(--verd)}

/* ---------- model figure ---------- */
.model{margin:0;border:1px solid var(--line);background:var(--surface)}
.plot{display:block;width:100%;height:auto}
.plot .trace{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.plot .base{stroke:rgba(150,190,195,.14);stroke-width:1;stroke-dasharray:2 5}

.readout{
  display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap;
  padding:15px 18px;border-bottom:1px solid var(--line);
  font-size:.83rem;color:var(--muted);
}
.readout .val{
  font-size:1.95rem;line-height:1;color:var(--text);font-weight:600;font-stretch:112%;
  font-variant-numeric:tabular-nums;min-width:3.2ch;letter-spacing:-.02em;
}
.meter{flex:1 1 110px;height:3px;background:rgba(150,190,195,.18);position:relative;min-width:90px;top:-3px}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--brass);width:0;transition:width .18s ease}

.controls{display:grid;gap:20px;padding:20px 18px;border-top:1px solid var(--line)}
@media (min-width:620px){.controls{grid-template-columns:1fr 1fr;gap:30px}}
.ctrl label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.1rem;color:var(--text)}
.ctrl .hint{font-size:.77rem;color:var(--muted);display:block;margin-bottom:.6rem;line-height:1.4}
input[type=range]{width:100%;accent-color:var(--tide);cursor:pointer;background:transparent}

figcaption{margin-top:14px;font-size:.9rem;line-height:1.55;color:var(--muted);max-width:85ch}

/* ---------- home: current work ---------- */
.now{list-style:none;margin:0;padding:0;max-width:70ch}
.now li{padding:13px 0;border-bottom:1px solid var(--line);display:grid;gap:.2rem 1.1rem;font-size:.94rem}
.now li:first-child{border-top:1px solid var(--line)}
@media (min-width:620px){.now li{grid-template-columns:6.5rem minmax(0,1fr);align-items:baseline}}
.now .when{font-size:.79rem;color:var(--brass);font-weight:500}

/* ---------- research ---------- */
.topic{margin-bottom:2.6rem;max-width:80ch}
.topic:last-child{margin-bottom:0}
.topic h3{font-size:1.32rem;margin-bottom:.55rem;color: var(--tide)}
.topic .tag{font-size:.78rem;color:var(--muted);display:block;margin-top:.7rem;line-height:1.5}

.qlist{list-style:none;margin:0;padding:0;max-width:60ch}
.qlist li{padding-left:1.4rem;position:relative;margin-bottom:.7rem;font-size:.97rem}
.qlist li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--verd)}

/* ---------- publications ---------- */
.pubs{list-style:none;margin:0;padding:0;max-width:80}
.pub{padding:15px 0;border-bottom:1px solid var(--line);font-size:.94rem;line-height:1.5}
.pub:first-child{border-top:1px solid var(--line)}
@media (min-width:620px){
  .pub{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:1rem;align-items:baseline}
}
.yr{font-size:.83rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pub .title{display:block;margin-bottom:.2rem;font-weight:500}
.pub .title a{color:var(--text);border-bottom:1px solid transparent}
.pub .title a:hover{color:var(--tide);border-bottom-color:rgba(95,184,212,.45)}
.pub .src{color:var(--muted);font-style:italic}
.pub .authors{color:var(--muted);font-size:.9rem;display:block}
.me{color:var(--text);font-weight:600;font-style:normal}
.pub .links{font-size:.78rem;margin-top:.35rem;display:block}
.pub .links a{color:var(--verd);border-bottom-color:rgba(127,203,180,.3);margin-right:.9rem}

/* ---------- teaching ---------- */
.course{padding:18px 0;border-bottom:1px solid var(--line);max-width:80ch}
.course:first-of-type{border-top:1px solid var(--line)}
/*.course h3{font-size:1.08rem;margin-bottom:.25rem} */
.course h3 {font-size: 1.32rem;margin-bottom: .55rem;color: var(--tide)}
/* .course p{margin:0;font-size:.93rem;color:var(--muted)} */
.course .code{font-size:.78rem;color:var(--brass);display:block;margin-bottom:.25rem;font-weight:500}
.course .term{font-size:.78rem;color:var(--muted);display:block;margin-top:.4rem}

/* ---------- generic panel ---------- */
.panel{background:var(--surface);border:1px solid var(--line);padding:24px;max-width:80ch}
.panel h3{font-size:.84rem;font-weight:600;font-stretch:100%;color:var(--brass);margin-bottom:.7rem}

/* ---------- contact ---------- */
.cgrid{display:grid;gap:1.8rem;max-width:60ch}
@media (min-width:620px){.cgrid{grid-template-columns:1fr 1fr}}
.cgrid h3{font-size:1rem;font-weight:600;font-stretch:100%;color:var(--muted);margin-bottom:.35rem}
.cgrid p{margin:0;font-size:.94rem;line-height:1.6}

.colophon{font-size:.78rem;color:var(--muted);padding-top:44px;line-height:1.7;max-width:58ch}
.colophon a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}