/* Midnight workshop: a shared theme for the portfolio, case studies and notes. */
:root {
  color-scheme: dark;
  --bg: #101719;
  --bg-2: #172225;
  --surface: #182326;
  --surface-2: #121c1f;
  --glass-brd: #2d3c3e;
  --glass-brd-2: #5a8279;
  --text: #d2ded9;
  --head: #f0f4e8;
  --muted: #a1b4b1;
  --faint: #92a6a1;
  --accent: #a4e7bf;
  --accent-2: #72d3b4;
  --accent-deep: #b3efce;
  --accent-soft: #20382e;
  --orange: #e7b78c;
  --shadow: 0 14px 45px #00000020;
  --shadow-lg: 0 24px 70px #00000030;
  --glow: 0 0 35px #a4e7bf12;
  --ease-out: cubic-bezier(.2,.7,.25,1);
}
html { scrollbar-color: #536f65 var(--bg); }
body { background: var(--bg); color: var(--text); }
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 85% 5%, #376d5c1a, transparent 45%);
}
::selection { background: #a4e7bf; color: #101719; }
.site-bg { background: var(--bg); }
.site-nav,.site-nav.scrolled {
  top: 15px; left: 24px; right: 24px; max-width: 1280px; margin-inline: auto;
  background: #101a1de8; border: 1px solid #ffffff16; border-radius: 13px;
  box-shadow: 0 12px 40px #00000015; backdrop-filter: blur(24px);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.site-nav.scrolled { background: #101a1df5; border-color: #a4e7bf28; box-shadow: 0 10px 30px #00000030; }
.site-nav .nav-inner { height: 76px; padding-inline: 26px; }
.logo-mark { color: var(--accent); border-color: #a4e7bf6b; }
.logo { color: var(--head); }
.logo-caption { color: #9bb0a7; }
.nav-links a { color: #b2c3bb; border-radius: 5px; transition: color .2s, background .2s; }
.nav-links a:hover,.nav-links a[aria-current="location"] { background: #a4e7bf0e; color: var(--accent); }
.nav-links a.nav-cta { color: var(--head); border-color: #a4e7bf60; }
.nav-links a.nav-cta:hover { background: var(--accent); color: var(--bg); }
.burger { color: var(--head); }
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 200; background: linear-gradient(90deg,#72d3b4,#c3e8a1); transform: scaleX(var(--read-progress,0)); transform-origin: left; pointer-events: none; }
.hero { position: relative; overflow: clip; padding-top: 135px; }
.hero::before {
  content: ''; position: absolute; width: 680px; height: 680px; right: -120px; top: -110px;
  background: radial-gradient(ellipse, #70bca317, transparent 68%); pointer-events: none;
  animation: ambient-drift 16s ease-in-out infinite alternate;
}
.hero-topline { color: #a3b3a6; }
.hero-topline > span:last-child { color: #82968d; }
.status-dot { background: #a4e7bf; box-shadow: 0 0 0 4px #a4e7bf0b; }
.hero h1 { color: #eff2e7; font-weight: 600; }
.hero h1 em { color: #a4e7bf; -webkit-text-fill-color: #a4e7bf; }
.hero .hello { color: #c0cdc0; }
.hello > span { color: #e7b78c; display: inline-block; }
.hero .lead { color: #b1c0b8; }
.hero-grid { gap: 65px; }
.hero-copy { position: relative; z-index: 1; }
.hero-visual { position: relative; perspective: 1200px; }
.hero-visual::before { content: ''; position: absolute; inset: -20px 30px 15px -20px; border: 1px solid #a4e7bf1e; border-radius: 18px; transform: rotate(-4deg); pointer-events: none; }
.hero-project {
  border: 1px solid #a4e7bf30; border-radius: 12px; background: #10110f;
  transform: perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s;
  box-shadow: 0 30px 70px #00000035; isolation: isolate;
}
.hero-project::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(350px circle at var(--pointer-x,50%) var(--pointer-y,30%), #a4e7bf18, transparent 75%);
  opacity: 0; transition: opacity .4s;
}
.hero-project:hover::after { opacity: 1; }
.hero-project > img { transform: translate3d(0,var(--hero-shift,0px),0) scale(1.09); transition: transform .2s linear; opacity: .9; }
.hero-project:hover > img { transform: translate3d(0,var(--hero-shift,0px),0) scale(1.12); }
.visual-top { color: #c6d4b6; }
.visual-bottom { background: linear-gradient(transparent,#10110ff7); padding-top: 85px; }
.visual-bottom h2 { color: #f0f3e6; }
.visual-bottom small { color: #b5c5a6; }
.circle-arrow { color: var(--accent); border-color: #a4e7bf60; transition: transform .3s, background .3s; }
.hero-project:hover .circle-arrow { transform: rotate(45deg); background: #a4e7bf14; }
.visual-software { background: #1b2925; border-color: #a4e7bf26; border-radius: 8px; position: relative; box-shadow: 0 12px 30px #00000015; transition: border-color .3s, transform .3s; }
.visual-software:hover { border-color: #a4e7bf70; transform: translateX(-5px); }
.visual-software strong,.visual-software b { color: #e6ecdb; }
.visual-software div > span:last-child { color: #a9b8a6; }
.visual-software .mini-label { color: #a4e7bf; }
.btn-primary { background: #a4e7bf; color: #10251d; border: 1px solid transparent; box-shadow: 0 0 0 #a4e7bf00; }
.btn-primary:hover { background: #b5f0cc; box-shadow: 0 8px 30px #a4e7bf1e; }
.btn { transition: transform .25s var(--ease-out), box-shadow .25s, background .25s; }
.btn-ghost { border-color: #51645b; color: var(--head); }
.btn-ghost:hover { background: #a4e7bf10; color: var(--accent); }
.text-link { color: #c4e4ce; }
.hero-language { border-color: #678876; }
.hero-language > span:first-child { color: #d9e5ce; }
.hero-language > span:last-child { color: #9fb298; }
.stats { border-color: #34423d; }
.stat { border-color: #34423d; }
.stat .num { color: #d7edc7; -webkit-text-fill-color: #d7edc7; font-variant-numeric: tabular-nums; }
.stat .lbl { color: #a0b49e; }
.scroll-cue { display: flex; justify-content: center; align-items: center; gap: 10px; width: fit-content; margin: 28px auto 0; color: #99af9e; font: .6rem ui-monospace,monospace; letter-spacing: 1.5px; text-transform: uppercase; }
.scroll-mouse { display: block; width: 17px; height: 26px; border: 1px solid #789983; border-radius: 12px; position: relative; }
.scroll-mouse::after { content: ''; width: 2px; height: 5px; background: #b8ddb9; border-radius: 4px; position: absolute; top: 5px; left: 6px; animation: mouse-wheel 1.9s ease-in-out infinite; }
.expertise-ribbon { margin-top: 38px; overflow: hidden; border-block: 1px solid #2c3d35; background: #15221c; padding-block: 19px; }
.expertise-track { display: flex; width: max-content; animation: skill-travel 40s linear infinite; }
.expertise-group { display: flex; align-items: center; gap: 35px; padding-right: 35px; white-space: nowrap; }
.expertise-group span { color: #b1c5af; text-transform: uppercase; letter-spacing: 2px; font: .7rem ui-monospace,monospace; }
.expertise-group i { font-style: normal; color: #a4e7bf; font-size: .7rem; }
.expertise-ribbon:hover .expertise-track { animation-play-state: paused; }
#projects { background: linear-gradient(180deg,#101719,#121c1e); }
.sec-kicker { color: #9bcfaa; }
h2.sec { color: #eff2e5; }
.sec-sub { color: #a6b9af; }
.cards-grid { gap: 30px 24px; }
.card { background: #172225; border: 1px solid #2d3c3b; border-radius: 9px; overflow: hidden; transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s; }
.card .thumb { border: none; border-radius: 0; background: #e7eae1; }
.card-body { padding: 23px; }
.card h3 { color: #e7efdf; }
.card p { color: #a3b5ab; }
.card .tag { color: #a4d9b6; }
.card .more { color: #b5e4bd; }
.card:hover { transform: translateY(-7px); border-color: #83bd986e; box-shadow: 0 18px 45px #00000025; }
.card .thumb img { transition: transform .65s var(--ease-out); }
.card:hover .thumb img { transform: scale(1.045); }
.software-section { background: #162322; border-block-color: #2b4039; }
.software-card { position: relative; background: #172727; border-color: #344d41; border-radius: 10px; isolation: isolate; transition: border-color .3s, box-shadow .3s, transform .3s; }
.software-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,50%),#b2e4b315,transparent 75%); opacity: 0; transition: opacity .35s; z-index: -1; pointer-events: none; }
.software-card:hover { border-color: #8fc89b80; box-shadow: 0 20px 50px #00000022; transform: translateY(-5px); }
.software-card:hover::before { opacity: 1; }
.software-image { background: #203331; border-bottom: 1px solid #355045; }
.software-body h3 a { color: #e7efdf; }
.software-body > p { color: #adc0b3; }
.tag { color: #a1d7b1; }
.tech-list > span { border-color: #40584a; color: #b8cbb8; background: #aecaa506; }
.software-links > a:last-child { color: #a6bbaa; }
.garden-preview { background: #284e3c; border-bottom-color: #648763; }
.garden-hanzi { color: #bbd49e; }
.garden-preview-top,.garden-preview-bottom { color: #f1edce; }
#more-work { background: #101719; }
.work-card .wimg { border-color: #35443e; background: #f0f0e8; }
.work-card h4 { color: #dfe9d9; }
.work-card p { color: #a0b5a7; }
#skills { background: #101719; }
.skills-grid { border-color: #34423c; }
.skill-card { border-color: #34423c; }
.skill-card h3 { color: #dfe9d9; }
.skill-card h3::before { background: #e7b78c; }
.chip { color: #adbfaf; border-color: #3b4e40; }
.chip:hover { color: #c3e8bc; border-color: #85ae80; background: #263b29; }
#experience { background: #131f21; border-color: #34413d; }
.timeline::before { background: #40584a; }
.titem::before { background: #13201e; border-color: #a4e7bf; }
.titem .when { color: #9ad0a4; }
.titem h3 { color: #e4ecdd; }
.titem .org,.titem li { color: #a9bfb1; }
.titem li::before { color: #9cd4a7; }
.edu .skill-card { border-color: #3b5044; }
.edu .skill-card p { color: #adbdad; }
.edu .skill-card b { color: #e1e9d8; }
.chinese-section { background: #242323; border-color: #4b4036; }
.chinese-copy .sec-kicker { color: #e6b98d; }
.chinese-copy h2 { color: #f2e5ce; }
.chinese-copy > p,.chinese-copy p.chinese-intro { color: #c1bba8; }
.chinese-copy strong { color: #f0e0c5; }
.chinese-identity { background: #eee9dc; border-color: #c8baa1; box-shadow: 0 20px 60px #00000020; border-radius: 7px; }
.chinese-identity > .mini-label { color: #725a42; }
.name-grid > span { color: #40553c; }
.name-pinyin { color: #3c4b34; }
.chinese-identity > p:last-of-type { color: #6b6a55; }
.study-status { border-color: #544b3d; color: #d1c9ad; }
.study-status .study-note { color: #bfb59b; }
.chinese-copy .text-link { color: #d8c6a7; }
.chinese-copy .btn-primary { background: #ebc69b; color: #29251e; }
.chinese-copy .btn-primary:hover { background: #f7d7af; }
.play-section { background: #111b1d; border-color: #34443c; }
.game-frame { color-scheme: light; border-color: #47634f; border-radius: 10px; box-shadow: 0 30px 80px #00000030; }
.game-tip { color: #a2b8a8; }
.game-tip a { color: #bbe0be; }
#notes { background: #101719; }
.note-row { color: #e6eddf; border-color: #3a4a40; }
.note-category { color: #9ccea4; }
.note-row > span:last-child { color: #adc0af; }
.note-row b { color: #c2e4bb; }
#contact { background: #14201f; border-color: #3c4d42; }
.contact-box h2 { color: #edf0dd; }
.contact-box h2 span { color: #b8ddaf; }
.contact-box p { color: #afc0ac; }
.email-link { color: #d0e7c3; }
.contact-links .btn-ghost { color: #c9dcc0; border-color: #4c6550; }
.contact-links .btn-ghost:hover { background: #29432d; color: #d5f2cc; border-color: #8fc088; }
.form-card { background: #192a26; border-color: #3c5545; border-radius: 10px; }
.form-card h3 { color: #e1ead4; }
.form-intro { color: #aebfa7; }
.form-card label { color: #c4d0b7; }
.form-card input,.form-card textarea { background: #12201d; border-color: #40583f; color: #eef3df; border-radius: 4px; }
.form-card input::placeholder,.form-card textarea::placeholder { color: #92a287; }
.form-card input:focus,.form-card textarea:focus { background: #14261f; box-shadow: 0 0 0 3px #a4e7bf15; border-color: #a4e7bf; }
.form-result.ok { color: #b9e3ad; }
.form-result.err { color: #ffb9aa; }
.portfolio-footer,footer { background: #0e1717; border-color: #35443a; color: #9bb09c; }
.footer-name { color: #d6e4ce; }
.footer-name > span { color: #adbf9f; }
.motion-toggle { display: inline-flex; align-items: center; gap: 7px; font: inherit; color: #b0c7ad; background: none; border: 1px solid #476146; border-radius: 20px; padding: 5px 10px; cursor: pointer; }
.motion-toggle::before { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #a4e7bf; }
.motion-toggle[aria-pressed="true"]::before { background: #8a9889; }
.motion-toggle:disabled { opacity: .75; cursor: default; }
.portfolio-footer .container { flex-wrap: wrap; }
/* Match the case studies and notebook to the same surfaces. */
.proj-hero,.blog-hero { padding-top: 150px; }
.proj-hero-img,.article .lead-img { border-color: #486049; background: #f0f0e7; }
.crumb,.crumb a { color: #b4c7ad; }
.meta-pill { background: #1d2d26; color: #c2d7b8; border-color: #445d43; }
.case h2,.case li b { color: #e1ecd7; }
.case h2 .n { background: #a4e7bf; color: #16271b; }
.case p,.case li { color: #adc0ae; }
.decision { background: #1a2b24; border-color: #3d5541; border-left-color: #a4e7bf; }
.decision .d-q { color: #dbe8d0; }
.decision .d-a { color: #b4c7b3; }
.challenge { background: #1d3025; border-color: #476047; }
.challenge .c-t { color: #d8e7ca; }
.outcome-band { background: #254734; border: 1px solid #50714d; }
.post-card { background: #192824; border-color: #3a5042; }
.post-card h2 { color: #dfe9d5; }
.post-card .thumb { background: #1d3026; }
.article-body blockquote { color: #dce9cd; background: #243a28; }
.article-body code { color: #c1e2b2; background: #243329; border-color: #4c6245; }
.garden-banner { border: 1px solid #5d8158; }
.hg-wrap .hg-tab.active,.hg-wrap .hg-btn-primary,.hg-wrap .hg-btn-good { color: #10251d; }
.hg-wrap .hg-opt.correct { background: #254331; color: #c7edcf; }

/* Motion is progressive: without JavaScript, every section stays visible. */
.motion-ready .reveal-item {
  opacity: 1; translate: 0 0;
  transition: opacity .75s var(--ease-out), translate .8s var(--ease-out);
  transition-delay: var(--reveal-delay,0ms);
}
.motion-ready .reveal-item.reveal-pending { opacity: 0; translate: 0 30px; }
.motion-ready .hero-copy > * { animation: intro-arrive .85s var(--ease-out) both; }
.motion-ready .hero-copy > :nth-child(2) { animation-delay: .07s; }
.motion-ready .hero-copy > :nth-child(3) { animation-delay: .15s; }
.motion-ready .hero-copy > :nth-child(4) { animation-delay: .22s; }
.motion-ready .hero-copy > :nth-child(5) { animation-delay: .28s; }
.motion-ready .hero-visual { animation: intro-arrive 1s .12s var(--ease-out) both; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.motion-paused .reveal-item { opacity: 1 !important; translate: none !important; }
.motion-paused .hero-project { transform: none !important; }
.motion-paused .hero-project > img { transform: scale(1.09) !important; }
@keyframes intro-arrive { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes ambient-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-70px,45px,0); } }
@keyframes mouse-wheel { 0%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; } 70% { opacity: 0; transform: translateY(9px); } }
@keyframes skill-travel { to { transform: translateX(-50%); } }
@media(max-width:1100px) {
  .hero-grid { gap: 35px; }
  .site-nav { left: 16px; right: 16px; }
  .site-nav .nav-inner { padding-inline: 20px; }
}
@media(max-width:980px) {
  .site-nav .nav-inner { height: 66px; }
  .site-nav .nav-links { top: 66px; left: -1px; right: -1px; background: #14221ffb; border: 1px solid #3b5545; border-top: 0; border-radius: 0 0 13px 13px; max-height: calc(100dvh - 100px); }
  .hero { padding-top: 120px; }
  html:not(.js) .site-nav { margin-top: 16px; margin-inline: 16px; }
}
@media(max-width:760px) {
  .hero-grid { gap: 35px; }
  .hero-visual::before { inset: -10px 20px 15px -7px; transform: rotate(-2deg); }
  .site-nav { top: 10px; left: 12px; right: 12px; border-radius: 10px; }
  .site-nav .nav-inner { padding-inline: 15px; }
  .hero { padding-top: 112px; }
  .hero::before { width: 400px; height: 500px; right: -150px; }
  .card-body { padding: 21px; }
  .expertise-ribbon { margin-top: 28px; padding-block: 15px; }
  .expertise-group { gap: 24px; padding-right: 24px; }
  .expertise-group span { font-size: .6rem; }
  .chinese-identity { max-width: 440px; }
  .motion-ready .reveal-item.reveal-pending { translate: 0 18px; }
}
@media(max-width:520px) {
  .hero-grid { padding-top: 12px; }
  .hero-topline { padding-bottom: 12px; }
  .scroll-cue { margin-top: 23px; }
  .portfolio-footer .container { gap: 15px; }
}
@media(hover:none),(pointer:coarse) {
  .hero-project { transform: none; }
  .hero-project::after,.software-card::before { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-ready .reveal-item.reveal-pending { opacity: 1; translate: none; }
  .hero-project { transform: none; }
  .hero-project > img,.hero-project:hover > img { transform: scale(1.09); }
}