/* Tobibur Rahman — academic site.
   Palette: deep navy (trust, competence) + warm off-white (low glare) + restrained brass. */
:root{
  --paper:#F7F7F4; --surface:#FFFFFF; --ink:#1A2433; --muted:#5A6678; --rule:#E0E2DE;
  --navy:#16395F; --navy-deep:#102B47; --link:#1B5E8A; --gold:#B5852F; --gold-soft:#F1E7D4;
  --teal:#2C7A74; --shadow:0 1px 2px rgba(16,43,71,.05), 0 8px 24px rgba(16,43,71,.05);
  --on-dark:#E9EDF2; --on-dark-soft:#B4C1D2; --on-dark-gold:#E7C68C;
  --serif:"Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Instrument Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --measure:68ch; --wrap:1160px;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#121821; --surface:#19212C; --ink:#E7EBF1; --muted:#9FAAB9; --rule:#2A3442;
    --navy:#2E5C88; --navy-deep:#0D141C; --link:#82B6DA; --gold:#D8AE63; --gold-soft:#2A2418;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1.0625rem/1.75 var(--serif); font-optical-sizing:auto}
img{max-width:100%; height:auto; display:block}
a{color:var(--link); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.5rem 1rem}
.skip:focus{left:1rem; top:1rem; z-index:20}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 1.5rem}

/* Header */
.site-header{background:var(--navy-deep); position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:1rem}
.brand{font:600 1.05rem/1 var(--sans); color:#fff; text-decoration:none; letter-spacing:-.01em}
.nav ul{list-style:none; display:flex; gap:1.5rem; margin:0; padding:0}
.nav a{font:500 .95rem/1 var(--sans); color:var(--on-dark-soft); text-decoration:none; padding:.55rem 0; display:block}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold)}
.nav-toggle{display:none; font:500 .95rem var(--sans); background:none; border:1px solid rgba(255,255,255,.25); color:#fff; padding:.45rem .8rem; border-radius:6px; cursor:pointer}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{position:absolute; left:0; right:0; top:64px; background:var(--navy-deep); display:none; border-bottom:1px solid rgba(255,255,255,.1)}
  .nav.open{display:block}
  .nav ul{flex-direction:column; gap:0; padding:.5rem 1.5rem 1rem}
  .nav a{padding:.8rem 0}
}

/* Type */
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.015em; line-height:1.15; margin:0}
h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem); margin-bottom:1.25rem}
h3{font-size:1.2rem; line-height:1.35; margin-bottom:.35rem}
p{margin:0 0 1.1em; max-width:var(--measure)}
.muted{color:var(--muted)}

/* Symbol field */
#bgsym{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
body > header,body > main,body > footer{position:relative; z-index:1}
.symfield{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.hero,.page-head{position:relative; overflow:hidden}
.hero .wrap,.page-head .wrap{position:relative; z-index:1}
@media print{ #bgsym,.symfield{display:none !important} }

/* Hero */
.hero{background:var(--navy-deep); color:var(--on-dark); padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,6vw,5rem)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero h1{font-size:clamp(2.7rem,1.6rem + 4.2vw,4.6rem); font-weight:400; letter-spacing:-.03em; line-height:1; color:#fff}
.hero .claim{font-size:clamp(1.3rem,1.1rem + .85vw,1.8rem); line-height:1.3; margin:1.1rem 0 1.3rem; font-style:italic; max-width:24ch; color:var(--on-dark-gold)}
.hero .intro{color:var(--on-dark-soft); max-width:52ch}
.idline{font:500 .95rem/1.6 var(--sans); color:var(--on-dark-soft); margin:.9rem 0 0; max-width:54ch}
.portrait-wrap{margin:0 0 1.2rem}
.portrait{width:104px; height:104px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.35)}
.identity{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:.9rem 1.75rem; margin:1.6rem 0 0; font-family:var(--sans)}
.identity dt{font:500 .8rem/1.3 var(--sans); color:#8FA0BA; margin-bottom:.2rem}
.identity dd{margin:0; font-size:.98rem; color:var(--on-dark); overflow-wrap:anywhere}
.identity a{color:var(--on-dark-gold)}
.actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem}
.btn{font:600 .95rem/1 var(--sans); text-decoration:none; padding:.85rem 1.2rem; border-radius:6px; border:1px solid var(--navy); color:var(--navy); background:transparent; cursor:pointer; display:inline-block}
.btn.primary{background:var(--navy); color:#fff}
.btn:hover{text-decoration:none; filter:brightness(1.1)}
.hero .btn{border-color:rgba(255,255,255,.4); color:#fff}
.hero .btn.primary,.page-head .btn.primary{background:var(--gold); border-color:var(--gold); color:#14243A}
figure{margin:0}
.wave-fig canvas{width:100%; aspect-ratio:5/4; display:block}
.wave-fig figcaption{font:400 .85rem/1.5 var(--sans); color:#8FA0BA; margin-top:.6rem}
@media (max-width:880px){ .hero .wrap{grid-template-columns:1fr} .wave-fig{max-width:580px} }

/* Facts */
.facts{background:color-mix(in srgb, var(--surface) 82%, transparent); border-bottom:1px solid var(--rule)}
.facts dl{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0}
.facts dl > div{padding:1.4rem 1.25rem 1.4rem 0}
.facts dl > div + div{padding-left:1.25rem; border-left:1px solid var(--rule)}
.facts dt{font:500 .85rem/1.4 var(--sans); color:var(--muted); margin-bottom:.3rem}
.facts dd{margin:0; font-size:1.02rem; line-height:1.45}
@media (max-width:900px){ .facts dl{grid-template-columns:1fr 1fr}
  .facts dl > div:nth-child(3){padding-left:0; border-left:0} .facts dl > div:nth-child(n+3){border-top:1px solid var(--rule)} }
@media (max-width:520px){ .facts dl{grid-template-columns:1fr} .facts dl > div{padding:1rem 0}
  .facts dl > div + div{padding-left:0; border-left:0; border-top:1px solid var(--rule)} }

/* Sections */
.section{padding:clamp(3rem,6vw,5rem) 0}
.section + .section{border-top:1px solid var(--rule)}
.section.tint{background:color-mix(in srgb, var(--surface) 72%, transparent)}
.split{display:grid; grid-template-columns:minmax(180px,.3fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem)}
.split > *{min-width:0}
.split > h2{position:sticky; top:92px; align-self:start}
@media (max-width:780px){ .split{grid-template-columns:minmax(0,1fr)} .split > h2{position:static} }
.threads{list-style:none; padding:0; margin:1.75rem 0; display:grid; gap:1.3rem}
.threads li{padding-left:1.1rem; border-left:2px solid var(--gold); max-width:var(--measure)}
.threads strong{font-weight:600}
.goal{background:var(--navy); color:var(--on-dark); padding:1.5rem 1.7rem; border-radius:8px; max-width:calc(var(--measure) + 3.4rem)}
.goal strong{color:var(--on-dark-gold)}
.goal p:last-child{margin-bottom:0}

/* Cards */
.summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1.5rem; margin-top:.5rem}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:1.3rem 1.4rem; box-shadow:var(--shadow)}
.card h3{font-size:1.1rem; margin-bottom:.5rem}
.card p{font-size:.98rem; margin-bottom:.7rem}
.card ul{margin:0 0 .8rem; padding-left:1.1rem; font-size:.98rem}
.card ul li{margin-bottom:.3rem}
.card .go{font:600 .9rem var(--sans)}

/* Papers */
.papers{list-style:none; margin:0; padding:0; display:grid; gap:2.5rem}
.paper{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:1.75rem; align-items:start}
.paper img{width:100%; background:#fff; border:1px solid var(--rule); border-radius:8px}
.paper .fig-note{font:400 .8rem/1.45 var(--sans); color:var(--muted); margin:.5rem 0 0}
.chip{display:inline-block; font:600 .8rem/1 var(--sans); color:var(--navy); background:var(--gold-soft); padding:.4rem .6rem; border-radius:4px; margin-bottom:.7rem}
@media (prefers-color-scheme:dark){ .chip{color:var(--on-dark-gold)} }
.paper .title{font-size:1.2rem; line-height:1.38; margin:0 0 .4rem; font-weight:500}
.paper .authors{font:400 .92rem/1.55 var(--sans); color:var(--muted); margin:0 0 .7rem}
.paper .authors b{color:var(--ink); font-weight:600}
.paper .summary{font-size:1rem; margin-bottom:.8rem; display:block}
.paper .links{font:500 .92rem var(--sans); display:flex; flex-wrap:wrap; gap:.5rem 1.25rem}
.paper ul.points{margin:.2rem 0 .9rem; padding-left:1.1rem; font-size:1rem}
.paper ul.points li{margin-bottom:.3rem}
@media (max-width:760px){ .paper{grid-template-columns:1fr} }
.more{font:500 .95rem var(--sans); margin-top:1.75rem}

/* Talks */
.talks{list-style:none; margin:0; padding:0}
.talks li{display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:1.25rem; padding:1.1rem 0; border-bottom:1px solid var(--rule)}
.talks li:first-child{padding-top:0}
.talks .when{font:500 .9rem/1.6 var(--sans); color:var(--muted)}
.talks .ttl{font-style:italic; margin:0 0 .25rem}
.talks .venue{font:400 .92rem/1.5 var(--sans); color:var(--muted); margin:0}
@media (max-width:560px){ .talks li{grid-template-columns:1fr; gap:.2rem} }

/* Photo gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1.5rem; margin-top:1.5rem}
.gallery figure{background:var(--surface); border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-shadow:var(--shadow)}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover}
.gallery img.tall{aspect-ratio:3/4}
.gallery figcaption{font:400 .88rem/1.5 var(--sans); color:var(--muted); padding:.8rem 1rem 1rem}
.gallery figcaption b{display:block; color:var(--ink); font-weight:600; font-size:.95rem; margin-bottom:.15rem}

/* Panels / teaser */
.panels{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.75rem; margin-top:1.5rem}
.panel img{background:#fff; border:1px solid var(--rule); border-radius:6px; aspect-ratio:4/3; object-fit:contain; width:100%}
.panel figcaption{font:400 .85rem/1.5 var(--sans); color:var(--muted); margin-top:.6rem}
.panel figcaption b{color:var(--ink); font-weight:600}
@media (max-width:620px){ .panels{grid-template-columns:1fr} }
.teaser{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; align-items:center; background:var(--navy-deep); color:var(--on-dark); border-radius:10px; padding:clamp(1.5rem,3vw,2.5rem)}
.teaser h3{color:#fff; font-size:1.5rem}
.teaser p{color:var(--on-dark-soft)}
.teaser img{border-radius:6px}
.teaser .btn.primary{background:var(--gold); border-color:var(--gold); color:#14243A}
@media (max-width:760px){ .teaser{grid-template-columns:1fr} }

/* Updates / posts */
.posts{display:grid; gap:2rem; margin:0; padding:0; list-style:none}
.post{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:1.6rem 1.7rem; box-shadow:var(--shadow)}
.post h3{font-size:1.35rem; margin-bottom:.3rem}
.post .meta{font:500 .85rem var(--sans); color:var(--muted); margin:0 0 .9rem}
.post .tag{display:inline-block; font:600 .75rem/1 var(--sans); color:var(--navy); background:var(--gold-soft); padding:.3rem .5rem; border-radius:4px; margin-left:.5rem}
@media (prefers-color-scheme:dark){ .post .tag{color:var(--on-dark-gold)} }
.post-media{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:1rem; margin:1.1rem 0 0}
.post-media img{border-radius:8px; border:1px solid var(--rule); width:100%; object-fit:contain; background:#fff; max-height:460px}
.post .embed{position:relative; padding-top:56.25%; margin-top:1.1rem; border-radius:8px; overflow:hidden; border:1px solid var(--rule)}
.post .embed iframe,.post .embed video{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}
.empty{font:400 1rem var(--sans); color:var(--muted)}

/* Contact */
.contact-list{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:1rem 2rem; max-width:820px}
.contact-list span{display:block; font:500 .85rem var(--sans); color:var(--muted)}
.contact-list a{font-size:1.05rem; overflow-wrap:anywhere}

/* Page heads */
.page-head{background:var(--navy-deep); color:var(--on-dark); padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem)}
.page-head h1{font-size:clamp(2.2rem,1.6rem + 2.5vw,3.4rem); font-weight:400; letter-spacing:-.025em; color:#fff}
.page-head p{color:var(--on-dark-soft); margin-top:.9rem}
.page-head a{color:var(--on-dark-gold)}

/* CV */
.cv-entry{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem 1.5rem; padding:1rem 0; border-bottom:1px solid var(--rule); max-width:880px}
.cv-entry:first-child{padding-top:0}
.cv-entry:last-child{border-bottom:0}
.cv-entry h3{margin:0}
.cv-entry .when{font:500 .9rem var(--sans); color:var(--muted); text-align:right; white-space:nowrap}
.cv-entry .where{grid-column:1 / -1; font:400 .95rem var(--sans); color:var(--muted)}
.cv-entry p,.cv-entry ul{grid-column:1 / -1; margin:.3rem 0 0; font-size:1rem}
.cv-entry ul{padding-left:1.1rem}
@media (max-width:560px){ .cv-entry{grid-template-columns:1fr} .cv-entry .when{text-align:left} }
.cvpubs{margin:0; padding-left:1.2rem; max-width:880px}
.cvpubs li{margin-bottom:.8rem}
.cvpubs b{font-weight:600}
.skills{display:grid; grid-template-columns:max-content 1fr; gap:.6rem 1.5rem; margin:0; max-width:880px}
.skills dt{font:600 .95rem/1.7 var(--sans)}
.skills dd{margin:0}
@media (max-width:560px){ .skills{grid-template-columns:1fr; gap:.1rem} .skills dd{margin-bottom:.7rem} }

/* Lab */
.lab{display:grid; grid-template-columns:300px minmax(0,1fr); gap:2rem; align-items:start}
.controls{position:sticky; top:88px; background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:1.25rem 1.25rem 1.4rem; font-family:var(--sans); box-shadow:var(--shadow)}
.controls h2{font-size:1.25rem; margin-bottom:1rem}
.ctl{margin-bottom:1.1rem}
.ctl label,.ctl .lbl{display:flex; justify-content:space-between; font:600 .9rem/1.3 var(--sans); margin-bottom:.4rem}
.ctl output{font-weight:500; color:var(--link); font-variant-numeric:tabular-nums}
.ctl input[type=range]{width:100%; accent-color:var(--gold)}
.ctl select,.field input,.field textarea{width:100%; font:500 .95rem var(--sans); padding:.55rem; border:1px solid var(--rule); border-radius:6px; background:var(--surface); color:var(--ink)}
.ctl .hint{font:400 .8rem/1.45 var(--sans); color:var(--muted); margin:.35rem 0 0}
.seg{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--rule); border-radius:6px; overflow:hidden}
.seg button{font:500 .9rem var(--sans); padding:.55rem; background:var(--surface); color:var(--ink); border:0; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy); color:#fff}
.ctl-row{display:flex; gap:.5rem}
.ctl-row .btn{flex:1; padding:.7rem .5rem; text-align:center; font-size:.9rem}
.check{display:flex; gap:.55rem; align-items:flex-start; font:500 .9rem/1.4 var(--sans); cursor:pointer}
.check input{margin:.15rem 0 0; accent-color:var(--navy)}
.plots{display:grid; gap:1.5rem}
.plot{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:1rem 1rem .9rem; box-shadow:var(--shadow)}
.plot h3{font:600 .95rem var(--sans); margin:0 0 .6rem}
.plot canvas{width:100%; display:block}
.plot .cap{font:400 .85rem/1.5 var(--sans); color:var(--muted); margin:.5rem 0 0; max-width:none}
.plot-pair{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}
@media (max-width:1000px){ .lab{grid-template-columns:1fr} .controls{position:static} }
@media (max-width:640px){ .plot-pair{grid-template-columns:1fr} }
#heat{cursor:grab; touch-action:none}
#heat.dragging{cursor:grabbing}
.math{overflow-x:auto; padding:.3rem 0; max-width:100%}
.readout{font:500 .9rem var(--sans); color:var(--muted)}
.readout b{color:var(--link)}

/* Admin editor */
.admin{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2rem; align-items:start}
@media (max-width:900px){ .admin{grid-template-columns:1fr} }
.field{margin-bottom:1.1rem}
.field > label{display:block; font:600 .9rem var(--sans); margin-bottom:.35rem}
.field textarea{min-height:170px; font-family:var(--sans); line-height:1.6; resize:vertical}
.field .hint{font:400 .82rem/1.45 var(--sans); color:var(--muted); margin:.35rem 0 0}
.status{font:500 .9rem/1.5 var(--sans); padding:.8rem 1rem; border-radius:6px; margin:1rem 0 0; display:none}
.status.show{display:block}
.status.ok{background:#E6F2EC; color:#1C5C42}
.status.err{background:#FBEAE7; color:#8C2F20}
@media (prefers-color-scheme:dark){ .status.ok{background:#16302A; color:#9BD9BC} .status.err{background:#3A1F1B; color:#F0A79A} }
.post-list{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem}
.post-list li{display:flex; justify-content:space-between; gap:1rem; align-items:center; border:1px solid var(--rule); border-radius:8px; padding:.7rem .9rem; font-family:var(--sans); font-size:.92rem; background:var(--surface)}
.post-list .row-actions{display:flex; gap:.5rem}
.post-list button{font:600 .82rem var(--sans); border:1px solid var(--rule); background:var(--surface); color:var(--ink); border-radius:5px; padding:.35rem .6rem; cursor:pointer}
.thumbs{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem}
.thumbs figure{position:relative}
.thumbs img{width:76px; height:64px; object-fit:cover; border-radius:6px; border:1px solid var(--rule)}
.thumbs button{position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:0; background:var(--navy); color:#fff; cursor:pointer; font-size:.8rem; line-height:1}

/* Footer */
.site-footer{background:var(--navy-deep); color:#8FA0BA; padding:2rem 0 2.5rem; font:400 .9rem var(--sans)}
.site-footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem}
.site-footer a{color:var(--on-dark-soft)}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.25rem}

/* Print */
@media print{
  :root{--paper:#fff; --surface:#fff; --ink:#000; --muted:#333; --rule:#bbb; --link:#000}
  body{font-size:10.5pt; line-height:1.45; background:#fff}
  .site-header,.site-footer,.no-print,.skip{display:none !important}
  .page-head{background:none; color:#000; padding:0 0 .4rem}
  .page-head h1{color:#000; font-size:20pt} .page-head p{color:#333}
  .section{padding:.8rem 0; background:none}
  .split{grid-template-columns:1fr; gap:.3rem}
  .split > h2{position:static; font-size:13pt; margin-bottom:.3rem}
  .cv-entry,.cvpubs li{break-inside:avoid; padding:.35rem 0}
  a{color:#000; text-decoration:none}
}

/* ---- Admin log in ------------------------------------------------- */
.admin-body{background:var(--paper)}
.login-screen{position:relative; overflow:hidden; min-height:100vh; display:grid; place-items:center;
  background:var(--navy-deep); padding:2rem 1.25rem}
.login-card{position:relative; z-index:1; width:min(460px,100%); background:var(--surface); color:var(--ink);
  border-radius:14px; padding:clamp(1.75rem,4vw,2.5rem); box-shadow:0 24px 60px rgba(0,0,0,.28)}
.login-card .eyebrow{font:600 .78rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .7rem}
.login-card h1{font-size:2rem; font-weight:400; letter-spacing:-.02em; margin-bottom:.4rem}
.login-card .lead{color:var(--muted); font-size:1rem; margin-bottom:1.6rem}
.login-card .field{margin-bottom:.9rem}
.btn.big{width:100%; text-align:center; padding:.95rem 1rem; font-size:1rem}
.fineprint{font:400 .82rem/1.55 var(--sans); color:var(--muted); margin:1.2rem 0 0}
.signed-in{font:500 .9rem var(--sans); color:var(--on-dark-soft); margin-top:.6rem}
.signed-in b{color:var(--on-dark-gold)}

/* Footer admin button */
.admin-link{display:inline-flex; align-items:center; gap:.45rem; font:600 .82rem/1 var(--sans);
  color:var(--on-dark-soft); text-decoration:none; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:.5rem .9rem; transition:background .15s ease, color .15s ease}
.admin-link:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.admin-link svg{width:13px; height:13px; fill:currentColor}

/* ---- Hero name on one line ------------------------------------- */
.hero h1{font-size:clamp(2.1rem,7.6vw,4.4rem); white-space:nowrap}
@media (min-width:1100px){ .hero h1{font-size:4.4rem} }

/* ---- Contact page ---------------------------------------------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(1.75rem,4vw,3.5rem); align-items:start}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr} }
.headshot{background:var(--surface); border:1px solid var(--rule); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); max-width:380px}
.headshot img{width:100%; aspect-ratio:1/1; object-fit:cover}
.headshot figcaption{font:600 1rem/1.4 var(--sans); color:var(--ink); padding:1rem 1.2rem 1.2rem}
.headshot figcaption span{display:block; font-weight:400; font-size:.9rem; color:var(--muted); margin-top:.25rem}
.message-form{max-width:640px}
.message-form .field.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:560px){ .message-form .field.two{grid-template-columns:1fr} }
.message-form label{display:block; font:600 .9rem var(--sans); margin-bottom:.35rem}
.message-form input,.message-form textarea{width:100%; font:400 1rem var(--sans); padding:.7rem .8rem;
  border:1px solid var(--rule); border-radius:6px; background:var(--surface); color:var(--ink)}
.message-form textarea{resize:vertical; line-height:1.6}
.message-form .hint{font:400 .85rem/1.5 var(--sans); color:var(--muted); margin-top:.9rem}
.message-form .hp{position:absolute; left:-9999px}

/* ---- Admin entry + login --------------------------------------- */
.admin-link{border:1px solid rgba(255,255,255,.28); border-radius:5px; padding:.3rem .65rem; text-decoration:none}
.admin-link:hover{background:rgba(255,255,255,.08); text-decoration:none}
.login{max-width:440px; margin:0 auto; background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:1.8rem 1.8rem 2rem; box-shadow:var(--shadow)}
.login h2{font-size:1.4rem; margin-bottom:.4rem}
.login p.lead{font:400 .95rem/1.6 var(--sans); color:var(--muted)}
.login .field{margin-bottom:.9rem}
.login .btn{width:100%; text-align:center}
.admin-bar{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; margin-bottom:1.5rem}
.admin-bar .who{font:500 .9rem var(--sans); color:var(--muted)}
[hidden]{display:none !important}

/* ---- Brand mark + signature ------------------------------------ */
.brand{display:flex; align-items:center; gap:.55rem}
.brand img{width:26px; height:auto; display:block}
.signature{font:400 1.02rem/1.85 var(--sans); font-style:normal; color:var(--ink); max-width:46ch}
.signature b{display:block; font-family:var(--serif); font-size:1.35rem; font-weight:500; margin-bottom:.15rem}
.signature .line{display:block; margin-top:.15rem}
.signature .line:first-of-type{margin-top:.9rem}
.signature em{font-style:normal; color:var(--muted); display:inline-block; min-width:7.5rem}

/* ---- Lab control groups + three-way view switch ----------------- */
.group-label{font:600 .78rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:.2rem 0 .7rem; padding-top:.9rem; border-top:1px solid var(--rule)}
.controls .group-label:first-of-type{padding-top:0; border-top:0}
.seg.three{grid-template-columns:1fr 1fr 1fr}
.seg.three button{padding:.55rem .25rem; font-size:.88rem}

/* ---- Lab: three boxes in a row, controls underneath -------------- */
.plots-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; align-items:start}
@media (max-width:1080px){ .plots-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .plots-row{grid-template-columns:minmax(0,1fr)} }
.controls.wide{position:static; margin-top:1.5rem; display:grid; gap:1rem 2rem;
  grid-template-columns:minmax(200px,1fr) minmax(200px,1fr) minmax(260px,1.5fr) minmax(200px,1fr)}
@media (max-width:1080px){ .controls.wide{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .controls.wide{grid-template-columns:minmax(0,1fr)} }
.ctl-group{min-width:0}
.ctl-group .group-label{padding-top:0; border-top:0; margin-top:0}
.ctl-group .ctl:last-child{margin-bottom:0}
.controls.wide .ctl-row{flex-wrap:wrap}

/* ---- Lab: controls | graphs | parameters ------------------------ */
.lab3{display:grid; grid-template-columns:252px minmax(0,1fr) 268px; gap:1.5rem; align-items:start}
.lab3 .controls{position:sticky; top:88px}
.plots-col{display:grid; gap:1.25rem; min-width:0}
@media (max-width:1180px){
  .lab3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .plots-col{grid-column:1 / -1; order:-1}
  .lab3 .controls{position:static}
}
@media (max-width:640px){ .lab3{grid-template-columns:minmax(0,1fr)} }

/* spacing between control groups inside the lab panels */
.controls .ctl-group + .ctl-group .group-label{padding-top:1rem; border-top:1px solid var(--rule); margin-top:.4rem}

/* ---- Lab: controls on top, graphs in the middle, parameters below - */
.lab-stack{display:grid; gap:1.25rem}
.controls.bar{position:static; display:grid; gap:1rem 2rem;
  grid-template-columns:minmax(220px,1fr) minmax(180px,1fr) minmax(240px,1.2fr)}
.controls.bar.bottom{grid-template-columns:repeat(3,minmax(180px,1fr)) minmax(230px,1.1fr)}
.controls.bar .group-label{padding-top:0; border-top:0; margin-top:0}
.controls.bar .ctl:last-child{margin-bottom:0}
@media (max-width:980px){ .controls.bar,.controls.bar.bottom{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .controls.bar,.controls.bar.bottom{grid-template-columns:minmax(0,1fr)} }
.controls.bar .ctl-group + .ctl-group .group-label{padding-top:0; border-top:0; margin-top:0}
.ctl label.check{justify-content:flex-start; font-weight:500}
.panel video{width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff;
  border:1px solid var(--rule); border-radius:6px; display:block}
.signature .line:first-of-type{margin-top:.35rem}
.page-head .idblock{line-height:1.9; max-width:62ch}
.login .or{text-align:center; font:500 .85rem var(--sans); color:var(--muted); margin:.9rem 0}
.or{max-width:440px; margin:1.2rem auto; text-align:center; font:500 .85rem var(--sans); color:var(--muted)}