/* Hide the collapsible "▸ Zhangfan Li" box at the top of the sidebar; the
   list below it already links to the title and every section. */
.tocview { display: none; }

/* Bigger sidebar links, with a bit more room between them. */
.tocsub td { font-size: 1.2rem; }
.tocsublist td { padding-top: 0.5rem; }
.tocsubseclink:hover { text-decoration: underline; }

/* Highlight the publication or talk named in the URL, e.g. /#JSSST2025.
   The id is on the <p> inside the <li>; :has() extends it to the bullet.
   Separate rules, so browsers without :has() still highlight the <p>. */
:target { background-color: #F5F5D7; }
li:has(> p:target) { background-color: #F5F5D7; }

/* The manual style shrinks the base font on narrow screens (down to 10px);
   keep it readable on phones instead. */
@media all and (max-width: 720px) { html { font-size: 15px; } }

/* Homepage photo: fill the margin-note it sits in, with the contact list
   right below it. */
img.portrait { width: 100%; height: auto; display: block; }
p.photo-credit { margin: 0.3em 0 0; font-size: 0.75em; color: #666; }
ul.contacts { margin: 0.6em 0 0; padding-left: 1.2em; }

/* The bio and the photo's note share a wrapper so phones can reorder them. */
blockquote.intro { margin: 0; }

/* Below 1340px, the manual style turns a margin-note into a full-width block
   in the main column, which blows the photo up to the column's width. Float
   the photo's note to the right instead, and start the next margin-note below
   it rather than beside it, flush with the column's edges like the photo. */
@media all and (max-width: 1340px) {
  .refcolumn:has(img.portrait) {
    float: right;
    width: 40%;
    margin: 0 0 1rem 1.5rem;
  }
  .refcolumn { clear: right; margin-left: 0; margin-right: 0; }
}

/* On phones, stack the bio first, then the photo's note at full width. */
@media all and (max-width: 600px) {
  .refcolumn:has(img.portrait) { float: none; width: auto; margin: 1rem 0; }
  blockquote.intro { display: flex; flex-direction: column; }
  blockquote.intro > .refpara { order: 1; }
}