/* wanglianzhou.com — inner pages
   Loaded after site.css and reuses its tokens. Owns the research card grid,
   the two-block grants list, and the Join page. */

/* ── research: three directions per row ─────────────────────────────── */
.dirgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.dir{display:flex;flex-direction:column;min-width:0;padding:14px 16px 13px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.dir:hover{border-color:var(--accent)}
.dir > .tag{align-self:flex-start;margin:0 0 9px}
.dir h3{font-size:15.5px;font-weight:700;margin:0 0 6px;line-height:1.3;letter-spacing:-.005em}
.dir .short{font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 9px;line-height:1.5}
.dir .desc{font-size:12.5px;color:var(--ink-2);margin:0 0 8px;line-height:1.62}
.dir .kws{margin:2px 0 10px}
.dir .kws .tag{margin:0 4px 4px 0}
.dir .ref{margin:auto 0 0;padding-top:9px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.dir .ref a{color:var(--accent);font-weight:600}
.dir .ref a:hover{text-decoration:underline}
@media (max-width:960px){.dirgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dirgrid{grid-template-columns:minmax(0,1fr)}}

/* ── research: the figure area under each card title ────────────────────
   The panel sits below the heading and is full-bleed sideways, so it pulls
   back over the card's horizontal padding only — never upwards, or it would
   ride over the title. The picture box has a fixed aspect ratio and the
   placeholder copies it, so cards in a row stay aligned. The figures are
   labelled diagrams: they are contained on a neutral panel, never cropped, or
   their lettering would be cut. Credit captions were removed at the
   professor's request (2026-09-06); see public/js/research-figure.js. */
.dirfig{margin:10px -16px 12px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.dirfig__box{aspect-ratio:4/3;background:var(--surface-2)}
.dirfig__img{display:block;width:100%;height:100%;object-fit:contain;padding:10px}
/* only the "figure to be added" panel still uses a caption strip, to carry the DOI */
.dirfig__cr{display:flex;align-items:center;min-height:36px;padding:7px 16px;font-size:10.5px;
  line-height:1.45;color:var(--ink-3);border-top:1px solid var(--line);background:var(--surface)}
.dirfig__cr:empty{display:none}
.dirfig__box--todo{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  padding:12px 16px 14px;background:var(--accent-soft);
  background-image:repeating-linear-gradient(135deg,rgba(13,107,98,.06) 0 1px,transparent 1px 11px)}
html[data-theme="dark"] .dirfig__box--todo{
  background-image:repeating-linear-gradient(135deg,rgba(79,211,196,.07) 0 1px,transparent 1px 11px)}
.dirfig__n{margin:0;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:2px 7px;background:var(--surface)}
.dirfig__j{margin:0;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;
  letter-spacing:-.005em;overflow-wrap:anywhere;max-width:100%}
.dirfig__j .mono{font-weight:600;font-size:12.5px;color:var(--ink-2)}
.dirfig__doi{display:inline-block;font-size:10.5px;color:var(--accent);overflow-wrap:anywhere;
  border-bottom:1px solid var(--accent);padding-bottom:1px}
.dirfig__doi:hover{background:var(--accent);color:var(--surface);border-color:transparent}

/* ── news: a grid of cards, three to a row ───────────────────────────────
   The picture sits above the date and headline. The whole card is the click
   target when the item has a URL, so the small headline is not the only one.
   Cards are text only — see news-card.js for why. */
/* grid-auto-rows:1fr sizes every row to the tallest card on the page, and the
   default stretch alignment then makes each card fill its row — so the whole
   grid is one uniform height instead of a ragged edge. The bounded title
   (3 lines) is what keeps that common height sane. */
.ncgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;grid-auto-rows:1fr}
@media (max-width:960px){.ncgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ncgrid{grid-template-columns:minmax(0,1fr)}}

.nc{display:flex;flex-direction:column;min-width:0;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.nc--link:hover{border-color:var(--accent)}

.nc__body{display:flex;flex-direction:column;padding:11px 13px 10px}
.nc__d{margin:0 0 5px;display:flex;align-items:baseline;gap:8px;
  font-size:11px;letter-spacing:.03em;color:var(--ink-3)}
.nc__d .mono{white-space:nowrap;flex:none}
.nc__o{color:var(--accent);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc__t{margin:0;font-size:14.5px;font-weight:700;line-height:1.4;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.nc__a{color:var(--ink);text-decoration:none}
/* stretch the headline link over the whole card so the card itself is clickable */
.nc__a::after{content:"";position:absolute;inset:0}
.nc--link:hover .nc__a{color:var(--accent)}
.nc__a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nc__src{margin:auto 0 0;padding:9px 13px 11px;font-size:11px;color:var(--accent)}

/* ── grants: years left, title centre, amount chip right ────────────── */
.grants{margin:0;padding:0;list-style:none}
.grant{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:4px 16px;align-items:start;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.grant:last-child{border-bottom:0}
.grant:nth-child(odd){background:var(--surface-2)}
.grant .yrs{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:17px;font-weight:700;
  letter-spacing:-.02em;line-height:1.3;color:var(--ink);white-space:nowrap}
.grant .main{min-width:0}
.grant .ttl{font-size:14px;font-weight:700;margin:0;line-height:1.35}
.grant .sub{font-size:12px;color:var(--ink-3);margin:2px 0 0;line-height:1.5}
.grant .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r);
  padding:3px 9px;white-space:nowrap;justify-self:end;line-height:1.4}
@media (max-width:560px){
  .grant{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .grant .yrs{grid-area:1 / 1;font-size:15px;align-self:center}
  .grant .amt{grid-area:1 / 2}
  .grant .main{grid-area:2 / 1 / 3 / 3}
}

/* ── join: openings facts and position cards ────────────────────────── */
.jbody{margin:0;font-size:14px;line-height:1.65}
.jfacts{display:flex;flex-wrap:wrap;gap:10px 26px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.jfacts:empty{display:none}
.jfacts div{min-width:0}
.jfacts .k{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.jfacts .v{display:block;font-size:14px;font-weight:600;line-height:1.4}
.jacts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.jacts:empty{display:none}
.posgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;padding:16px}
.pos{display:flex;flex-direction:column;min-width:0;padding:13px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.pos:hover{border-color:var(--accent)}
.pos > .tag{align-self:flex-start;margin:0 0 7px}
.pos h3{font-size:14.5px;font-weight:700;margin:0 0 6px;line-height:1.32}
.pos .desc{font-size:13px;color:var(--ink-2);margin:0 0 8px;line-height:1.55}
.pos .dl{font-size:12px;color:var(--ink-3);margin:auto 0 0;padding-top:6px}
.pos .linkbtn{align-self:flex-start;margin-top:10px}
.empty a{color:var(--accent);font-weight:600}

/* ── group: member cards ────────────────────────────────────────────────
   Current members get the roomier grid; alumni sit in a tighter one so the
   longer list stays scannable. Every field below the name is optional. */
.people{display:grid;gap:12px;padding:16px;align-items:stretch}
.people--now{grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr))}
.people--alum{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}
.person{display:flex;flex-direction:column;min-width:0;padding:13px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.person:hover{border-color:var(--accent)}
.person--alum{padding:10px 12px}
.person p{margin:0}
.person__top{display:flex;align-items:center;gap:11px;min-width:0}
.person__id{min-width:0}
.person .nm{font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.005em;overflow-wrap:anywhere}
/* the name doubles as the profile link, so it stays ink-coloured until hover
   rather than reading as a stray blue link in the middle of the card */
.person .nm__a{color:inherit;text-decoration:none}
.person .nm__a:hover,.person .nm__a:focus-visible{color:var(--accent);text-decoration:underline}
.person .rl{font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-top:1px}
.person .yr{font-size:11px;color:var(--ink-3);margin-top:2px;letter-spacing:.02em}
.person--alum .nm{font-size:13.5px}
.person--alum .rl{font-size:12px}
.person .aff{margin-top:9px;font-size:12px;color:var(--ink-2);line-height:1.45;overflow-wrap:anywhere}
.person .bio2{margin-top:8px;font-size:12px;color:var(--ink-3);line-height:1.55}
.person--alum .bio2{font-size:11.5px}
.person .lk{margin:auto 0 0;padding-top:9px;font-size:11.5px;overflow-wrap:anywhere}
.person--alum .lk{padding-top:5px}
.person .lk a{color:var(--accent)}
.person .lk a:hover{text-decoration:underline}

/* avatar: the monogram tile is always there, the photo covers it when it
   loads. `av--fallback` is set for a missing or broken file. */
.av{position:relative;flex:0 0 auto;width:52px;height:52px;overflow:hidden;
  border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--line)}
.person--alum .av{width:38px;height:38px}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;z-index:1}
.av--fallback img{display:none}
.av__mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--accent)}
.person--alum .av__mono{font-size:13px}

/* ── gallery: enlarge trigger and the shared lightbox ───────────────────── */
/* gallery cards are pure photograph: no caption strip, no padding, nothing
   below the picture that could leave a row of half-empty white bars */
.shot{margin:0;border:0;border-radius:var(--r);overflow:hidden;box-shadow:none;background:var(--ph-bg)}
.shot figcaption,.shot .cap{display:none}
.shot .photo{border-radius:var(--r)}
.shot__media{position:relative}
.shot__open{position:absolute;inset:0;z-index:3;width:100%;padding:0;cursor:zoom-in;
  background:transparent;border:0;font:inherit}
.shot__zoom{position:absolute;right:7px;bottom:7px;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:3px;font-size:13px;line-height:1;color:#fff;
  background:rgba(12,18,17,.62);opacity:0;transition:opacity .12s linear}
.shot__open:hover .shot__zoom,.shot__open:focus-visible .shot__zoom{opacity:1}
.shot__open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* when the picture links to its source page, the picture takes the click and the
   lightbox shrinks to a corner control so the two do not overlap */
.shot__src{display:block;position:relative;z-index:1}
.shot__src .photo{transition:opacity .15s ease}
.shot__src:hover .photo{opacity:.9}
.shot__src:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.shot__open--corner{inset:auto 6px 6px auto;width:auto;height:auto;z-index:4}
.shot__open--corner .shot__zoom{position:static;opacity:.72}
.shot__media--linked:hover .shot__open--corner .shot__zoom{opacity:1}

.lb[open]{position:fixed;inset:0}
.lb{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent}
.lb::backdrop{background:rgba(8,12,11,.82)}
.lb__in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:52px 22px 22px;pointer-events:none}
.lb__in > *{pointer-events:auto}
.lb__img{max-width:min(1100px,100%);max-height:calc(100vh - 132px);object-fit:contain;
  border-radius:var(--r);background:var(--surface-2)}
.lb__cap{margin:0;max-width:min(1100px,100%);font-size:12.5px;line-height:1.5;color:#e8eeec;text-align:center}
.lb__close{position:absolute;top:16px;right:18px;background:var(--surface);color:var(--ink)}
@media (max-width:560px){
  .lb__in{padding:48px 12px 16px}
  .lb__img{max-height:calc(100vh - 118px)}
}