/* Local portfolio refinements, kept separate from generated Framer styles. */
#__framer-badge-container {
  display: none !important;
}

/* Use the same three navigation destinations across pages and breakpoints. */
#main nav[data-framer-name="Links"] > :not(.site-language):not(:has(
  a[href*="#projects"],
  a[href*="#about"],
  a[href^="mailto:"],
  a[href="./"],
  a[href="/"],
  a[href="/zh/"]
)) {
  display: none !important;
}

/* A project title must stay inside its card at every viewport width. */
#projects > a > div:first-child {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  min-width: 0;
  max-width: 100%;
}

#projects > a > div:first-child h1 {
  transition: color 160ms ease;
}

#projects > a:hover > div:first-child h1,
#projects > a:focus-visible > div:first-child h1 {
  color: #6f67e6;
}

@media (max-width: 1199.98px) {
  #main {
    padding-top: 64px;
  }

  html {
    scroll-padding-top: 80px;
  }

  #main nav[data-framer-name="Links"] {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 1000 !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 17px 20px !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #e3e3e3;
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    scrollbar-width: none;
    transform: none !important;
  }

  #main nav[data-framer-name="Links"]::-webkit-scrollbar {
    display: none;
  }

  #main nav[data-framer-name="Links"] > [data-border="true"] {
    --border-bottom-width: 0px !important;
  }

  /* Home: introduction, navigation, then the project covers. */
  #main:has(.framer-I1VRs) {
    padding-top: 0;
  }

  #main .framer-I1VRs > nav[data-framer-name="Links"] {
    position: sticky !important;
    inset: 0 auto auto !important;
    order: 1 !important;
  }

  .framer-I1VRs > .framer-cx7ahd {
    order: 2 !important;
  }

  #projects > a > div:first-child {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #projects > a > div:first-child h1 {
    transition: none;
  }
}

/* Site-wide language selection lives alongside the three navigation links. */
#main nav[data-framer-name="Links"] > .site-language {
  display:flex !important;flex-shrink:0;align-items:center;gap:10px;
  padding:16px 0 0;margin-top:8px;font:400 14px/1.5 "Albert Sans","PingFang SC",sans-serif;
  color:#bbb;
}
.site-language a {color:#999;text-decoration:none;white-space:nowrap;}
.site-language a[aria-current="true"] {color:#111;font-weight:600;}
.site-language a:hover {color:#6f67e6;}
.site-language a:focus-visible {outline:2px solid #6f67e6;outline-offset:4px;}
@media(max-width: 1199.98px) {
  #main nav[data-framer-name="Links"] > .site-language {margin:0 0 0 auto;padding:0 0 0 20px;}
}
/* Former social destination has no account configured. */
#main nav[data-framer-name="Links"] > :not(.site-language):has(a[href="#"],a[href="./"][target="_blank"],a[href="/"],a[href="/zh/"]) {display:none !important;}
@media(max-width:767.98px) {
  #main nav[data-framer-name="Links"] > .site-language {padding-left:6px;gap:6px;font-size:13px;}
}

/* Project cards use real grid tracks: long bilingual text can grow safely. */
#main .framer-I1VRs > .framer-cx7ahd {min-width:0;padding-top:0;}
#projects {scroll-margin-top:64px;}
#projects > a {
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"content cover" "tags cover";
  align-items:start !important;
  gap:24px 32px !important;
  padding:40px !important;
  min-height:0 !important;
  height:auto !important;
  width:100%;
  box-sizing:border-box;
}
#projects > a > .ssr-variant {display:contents;}
#projects > a > [data-framer-name="Content"],
#projects > a > div:has(> [data-framer-name="Button"]),
#projects > a [data-framer-name="Image"] {
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100%;
  min-width:0;
  height:auto !important;
}
#projects > a > [data-framer-name="Content"] {grid-area:content;gap:8px;}
#projects > a > [data-framer-name="Content"] > div {max-width:100%;}
#projects > a [data-framer-name="Content"] [data-framer-component-type="RichTextContainer"] {
  width:100% !important;max-width:100%;min-width:0;
}
#projects > a > [data-framer-name="Content"] :is(h1,h2) {overflow-wrap:anywhere;}
#projects > a > div:has(> [data-framer-name="Button"]) {
  grid-area:tags;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start !important;
  align-self:end;
  gap:8px !important;
}
#projects > a [data-framer-name="Button"] {width:max-content !important;max-width:100%;padding:10px 14px !important;}
#projects > a [data-framer-name="Button"] p {white-space:nowrap;}
#projects > a [data-framer-name="Image"] {
  grid-area:cover;
  aspect-ratio:8 / 5;
  align-self:center;
  overflow:hidden;
}
/* Preserve the original wide-screen cover: half the card width by 280px. */
@media (min-width:1200px) {
  #projects > a {
    padding:47px 50px 47px 44px !important;
    /* Add back half the horizontal padding to measure against the full card. */
    grid-template-columns:minmax(0,1fr) calc(50% + 47px);
  }
  #projects > a [data-framer-name="Image"] {
    height:280px !important;
    aspect-ratio:auto;
  }
}
/* Retain the first project's full-width separator independently of link rules. */
@media (max-width:1199.98px) {
  #main .framer-I1VRs {overflow:visible;}
  #main .framer-I1VRs > aside {--border-right-width:0px;}
  #main .framer-I1VRs > aside > header {
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    align-items:center;
    gap:16px 20px;
    padding:32px 32px 24px;
  }
  #main .framer-I1VRs header > a[data-framer-name="image"] {grid-column:1;grid-row:1;}
  #main .framer-I1VRs header > .framer-e07bpn {grid-column:2;grid-row:1;}
  #main .framer-I1VRs header > .ssr-variant {grid-column:1 / -1;}
  #main .framer-I1VRs header .framer-5h0a3i {grid-column:1 / -1;width:auto;max-width:640px;}
  #main .framer-I1VRs header .framer-5h0a3i p:empty,
  #main .framer-I1VRs header .framer-5h0a3i p:has(> br:only-child) {display:none;}
  #main .framer-I1VRs > nav[data-framer-name="Links"] {
    padding-inline:24px !important;
    align-items:center;
    flex-shrink:0;
  }
  #projects > a {padding:32px !important;}
  #main .framer-I1VRs > .framer-cx7ahd {gap:48px;}
  .resume-section {scroll-margin-top:80px;}
  .resume-toolbar {padding-inline:32px;}
  .resume-grid {padding-inline:32px;}
  .resume-additional {padding-inline:32px;}
}
@media (max-width:767.98px) {
  #main .framer-I1VRs > aside > header {padding:28px 20px 20px;gap:16px;}
  #main nav[data-framer-name="Links"],
  #main .framer-I1VRs > nav[data-framer-name="Links"] {padding-inline:12px !important;}
  #main nav[data-framer-name="Links"] > div:not(.site-language) {
    width:auto !important;min-width:0;min-height:44px;flex-shrink:0;padding:0 10px;
  }
  #main nav[data-framer-name="Links"] > div:not(.site-language) > div {width:auto !important;}
  #main nav[data-framer-name="Links"] > div:not(.site-language) p {font-size:14px;}
  #main nav[data-framer-name="Links"] > .site-language {margin-left:auto;}
  #projects > a {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:"cover" "content" "tags";
    padding:24px 20px !important;
    gap:20px !important;
  }
  #projects > a [data-framer-name="Image"] {aspect-ratio:8 / 5;}
  #projects > a > div:has(> [data-framer-name="Button"]) {gap:6px !important;}
  #projects > a [data-framer-name="Button"] {padding:8px 12px !important;}
  .resume-toolbar,.resume-grid,.resume-additional {padding-inline:20px;}
}