@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

/* This branch page lives beside the SOON homepage; its images are namespaced below. */

:root{--black:#090b0c;--ink:#101315;--paper:#eceff0;--muted:#8e979c;--blue:#80bad0;--line:rgba(255,255,255,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--paper);font-family:Inter,"Noto Sans SC",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.topbar{position:fixed;z-index:20;top:0;left:0;width:100%;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:linear-gradient(#080a0bcc,transparent);backdrop-filter:blur(6px)}.brand{display:flex;gap:11px;align-items:center;font-weight:600;letter-spacing:.16em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #fff;border-radius:50%;font-style:italic}.topbar nav{display:flex;gap:34px;font-size:12px;letter-spacing:.2em;color:#c6cbcd}.menu{display:none;background:none;border:0;width:42px;padding:8px}.menu i{display:block;border-top:1px solid #fff;margin:7px 0}
.hero{height:100svh;min-height:720px;position:relative;overflow:hidden}.hero-photo{position:absolute;inset:0;background:url('assets/jingliu-hero-clean.jpg') center 72%/cover no-repeat;transform:scale(1.015)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,8,.88) 0%,rgba(5,7,8,.25) 46%,rgba(5,7,8,.04)),linear-gradient(0deg,#090b0c 0%,transparent 25%)}.hero-copy{position:absolute;z-index:2;left:8vw;top:17vh}.eyebrow{font-size:11px;letter-spacing:.36em;color:var(--blue)}.hero h1{font-size:clamp(92px,14vw,190px);line-height:.8;margin:30px 0 28px;letter-spacing:-.07em;font-weight:600}.hero-en{font-size:13px;line-height:1.55;letter-spacing:.28em;color:#c9ced0}.lead{font-size:clamp(25px,3vw,42px);font-weight:300;line-height:1.4;margin:40px 0}.scroll-cue{display:flex;gap:20px;align-items:center;font-size:15px;font-weight:500;letter-spacing:.2em;color:#e1e5e6}.scroll-cue b{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.3);border-radius:50%;font-size:20px;font-weight:400}.side-note{position:absolute;z-index:2;right:3.3vw;bottom:10vh;writing-mode:vertical-rl;font-size:9px;letter-spacing:.32em;color:#adb4b7}
.manifesto{max-width:1200px;margin:auto;padding:150px 7vw 120px}.chapter{display:flex;align-items:center;gap:22px;font-size:17px;letter-spacing:.19em;color:#e0e4e5}.chapter span{font-size:16px;font-weight:500}.chapter i{height:1px;width:125px;background:rgba(255,255,255,.28)}.chapter b{font-weight:500}.kicker{color:var(--blue);font-size:13px;letter-spacing:.25em;margin:90px 0 52px}.design-duality{display:grid;grid-template-columns:1fr 1fr;gap:7vw}.design-principle{position:relative;padding:36px 0 44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.design-principle.flow{margin-top:110px}.principle-index{display:block;margin-bottom:46px;color:#667176;font-size:9px;letter-spacing:.27em}.design-principle h2{display:flex;align-items:baseline;gap:20px;margin:0 0 42px;font-size:clamp(62px,7vw,96px);line-height:1;letter-spacing:-.06em;font-weight:400}.design-principle h2 small{color:#747e82;font-size:clamp(20px,2.2vw,30px);font-weight:300;letter-spacing:.04em}.design-principle p{max-width:430px;margin:0 0 0 auto;color:#aeb4b7;font-size:15px;line-height:2}.design-principle:after{content:"";position:absolute;left:0;top:-1px;width:64px;height:1px;background:var(--blue)}
.impact{height:94vh;min-height:720px;position:relative;overflow:hidden}.impact-photo{position:absolute;inset:0;background:url('assets/jingliu-impact-6989.jpg') center 60%/cover no-repeat;filter:saturate(.72) contrast(1.08)}.impact:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090b0c 0%,rgba(9,11,12,.72) 28%,transparent 66%),linear-gradient(0deg,#090b0c 0%,transparent 34%)}.impact-copy{position:absolute;z-index:2;left:8vw;bottom:12vh}.impact-copy span{font-size:10px;letter-spacing:.3em;color:var(--blue)}.impact-copy h2{font-size:clamp(36px,5vw,68px);line-height:1.2;font-weight:400;margin:25px 0 0}
.experience{max-width:1200px;margin:auto;padding:150px 7vw}.experience-heading{display:grid;grid-template-columns:1fr 1.2fr;gap:8vw;margin-top:90px;align-items:end}.experience-heading p{font-size:17px;line-height:1.8;color:#a8b0b3}.experience-heading h2{font-size:clamp(50px,7vw,94px);line-height:1.05;margin:0;font-weight:400;letter-spacing:-.05em}.sound-card{margin:110px 0 55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:390px;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:30px}.tuning-option{position:relative;display:grid;grid-template-rows:235px auto;justify-items:center;align-items:end;min-width:0;padding:38px 24px 30px;border:0;background:transparent;color:var(--paper);cursor:pointer;overflow:hidden}.tuning-option:focus-visible{outline:1px solid var(--blue);outline-offset:-8px}.tuning-option:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(128,186,208,.11),transparent 52%);opacity:0;transition:opacity .4s}.tuning-fork{position:relative;z-index:2;fill:none;stroke:#aeb9bd;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 9px rgba(128,186,208,.12));transition:transform .35s,stroke .35s,filter .35s}.tuning-fork.small{width:92px;height:190px}.tuning-fork.large{width:128px;height:225px}.tone-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;text-align:center}.tone-copy strong{font-size:18px}.tone-copy small{font-size:10px;color:var(--muted);letter-spacing:.16em}.hover-hint{position:absolute;right:18px;top:18px;font-size:9px;letter-spacing:.18em;color:#667176;transition:color .3s}.tone-plus{align-self:center;font-weight:300;color:#667076}.sound-waves{position:absolute;z-index:1;left:50%;top:43%;width:1px;height:1px}.sound-waves i{position:absolute;left:50%;top:50%;width:80px;height:80px;border:1px solid rgba(128,186,208,.3);border-radius:50%;transform:translate(-50%,-50%) scale(.4);opacity:0}.tuning-option:is(:hover,:focus-visible,.playing):before{opacity:1}.tuning-option:is(:hover,:focus-visible,.playing) .tuning-fork{stroke:#d8f3fc;filter:drop-shadow(0 0 12px rgba(128,186,208,.5));animation:fork-vibrate .09s linear 7}.tuning-option:is(:hover,:focus-visible,.playing) .hover-hint{color:var(--blue)}.tuning-option:is(:hover,:focus-visible,.playing) .sound-waves i{animation:sound-wave 1.25s ease-out}.tuning-option:is(:hover,:focus-visible,.playing) .sound-waves i:nth-child(2){animation-delay:.2s}.tuning-option:is(:hover,:focus-visible,.playing) .sound-waves i:nth-child(3){animation-delay:.4s}.experience-copy{max-width:620px;margin-left:auto}
.material{position:relative;overflow:hidden;padding:145px 7vw 110px;background:#0c0f10}.material:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.035) 50%,transparent 50.2%)}.material-glow{position:absolute;left:22%;bottom:-30%;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(84,139,160,.1),transparent 65%)}.material-inner{position:relative;z-index:2;max-width:1240px;margin:auto}.material-inner>.chapter{margin-bottom:92px}.material-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:11vw;align-items:end}.material-heading>p{margin:0 0 28px;color:var(--blue);font-size:9px;letter-spacing:.31em}.material h2{margin:0;font-size:clamp(62px,8vw,112px);line-height:.98;letter-spacing:-.06em;font-weight:400}.material h2 em{font-style:normal;color:#6d777b}.material-statement{padding:0 0 6px 32px;border-left:1px solid var(--line)}.material-statement>span{display:block;margin-bottom:25px;color:#687276;font-size:8px;letter-spacing:.28em}.material-statement p{margin:0;color:#abb3b6;font-size:14px;line-height:2.05}.plate-stage{position:relative;height:430px;margin-top:110px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);perspective:1100px}.plate-guide{position:absolute;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);transform-origin:center}.guide-a{left:5%;width:90%;transform:rotate(-10deg)}.guide-b{left:10%;width:80%;transform:rotate(12deg)}.grip-plate{position:absolute;left:50%;top:50%;width:390px;height:142px;border:1px solid rgba(204,215,219,.4);border-radius:44% 56% 49% 51%/55% 42% 58% 45%;box-shadow:0 28px 60px #0008,inset 1px 1px 1px rgba(255,255,255,.18);transition:transform .6s cubic-bezier(.2,.7,.2,1)}.grip-plate i,.grip-plate b{position:absolute;width:14px;height:14px;border:1px solid rgba(220,230,233,.55);border-radius:50%;top:24px}.grip-plate i{left:30px}.grip-plate b{right:30px}.plate-back{background:repeating-linear-gradient(135deg,#252b2d 0 5px,#3a4245 5px 9px);transform:translate(-72%,-65%) rotate(-10deg);opacity:.48}.plate-middle{background-image:radial-gradient(#7b878b 1px,transparent 1px),linear-gradient(135deg,#303739,#171b1c);background-size:12px 12px,100% 100%;transform:translate(-50%,-50%);opacity:.72}.plate-front{background:linear-gradient(118deg,#9ca7aa,#313739 36%,#747e81 48%,#24292b 78%);transform:translate(-28%,-35%) rotate(10deg)}.plate-stage:hover .plate-back{transform:translate(-85%,-76%) rotate(-14deg)}.plate-stage:hover .plate-front{transform:translate(-15%,-24%) rotate(14deg)}.plate-caption{position:absolute;right:0;bottom:22px;color:#687276;font-size:8px;letter-spacing:.28em}
.closing{text-align:center;min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 7vw;background:radial-gradient(circle at center,rgba(73,95,104,.18),transparent 50%)}.closing h2{font-size:clamp(46px,7vw,96px);letter-spacing:-.06em;font-weight:400;margin:34px 0}.closing>p:not(.eyebrow){font-size:16px;color:#a8b0b3;letter-spacing:.18em}.cta{margin-top:70px;border:1px solid var(--line);padding:18px 28px;font-size:11px;letter-spacing:.22em}.cta span{margin-left:24px;color:var(--blue)}footer{height:110px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 5vw;color:#666f73;font-size:9px;letter-spacing:.22em}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}@keyframes pulse{50%{opacity:.25;transform:scale(1.06)}}@keyframes fork-vibrate{25%{transform:translateX(-2px) rotate(-.5deg)}75%{transform:translateX(2px) rotate(.5deg)}}@keyframes sound-wave{0%{opacity:.65;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}
@media(max-width:760px){.topbar{height:64px}.topbar nav{position:absolute;top:64px;left:0;width:100%;display:none;flex-direction:column;padding:30px 5vw;background:#090b0cf2}.topbar.open nav{display:flex}.menu{display:block}.chapter{font-size:15px;gap:16px}.chapter span{font-size:14px}.chapter i{width:78px}.hero{min-height:700px}.hero-photo{background-size:cover;background-position:center 66%}.hero-copy{left:7vw;top:13vh}.hero h1{font-size:88px}.hero .lead{margin:28px 0;font-size:24px}.scroll-cue{font-size:14px;gap:15px}.scroll-cue b{width:44px;height:44px;font-size:19px}.side-note{display:none}.manifesto,.experience{padding:110px 7vw 90px}.design-duality,.experience-heading{grid-template-columns:1fr}.design-duality{gap:42px}.design-principle.flow{margin-top:0}.principle-index{margin-bottom:34px}.design-principle h2{margin-bottom:30px;font-size:64px}.design-principle h2 small{font-size:22px}.design-principle p{font-size:14px}.sound-card{grid-template-columns:1fr 1fr;gap:8px;min-height:330px}.tuning-option{grid-template-rows:190px auto;padding:28px 4px 24px}.tuning-fork.small{width:70px;height:150px}.tuning-fork.large{width:92px;height:180px}.tone-copy strong{font-size:15px}.tone-copy small{font-size:8px;letter-spacing:.08em}.tone-plus,.hover-hint{display:none}.experience-copy{margin-top:45px}.impact-photo{background-size:cover;background-position:center 58%}.material{padding:110px 7vw 80px}.material-inner>.chapter{margin-bottom:58px}.material-layout{grid-template-columns:1fr;gap:48px}.material h2{font-size:57px}.material-statement{padding-left:20px}.material-statement p{font-size:13px}.plate-stage{height:330px;margin-top:70px}.grip-plate{width:250px;height:98px}.grip-plate i,.grip-plate b{width:10px;height:10px;top:16px}.grip-plate i{left:20px}.grip-plate b{right:20px}.plate-caption{font-size:7px}.closing{min-height:70vh}footer{flex-direction:column;justify-content:center;gap:12px}}
.site-product-menu{position:fixed;top:56px;right:0;left:auto;width:min(624px,calc(100vw - 20px))}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.rings i{animation:none}}

/* Integrated asset paths */
.hero-photo{background-image:url('assets/jingliu/jingliu-hero-clean.jpg')}
.impact-photo{background-image:url('assets/jingliu/jingliu-impact-6989.jpg')}

/* Shared SOON navigation */
.site-nav{position:fixed;z-index:30;top:0;left:0;width:100%;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1120px)/2));background:rgba(5,6,7,.72);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(160%)}
.site-wordmark{display:block;width:70px}.site-wordmark img{display:block;width:100%;height:auto}.site-links{display:flex;align-items:center;gap:25px;color:#d5d5d8;font-size:12px;letter-spacing:0}.site-links>a,.site-series-trigger{transition:color .2s}.site-links>a:hover,.site-series-trigger:hover{color:#fff}.site-series-menu{position:relative}.site-series-trigger{display:flex;align-items:center;gap:5px;white-space:nowrap}.site-chevron{color:#8e8e93;font-size:14px;transition:transform .2s}.site-series-menu:hover .site-chevron,.site-series-menu:focus-within .site-chevron{transform:rotate(180deg)}.site-product-menu{position:absolute;z-index:32;top:18px;right:0;width:min(624px,calc(100vw - 30px));padding-top:26px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .18s,visibility .18s,transform .18s}.site-series-menu:hover .site-product-menu,.site-series-menu:focus-within .site-product-menu{opacity:1;visibility:visible;transform:none}.site-product-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:7px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(24,24,26,.98);box-shadow:0 18px 45px rgba(0,0,0,.46)}.site-product-card{display:block;overflow:hidden;border-radius:11px;background:#111;color:#f5f5f7}.site-product-card img{display:block;width:100%;height:138px;object-fit:cover;opacity:.78;transition:transform .3s,opacity .3s}.site-product-card:first-child img{object-position:center 61%}.site-product-card:hover img,.site-product-card.current img{opacity:1;transform:scale(1.035)}.site-product-card span{display:block;padding:12px 8px;text-align:center;font-size:10px;font-weight:600;letter-spacing:.04em}.site-product-card.current span{color:#ff686d}.site-language{min-width:92px;padding:7px 10px;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(255,255,255,.06);color:#fff!important}.site-language span{float:right;margin-left:8px;color:#aaa}
@media(max-width:620px){.site-nav{height:66px;padding:0 16px}.site-wordmark{width:52px}.site-links>a:not(.site-language),.site-series-menu{display:none}.site-language{min-width:auto;font-size:11px}}

.site-language-menu{position:relative}.site-language{appearance:none;min-width:104px;padding:7px 10px;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font:500 12px/1 Inter,"Noto Sans SC",sans-serif;text-align:left;cursor:pointer}.site-language span{float:right;margin-left:8px;color:#aaa}.site-language-options{position:absolute;top:calc(100% + 10px);right:0;width:144px;padding:6px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(24,24,26,.97);box-shadow:0 16px 36px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.18s}.site-language-menu:hover .site-language-options,.site-language-menu:focus-within .site-language-options{opacity:1;visibility:visible;transform:none}.site-language-options button{display:block;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:#e8e8eb;text-align:left;font:500 12px/1 Inter,"Noto Sans SC",sans-serif;cursor:pointer}.site-language-options button:hover,.site-language-options button[aria-current="true"]{background:rgba(255,255,255,.1);color:#fff}
.site-language-menu.is-closed .site-language-options{opacity:0;visibility:hidden;transform:translateY(-5px)}
@media(max-width:620px){.site-links>a,.site-series-menu{display:none}.site-language-menu{display:block}.site-language{min-width:96px;font-size:11px}}
.cta .cta-label{margin-left:0;color:inherit}.cta .cta-arrow{margin-left:24px;color:var(--blue)}

/* Keep the series dropdown flush with the viewport's right edge. */
.site-product-menu{position:fixed;top:56px;right:0;left:auto;width:min(624px,calc(100vw - 20px))}

.site-links{font-size:13px!important}.site-language,.site-language-options button{font-size:13px!important}

/* Supplied tuning-fork photography; small insert remains exactly 2/3 scale. */
.tuning-fork{object-fit:contain}.tuning-fork.large{width:auto;height:225px}.tuning-fork.small{width:auto;height:150px}
@media(max-width:760px){.tuning-fork.large{width:auto;height:180px}.tuning-fork.small{width:auto;height:120px}}
/* Keep the series and About entry reachable in every language on compact screens. */
.site-links{margin-left:auto;min-width:0;white-space:nowrap}
@media(max-width:620px){.site-wordmark{display:none}.site-links{width:100%;justify-content:space-between;gap:8px;font-size:10px!important}.site-links>a:not(.site-language),.site-series-menu{display:block}.site-series-trigger{display:flex}.site-language{min-width:86px;font-size:10px!important;padding:7px 8px}}

/* Keep both tuning forks centered while their captions share one bottom baseline. */
.tuning-option{grid-template-rows:minmax(0,235px) 58px;align-items:stretch}
.tuning-option>.tuning-fork{align-self:center;justify-self:center}
.tone-copy{align-self:end;justify-content:flex-end;min-height:58px}
@media(max-width:760px){.tuning-option{grid-template-rows:minmax(0,190px) 52px}.tone-copy{min-height:52px}}
