/* Local chapter rhythm and restrained cover entry. No dialog styles. */
#home{position:relative;padding-bottom:12px;--hero-play-state:running;background:var(--hero-card)}
#home .warm-hero-panel{background:transparent;border:0;border-radius:0;box-shadow:none}
#home .hero-top{animation:none}
/* Two reading groups, not a separate animation for every line. CSS also works without JS. */
#home .hero-copy{animation:cover-intro .95s .04s cubic-bezier(.22,.68,.24,1) both}
#home .hero-visual{animation:cover-intro 1.05s .38s cubic-bezier(.22,.68,.24,1) both}
#home :is(.hero-copy,.hero-visual):focus-within{animation:none}
#home .hero-flow-lines{opacity:1}
/* If JS fails, original HTML paths stay visible only in safe edge bands. */
#home .hero-flow-lines:not(.geometry-ready){mask-image:linear-gradient(#000 0 16%,transparent 25% 75%,#000 86%)}
#home .warm-hero-decor::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 420px 280px at var(--glow-x,76%) var(--glow-y,48%),rgba(255,139,114,.14),rgba(210,104,87,.035) 52%,transparent 80%);animation:cover-ambient 20s ease-in-out -6s infinite alternate;animation-play-state:var(--hero-play-state)}
#home .flow-line{stroke-width:1.3px;stroke:var(--hero-text);stroke-opacity:.24;stroke-dasharray:1;stroke-dashoffset:0;animation:cover-flow 18s ease-in-out -5s infinite alternate,flow-unfold 1.8s .7s cubic-bezier(.4,0,.2,1) both;animation-play-state:var(--hero-play-state)}
#home .flow-main{stroke:var(--teal);stroke-opacity:.38}
#home .flow-aux{animation:cover-flow 22s ease-in-out -7s infinite alternate-reverse,flow-unfold 1.9s .9s cubic-bezier(.4,0,.2,1) both;animation-play-state:var(--hero-play-state)}
#home .flow-edge{animation:cover-flow 20s ease-in-out -3s infinite alternate,flow-unfold 1.7s 1.05s cubic-bezier(.4,0,.2,1) both;animation-play-state:var(--hero-play-state);stroke-opacity:.17}
#home .flow-signal{offset-path:var(--signal-path,path('M -32 86 C 140 52 280 52 420 86 S 700 120 840 86 S 1080 52 1212 86'));offset-anchor:0px 0px;offset-position:0px 0px;offset-rotate:0deg;animation:cover-signal 24s linear -5s infinite,cover-flow 18s ease-in-out -5s infinite alternate,signal-arrive .4s 2.5s both;animation-play-state:var(--hero-play-state)}
#home .profile-frame::before{inset:-65px;background:radial-gradient(ellipse,rgba(255,139,114,.15),rgba(255,139,114,.035) 45%,transparent 74%);animation:cover-breath 12s ease-in-out infinite alternate;animation-play-state:var(--hero-play-state)}
#home .btn-hero-primary:active{transform:scale(.98);transition:transform .12s}
#projects{padding-top:80px}

/* A continuous editorial spread; dark emphasis belongs only to the product image. */
#github{padding-top:67px;background:radial-gradient(ellipse 80% 48% at 75% 43%,rgba(200,77,59,.065),transparent 78%),var(--paper)}
#github .tools-grid{gap:24px}
#github #tool-shiwei,#github #tool-shiwei:hover{background:var(--white);color:var(--ink);border:1px solid rgba(106,83,66,.22);border-radius:10px;box-shadow:none}
#github #tool-shiwei>.tool-copy{padding:0}
#github #tool-shiwei h3,#github #tool-shiwei strong,#github #tool-shiwei b{color:var(--ink)}
#github #tool-shiwei p,#github #tool-shiwei li,#github #tool-shiwei .tool-description,#github #tool-shiwei .tool-kicker{color:var(--muted)}
/* Match the existing role declarations' priority; no broader !important rules. */
#github #tool-shiwei .tool-role{color:var(--muted)!important}
#github #tool-shiwei .tool-role b{color:var(--ink)!important}
#github #tool-shiwei .tool-features,#github #tool-shiwei .tool-features li{border-color:var(--line)}
#github #tool-shiwei .text-link{color:var(--accent)}
#github #tool-shiwei .text-link:hover{color:var(--ink)}
#github #tool-shiwei :is(button,a):focus-visible{outline-color:var(--accent)}
#github #tool-shiwei .tool-visual{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
#github #tool-shiwei .tool-image-stage{padding:14px;background:#2b2624;border:1px solid rgba(185,170,160,.2);border-radius:8px;box-shadow:none}
#github #tool-shiwei figcaption{padding:10px 0 0;color:var(--muted)}
#github #tool-shiwei .tool-role{margin-top:16px}
#github #tool-shiwei .tool-features{margin-top:16px}
#github #tool-sticker,#github #tool-sticker:hover{background:transparent;border:0;border-block:1px solid var(--line);border-radius:0}
#github :is(#tool-workflow,#tool-lrc),#github :is(#tool-workflow,#tool-lrc):hover{background:var(--white);border:1px solid rgba(106,83,66,.22);border-radius:9px;box-shadow:none}
#github #tool-sticker .tool-visual{background:var(--white);border-color:rgba(106,83,66,.12)}
#github #tool-sticker>.tool-copy{padding:16px 0}
#about{padding-top:79px;background:var(--paper)}
#about .about-grid{background:#eee5db;border-radius:10px;padding:24px;gap:28px}
#about .education{box-shadow:none;border-radius:10px}
#about .experience{gap:20px}
#honors{padding-top:79px;background:var(--paper)}
#honors::before,#honors::after{content:none}
#honors .cert-button,#honors .cert-button:hover{background:var(--white);border-color:rgba(106,83,66,.14);border-radius:10px;box-shadow:none;transform:none}
#honors .cert-button::after{content:none}
#contact{background:#eee7df;color:var(--ink)}
#contact::before,#contact::after{content:none;animation:none}
#contact h2{color:var(--ink)}
#contact p,#contact p:not(.eyebrow){color:var(--muted)}
#contact .contact-actions .text-link{color:var(--accent)}
#contact .contact-actions .btn{background:var(--teal);color:var(--ink);border-color:var(--teal);box-shadow:none}
#contact .contact-actions .btn:hover,#contact .contact-actions .btn:focus-visible{background:var(--hero-hot);color:var(--ink);box-shadow:none}
#contact .contact-actions .btn::after{content:none}

/* Keep navigation above content, including the existing expanded mobile menu. */
.topbar{z-index:30;box-shadow:none}
.topbar .nav-links a{transition:color .2s,background-color .2s,box-shadow .2s}
.topbar .nav-links a:hover,.topbar .nav-links a:focus-visible,.topbar .nav-links a[aria-current="location"]{background:transparent;box-shadow:inset 0 -1px 0 rgba(255,139,114,.6)}
.cover-enter{animation:cover-enter .8s var(--entry-delay,0ms) cubic-bezier(.22,.68,.24,1) both}
/* A shared, short response on actionable controls; content surfaces never lift. */
#home .btn-hero-primary,#projects .sales-cta,#projects .case-footer .text-link,#github .tool-actions .text-link{transition:background-color .22s ease,color .22s ease,translate .16s cubic-bezier(.2,.8,.2,1)}
#home .hero-arrow,#projects .sales-cta>span,#projects .case-footer .text-link>span,#github .tool-actions .text-link>span{transition:transform .24s cubic-bezier(.16,1,.3,1)}
#projects .sales-cta:active,#projects .case-footer .text-link:active,#github .tool-actions .text-link:active{translate:0 1px}
@keyframes cover-flow{from{transform:translate(-8px,-3px)}to{transform:translate(10px,5px)}}
@keyframes cover-ambient{from{opacity:.65;transform:translate(-6px,3px)}to{opacity:1;transform:translate(8px,-5px)}}
@keyframes cover-breath{from{opacity:.6}to{opacity:1}}
@keyframes cover-signal{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes cover-intro{from{opacity:.08;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes cover-enter{from{opacity:.2;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes flow-unfold{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes signal-arrive{from{opacity:0}to{opacity:1}}

/* Large paper-toned folios sit behind the title, not in its label row. */
:is(#projects,#github,#about,#honors)>.wrap>.section-head{position:relative;isolation:isolate;max-width:none;width:100%;border-top:1px solid rgba(106,83,66,.3);padding-top:20px;margin-bottom:32px;gap:24px}
:is(#projects,#github,#about,#honors)>.wrap>.section-head>div{min-width:0}
:is(#projects,#github,#about,#honors)>.wrap>.section-head h2{max-width:none;font-size:40px;line-height:1.25;letter-spacing:-.025em;transform:none}
:is(#projects,#github,#about,#honors)>.wrap>.section-head .eyebrow{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.35;letter-spacing:0;color:var(--muted)}
:is(#projects,#github,#about,#honors) .chapter-index{position:absolute;top:0;left:0;z-index:-1;font-size:clamp(128px,12vw,176px);line-height:1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.07em;color:rgba(128,97,77,.13);pointer-events:none;user-select:none}
#projects :is(#sales,#ai-assistant,#lending),#projects :is(#sales,#ai-assistant,#lending):hover{position:relative;isolation:isolate;background:var(--white);border:1px solid rgba(106,83,66,.22);border-radius:10px;box-shadow:none}
#projects>.wrap>.case{margin-block:0}
#projects>.wrap>.case+.case{margin-top:48px}
#projects :is(#sales,#ai-assistant,#lending) .case-label{position:static;padding-block:20px;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:0;gap:16px;border-bottom:0}
#projects :is(#sales,#ai-assistant,#lending) .case-label span{font:inherit;letter-spacing:inherit;color:inherit}
#contact .contact-grid{border-top:1px solid rgba(106,83,66,.3);padding-top:20px}
#contact h2{font-size:34px;line-height:1.3}
#contact .eyebrow{font-family:inherit;font-size:13px;letter-spacing:0;margin-bottom:12px}
/* Include the new rule and its 20px inset in the existing total section gap. */
#projects,#contact{padding-top:59px}
#github{padding-top:46px}
#about,#honors{padding-top:58px}
@media(min-width:961px) and (min-height:700px){
 #home{padding-bottom:12px}
 #home .warm-hero-panel{min-height:min(680px,calc(100svh - var(--occupied-nav-height,77px) - 84px));display:flex;flex-direction:column}
 #home .hero-top{flex:1;margin-block:0;align-content:center;padding-bottom:0}
}
@media(max-width:960px){
 #home .hero-top{gap:24px}
 #projects,#contact{padding-top:43px}
 #github{padding-top:30px}
 #about,#honors{padding-top:42px}
 #about .about-grid{padding:20px;gap:24px}
}
@media(max-width:720px){
 #home .hero-copy{animation-duration:.6s;animation-delay:0s}
 #home .hero-visual{animation-duration:.7s;animation-delay:.14s}
 .cover-enter{animation-duration:.5s}
 #home{padding-bottom:4px}
 #projects,#contact{padding-top:27px}
 #github{padding-top:14px}
 #about,#honors{padding-top:26px}
 :is(#projects,#github,#about,#honors)>.wrap>.section-head{margin-bottom:24px;gap:16px;flex-wrap:wrap}
 :is(#projects,#github,#about,#honors)>.wrap>.section-head h2{font-size:28px}
 :is(#projects,#github,#about,#honors) .chapter-index{font-size:108px}
 #projects>.wrap>.case+.case{margin-top:36px}
 #projects :is(#sales,#ai-assistant,#lending) .case-label{font-size:12px;gap:12px}
 #contact h2{font-size:28px}
 #home .flow-line,#home .profile-frame::before,#home .warm-hero-decor::before{animation:none}
 #home .flow-signal,#home .flow-edge{display:none}
 #github .tools-grid{gap:20px}
 #github #tool-shiwei .tool-image-stage{padding:12px}
 #about .about-grid{padding:16px 0;gap:24px}
 #github #tool-sticker>.tool-copy{padding:8px 0}
}
@media(prefers-reduced-motion:reduce){
 #home .flow-line,#home .flow-signal,#home .profile-frame::before,#home .warm-hero-decor::before,#home .hero-top,#home .hero-copy,#home .hero-visual,.cover-enter{animation:none}
 #home .btn-hero-primary:active{transform:none}
 #home .btn-hero-primary,#projects .sales-cta,#projects .case-footer .text-link,#github .tool-actions .text-link,#home .hero-arrow,#projects .sales-cta>span,#projects .case-footer .text-link>span,#github .tool-actions .text-link>span{transition:none;translate:none}
 .topbar .nav-links a{transition:none}
}