/* Chinese personal page (/zh/). Loads after home.css and shares its shapes: speech bubbles and browser windows. */
:root{--display:Bricolage,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--body:Instrument,"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
body{font-size:17px;line-height:1.7}
h1,h2{letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(40px,6.4vw,92px)}
.kicker{letter-spacing:.2em}
.top .btn{min-height:44px;padding:9px 20px;font-size:14px}
.top-in{gap:16px}.top .langs{margin-left:auto}

/* hero: who I am, and a deck of things I made */
.me-hero{position:relative;padding:150px 0 100px;isolation:isolate}
.me-hero::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.5;z-index:-1;pointer-events:none}
.me-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
.me-hero h1{font-size:clamp(44px,6.5vw,98px);font-weight:800}
.me-hero h1 .l1,.me-hero h1 .l2,.me-hero h1 .l3{display:block;white-space:nowrap}
.me-hero h1 .l2{margin-top:.24em}.me-hero h1 .l3{margin-top:.1em}
.me-hero .win{padding:.44em .2em .08em}
.me-hero .lede{margin-top:36px;max-width:22em}
.deck{position:relative;aspect-ratio:1/.82;cursor:pointer;-webkit-tap-highlight-color:transparent}
.deck .card{position:absolute;left:0;top:0;width:86%;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--white);box-shadow:8px 10px 0 var(--ink);transition:transform .7s var(--ease),opacity .5s,filter .5s;will-change:transform}
.deck .card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.deck .card[data-pos="0"]{transform:translate(8%,18%) rotate(-2deg);z-index:3}
.deck .card[data-pos="1"]{transform:translate(14%,7%) rotate(2.5deg) scale(.95);z-index:2;filter:brightness(.93)}
.deck .card[data-pos="2"]{transform:translate(2%,-2%) rotate(-4deg) scale(.9);z-index:1;filter:brightness(.86)}
.deck .card.leaving{transform:translate(-30%,30%) rotate(-14deg);opacity:0;z-index:4}
.deck-hint{position:absolute;right:0;bottom:0;z-index:5;font-size:14px;font-weight:700;padding:10px 16px;transform:rotate(3deg)}

/* tools: four tiles on the purple block */
.tools{padding:120px 0;background:var(--lemon)}
.tools .kicker{color:#2a1d5c}
.tool-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:60px}
.tool{display:flex;flex-direction:column;min-height:360px;padding:24px;border-radius:26px;background:var(--ink);color:var(--paper);transition:transform .35s var(--ease)}
.tool:hover{transform:translateY(-6px) rotate(-.5deg)}
.tool:nth-child(1){grid-column:span 7}.tool:nth-child(2){grid-column:span 5;background:var(--white);color:var(--ink)}
.tool:nth-child(3){grid-column:span 5;background:var(--white);color:var(--ink);min-height:280px}.tool:nth-child(4){grid-column:span 7;min-height:280px}
.tool .pic{flex:1;min-height:150px;border-radius:14px;overflow:hidden;background:#00000014;display:flex;align-items:center;justify-content:center}
.tool .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.tool .big{font:800 clamp(90px,11vw,170px)/1 var(--display);letter-spacing:-.06em;color:var(--lemon)}
.tool:nth-child(3) .big{color:var(--ink)}.tool .big small{font-size:.26em;letter-spacing:0;margin-left:.2em}
.tool .lab{margin-top:20px;color:inherit;opacity:.6}
.tool h3{margin-top:10px;font:700 clamp(24px,2.5vw,34px)/1.15 var(--display);letter-spacing:-.02em}
.tool p.sub{margin-top:8px;font-size:15px;opacity:.72;line-height:1.55}
.tool .go{margin-top:16px;font-weight:700;font-size:15px}
.steps3{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:20px;font-weight:700;font-size:15px}
.steps3 span{padding:10px 16px;border-radius:999px;border:2px solid var(--ink)}.steps3 span:last-child{background:var(--ink);color:var(--paper)}
.checks{display:flex;flex-direction:column;gap:10px;font:600 15px/1 var(--mono)}
.checks span{display:flex;align-items:center;gap:10px}.checks span::before{content:"✓";display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--lemon);color:var(--ink);font-weight:800}

/* video */
.film{padding:120px 0;background:var(--paper2)}
.film-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:50px;align-items:end;margin-top:60px}
.screen{border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:#000;box-shadow:10px 12px 0 var(--ink);transform:rotate(-1deg)}
.screen video{display:block;width:100%;height:auto;aspect-ratio:1112/834;background:#000}
.film-cap h3{font:800 clamp(32px,4vw,56px)/1.05 var(--display);letter-spacing:-.02em}
.film-cap p{margin-top:12px;color:var(--mute);font-size:15px}
.film-cap .say{font-size:14px;font-weight:700;margin-bottom:18px}

/* talk */
.talk{padding:130px 0 110px}
.talk-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.talk .btn.ghost{border-color:#ffffff66}.talk .btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.feed-hold{display:none}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a:hover{color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
.js .deck .card{animation:show .8s var(--ease) both}.js .deck .card[data-pos="2"]{animation-delay:.7s}.js .deck .card[data-pos="1"]{animation-delay:.9s}.js .deck .card[data-pos="0"]{animation-delay:1.1s}
.js .deck-hint{animation:msg .6s 1.6s var(--ease) both}
.js .me-hero .acts{animation-delay:.62s}
}
@media (max-width:1000px){
.me-hero{padding:120px 0 80px}.me-grid{grid-template-columns:1fr;gap:50px}.deck{max-width:560px}
.tool:nth-child(n){grid-column:span 12;min-height:300px}
.film-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:640px){
.me-hero{padding:104px 0 60px}.me-hero h1{font-size:clamp(34px,11.5vw,60px)}
.top .btn{display:none}
.tools,.film,.talk{padding-block:84px}.tool-grid{margin-top:40px;gap:12px}.film-grid{margin-top:40px}
.deck .card{box-shadow:5px 7px 0 var(--ink)}.steps3{font-size:13px;gap:5px;padding:14px}.steps3 span{padding:8px 11px}.screen{box-shadow:6px 8px 0 var(--ink);transform:none}
}
@keyframes show{from{opacity:0}to{opacity:1}}