/* ===================== About block + portrait ===================== */

.about-block{
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.about-text{
  flex: 1 1 auto;
  min-width: 0;
}

.portrait{
  width: 220px;
  height: auto;
  margin: 20px 0 14px 30px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.10);
}

@media (max-width: 700px){
  .about-block{ flex-direction: column; }
  .portrait{ align-self: center; margin: 14px 0; }
}

/* ===================== Quick links ===================== */

.qlstack{
  margin-top: 9px;
  margin-bottom: 18px;
  text-align: center;
}

.quicklinks{
  margin: 0;
  font-size: 90%;
  line-height: 150%;
  color: var(--accent);
}

.quicklinks a:link,
.quicklinks a:visited,
.quicklinks a:active{
  color: var(--accent);
  text-decoration: none;
}

.quicklinks a:hover{
  color: var(--accent);
  text-decoration: underline;
}

.quicklinks .sep{
  padding: 0 8px;
  color: rgba(174,0,41,0.65);
}

/* External profiles (pill) */
.profilepill{
  display: inline-block;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.10);

  font-size: 76%;
  line-height: 1.2;
  color: #888;
  white-space: nowrap;
  opacity: 0.95;
}

.profilepill a:link,
.profilepill a:visited{
  color: #888;
  text-decoration: none;
}

.profilepill a:hover{
  color: var(--accent);
  text-decoration: underline;
}

.profilepill .sep{
  padding: 0 8px;
  color: #bbb;
}


/* ===================== Section spacing ===================== */

h2{
  margin: 40px 0 5px;
}

/* ===================== Publications ===================== */

.pubs-selected{
  padding-left: 1.4em;
}

.pubs-selected li{
  padding: 8px 10px;
  border-radius: 6px;
  margin: 6px 0;
}

.pubs-selected li:nth-child(even){
  background: var(--zebra);
}

.pubs-selected li::marker{
  color: #9a9a9a;
  font-weight: normal;
  font-size: 1em;
}

.pub-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pub-tag{
  font-size: 75%;
  color: var(--muted);
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.pub-logos{
  margin-top: 22px;
  margin-bottom: 10px;
}

/* ===================== Software ===================== */

.software-list{
  padding-left: 1.4em;
  margin: 8px 0 18px;
  color: var(--text);
}

.software-list li{
  padding: 8px 10px;
  border-radius: 6px;
  margin: 6px 0;
}

.software-list li:nth-child(even){
  background: var(--zebra);
}

.software-list li::marker{
  color: #9a9a9a;
  font-weight: normal;
  font-size: 1em;
}

/* Small bracket links: [paper] [tutorial] */
.soft-links{
  font-size: 85%;
  margin-left: 6px;
  white-space: nowrap;
  color: var(--muted);
}

.soft-links a:link,
.soft-links a:visited{
  color: var(--muted);
  text-decoration: none;
}

.soft-links a:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* ===================== Talks ===================== */

.talks-list{
  padding-left: 1.4em;
  margin: 8px 0 18px;
}

.talks-list li{
  padding: 8px 10px;
  border-radius: 6px;
  margin: 6px 0;
}

.talks-list li:nth-child(even){
  background: var(--zebra);
}

.talks-list li::marker{
  color: #9a9a9a;
  font-weight: normal;
  font-size: 1em;
}

.talk-venue{ font-weight: 700; }
.talk-meta{ margin-left: 6px; }
.talk-dash{ margin: 0 6px; }

.talk-titlelink{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.talk-titlelink:hover{
  color: var(--accent);
}

/* [event] */
.talk-links{
  margin-left: 8px;
  font-size: 85%;
  color: var(--muted);
  white-space: nowrap;
}

.talk-links a{
  color: var(--muted);
  text-decoration: none;
}

.talk-links a:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* ===================== Lists used in Teaching + Supplementary ===================== */

.supp-list{
  list-style: disc;
  padding-left: 1.2em;
  margin: 10px 0 0 0;
}

.supp-list li{
  padding: 8px 10px;
  border-radius: 6px;
  margin: 6px 0;
}

.supp-list li:nth-child(even){
  background: var(--zebra);
}

.supp-list li::marker{
  color: #9a9a9a;
}

/* ===================== Fold (accordion) ===================== */

details.fold{
  margin-top: 8px;
}

details.fold summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
}

details.fold summary:hover{
  background: rgba(0,0,0,0.05);
}

details.fold summary .sumtext{
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

details.fold .hint{
  font-size: 90%;
  color: var(--muted);
  white-space: nowrap;
}

details.fold summary::after{
  content: "▸";
  font-size: 160%;
  color: var(--muted);
  flex: 0 0 auto;
  margin-left: auto;
}

details.fold[open] summary::after{ content: "▾"; }

details.fold summary::-webkit-details-marker{ display: none; }

details.fold summary:hover::after{ color: var(--accent); }

/* ===================== Notes list (cards) ===================== */

.notes-list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0 0;
}

.notes-list li{
  margin: 8px 0;
  border-radius: 10px;
}

.notes-list li:nth-child(even){
  background: var(--zebra);
}

.note-link{
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.note-link:hover{
  background: rgba(174,0,41,0.06);
}

.note-link:hover .note-title{
  text-decoration: underline;
}

.note-thumbbox{
  width: 200px;
  height: 96px;
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}

.note-thumb{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.note-thumbbox.thumb-bg-black{
  background: #000;
  border-color: rgba(0,0,0,0.18);
}

.note-thumbbox.thumb-bg-white{
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}

.note-meta{ min-width: 0; }

.note-title{
  display: block;
  font-weight: 700;
  line-height: 1.2;
}

.note-desc{
  display: block;
  margin-top: 4px;
  font-size: 92%;
  line-height: 145%;
  color: #666;
}

@media (max-width: 650px){
  .note-link{
    flex-direction: column;
    align-items: flex-start;
  }

  .note-thumbbox{
    width: 100%;
    height: 140px;
    flex: 0 0 auto;
  }
}