/* ---- mobile corrections (shared by the reading and hybrid layouts) ---- */

/* the decorative hand overflowed the viewport and left a tall empty band.
   article.css targets it as `.reading-page .signoff-hand`, so these need to
   out-specify that, not merely come later in the cascade. */
@media(max-width:900px){
  .reading-page .transparent-signoff{min-height:0;padding-bottom:4px}
  .reading-page .transparent-signoff .signoff-signature{width:190px;max-width:56%;margin:18px 0 10px}
  .reading-page .transparent-signoff .signoff-hand{right:0;left:auto;width:240px;max-width:calc(100% - 8px);margin-top:-6px}
}
@media(max-width:520px){
  .reading-page .transparent-signoff .signoff-signature{width:170px;max-width:62%}
  .reading-page .transparent-signoff .signoff-hand{width:200px;max-width:calc(100% - 8px)}
}

/* table of contents: a two-column wall of links ate a whole screen.
   Below 900px it becomes a disclosure that opens on demand. */
@media(max-width:900px){
  .reading-page .article-toc{border:1px solid #675f5f;border-radius:3px;padding:0;background:#141414}
  .article-toc[data-collapsible]>p{display:none}
  .toc-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
    background:none;border:0;color:#ff8116;font:inherit;font-size:14.5px;font-weight:500;
    padding:15px 16px;cursor:pointer;text-align:start}
  .toc-toggle:focus-visible{outline:2px solid #ff8116;outline-offset:-2px}
  .toc-toggle .chev{transition:transform .2s;color:#a6a6a0;font-size:12px}
  .article-toc[data-open="true"] .toc-toggle .chev{transform:rotate(180deg)}
  .article-toc[data-collapsible] nav{display:none;grid-template-columns:1fr;
    padding:0 10px 10px;border-top:1px solid #2b2b29}
  .article-toc[data-open="true"] nav{display:grid}
  .article-toc nav a{padding:11px 12px;font-size:14.5px;border-right:2px solid #3a3a38}
  .article-toc[data-collapsible] .back-blog{display:none}
}
@media(prefers-reduced-motion:reduce){.toc-toggle .chev{transition:none}}
.toc-toggle{display:none}