/* Portfolio brand layer, matched to bianergou.com on 2026-10-14.
   Existing BH mark, Syne / DM Mono, graphite, fog silver, muted champagne.
   Capsules for controls; 24px / 18px for media and content frames.
   Motion is limited to interaction feedback to keep the resume easy to scan. */
@media screen {
  :root {
    --bg: #050708;
    --surface: #0c0f11;
    --paper: #111417;
    --text: #e5e9e8;
    --body: #b4bdc1;
    --muted: #8e9699;
    --line: rgba(229,233,232,.12);
    --accent: #a58b63;
    --button-text: #10110f;
    --sans: 'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
    --display: Syne,'Avenir Next','Helvetica Neue',Arial,sans-serif;
    --ease: cubic-bezier(.32,.72,0,1);
  }
  :root[data-theme='light'] {
    --bg: #f5f6f4;
    --surface: #e9ece9;
    --paper: #e5e9e8;
    --text: #20272a;
    --body: #485256;
    --muted: #5d686c;
    --line: rgba(32,39,42,.15);
    --accent: #7d603a;
    --button-text: #f5f6f4;
  }
  html { scroll-padding-top: 0; }
  body {
    background: radial-gradient(circle at 86% 8%,rgba(168,181,188,.09),transparent 34rem),
      radial-gradient(circle at 48% 72%,rgba(165,139,99,.035),transparent 42rem),var(--bg);
  }
  .shell { width: min(1240px,calc(100% - 96px)); }
  .topbar {
    position: fixed;
    top: 22px;
    left: 50%;
    z-index: 15;
    transform: translateX(-50%);
    display: block;
    width: min(980px,calc(100% - 40px));
    min-height: 0;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(20,22,19,.76);
    box-shadow: 0 18px 58px rgba(0,0,0,.18),inset 0 1px 1px rgba(255,255,255,.12);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
  }
  .topbar-inner {
    min-height: 56px;
    padding: 0 8px 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-radius: inherit;
    background: rgba(9,10,9,.78);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.08);
  }
  .brand { font: 600 12px/1.4 var(--display);letter-spacing:.06em;gap:10px;white-space:nowrap; }
  .brand-mark { width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#11130f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
  .brand .brand-mark img { width:19px;height:19px;filter:none; }
  .topbar-links { display:flex;gap:28px;font-size:12px;color:var(--muted); }
  .topbar-links a { padding:10px 0;transition:color .3s var(--ease); }
  .topbar-links a:hover { color:var(--text); }
  .topbar-actions { gap:18px; }
  .theme-button { font-size:11px; }
  .portfolio-link,.button,.copy-button { border-radius:999px;transition:transform .35s var(--ease),border-color .35s var(--ease); }
  .portfolio-link { padding:5px 6px 5px 18px;gap:14px;min-height:44px;background:#f3f4ed;border:0;color:#10110f; }
  .portfolio-link>span,.primary>span { display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(16,17,15,.09); }
  .portfolio-link:hover { background:var(--accent);transform:translateY(-2px); }
  .button { min-height:48px;padding:6px 8px 6px 23px;gap:27px;font-size:12px; }
  .primary { background:#f3f4ed;color:#10110f;font-weight:500;box-shadow:inset 0 1px 1px rgba(255,255,255,.52); }
  .primary:hover { background:var(--accent); }
  .quiet { padding-inline:23px;border-color:var(--line); }
  .hero { grid-template-columns:minmax(0,1fr) 280px;gap:90px;min-height:650px;padding-block:160px 84px; }
  .hero h1 { font-size:clamp(84px,8.5vw,122px);line-height:1.05;font-weight:600;letter-spacing:-.075em;gap:18px; }
  .name-outline { color:transparent;-webkit-text-stroke:1.4px var(--text); }
  .hero h2 { display:flex;align-items:center;gap:23px;margin-top:26px;line-height:1.5; }
  .chinese-name { font:500 25px/1.5 var(--sans);color:var(--text); }
  .hero-role { color:var(--muted);font-size:13px;letter-spacing:.05em;padding-left:23px;border-left:1px solid var(--line); }
  .hero-intro { max-width:515px;font-size:15px;line-height:1.9;color:var(--muted);margin-top:22px; }
  .hero-actions { margin-top:30px; }
  .portrait { width:280px; }
  .portrait-image { padding:8px;border-radius:24px;background:rgba(229,233,232,.04);box-shadow:inset 0 1px 0 rgba(229,233,232,.06); }
  .portrait img { height:326px;border-radius:18px;object-position:center 30%; }
  .portrait figcaption { margin-top:16px;font-size:10px; }
  .overview { padding-block:28px 31px; }
  .overview strong { font-size:39px;font-weight:600; }
  .overview p { font-size:11px; }
  .overview .overview-note { line-height:1.9;color:var(--muted); }
  .resume-layout { grid-template-columns:180px minmax(0,1fr);gap:100px;padding-top:88px; }
  .side-index { top:124px; }
  .section-nav a { padding-block:10px; }
  .section-nav a.active { color:var(--accent); }
  .section-nav a.active:before { top:17px;bottom:17px; }
  .sidebar-contact { margin-top:46px;gap:7px; }
  .section { margin-bottom:100px;scroll-margin-top:120px; }
  .profile-section h2 { font-size:34px;line-height:1.5;letter-spacing:-.02em; }
  .lead { max-width:700px;font-size:21px;margin-top:24px; }
  .profile-section>p:not(.lead) { max-width:720px;font-size:15px;line-height:1.95; }
  .section-heading { border-bottom:0;padding-bottom:0;margin-bottom:38px; }
  .section-heading h2 { display:flex;flex-direction:column;gap:17px; }
  .section-en { font:600 clamp(42px,4.7vw,68px)/1.05 var(--display);letter-spacing:-.055em; }
  .section-cn { font:400 14px/1.5 var(--sans);letter-spacing:.08em;color:var(--muted); }
  .experience { padding-block:31px; }
  .experience h3 { font-size:18px; }
  .featured h3 { font-size:24px; }
  .experience time,.education-row time { font-size:11px; }
  .company-full { font-size:12px;margin-top:5px; }
  .role { margin-block:14px 17px; }
  .experience-list li,.experience-summary { font-size:15px;line-height:1.95; }
  .experience-list li:before { top:13px;width:3px;height:3px; }
  .workflow-feature { padding:25px 28px;border-radius:18px;background:linear-gradient(145deg,rgba(229,233,232,.025),transparent),var(--surface); }
  .status { border-color:var(--line);padding:3px 10px;background:rgba(165,139,99,.07); }
  .workflow-feature>p { font-size:13px; }
  .workflow-outputs { font-size:12px;gap:12px 20px; }
  .project-story { padding-block:28px; }
  .project-story h3 { font-size:22px; }
  .project-story>p { font-size:15px; }
  .project-category { margin-bottom:13px; }
  .architecture-projects { border:1px solid var(--line);border-radius:18px;padding:8px 22px;margin-top:28px; }
  .architecture-body { padding-bottom:20px; }
  .skills-grid { gap:32px 48px; }
  .skill-group h3 { font-size:16px;margin-bottom:11px; }
  .skill-group p { font-size:14px; }
  .honors { gap:16px 26px;font-size:13px; }
  .education-section { margin-bottom:84px; }
  .contact { padding-block:74px 45px;scroll-margin-top:120px; }
  .contact h2 { display:grid;gap:23px; }
  .contact-en { font:600 clamp(48px,6.7vw,90px)/1.05 var(--display);letter-spacing:-.065em; }
  .contact-cn { font:400 18px/1.6 var(--sans);letter-spacing:0;color:var(--muted); }
  .contact-grid { margin-top:38px; }
  .copy-button { padding:10px 19px;font-size:12px; }
  .footer { padding-block:25px; }
  [data-theme='light'] .topbar { background:rgba(222,223,217,.73);border-color:rgba(255,255,255,.66);box-shadow:0 16px 50px rgba(31,33,28,.08),inset 0 1px 1px rgba(255,255,255,.78); }
  [data-theme='light'] .topbar-inner { background:rgba(246,246,241,.78);box-shadow:inset 0 1px 1px rgba(255,255,255,.88); }
  [data-theme='light'] .brand-mark { background:var(--paper);box-shadow:inset 0 0 0 1px var(--line); }
  [data-theme='light'] .primary,[data-theme='light'] .portfolio-link { background:var(--text);color:var(--bg); }
  [data-theme='light'] .primary>span,[data-theme='light'] .portfolio-link>span { background:rgba(255,255,255,.12); }
}
@media screen and (max-width:1100px) {
  .shell { width:calc(100% - 64px); }
  .topbar { width:min(980px,calc(100% - 40px)); }
  .hero { grid-template-columns:minmax(0,1fr) 235px;gap:48px;min-height:620px;padding-block:145px 70px; }
  .hero h1 { font-size:clamp(72px,9vw,100px);gap:12px; }
  .portrait { width:235px; }
  .portrait img { height:282px; }
  .resume-layout { grid-template-columns:150px minmax(0,1fr);gap:45px; }
  .section-en { font-size:50px; }
  .experience-head { display:grid;gap:7px; }
  .experience time { font-size:10px; }
}
@media screen and (max-width:767px) {
  html { scroll-padding-top:0; }
  .shell { width:calc(100% - 40px); }
  .topbar { top:12px;width:calc(100% - 24px);padding:4px; }
  .topbar-inner { min-height:50px;padding:0 5px 0 12px;gap:10px; }
  .brand { font-size:11px;gap:7px; }
  .brand-mark { width:26px;height:26px; }
  .brand .brand-mark img { width:17px;height:17px; }
  .topbar-links { display:none; }
  .topbar-actions { gap:9px; }
  .theme-button { min-height:38px;padding:8px 3px; }
  .portfolio-link { font-size:10px;min-height:38px;padding:4px 4px 4px 12px;gap:7px; }
  .portfolio-link>span { width:28px;height:28px; }
  .hero { grid-template-columns:1fr;min-height:0;padding-block:117px 38px;gap:31px; }
  .hero h1 { font-size:clamp(68px,17vw,100px);gap:12px; }
  .name-outline { -webkit-text-stroke:1px var(--text); }
  .hero h2 { margin-top:22px;gap:16px; }
  .chinese-name { font-size:23px; }
  .hero-role { font-size:12px;padding-left:16px; }
  .hero-intro { font-size:13px;margin-top:18px;line-height:1.95; }
  .hero-actions { margin-top:23px;gap:14px; }
  .button { min-height:46px;font-size:12px;gap:21px; }
  .quiet { padding-inline:20px; }
  .portrait { width:100%;grid-template-columns:92px minmax(0,1fr);gap:18px; }
  .portrait-image { padding:4px;border-radius:15px; }
  .portrait img { height:106px;border-radius:11px; }
  .portrait figcaption { margin-block:0 8px;font-size:10px; }
  .overview { padding-block:23px 25px;gap:13px; }
  .overview strong { font-size:29px; }
  .overview p { font-size:10px; }
  .resume-layout { display:block;padding-top:0; }
  .side-index { top:82px;padding-block:12px;background:var(--bg); }
  .section-nav { gap:22px; }
  .section-nav a { padding-block:7px;font-size:11px; }
  .section-nav a.active:before { top:auto;bottom:0; }
  .resume-content { padding-top:35px; }
  .section { margin-bottom:65px;scroll-margin-top:155px; }
  .profile-section h2 { font-size:25px; }
  .lead { font-size:18px;margin-top:19px; }
  .profile-section>p:not(.lead) { font-size:13px; }
  .section-heading { margin-bottom:28px; }
  .section-heading h2 { gap:13px; }
  .section-en { font-size:clamp(35px,9.3vw,48px);letter-spacing:-.055em; }
  .section-cn { font-size:12px; }
  .experience { padding-block:26px; }
  .experience h3 { font-size:16px; }
  .featured h3 { font-size:22px; }
  .company-full { font-size:10px;margin-top:4px; }
  .role { margin-block:10px 14px;font-size:11px; }
  .experience-list li,.experience-summary,.project-story>p { font-size:13px; }
  .workflow-feature { padding:20px 17px;border-radius:16px; }
  .workflow-heading { gap:10px; }
  .workflow-feature>p { font-size:12px; }
  .workflow-outputs { font-size:10px;gap:12px; }
  .project-story h3 { font-size:18px; }
  .architecture-projects { padding:7px 16px;border-radius:16px; }
  .skills-grid { gap:26px; }
  .skill-group h3 { font-size:15px; }
  .skill-group p { font-size:13px; }
  .honors { font-size:12px;gap:12px; }
  .education-section { margin-bottom:58px; }
  .contact { padding-block:43px 29px; }
  .contact h2 { gap:18px; }
  .contact-en { font-size:clamp(38px,10vw,62px); }
  .contact-cn { font-size:15px; }
  .contact-grid { margin-top:29px; }
  .contact-options { gap:15px; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-link,.button,.copy-button,.topbar-links a { transition:none; }
}
@media print {
  .section-en { display:none; }
  .section-cn { display:block;font-size:17pt; }
  .hero h1 { display:flex;gap:10pt; }
  .hero-role { font-size:11pt;margin-left:12pt; }
}

/* Integrated resume: quicker access to experience, without the homepage media. */
@media screen and (min-width:768px) {
  .hero { min-height:560px; padding-top:136px; padding-bottom:48px; }
}
@media screen {
  .resume-word-link { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; color:var(--body); font-size:12px; text-underline-offset:4px; }
  .resume-word-link:hover { color:var(--text); text-decoration:underline; }
  .architecture-body a { text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:5px; }
  .architecture-body a:hover { text-decoration-color:currentColor; }
  a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
}
@media print { .resume-word-link { display:none; } }

.project-story[id] { scroll-margin-top:120px; }
.project-case-link { display:inline-flex;align-items:center;justify-content:center;gap:24px;min-width:178px;min-height:48px;margin-top:18px;padding:10px 22px;border-radius:999px;background:var(--text);color:var(--bg);font-size:14px;font-weight:600;line-height:1.5;text-decoration:none;transition:background-color .2s ease,color .2s ease,transform .2s ease; }
.project-case-link svg { width:18px;height:18px;flex-shrink:0;transition:transform .2s ease; }
.project-case-link:hover { background:#d8c19e;color:#10110f;transform:translateY(-2px); }
.project-case-link:hover svg { transform:translateX(3px); }
@media (prefers-reduced-motion:reduce) { .project-case-link,.project-case-link svg { transition:none; } .project-case-link:hover,.project-case-link:hover svg { transform:none; } }
@media print { .project-case-link { display:none; } }
:is(.workflow-feature){scroll-margin-top:120px}
.workflow-feature .project-case-link{margin-top:22px}
.workflow-feature .project-case-link .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}