/*
 * Use desktop space more efficiently without changing the site's typography,
 * color palette, content order, or interaction design.
 */
@media (min-width: 961px) {
  html,
  body {
    overscroll-behavior-y: none;
  }

  .header-inner,
  .page-shell,
  .footer-inner {
    width: min(1200px, calc(100% - 64px));
  }

  .page-shell {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: clamp(48px, 4vw, 56px);
  }

  .bio,
  .bio-contact,
  .ai-section p {
    max-width: 800px;
  }
}

/* Avoid retaining the cramped two-column desktop grid at tablet widths. */
@media (min-width: 761px) and (max-width: 960px) {
  html {
    scroll-padding-top: 108px;
  }

  .site-header {
    height: auto;
  }

  .header-inner {
    width: 100%;
    display: block;
  }

  .site-name {
    display: block;
    padding: 14px 32px 9px;
    font-size: 16px;
  }

  .site-nav {
    width: 100%;
    gap: 24px;
    padding: 0 32px;
    overflow-x: auto;
    border-top: 1px solid rgba(214, 224, 232, 0.65);
  }

  .site-nav a {
    min-height: 43px;
    font-size: var(--type-nav);
  }

  .page-shell,
  .footer-inner {
    width: min(calc(100% - 64px), 800px);
  }

  .page-shell {
    display: block;
    padding-top: 32px;
  }

  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    max-height: none;
    margin-bottom: 34px;
  }

  .portrait {
    min-height: 0;
  }

  .news-widget {
    display: block;
    padding: 0;
  }

  .news-list {
    min-height: 0;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }

  .content-section {
    scroll-margin-top: 114px;
  }
}