/* wanglianzhou.com — Profile Rail
   A sticky left rail carries identity: portrait, title, quick facts, contact.
   Everything else is a bounded module card in the right column. */

:root{
  --bg:#f4f6f5; --surface:#ffffff; --surface-2:#eef1f0;
  --ink:#141918; --ink-2:#4c5654; --ink-3:#7e8a87;
  --line:#dbe1df; --line-2:#c3ccc9;
  --accent:#0d6b62; --accent-soft:#e4f0ee;
  --r:5px; --shadow:0 1px 2px rgba(20,25,24,.05);
  --ph-bg:#e5eae8; --ph-ink:#b6c2be; --ph-label:#7c8a86;
  --font-body:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html[data-theme="dark"]{
  --bg:#0e1211; --surface:#161b1a; --surface-2:#1c2321;
  --ink:#e8eeec; --ink-2:#a2adaa; --ink-3:#727d7a;
  --line:#262e2c; --line-2:#374040;
  --accent:#4fd3c4; --accent-soft:#122422;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --ph-bg:#1b2120; --ph-ink:#28312f; --ph-label:#6d7a77;
}
body{font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}

/* ── navigation bar ─────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.nav__in{max-width:1240px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:0 20px;
  min-height:54px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:8px;white-space:nowrap;padding:8px 0}
.brand b{font-size:21px;font-weight:700;letter-spacing:-.02em}
.brand i{font-style:normal;font-size:15px;font-weight:600;color:var(--ink-2)}
.nav__links{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.nav__links a{font-size:13px;color:var(--ink-2);padding:7px 9px;border-radius:var(--r);white-space:nowrap}
.nav__links a:hover{background:var(--surface-2);color:var(--ink)}
.nav__links a.is-here{color:var(--accent);background:var(--accent-soft);font-weight:600}
.nav__ctl{display:flex;gap:6px;padding:8px 0}
.btn{font:inherit;font-size:12px;cursor:pointer;background:var(--surface);color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:var(--r);padding:5px 11px}
.btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── shell: rail + column ───────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:298px minmax(0,1fr);gap:22px;padding:22px 0 40px;align-items:start}
.rail{position:sticky;top:76px;display:grid;gap:14px}

/* ── module card ────────────────────────────────────────────────────── */
.mod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  min-width:0;overflow:hidden}
.mod__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.mod__head h2{font-size:13px;font-weight:700;margin:0;letter-spacing:.02em}
.mod__head .meta{font-size:11.5px;color:var(--ink-3);margin-left:auto;min-width:0}
.mod__body{padding:16px}
.mod__body.tight{padding:0}
.col{display:grid;gap:16px}

/* ── rail content ───────────────────────────────────────────────────── */
.rail .photo{border-radius:var(--r) var(--r) 0 0}
.idcard{text-align:left}
.idcard .nm{font-size:19px;font-weight:700;margin:0 0 1px;letter-spacing:-.01em}
.idcard .nmzh{font-size:14px;color:var(--ink-2);margin:0 0 8px}
.idcard .ttl{font-size:13px;margin:0 0 2px;color:var(--ink)}
.idcard .org{font-size:12.5px;color:var(--ink-2);margin:0 0 12px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{background:var(--surface);padding:9px 12px;min-width:0}
.facts:empty,.railcontact:empty{display:none}
.facts .v{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.facts .k{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.railcontact{padding:13px 16px;font-size:12.5px;line-height:1.75;color:var(--ink-2)}
.railcontact a{color:var(--accent)}
.railcontact .em{font-weight:600;word-break:break-all}

/* ── content pieces ─────────────────────────────────────────────────── */
.lead{font-size:17px;line-height:1.55;margin:0 0 12px;font-weight:500}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));gap:12px}
.rcard{border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;min-width:0;background:var(--surface)}
.rcard:hover{border-color:var(--accent)}
.rcard h3{font-size:14.5px;margin:0 0 5px;font-weight:700;line-height:1.32}
.rcard p{font-size:12.5px;color:var(--ink-2);margin:0 0 8px}
.tag{display:inline-block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:3px;padding:1px 6px;color:var(--ink-3);margin:0 4px 4px 0}
.tag--on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.rcard .ref{font-size:11px;color:var(--ink-3);margin:0}
.rcard .ref a{color:var(--accent)}

.rows{margin:0;padding:0;list-style:none}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;align-items:baseline;
  padding:9px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.rows li:last-child{border-bottom:0}
.rows li:nth-child(odd){background:var(--surface-2)}
.rows .sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.rows .y{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.rows li[data-t="1"] > span:first-child{font-weight:700}
.rows a{color:var(--ink)}
.rows a:hover{color:var(--accent)}

.teamwrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0}
.teamwrap .photo{aspect-ratio:16/9}
.teamside{padding:16px;border-left:1px solid var(--line);min-width:0}
.teamside p{margin:0 0 10px;font-size:13px;color:var(--ink-2)}
.teamside .linkbtn{margin:0 6px 6px 0}
.teamside .big{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.02em;display:block;line-height:1.15}
.linkbtn{display:inline-block;font-size:12.5px;font-weight:600;color:var(--accent);
  border:1px solid var(--accent);border-radius:var(--r);padding:6px 12px;background:var(--accent-soft)}
.linkbtn:hover{background:var(--accent);color:var(--surface)}

.join p{margin:0 0 10px;font-size:13.5px}
.join .m{font-size:12px;color:var(--ink-2);margin:0}
.join .m a{color:var(--accent);font-weight:600}
.src{font-size:11px;color:var(--ink-3);margin:10px 0 0}
.foot{border-top:1px solid var(--line);padding:16px 0 40px;font-size:11.5px;color:var(--ink-3)}
.body{margin:0;font-size:13.5px;color:var(--ink-2)}
.rgrid--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.foot p{margin:0 0 3px}

/* ── gallery page ───────────────────────────────────────────────────── */
.era{margin:0 0 22px}
.era__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--ink)}
.era__head h2{font-size:16px;font-weight:700;margin:0}
.era__head .y{font-size:12px;color:var(--accent);font-weight:600}
.era__head .n{font-size:12px;color:var(--ink-3);margin-left:auto}
.era__note{font-size:13px;color:var(--ink-2);margin:0 0 14px;max-width:70ch}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));gap:14px}
.shot{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;min-width:0}
.shot .photo{aspect-ratio:4/3;border-radius:0}
.shot figcaption,.shot .cap{padding:9px 12px;font-size:12px;color:var(--ink-2);border-top:1px solid var(--line)}
.shot .cap em{font-style:normal;color:var(--ink-3)}

@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  .teamwrap{grid-template-columns:minmax(0,1fr)}
  .teamside{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .brand b{font-size:18px}
  .nav__links{order:3;margin-left:0;width:100%;border-top:1px solid var(--line);padding:4px 0;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav__links::-webkit-scrollbar{display:none}
  .toolbar .count{margin-left:0}
  .rail .photo{aspect-ratio:1/1!important}
}

/* an era we know about but have no photograph for yet */
.era--empty{opacity:.72}
.era--empty .shots{display:none}

/* ── inner pages ─────────────────────────────────────────────────────── */
.page{margin:22px 0 16px}
.page + .col,.page + #gallery,.page + #list{margin-bottom:22px}
.intro{margin:0;font-size:13.5px;color:var(--ink-2);max-width:76ch;line-height:1.6}
.note{margin:0;padding:9px 16px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line)}
.unavail,.empty{margin:0;padding:14px 16px;font-size:12.5px;color:var(--ink-3)}
.rows__more{display:block;padding:0}
.rows li.rows__more{padding:0;background:var(--surface)}
.showall{display:block;width:100%;font:inherit;font-size:12.5px;font-weight:600;color:var(--accent);
  background:var(--surface);border:0;padding:9px 16px;cursor:pointer;text-align:left}
.showall:hover{background:var(--accent-soft)}
.rows .au{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.rows .au b{color:var(--ink);font-weight:600}
.rows a[target]{text-decoration:none}
.rdir .mod__head .tag{margin:0}
.rdir .desc{margin:0 0 10px;font-size:13.5px;color:var(--ink-2);max-width:80ch}
.rdir .ref{font-size:12px;color:var(--ink-3);margin:8px 0 0}
.rdir .ref a{color:var(--accent)}

/* publications toolbar and year groups */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.toolbar input,.toolbar select{font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:6px 10px;min-width:0;height:34px}
.toolbar input{flex:1 1 220px}
.toolbar input:focus,.toolbar select:focus{border-color:var(--accent);outline:none}
.yearhead{margin:0;padding:6px 16px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--accent);
  background:var(--accent-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.yearhead span{color:var(--ink-3);font-weight:400;margin-left:6px}
#publist > .yearhead:first-child{border-top:0}

/* group page */
.gphoto{margin:12px 0 0;max-width:720px}
.gphoto .photo{border:1px solid var(--line);border-radius:var(--r)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px;padding:16px}
.person{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;min-width:0}
.person p{margin:0}
.person .nm{font-size:14px;font-weight:700}
.person .rl{font-size:12.5px;color:var(--ink-2)}
.person .lk{font-size:12px;margin-top:6px;overflow-wrap:anywhere}
.person .lk a{color:var(--accent)}
.shot .cap .mono{color:var(--ink-3);font-size:11px;margin-left:6px}

/* ── home: About module ──────────────────────────────────────────────── */
.about .lead{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:0 0 16px;
  font-size:18px;line-height:1.5;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.lbl{margin:0 0 8px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.glance{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);
  padding:10px 14px 8px;margin:0 0 16px}
.glance:empty,.careerwrap:empty{display:none}
.glance__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:10px 18px}
.glance__tile{min-width:0}
.glance__k{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 3px}
.glance__v{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.glance .tag{margin:0 4px 3px 0;font-size:10.5px;font-weight:700;background:var(--surface)}
.careerwrap{margin:0 0 16px}
.career{list-style:none;margin:0;padding:0;position:relative;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.career::before{content:"";position:absolute;left:5px;right:5px;top:5px;height:2px;background:var(--line-2)}
.career li{position:relative;padding-top:16px;min-width:0}
.career li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);box-sizing:border-box}
.career li.is-now::before{background:var(--accent)}
.career .y{display:block;font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.02em}
.career .tx{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.career li.is-now .tx{color:var(--ink);font-weight:600}
.bio{border-top:1px solid var(--line);padding-top:14px}
.bio p{margin:0 0 10px;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.bio p:first-child{color:var(--ink)}
.bio p:last-child{margin-bottom:0}

/* ── home: News rows (date first) ───────────────────────────────────── */
.rows--news li{grid-template-columns:auto minmax(0,1fr)}
.rows--news .y{color:var(--accent);font-weight:600;font-size:12px}
.mod__head .meta a{color:var(--accent)}
.mod__head .meta a:hover{text-decoration:underline}

@media (max-width:560px){
  .about .lead{font-size:16.5px}
  .career{grid-template-columns:minmax(0,1fr);gap:12px 0;padding-left:22px}
  .career::before{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .career li{padding-top:0}
  .career li::before{left:-22px;top:3px}
}

/* ── lab marks above About ───────────────────────────────────────────────
   Both marks are dark-blue artwork on transparency, so they sit on a white
   plate — in dark mode the plate is what keeps them legible.

   The two flex-grow numbers are the marks' own aspect ratios (660/200 and
   800/145, x100). Sharing the row in that proportion makes both images land on
   the SAME height while together spanning the full width, so neither the tall
   IAP emblem nor the wide JC STEM wordmark dominates. Change a logo file and
   these two numbers must change with it. */
.labmarks{display:flex;align-items:center;gap:26px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.labmark{display:block;min-width:0}
.labmark--iap{flex:330 1 0}
.labmark--jc{flex:552 1 0}
.labmark img{display:block;width:100%;height:auto}
.labmark:hover{opacity:.82}
@media (max-width:560px){
  .labmarks{gap:14px;padding:11px 13px}
}
}