/* Shared layer over the Sitely export. Keep this link after generated styles.
   Desktop keeps the original layout; narrower screens use document flow. */
body#b { min-width: 320px; }
.site-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, 38px);
  pointer-events: auto;
}
.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 4px;
  /* The exported image has four transparent pixels at its right edge.
     Crop that padding so adjacent red rails meet without a white seam. */
  background: url('../images/u/button_normal-264.png') left center / 101.5385% 100% no-repeat;
  color: #7f7f7f;
  font: bold 12px/1.5 Tahoma, Verdana, sans-serif;
  text-align: center;
}
.site-nav a[aria-current='page'], .site-nav a:hover {
  color: #dc322f;
  background-image: url('../images/o/button_over-264.png');
}
a:focus-visible { outline: 2px solid #a32220; outline-offset: 2px; }

@media (max-width: 959px) {
  body#b { min-width: 320px; }
  #b .page-shell {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: 719px;
    min-height: 0;
    margin: 16px auto;
    padding: 16px;
    border: 2px solid #677a85;
    border-radius: 8px;
    background: #fafafa url('../images/t/container_bg-715.jpg') center / 100% 100% no-repeat;
    pointer-events: auto;
  }
  #b .page-shell div {
    display: block;
    box-sizing: border-box;
    position: static;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    background: none;
    line-height: normal;
  }
  #b .page-shell .content-block { margin-top: 18px; }
  #b .page-shell :is(p, li, span, a, h1, h2, h3, h4) {
    max-width: 100%;
    overflow-wrap: anywhere;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  #b .page-shell :is(p, li, span, a) { font-size: 16px; line-height: 1.6; }
  #b .page-shell :is(h2, h3, h4) { font-size: 19px; line-height: 1.5; }
  #b .site-header h2 { font-size: 22px; line-height: 1.3; }
  #b .site-header p { margin-top: 4px; font-size: 12px; line-height: 1.5; }
  #b .site-nav {
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 16px 0 20px;
    grid-template-rows: repeat(2, minmax(44px, auto));
  }
  #b .site-nav a { font-size: 12px; line-height: 1.4; }
  #b .page-shell picture {
    display: block;
    width: auto;
    height: auto;
    transform: none;
  }
  #b .page-shell img {
    display: block;
    position: static;
    width: var(--media-width, auto);
    max-width: 100%;
    height: auto;
  }
  #b .page-shell video {
    display: block;
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    transform: none;
    zoom: 1;
  }
  #b .page-shell .site-footer {
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid #adadad;
  }
  #b .site-footer p { font-size: 11px; }
  #b .page-shell .cv-teaching-group { display: flex; flex-direction: column; }
  #b .cv-teaching-group .cv-project-heading { order: 1; }
}
@media (max-width: 599px) {
  #b .site-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(44px, auto));
    row-gap: 4px;
    column-gap: 0;
  }
  #b .site-nav a { font-size: 14px; }
}

/* Teaching grows when courses or lecture notes are added, on desktop too. */
#b.teaching-page .teaching-content {
  height: auto;
  min-height: 0;
  overflow: visible;
}
#b.teaching-page .teaching-footer-group {
  margin-top: 24px;
}
.course-divider {
  border: 0;
  border-top: 3px solid #c00;
  width: 88%;
  margin: 16px 0;
}
.lecture-pending { color: #666; }