/* =========================================================
   Zhuqing Liu — academic homepage
   Classic template layout: banner, nav bar, white content
   panel, sidebar, footer.
   ========================================================= */

:root{
  --green:      #00853e;   /* UNT green */
  --green-dk:   #00441f;
  --green-mid:  #005c2b;
  --link:       #15508c;
  --link-hover: #a02c00;
  --role-red:   #c62828;
  --text:       #2f3336;
  --soft:       #6b7075;
  --line:       #dcdedb;
  --panel:      #ffffff;
  --bg:         #eceeeb;
  --wide:       1080px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Source Sans 3", Arial, Helvetica, sans-serif;
  font-size:15.5px;
  line-height:1.65;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:underline; }

.inner{ max-width:var(--wide); margin:0 auto; padding:0 24px; }

/* ---------- banner -------------------------------------- */

#banner{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, var(--green-dk) 0%, var(--green-mid) 55%, var(--green) 100%);
  color:#fff;
  border-bottom:4px solid var(--green);
}

#banner .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-top:30px;
  padding-bottom:30px;
}

#banner h1{
  font-size:33px;
  font-weight:700;
  letter-spacing:.005em;
  margin:0 0 4px;
  line-height:1.15;
}
#banner h1 a{ color:#fff; text-decoration:none; }
#banner .tagline{ margin:0; font-size:15px; color:#d5e5da; }
#banner .where{ margin:6px 0 0; font-size:13.5px; color:#a9c9b6; }

.crest{
  text-align:right;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#bcd7c6;
  line-height:1.5;
  white-space:nowrap;
}
.crest strong{ display:block; font-size:19px; letter-spacing:.02em; color:#fff; font-weight:700; }

/* ---------- nav ----------------------------------------- */

#nav{ background:#052e18; }
#nav ul{
  max-width:var(--wide);
  margin:0 auto;
  padding:0 12px;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
}
#nav a{
  display:block;
  padding:11px 16px;
  color:#cfe0d6;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:3px solid transparent;
}
#nav a:hover{ background:#0a4526; color:#fff; text-decoration:none; }
#nav a.active{ background:var(--green); color:#fff; border-bottom-color:#ffd200; }

/* ---------- page panel ---------------------------------- */

#page{
  max-width:var(--wide);
  margin:22px auto 34px;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  padding:30px 34px 38px;
}

.cols{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:34px; align-items:start; }

/* ---------- sidebar ------------------------------------- */

#sidebar .photo{
  width:100%;
  display:block;
  border:1px solid var(--line);
  padding:4px;
  background:#fff;
}

.card{
  border:1px solid var(--line);
  border-top:3px solid var(--green);
  padding:12px 14px;
  margin-top:16px;
  font-size:14px;
  line-height:1.55;
}
.card h3{
  margin:0 0 8px;
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--green-dk);
}
.card p{ margin:0 0 8px; }
.card p:last-child{ margin-bottom:0; }
.card .k{ color:var(--soft); display:block; font-size:12.5px; }
.card a{ word-break:break-word; }

.btn{
  display:block;
  text-align:center;
  background:var(--green);
  color:#fff !important;
  padding:9px 10px;
  margin-top:14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  border:0;
}
.btn:hover{ background:var(--green-dk); text-decoration:none; }

/* ---------- headings & text ----------------------------- */

h2{
  font-size:20px;
  font-weight:700;
  color:var(--green-dk);
  border-bottom:2px solid var(--green);
  padding-bottom:6px;
  margin:30px 0 14px;
}
h2:first-child, .content > h2:first-of-type{ margin-top:0; }

h3{ font-size:16px; font-weight:700; color:#1e2426; margin:22px 0 8px; }

p{ margin:0 0 12px; }

.lead{ font-size:16.5px; }

hr.sep{ border:0; border-top:1px solid var(--line); margin:26px 0; }

/* ---------- callout ------------------------------------- */

.notice{
  background:#f2f8f4;
  border:1px solid #cfe3d7;
  border-left:5px solid var(--green);
  padding:12px 16px;
  margin:0 0 16px;
}
.notice b{ color:var(--green-dk); }

/* ---------- news ---------------------------------------- */

ul.news{ list-style:none; margin:0; padding:0; }
ul.news li{
  padding:8px 0 8px 20px;
  border-bottom:1px dotted var(--line);
  position:relative;
  font-size:14.8px;
}
ul.news li::before{
  content:"\25AA";
  position:absolute;
  left:2px;
  top:7px;
  color:var(--green);
  font-size:11px;
}
ul.news li:last-child{ border-bottom:0; }
ul.news b{ color:#1e2426; }

/* ---------- numbered lists (publications) --------------- */

ol.pubs{ margin:0; padding-left:26px; }
ol.pubs > li{
  margin-bottom:13px;
  padding-left:4px;
  font-size:14.8px;
  line-height:1.6;
}
ol.pubs .title{ font-weight:700; color:#1e2426; }
ol.pubs .title a{ font-weight:700; }
ol.pubs .self{ text-decoration:underline; }
ol.pubs .flag{ color:#a02c00; font-weight:700; }

.yearbar{
  background:#f4f6f4;
  border-left:5px solid var(--green);
  padding:5px 12px;
  margin:24px 0 12px;
  font-size:15px;
  font-weight:700;
  color:var(--green-dk);
  letter-spacing:.03em;
}

/* ---------- grants -------------------------------------- */

.agency{
  background:var(--green-dk);
  color:#fff;
  padding:7px 14px;
  margin:26px 0 0;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.05em;
}
.agency:first-of-type{ margin-top:8px; }

ol.grants{ margin:12px 0 0; padding-left:26px; }
ol.grants > li{ margin-bottom:15px; font-size:14.8px; line-height:1.62; }
ol.grants .title{ font-weight:700; color:#1e2426; }
ol.grants .role{ font-weight:700; color:var(--role-red); }

/* PI / Lead PI / Sole PI, highlighted wherever they appear */
.role{ color:var(--role-red); font-weight:700; }
table.summary .role{ font-weight:700; }
ul.news .role{ font-weight:700; }
ol.grants .amt{ font-weight:700; }

table.summary{
  width:100%;
  border-collapse:collapse;
  margin:0 0 6px;
  font-size:14.5px;
}
table.summary th{
  background:#f4f6f4;
  text-align:left;
  padding:8px 12px;
  border:1px solid var(--line);
  color:var(--green-dk);
  width:230px;
}
table.summary td{ padding:8px 12px; border:1px solid var(--line); }

/* ---------- generic tables (teaching) ------------------- */

table.grid{ width:100%; border-collapse:collapse; font-size:14.8px; margin:0 0 10px; }
table.grid th{
  background:var(--green-dk);
  color:#fff;
  text-align:left;
  padding:8px 12px;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.04em;
}
table.grid td{ padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.grid tr:nth-child(even) td{ background:#fafbfa; }

/* ---------- misc lists ---------------------------------- */

ul.plain{ margin:0 0 12px; padding-left:20px; }
ul.plain li{ margin-bottom:7px; }

dl.svc{ margin:0; }
dl.svc dt{ font-weight:700; color:var(--green-dk); margin-top:14px; }
dl.svc dd{ margin:3px 0 0; }

.foot-note{ font-size:13.5px; color:var(--soft); margin-top:16px; }

/* ---------- footer -------------------------------------- */

#footer{
  border-top:3px solid var(--green);
  background:#052e18;
  color:#a9c9b6;
  font-size:13px;
}
#footer .inner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:16px;
  padding-bottom:18px;
}
#footer a{ color:#d5e5da; }

.totop{ display:block; text-align:right; font-size:13px; margin-top:20px; }

/* ---------- responsive ---------------------------------- */

@media (max-width:860px){
  #banner .inner{ flex-direction:column; align-items:flex-start; gap:10px; padding-top:22px; padding-bottom:22px; }
  #banner h1{ font-size:26px; }
  .crest{ text-align:left; }
  #nav ul{ padding:0; }
  #nav a{ padding:10px 12px; font-size:11.5px; }
  #page{ padding:22px 18px 28px; margin:14px auto 24px; }
  .cols{ grid-template-columns:1fr; gap:22px; }
  #sidebar{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:start; }
  #sidebar .card:first-of-type{ margin-top:0; }
  table.summary th{ width:auto; }
}

@media (max-width:520px){
  #sidebar{ grid-template-columns:1fr; }
}

@media print{
  body{ background:#fff; font-size:10.5pt; }
  #nav, #footer, .totop, .btn{ display:none; }
  #page{ border:0; box-shadow:none; margin:0; padding:0; max-width:none; }
  #banner{ background:#fff; color:#000; border-bottom:2px solid #000; }
  #banner h1 a, #banner .tagline, #banner .where, .crest, .crest strong{ color:#000; }
  a{ color:#000; }
}