/* Apple fonts can expose overlapping glyph components when text-stroke is used
   (WebKit 238541). Outline the filled silhouette instead, so inner construction
   seams never get stroked. Include touch tablets in landscape as well. */
@media (min-width: 601px) and (max-width: 820px),
       (min-width: 601px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .rotating-word {
    color: var(--paper);
    -webkit-text-fill-color: var(--paper);
    -webkit-text-stroke: 0;
    letter-spacing: .015em;
    text-shadow:
      -1px 0 0 var(--ink), 1px 0 0 var(--ink),
      0 -1px 0 var(--ink), 0 1px 0 var(--ink),
      -.75px -.75px 0 var(--ink), .75px -.75px 0 var(--ink),
      -.75px .75px 0 var(--ink), .75px .75px 0 var(--ink);
  }
}

/* Tablets retain the full story, with room for the longest Latvian headline. */
@media (min-width: 601px) and (max-width: 820px) {
  .hero h1 {
    max-width: none;
    font-size: clamp(3.5rem, 9vw, 5rem);
    line-height: 1.12;
    letter-spacing: -.065em;
  }
  .hero-rotating-line {
    height: auto;
    min-height: 1.04em;
    align-items: baseline;
    margin-bottom: 0;
  }
  .rotating-slot { flex: 1 1 0; height: auto; min-height: 0; }
  .rotating-word { position: relative; left: auto; top: auto; bottom: auto; display: block; width: max-content; max-width: 100%; line-height: 1; letter-spacing: .015em; }
  .rotating-word.rotating-measure { position: absolute; max-width: none; }
  .hero-title-rest { margin-top: 0; overflow-wrap: anywhere; }

  /* Panels become one column at this width, so centre them in that column. */
  .hero .rate-console {
    justify-self: center;
    margin-inline: auto;
  }
  .signal-item { padding-left: 34px; }
  .communication-shell .status-feed {
    justify-self: center;
    margin-inline: auto;
  }
  .audit-shell .audit-copy {
    width: 100%;
    margin-inline: auto;
  }
}