/* Shared static lighting and floating surfaces, loaded after page styles. */
:root {
  --glass-surface: linear-gradient(145deg, rgba(255,255,255,.88), rgba(250,250,250,.68));
  --glass-shadow: 0 34px 50px -22px rgba(45,45,45,.24), 0 14px 25px -14px rgba(45,45,45,.14), inset 0 1px 2px #fff;
  --glass-shadow-raised: 0 40px 56px -22px rgba(45,45,45,.27), 0 18px 30px -14px rgba(45,45,45,.16), inset 0 1px 2px #fff;
}
body,
body.home-page,
body.guide-page,
body.sports-page,
body.life-page,
body.contact-page,
body.eva-page,
body.phaseflow-page,
body.upc-page {
  min-height: calc(100 * var(--layout-vh, 1vh));
  background:
    radial-gradient(ellipse at 82% 16%, rgba(255,255,255,.95), transparent 44%),
    radial-gradient(ellipse at 64% 68%, rgba(209,209,209,.23), transparent 48%),
    radial-gradient(ellipse at 16% 42%, rgba(255,255,255,.8), transparent 48%),
    linear-gradient(118deg, transparent 24%, rgba(221,221,221,.2) 38%, rgba(255,255,255,.65) 51%, rgba(222,222,222,.15) 65%, transparent 80%),
    linear-gradient(145deg, #f4f4f4, #efefef 46%, #f9f9f9);
}
body .grain,
body .contact-space { display: none; }
body .topbar {
  background: rgba(248,248,248,.94);
  border-bottom-color: rgba(30,30,30,.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body .section.alt,
body .life-section { background: transparent; }

body .project-card,
body .experience-card,
body .experience-card-stack > .experience-card--expandable,
body .album,
body .hero-photo,
body.contact-page .contact-links,
body .eva-role,
body .phaseflow-role,
body .upc-role {
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 26px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
}
/* Keep blur confined to small surfaces; no full-screen animated filters. */
body .project-card,
body .hero-photo,
body.contact-page .contact-links {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body .project-card:hover,
body .experience-card-stack:hover > .experience-card--expandable,
body .experience-card:hover,
body .experience-card:focus-visible {
  background: var(--glass-surface);
  border-color: #fff;
  box-shadow: var(--glass-shadow-raised);
}
body .experience-card:focus-visible {
  outline: 2px solid #d39aa9;
  outline-offset: 5px;
}
body .experience-cards { gap: 26px; }
body .experience-back-card {
  background: linear-gradient(180deg, #fff, #f5f2f3);
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 10px 20px -12px rgba(45,45,45,.2), inset 0 1px 0 #fff;
}
body .experience-card--expandable[aria-expanded="true"] .sjtu-dropdown {
  background: var(--glass-surface);
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 15px 28px -16px rgba(45,45,45,.18);
}
body .experience-details { background: rgba(255,255,255,.4); }

body .hero-photo { padding: 10px; }
body .hero-photo img {
  border: 0;
  border-radius: 18px;
  box-shadow: none;
  filter: none;
}
body .travel-entry figure,
body .dog-gallery figure {
  border: 4px solid rgba(255,255,255,.88);
  border-radius: 18px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
}
body .album-stage,
body .album-slide img,
body .run-pair { background: linear-gradient(145deg, #f9f9f9, #eee); }
body .album-controls,
body .album-slide figcaption { background: rgba(255,255,255,.72); }
body .eva-role,
body .phaseflow-role,
body .upc-role { border-left: 3px solid #e58ba2; }

@media (max-width: 780px) {
  body .topbar {
    height: auto;
    min-height: 78px;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 18px;
  }
  body .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 24px;
    max-width: 100%;
    margin-left: auto;
  }
  body .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    white-space: nowrap;
  }
  body .nav .back-home,
  body .nav .back-guide {
    letter-spacing: .025em;
    word-spacing: normal;
  }
  body .nav-contact { padding: 10px 12px; }
  body .experience-cards { gap: 22px; }
    body .project-card,
  body .experience-card,
  body .experience-card-stack > .experience-card--expandable,
  body .album,
  body.contact-page .contact-links { border-radius: 20px; }
  body .hero-photo { padding: 7px; border-radius: 22px; }
  body .hero-photo img { border-radius: 15px; }
    body .project-card,
  body .hero-photo,
  body.contact-page .contact-links {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}