@media (max-width: 813px) {

  /* === Page Layout / Sidebar === */
  .page-layout {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .sidebar-nav {
    width: 100%;
    overflow: hidden;
    border: 1px solid #e3e3e3;
  }

  .sidebar-title {
    font-size: 1.1rem;
    padding: 12px 16px;
  }

  .sidebar-links a {
    display: block;
    padding: 14px 16px;
    font-size: 1rem;
    line-height: 1.3;
    border-top: 1px solid #f0f0f0;
  }

  /* IMPORTANT: Only vertically-center pages that HAVE a sidebar */
  .page-layout:not(.no-sidebar) .page-content {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
  }

  /* For no-sidebar pages (e.g., Contact), keep normal document flow */
  .page-layout.no-sidebar .page-content,
  .page-layout.no-sidebar .page-content-center {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    padding: 8px 8px 16px;
    display: block;
    /* no flex centering */
    min-height: 0;
    /* remove tall gaps */
  }

  .project-image img {
    width: 100%;
    height: auto;
  }
}

/* === Footer Responsive === */
@media (max-width: 813px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    gap: 20px;
  }

  .footer-left {
    max-width: 100%;
    text-align: center;
  }

  .footer-logo {
    height: 60px;
    margin-bottom: 12px;
  }

  .footer-links a {
    display: block;
    margin: 6px 0;
  }

  .footer-right {
    text-align: center;
    font-size: 0.95rem;
  }

  .footer-right p strong {
    font-size: 1.1rem;
  }
}

/* === Institutional Banner Responsive === */
@media (max-width: 813px) {
  .institutional-banner {
    line-height: 2.4;
    font-size: 0.85rem;
    padding: 4px 8px;
    justify-content: center !important;
    gap: 20px;
  }

  .institutional-banner a {
    margin-left: 0 !important;
    color: white;
    text-decoration: none;
    position: relative;
    font-size: 0;
    /* hide original text visually */
  }

  .institutional-banner a:nth-child(1)::after {
    content: "University of Pittsburgh";
  }

  .institutional-banner a:nth-child(2)::after {
    content: "Department of Surgery";
  }

  .institutional-banner a:nth-child(3)::after {
    content: "TTMRC";
  }

  .institutional-banner a::after {
    font-size: 0.85rem;
    color: white;
  }

  .institutional-banner a:hover::after {
    text-decoration: underline;
  }
}

/* === Header / Mobile Nav === */
@media (max-width: 813px) {
  .site-header {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    position: relative;
    background: #fff;
    z-index: 1000;
  }

  .logo-area {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
  }

  .logo-link {
    display: inline-flex;
    align-items: center;
  }

  /* Short logo on mobile */
  .lab-logo-short {
    display: block;
    height: 42px;
    width: auto;
    margin-left: 10px;
  }

  .lab-logo-full {
    display: none;
  }

  /* Toggle button – clean style */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 44px;
    border: none;
    background: #fff;
    border-radius: 10px;
    margin-right: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
  }

  .nav-toggle:active {
    transform: scale(0.98);
  }

  /* make sure the rotation origin is the element's own box center */
  .hamburger .line {
    stroke: #111;
    stroke-width: 2.2;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    /* important for SVGs */
    transition: transform 200ms ease, opacity 200ms ease;
  }

  /* closed state (3 parallel lines) */
  .hamburger .line1,
  .hamburger .line2,
  .hamburger .line3 {
    transform: none;
  }

  /* open state -> perfect X */
  .site-header[data-open] .hamburger .line1 {
    /* move top line to center, then rotate */
    transform: translateY(6px) rotate(45deg);
  }

  .site-header[data-open] .hamburger .line2 {
    opacity: 0;
  }

  /* hide middle */
  .site-header[data-open] .hamburger .line3 {
    /* move bottom line to center, then rotate */
    transform: translateY(-4px) rotate(-45deg);
  }

  /* Dropdown menu */
  .main-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 8px;
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 220ms ease, opacity 180ms ease;
  }

  .site-header[data-open] .main-nav {
    max-height: 320px;
    opacity: 1;
  }

  .main-nav a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    background: #f9f9f9;
    text-decoration: none;
    color: #111;
    font-size: 1rem;
  }

  .main-nav a+a {
    margin-top: 6px;
  }

  .main-nav a:hover {
    background: #eee;
  }

  /* Accessibility helper */
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 1px, 1px);
    white-space: nowrap;
    border: 0;
  }
}

/* === Contact page mobile polish (no-sidebar) === */
@media (max-width: 813px) {

  /* Shorter hero and truly centered text */
  .hero-banner {
    height: 320px;
  }

  /* Only affects the contact hero since it uses .hero-content-center */
  .hero-content-center {
    align-items: end;
    /* vertical center */
    justify-items: center;
    /* grid centering */
    padding: 0 16px;
    margin-bottom: 20px;
  }

  .hero-content-center h1 {
    font-size: 1.3rem;
    line-height: 1.35;
  }

  .page-content-center {
    padding: 20px 10px;
  }

  .page-layout.no-sidebar {
    margin-top: 20px;
    padding: 0px 20px;
  }

  /* For no-sidebar pages (e.g., Contact), remove excess padding/margin */
  .page-layout.no-sidebar .page-content,
  .page-layout.no-sidebar .page-content-center {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    display: block;
    /* normal flow */
    min-height: 0;
    /* no huge vertical gaps */
  }

  /* Tighter spacing for paragraph text and lists */
  .page-layout.no-sidebar .project-description-contact,
  .page-layout.no-sidebar .project-description-contact li {
    margin-bottom: 6px;
    line-height: 1.35;
  }
}

/* === Team page responsive tweaks === */
@media (max-width: 813px) {
  .team-section {
    margin-top: 20px;
    display: flex;
    /* enable flexbox for section */
    flex-direction: column;
    /* keep heading + grid stacked */
    align-items: center;
    /* horizontal centering */
    justify-content: center;
    /* vertical centering */
  }

  .team-grid {
    justify-content: center;
  }
}


/* === Home hero: mobile fix === */
@media (max-width: 813px) {

  /* Give the hero a reliable canvas so overlay content isn't clipped */
  .hero-banner {
    position: relative;
    height: auto;
    /* allow it to grow with content */
    overflow: hidden;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fill the whole hero area */
    z-index: 0;
    /* behind content */
    filter: brightness(60%);
    /* keep your darkening */
  }

  /* Center content vertically in the overlay */
  .hero-overlay {
    position: relative;
    /* was absolute on desktop */
    inset: auto;
    /* clear any previous insets */
    display: block;
    z-index: 1;
    /* above the image */
    color: #fff;
  }

  /* Stack hero text above a small spotlight; keep things readable */
  .hero-content {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
    text-align: center;
    width: 100%;
    padding: 20px;
  }

  /* Typographic scaling */
  .hero-left h1 {
    font-size: 1.6rem;
    line-height: 1.28;
    margin-bottom: 10px;
  }

  .hero-left p {
    font-size: 1rem;
    margin-bottom: 14px;
  }

  .hero-button {
    padding: 10px 16px;
    font-size: 0.95rem;
  }

  /* Spotlight: small, centered, and spaced from text */
  .hero-right {
    width: 100%;
    margin-top: 10px;
  }

  .spotlight-box {
    padding: 12px;
  }

  .spotlight-box h3 {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  .spotlight-box img {
    width: auto;
    max-height: 160px;
    display: block;
    margin: 0 auto 6px;
  }
}

@media (max-width: 940px) {

  /* Give the hero a reliable canvas so overlay content isn't clipped */
  .hero-banner {
    position: relative;
    height: auto;
    /* allow it to grow with content */
    overflow: hidden;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fill the whole hero area */
    z-index: 0;
    /* behind content */
    filter: brightness(60%);
    /* keep your darkening */
  }

  /* Center content vertically in the overlay */
  .hero-overlay {
    position: relative;
    /* was absolute on desktop */
    inset: auto;
    /* clear any previous insets */
    display: block;
    z-index: 1;
    /* above the image */
    color: #fff;
  }

  /* Stack hero text above a small spotlight; keep things readable */
  .hero-content {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
    text-align: center;
    width: 100%;
    padding: 20px;
  }

  /* Typographic scaling */
  .hero-left h1 {
    font-size: 1.6rem;
    line-height: 1.28;
    margin-bottom: 10px;
  }

  .hero-left p {
    font-size: 1rem;
    margin-bottom: 14px;
  }

  .hero-button {
    padding: 10px 16px;
    font-size: 0.95rem;
  }

  /* Spotlight: small, centered, and spaced from text */
  .hero-right {
    width: 100%;
    margin-top: 10px;
  }

  .spotlight-box {
    padding: 12px;
  }

  .spotlight-box h3 {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  .spotlight-box img {
    width: auto;
    max-height: 160px;
    display: block;
    margin: 0 auto 6px;
  }
}

/* === Bio page: mobile layout === */
@media (max-width: 813px) {
  /* Center the page and reduce horizontal padding */
  .bio-page {
    padding: 0 12px;
  }

  .bio-container {
    padding: 24px 0;              /* was 40px 100px */
  }

  /* Stack photo over text and center things nicely */
  .bio-content {
    flex-direction: column;        /* stack on mobile */
    align-items: center;           /* center the photo + text block */
    gap: 16px;                     /* comfortable spacing */
    margin-bottom: 8px;
    padding: 0px 20px;
  }

  /* Responsive headshot */
  #bio-photo {
    width: min(100%, 320px);       /* scale down on small screens */
    height: auto;
    border-radius: 12px;
  }

  /* Text block spans full width with readable line length */
  .bio-text-block {
    width: 100%;
    max-width: 42rem;              /* keeps lines readable */
  }

  /* Tighter, mobile-friendly type scale */
  #bio-name {
    font-size: 1.6rem;             /* was 2rem */
    text-align: center;
    margin-bottom: 6px;
  }

  #bio-title {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 14px;
  }

  #bio-text {
    font-size: 1rem;
    line-height: 1.45;
    overflow-wrap: anywhere;       /* prevent overflow from long tokens */
  }

  /* Email after bio: smaller, wraps gracefully */
  #bio-email {
    font-size: 0.95rem;
    margin-top: 10px;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 813px) {
  /* Contact hero only (keyed by .hero-image-no-opacity) */
  .hero-banner:has(> .hero-image-no-opacity) {
    position: relative;          /* ensure a containing block for abs children */
    min-height: 320px;           /* give the hero real height on mobile */
    overflow: hidden;
  }

  .hero-banner > .hero-image-no-opacity {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .hero-banner > .hero-image-no-opacity + .hero-overlay {
    position: absolute;          /* keep text on top of the image */
    inset: 0;
    display: grid;
    place-items: end center;     /* matches your contact layout */
    padding: 0 16px 0px;
    color: #fff;
    z-index: 1;
  }

  .news-image {
  width: 100%;
  height: 300px;          /* define the box height */
  display: block;         /* avoid inline gaps */
  object-fit: contain;    /* no cropping */
  object-position: center; /* <-- pin to the left */
  border-radius: 4px;
  }
}

@media (max-width: 940px) {
  /* Contact hero only (keyed by .hero-image-no-opacity) */
  .hero-banner:has(> .hero-image-no-opacity) {
    position: relative;          /* ensure a containing block for abs children */
    min-height: 320px;           /* give the hero real height on mobile */
    overflow: hidden;
  }

  .hero-banner > .hero-image-no-opacity {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .hero-banner > .hero-image-no-opacity + .hero-overlay {
    position: absolute;          /* keep text on top of the image */
    inset: 0;
    display: grid;
    place-items: end center;     /* matches your contact layout */
    padding: 0 16px 0px;
    color: #fff;
    z-index: 1;
  }
}