#title-stack a {
  display: flex;
  justify-content: center;
  font-size: 10em;
  height: 1em;
  margin: auto;
  margin-top: 1em;
  width: 40%;
}
#title-stack h1 {
  font-size: 1em;
}

@media (max-width: 1200px) {
  :root {
    --w-min: 100%;
  }
  .dual {
    flex-direction: column;
  }
  html::before{
    background:
      /* wider oval for very narrow display */
      radial-gradient(
        ellipse 220% 85% at 50% 0%,
        var(--bg2) 0%,
        var(--bg1) 64%, var(--bg1) 100%
      ),
      var(--bg1);
  }

  .nav.side { position: initial; }
  /* #title-stack h1 { font-size: 6em; } */
  .links img { width: 40px; }
  article { font-size: 1.1em !important; }
  h2 { font-size: 3em !important; }
  h3 { font-size: 2.3em !important; }
  h2.is-sticky { font-size: 2em !important; }
  h3.is-sticky, h4.is-sticky { font-size: 1.3em !important; }
  .side.left,
  .side.right {
    grid-column: content-start / content-end;
    justify-self: center;
    width: 100%;
  }
  .side img {
    max-height: 40vh;
    margin: 0 auto;
  }
  .piece-list {
    flex-direction: column;
  }

  article.content > *:not(h3,h4,h5,h6,hr) {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  #layout { container: layout / inline-size; grid-template-columns: none; }
  @container layout (max-width: 1200px) {
    article.content{
      grid-template-columns: 1fr 1fr;
      gap: 0 1.25rem; /* avoid vertical gaps because empty cells must be small */
      align-items:start;
    }
    article.content > .nav { width: max-content; margin: auto; }
    article.content > * { grid-column: 1 / -1; } /* stretch */
    article.content > .side:has(+ *) { grid-column: 2; margin: 0 1em 0 0; }  /* push right */
    article.content > .side + * { grid-column: 1; margin-top: 0; } /* bring left */
    article.content > .side + * + ul { grid-column: 1; margin-top: 0; } /* bring left */
    article.content > .side + * + ol { grid-column: 1; margin-top: 0; } /* bring left */
    article.content > .side + .side { grid-column: 2; } /* join */
    article.content > .side + .side + * { grid-column: 1 / -1; } /* reset stretch */
    article.content > .side.nav { grid-column: 1 / -1; }
  }
}
@media (max-width: 560px) {
  article.content * { grid-column: 1 / -1 !important; }
  #title-stack a { font-size: 4em !important; }
  .links img { width: 28px; }
  article { font-size: 0.9em !important; }
  .qbtn { font-size: 0.7em }
  h2 { font-size: 2em !important; }
  h2.is-sticky { font-size: 1.2em !important; }
  h3.is-sticky, h4.is-sticky { font-size: 1em !important; }
  #authors { font-size: 0.7em; }
  #authors h3 a { font-size: 0.7em; }
  #main aside { flex-direction: column; }
}
@media (max-width: 350px) {
  h2.is-sticky { font-size: 1em !important; }
  figure img { width: inherit; }
  .links img { width: 18px; }
  article { font-size: 0.8em !important; }
  article ol, article ul { padding-left: 0.5em; }
}