/* The masthead belongs to the framed hero and scrolls away with it.
   Keep the approved top-of-page coordinates and content spacing. */
.giles-site.lv4 .lv3-nav {
  position: absolute;
}

/* Decorative rails must not remain over the lower story on small screens. */
.giles-site .lv9-hero > .page-frame {
  position: absolute;
}

/* There is no longer a fixed menu to clear when following section links. */
html {
  scroll-padding-top: 32px;
}

/* A classic scrollbar leaves less than320px of content at a320px viewport. */
body {
  min-width: 0;
}

.giles-site .lv3-nav__brand,
.giles-site .lv3-nav__login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* An ink focus ring remains distinct against the light parchment. */
.giles-site.lv2b .lv2-wl-btn:focus-visible,
.giles-site.lv4 .lv3-nav .lv3-btn:focus-visible {
  outline-color: var(--ink);
}

/* Keep the transcript's keyboard focus indicator inside the clipped phone. */
.message-ledger:focus-visible {
  outline-offset: -3px;
}

/* Slightly darken existing secondary text without changing the phone's layout. */
.message time,
.phone-header small {
  color: #6b6b6b;
}

.message-human time {
  color: #3e7027;
}

.demo-note {
  color: var(--muted);
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: 20px;
  }
}

@media (max-width: 400px) {
  .giles-site .lv3-nav__login {
    display: none;
  }
}

/* Compact the full name before tablet navigation links run out of room. */
.giles-site .lv3-nav__wordmark {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .giles-site .lv3-nav__brand {
    font-size: 18px;
    letter-spacing: 2px;
  }

  .giles-site .lv3-nav__wordmark {
    line-height: 1.05;
  }

  .giles-site .lv3-nav__wordmark > span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .giles-site .giles-monogram {
    display: grid;
    flex-shrink: 0;
  }
}