#title-stack {
  padding-top: 12em;
}
#title-stack h1 {
  font-size: 10em;
}
#replication {
  margin-top: 10em;
}

@media (max-width: 1100px) {
    :root {
    --w-min: 100%;
  }
  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; }/* 1.8 */
  h3.is-sticky, h4.is-sticky { font-size: 1.7em !important; }
  /* #replication { margin-top: -3.5em; } */
  .side.left,
  .side.right {
    grid-column: content-start / content-end;
    justify-self: center;
    width: 100%;
  }
  .side img {
    max-height: 40vh;
    margin: 0 auto;
  }
  /* #layout {
    grid-template-columns:
      [left] 5vw
      [content-start] 90vw
      [content-end] 0
      [right];
    column-gap: 0;
  } */
  .piece-list {
    flex-direction: column;
  }

  #layout { container: layout / inline-size; grid-template-columns: none; }
  @container layout (min-width: 550px) and (max-width: 1100px) {
    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 > *:not(h3,h4,h5,h6,hr) { margin: 1em; }
    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 + .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: 550px) {
  .links img { width: 28px; }
  article { font-size: 0.9em !important; }
  p, figcaption { margin: 1rem; }
  .qbtn { font-size: 0.7em }
  h2.is-sticky { font-size: 1.8em !important; }
  h3.is-sticky, h4.is-sticky { font-size: 1em !important; }
}
@media (max-width: 350px) {
  #title-stack h1 { font-size: 4em !important; }
  .links img { width: 18px; }
  article { font-size: 0.8em !important; }
  article ol, article ul { padding-left: 0.5em; }
}