/* Phantom Jianghu V9 · original site-wide motion/art layer · all assets local */
:root{--pj9-gold:#dfb66c;--pj9-cinnabar:#ad3136;--pj9-paper:#eee0c8;--pj9-lacquer:#090c0d}
html{scroll-padding-top:82px}body{overflow-x:clip;background-image:radial-gradient(ellipse at 14% 5%,rgba(101,26,29,.08),transparent 40%),radial-gradient(ellipse at 91% 38%,rgba(183,128,51,.05),transparent 48%)}
/* Organic dyed paper and dark lacquer finish. Deliberately kept behind typography. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9200;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
::selection{color:#090b0c;background:#ddab69}
/* Animated brass hairlines: an in-world separator between chapters */
.pj9-divider{height:35px;position:relative;isolation:isolate;overflow:hidden;pointer-events:none;margin:36px auto 28px;max-width:min(100%,1400px);opacity:.86}
.pj9-divider::before{content:"";position:absolute;inset:11px 3% 10px;background:repeating-linear-gradient(95deg,transparent 0px,transparent 8px,rgba(221,169,94,.24) 9px,transparent 10px),linear-gradient(90deg,transparent,rgba(205,76,66,.62) 26%,rgba(214,167,89,.88) 51%,rgba(205,76,66,.42) 76%,transparent);clip-path:polygon(0 49%,10% 18%,25% 72%,45% 36%,60% 62%,80% 24%,100% 51%,100% 60%,80% 40%,60% 82%,45% 48%,25% 87%,10% 34%,0 65%);animation:pj9-weave 11s ease-in-out infinite alternate}
.pj9-divider::after{content:'◈   QI  //  THREADS OF THE JIANGHU   ◈';font:500 9px/1 monospace;letter-spacing:4px;position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;color:#b8925a;background:#0b0f10;padding:0 22px}
@keyframes pj9-weave{from{transform:translateX(-13px) scaleY(.85)}to{transform:translateX(13px) scaleY(1.22)}}
/* Every numbered folio treated as a precise collection object */
.pj9-hud{position:relative;isolation:isolate;border:1px solid rgba(216,171,96,.23)!important;box-shadow:inset 0 1px rgba(238,198,112,.15),0 14px 35px rgba(0,0,0,.14);background-clip:padding-box}
.pj9-hud::before{content:'⌜';position:absolute;top:3px;left:9px;color:rgba(233,177,87,.77);font:18px Georgia,serif;pointer-events:none;z-index:7}
.pj9-hud:not(a)::before{top:5px}
.pj9-hud:hover{border-color:rgba(219,176,96,.63)!important}
.pj9-foil{position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:screen;opacity:.2;background:repeating-linear-gradient(123deg,transparent 0 14px,rgba(254,223,145,.04) 15px 16px,transparent 17px 37px),linear-gradient(105deg,transparent 35%,rgba(213,92,57,.15) 44%,rgba(232,197,105,.2) 49%,transparent 55%);background-size:100% 100%,260% 100%;animation:pj9-foil 8s ease-in-out infinite alternate}
@keyframes pj9-foil{from{background-position:0 0,-50% 0}to{background-position:0 0,105% 0}}
.pj9-hud img{transition:filter .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}.pj9-hud:hover img{filter:contrast(1.1) saturate(1.12);transform:scale(1.025)}
/* The actual dual-layer surface / underdrawing. Distinct actual image sources. */
.pj9-xray{position:relative;isolation:isolate;overflow:hidden;min-height:245px;aspect-ratio:3/2;border:1px solid rgba(221,167,86,.55);background:#080c0d;box-shadow:0 21px 54px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,215,154,.1);cursor:crosshair;touch-action:pan-y}
.pj9-xray:focus-visible{outline:3px solid #ffd28b;outline-offset:3px}
.pj9-xray img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;user-select:none}
.pj9-xray .pj9-under{clip-path:circle(var(--pj9-radius,24%) at var(--pj9-x,55%) var(--pj9-y,50%));filter:saturate(1.18) contrast(1.15);z-index:2}
.pj9-xray .pj9-radar{position:absolute;left:var(--pj9-x,55%);top:var(--pj9-y,50%);width:var(--pj9-d,48%);aspect-ratio:1;border:1px solid rgba(255,196,94,.84);border-radius:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;box-shadow:0 0 0 7px rgba(208,44,44,.06),inset 0 0 20px rgba(202,72,52,.14),0 0 38px rgba(246,158,78,.2)}
.pj9-xray .pj9-radar::before,.pj9-xray .pj9-radar::after{content:"";position:absolute;inset:15%;border:1px dashed rgba(242,155,67,.6);border-radius:50%;animation:pj9-spin 12s linear infinite}.pj9-xray .pj9-radar::after{inset:-8%;border-style:dotted;animation-direction:reverse;opacity:.4}
@keyframes pj9-spin{to{transform:rotate(360deg)}}
.pj9-xray .pj9-caption{position:absolute;bottom:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;gap:12px;background:linear-gradient(0deg,rgba(0,0,0,.87),transparent);padding:38px 16px 13px;color:#f8e6bd;font:600 10px/1.5 monospace;letter-spacing:.12em;text-shadow:0 2px 5px #000;pointer-events:none}
.pj9-xray .pj9-caption small{font-size:10px;color:#eba785;text-align:right}
.pj9-xray .pj9-topmark{position:absolute;top:15px;left:17px;z-index:4;font:600 10px monospace;letter-spacing:3px;color:#ffcb8a;text-shadow:0 2px 10px #000;pointer-events:none}
.pj9-xray:hover .pj9-radar,.pj9-xray[data-dragging=true] .pj9-radar{border-color:#ffe8aa}
.pj9-home-xray{position:absolute;width:clamp(340px,39vw,570px);right:7%;top:18%;z-index:2!important;transform:rotate(1deg);border-color:rgba(200,151,78,.35);box-shadow:0 35px 95px #0009}
.pj9-home-xray::before{content:'';position:absolute;inset:-10px;border:1px solid rgba(207,166,89,.16);pointer-events:none;z-index:6}
.pj9-home-xray .pj9-caption{padding-top:24px}
.pj9-hero-panel-xray{min-height:240px;aspect-ratio:auto;width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
.pj9-learn-xray{max-width:1120px;width:calc(100% - 44px);margin:28px auto 38px;aspect-ratio:18/7;min-height:265px}
.pj9-learn-xray img{object-position:center 50%}
.pj9-learn-xray .pj9-topmark{font-size:11px}
.pj9-exhibit-line{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0;color:#e2bc7a;font:10px/1.5 monospace;letter-spacing:.12em;text-transform:uppercase}
.pj9-exhibit-line span:last-child{color:#a88f77}
/* subtle editorial title reveals, no layout-shifting transforms on the headings themselves */
.pj9-reveal{animation:pj9-reveal 1.3s cubic-bezier(.16,1,.3,1) both}@keyframes pj9-reveal{from{opacity:.55;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
/* Accessible feedback and controls; keep target size >= 40 px */
button,a.button,.button-primary,.pronounce-btn{transition:filter .2s ease,box-shadow .25s ease,background-color .25s ease}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #eec280!important;outline-offset:3px}
.pj9-audio-control{margin:20px 0;padding:10px 14px;min-height:42px;letter-spacing:.07em;font:600 11px monospace;color:#dfb66c;background:#171717;border:1px solid #8a6439;border-radius:5px;cursor:pointer}
.pj9-pointer-spark{position:fixed;width:9px;height:9px;border:1px solid #eec07f;border-radius:50%;pointer-events:none;z-index:9999;animation:pj9-spark .6s ease-out forwards;box-shadow:0 0 8px #c93442}
@keyframes pj9-spark{to{opacity:0;transform:scale(9)}}
.pj9-badge{font:600 9px monospace;letter-spacing:.12em;border:1px solid #9b6f46;border-radius:2px;padding:4px 7px;color:#efd5a5;background:#35181a}
/* Do not force interactive visual overload on a small phone */
@media(max-width:900px){.pj9-home-xray{right:3%;width:39%;top:29%;min-height:180px}.pj9-home-xray .pj9-caption small{display:none}.pj9-divider{margin:22px 0}.pj9-learn-xray{aspect-ratio:3/2}}
@media(max-width:650px){.hero{padding-bottom:0!important;overflow:visible!important}.pj9-home-xray{position:relative;display:block;top:auto;right:auto;width:calc(100% - 32px);min-height:210px;margin:18px 16px 54px;transform:none;aspect-ratio:3/2}.pj9-home-xray .pj9-caption{font-size:9px}.pj9-hero-panel-xray{min-height:205px}.pj9-learn-xray{width:calc(100% - 24px);margin:16px 12px 25px;min-height:200px;aspect-ratio:4/3}.pj9-divider::after{letter-spacing:1px;font-size:8px}.pj9-exhibit-line{font-size:9px}.pj9-hud::before{font-size:12px}.pj9-xray .pj9-caption small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.pj9-divider::before,.pj9-foil,.pj9-xray .pj9-radar::before,.pj9-xray .pj9-radar::after,.pj9-reveal{animation:none!important}.pj9-hud img{transition:none!important}.pj9-xray{cursor:default}}

/* V9 screenshot QA correction */
html,body{overflow-x:clip!important;max-width:100%}
@media(min-width:901px){.hero-side-note{left:auto!important;right:30px!important;bottom:22px!important;max-width:236px!important;z-index:4!important}}
@media(max-width:650px){.hero{height:auto!important;min-height:0!important;overflow:hidden!important;padding-bottom:22px!important}.hero-content{padding-top:130px!important}.hero .hero-eyebrow{font-size:8px!important;letter-spacing:.08em!important;margin-bottom:18px!important}.hero h1{font-size:clamp(48px,12vw,66px)!important;margin-bottom:15px!important}.hero-lead{line-height:1.65!important;font-size:14px!important;margin-bottom:14px!important}.pj9-home-xray{width:100%;margin:12px 0 18px;min-height:0;aspect-ratio:1.75}.hero-ctas{gap:12px!important}.hero-meta{margin-top:18px!important}.hero-scroll{display:none!important}.pj9-home-xray .pj9-caption{font-size:8px}.pj9-home-xray .pj9-caption small{font-size:7px}.hero-side-note{display:none!important}}

/* QA: header has enough room for BOTH search and mobile menu */
@media(max-width:650px){.site-header .container-wide{width:calc(100% - 28px)!important}.header-inner{gap:8px!important;min-width:0}.wordmark{min-width:0;flex:1 1 auto;gap:8px}.wordmark-copy{min-width:0;overflow:hidden}.wordmark-copy strong,.wordmark-copy b{display:block;max-width:225px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px!important;letter-spacing:.02em!important}.wordmark-copy small{display:none!important}.nav-actions{gap:3px!important;flex:0 0 auto!important}.nav-actions .icon-button{width:36px!important}.hero-stamp{right:0!important;opacity:.04!important}}
/* legibility priority: ornamental glyph/3D shaders never cross the copy at full opacity */
.ink-card-crimson>.pj-hero-multi-canvas{opacity:.23!important}
.ink-card-crimson>.pj-meteor-container{opacity:.28!important}
.pj9-home-xray .pj9-caption,.pj9-xray .pj9-caption{background:linear-gradient(0deg,#000e 0%,#0007 55%,transparent 100%)}

.pj9-legal-links{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 16px;font:11px monospace}.pj9-legal-links a{color:#dcb980;text-decoration:underline;text-underline-offset:4px}.pj9-editorial-content{max-width:850px;margin:34px auto;color:#e0d9cc;font:16px/1.8 system-ui,sans-serif}.pj9-editorial-content h2{font:32px/1.24 Georgia,serif;color:#e7bd7a;margin:42px 0 15px}.pj9-editorial-content p{padding:4px 0 14px}.pj9-editorial-content a{color:#efba68;text-decoration:underline}.pj9-standalone-footer{border-top:1px solid #6a462c;padding:25px max(20px,calc((100% - 1100px)/2));color:#dfb66c;display:grid;gap:12px}.pj9-standalone-footer nav{display:flex;gap:20px;flex-wrap:wrap}.pj9-standalone-footer a{text-decoration:underline}.pj9-standalone-footer small{color:#a8987b}

@supports(filter:url(#pj9-fluid-displacement)){.pj9-xray .pj9-under{filter:url(#pj9-fluid-displacement) saturate(1.16) contrast(1.12)}}