html{background:var(--bg)}
body{transition:background .4s ease,color .4s ease}
.tmode{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:-6px -8px -6px 4px;padding:0;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .3s ease;flex:0 0 auto}
.tmode:hover{background:rgba(var(--inkrgb),.07)}
.tmode svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tmode .sun{display:none}
html[data-theme="dark"] .tmode .sun{display:block}
html[data-theme="dark"] .tmode .moon{display:none}


/* ---- Site footer, small screens -------------------------------------------
   The desktop footer is a two-column row with the monogram beside the
   sign-off. Under 820px that leaves the mark stranded in a tall empty column
   and stretches the footer over a screen and a half, so the mark moves above
   the sign-off, the type steps down, and the vertical rhythm tightens. */
@media (max-width:820px){
  .sitefoot{margin-top:32px !important;padding:40px 24px 0 !important}
  .sitefoot > div:first-child{gap:32px !important}
  .sitefoot > div:first-child > div:first-child{
    flex-direction:column !important;align-items:flex-start !important;gap:16px !important}
  .sitefoot .lsfmark{width:88px !important}
  .sitefoot h2{font-size:27px !important}
  .sitefoot > div:first-child > div:first-child p:first-of-type{
    margin-top:9px !important;font-size:15px !important;line-height:1.45 !important}
  .sitefoot > div:first-child > div:first-child p:last-of-type{margin-top:10px !important;font-size:12px !important}
  .sitefoot > div:first-child > div:last-child{gap:56px !important}
  /* The touch box does the spacing; it needs to apply at every small width,
     not just under 768px, or the rows collide. */
  .sitefoot [data-mono]{gap:2px !important}
  .sitefoot [data-mono] > a{display:inline-flex !important;align-items:center !important;min-height:32px !important}
  .sitefoot > div:first-child > div:last-child > div > div:first-child{margin-bottom:10px !important}
  .sitefoot > div:last-child{padding:16px 0 18px !important;margin-top:4px !important}
}
@media (max-width:560px){
  .sitefoot{padding-top:34px !important}
  .sitefoot .lsfmark{width:76px !important}
  .sitefoot h2{font-size:25px !important}
  .sitefoot > div:first-child{gap:24px !important}
  .sitefoot > div:first-child > div:last-child{gap:40px !important}
}