/* One continuous scene; each page chooses its own framing. */
:root { --bg: #050607; --line: #343b42; --surface: #0a0d11; }
body { background: #050607; isolation: isolate; }
main, .site-footer { position: relative; z-index: 1; }
.site-header { border-bottom-color: #798a9826; }
.space-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #050607; }
.space-scene > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--scene-position,50% 50%); opacity: var(--scene-opacity,.72); transform-origin: var(--scene-origin,65% 65%); animation: scene-drift 42s ease-in-out infinite alternate; }
.space-scene::after { content: ''; position: absolute; inset: 0; background: var(--scene-shade,linear-gradient(90deg,#050607e8 8%,#05060770 62%,#05060720)); }
.journey-page { --scene-position: 28% 48%; --scene-opacity: .76; --scene-origin: 85% 48%; --scene-shade: linear-gradient(90deg,#050607ed 5%,#050607a0 52%,#05060730); }
.catalog-page { --scene-position: 40% 15%; --scene-opacity: .82; --scene-origin: 100% 85%; --scene-shade: linear-gradient(125deg,#050607de 15%,#05060790 58%,#05060718); }
.case-page { --scene-position: 0% 45%; --scene-opacity: .58; --scene-origin: 90% 48%; --scene-shade: linear-gradient(90deg,#050607f0 3%,#050607c0 56%,#05060760); }
.contact-page { --scene-position: 50% 5%; --scene-opacity: .82; --scene-origin: 50% 100%; --scene-shade: linear-gradient(#050607ba 5%,#05060770 46%,#05060742); }
.journey-page .space-scene > img { width: 128%; max-width: none; margin-left: -8%; }
.case-page .space-scene > img { width: 145%; max-width: none; margin-left: -18%; }
.catalog-page .space-scene > img { width: 125%; max-width: none; margin-left: 3%; }
.inner-page .page-intro, .inner-page .case-intro { position: relative; }
.inner-page .page-intro::after, .inner-page .case-intro::after { content: ''; position: absolute; width: 90px; height: 1px; bottom: 28px; left: 0; background: linear-gradient(90deg,#d3e1eaaa,transparent); }
.inner-page .case-intro { border-bottom-color: #74828c40; }
.journey-timeline { position: relative; padding-left: 28px; }
.journey-timeline::before { content: ''; position: absolute; left: 0; top: 60px; bottom: 80px; width: 1px; background: linear-gradient(transparent,#a8b7c96b 8%,#72859566 85%,transparent); }
.timeline-item { position: relative; border-top-color: #6d7b893b; background: linear-gradient(90deg,#05060700,#05060796 14%,#050607b3 82%,#05060700); }
.timeline-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; position: absolute; left: -30px; top: 45px; background: #becbd6; box-shadow: 0 0 9px #c4dced60; }
.timeline-content p { color: #b7bec7; }
.journey-intro figure { position: relative; }
.journey-intro img { border: 1px solid #c0ced132; box-shadow: 0 24px 70px #0007; }
.project-visual { border-color: #8496a540; background: #080b10f2; border-radius: 7px; }
.tile-copy { background: linear-gradient(90deg,#050607c7,#05060775 82%,transparent); }
.project-tile.wide { border-bottom-color: #788d9d40; }
.case-body { padding: 26px 28px; margin-inline: -28px; background: linear-gradient(90deg,#050607d6,#050607b8 88%,transparent); }
.case-copy p, .case-meta dd { color: #c0c6ce; }
.product-shot button, .diagram button, .product-film video { background: #080b0f; border-color: #8ca0af4d; border-radius: 7px; }
.product-shot figcaption, .product-film figcaption, .diagram figcaption, .source-note { background: #050607bf; color: #aab5bf; }
.contact-card { background: #080c11d9; border-color: #8092a044; border-radius: 7px; transition: border-color .25s,background .25s,transform .25s; }
.contact-card:hover { transform: translateY(-2px); background: #10171eee; border-color: #d2e3ed8c; }
.contact-note, .journey-ending, .small-cta, .next-project, .sharing, .site-footer { background: linear-gradient(90deg,#05060790,#050607c9 48%,#05060790); }
.button, .action-link { border-radius: 5px; transition-duration: .25s; }
.action-link { background: #080b10d9; border-color: #8092a064; }
.text-link, .orbit-text-link { transition: color .25s,border-color .25s; }
.text-link:hover, .orbit-text-link:hover { color: #fff; border-color: #e6f3ff; }
.next-project>a>span, .tile-arrow, .card-end>span, .project-visual img { transition-duration: .25s; }
.scene-motion-toggle { position: fixed; z-index: 12; right: 22px; bottom: 20px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid #8496a05c; background: #07090bd9; opacity: .62; transition: opacity .25s,border-color .25s; }
.scene-motion-toggle .icon { width: 13px; height: 13px; }
.scene-motion-toggle:hover, .scene-motion-toggle:focus-visible { opacity: 1; border-color: #dce7ee; }
body:has(dialog[open]) .scene-motion-toggle { visibility: hidden; }
.scene-paused .space-scene > img, .scene-paused .orbit-scene > img, .scene-paused .orbit-scroll .icon { animation-play-state: paused; }
@keyframes scene-drift { from { transform: scale(1.015) translate3d(0,0,0); } to { transform: scale(1.035) translate3d(-7px,5px,0); } }
@media (prefers-reduced-motion: reduce) { .space-scene > img { animation: none; } }

/* Inner-page details: navigation and feedback follow the content. */
.inner-page .reading-line { position: fixed; inset: 0 auto auto 0; z-index: 15; width: 100%; height: 2px; background: #cedee8; transform: scaleX(var(--read-progress,0)); transform-origin: left; pointer-events: none; opacity: .7; }
.chapter-dock { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; z-index: 8; }
.chapter-dock a { position: relative; display: grid; place-items: center; width: 32px; height: 32px; font-size: 10px; color: #84929e; border: 1px solid transparent; border-radius: 50%; transition: color .25s,border-color .25s,background .25s; }
.chapter-dock a::before { content: ''; position: absolute; right: 15px; bottom: -7px; height: 6px; width: 1px; background: #697c8940; }
.chapter-dock a:last-child::before { display: none; }
.chapter-dock a span { position: absolute; right: 42px; padding: 5px 10px; border: 1px solid #52616c50; border-radius: 4px; background: #080c11f5; font-size: 12px; white-space: nowrap; opacity: 0; transform: translateX(4px); pointer-events: none; transition: opacity .2s,transform .25s; }
.chapter-dock a[aria-current="location"] { color: #eaf2f8; border-color: #8eabb573; background: #14202ad9; }
.chapter-dock a:hover, .chapter-dock a:focus-visible { color: #fff; border-color: #bfd7e2; }
.chapter-dock a:hover span, .chapter-dock a:focus-visible span { opacity: 1; transform: none; }
.inner-page .timeline-item { scroll-margin-top: 70px; }
.inner-page .timeline-item::before { transition: background .3s,box-shadow .3s,transform .3s; }
.inner-page .timeline-item.is-reading::before { background: #f1f8fc; transform: scale(1.5); box-shadow: 0 0 0 5px #c6e4f315,0 0 15px #c6e4f36b; }
.inner-page .timeline-year { transition: color .3s; }
.inner-page .timeline-item.is-reading .timeline-year { color: #d5e2ed; }
.inner-page .project-visual::after { content: ''; position: absolute; inset: 9px; border: 1px solid #d1e5ef; border-radius: 3px; opacity: 0; transform: scale(.985); pointer-events: none; transition: opacity .25s,transform .35s; }
.inner-page .project-tile:is(:hover,:focus-visible) .project-visual::after { opacity: .55; transform: none; }
.inner-page .project-tile:is(:hover,:focus-visible) img { transform: none; }
.inner-page .tile-arrow { width: auto; min-width: 34px; padding: 0 10px; gap: 7px; display: flex; border: 1px solid #b8cad132; z-index: 1; transition: border-color .25s,background .25s; }
.inner-page .tile-arrow::before { content: '查看作品'; font-size: 11px; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s,opacity .25s; }
.inner-page .project-tile:is(:hover,:focus-visible) .tile-arrow { transform: none; background: #101b23f5; border-color: #c5dce499; }
.inner-page .project-tile:is(:hover,:focus-visible) .tile-arrow::before { max-width: 60px; opacity: 1; }
.inner-page .tile-copy h2 { display: table; position: relative; }
.inner-page .tile-copy h2::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 1px; background: #adc6d3; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.inner-page .project-tile:is(:hover,:focus-visible) h2::after { transform: scaleX(1); }
.inner-page [data-lightbox] { position: relative; }
.inner-page [data-lightbox]::after { content: '＋ 查看大图'; position: absolute; bottom: 15px; right: 15px; border: 1px solid #b2cad466; border-radius: 30px; padding: 8px 14px; font-size: 12px; color: #e6f0f7; background: #090e16eb; opacity: 0; transform: translateY(4px); transition: opacity .2s,transform .25s; pointer-events: none; }
.inner-page [data-lightbox]:is(:hover,:focus-visible)::after { opacity: 1; transform: none; }
.inner-page .contact-card { position: relative; overflow: hidden; }
.inner-page .contact-card::before { content: ''; position: absolute; top: 0; left: -36px; width: 72px; height: 1px; background: linear-gradient(90deg,transparent,#edf7ff,transparent); transform: translate3d(var(--contact-x,180px),0,0); opacity: 0; transition: opacity .25s,transform .15s ease-out; pointer-events: none; }
.inner-page .contact-card:is(:hover,:focus-visible)::before { opacity: 1; }
.inner-page .contact-card:focus-visible { background: #10171eee; border-color: #d2e3ed8c; }
.inner-page .contact-card .card-end>span { width: 30px; height: 30px; border: 1px solid #61717c66; border-radius: 50%; display: grid; place-items: center; transition: transform .25s,border-color .25s,background .25s; }
.inner-page .contact-card:is(:hover,:focus-visible) .card-end>span { transform: translate(2px,-2px); background: #a9c4d51c; border-color: #c5dce499; }
.inner-page .media-dialog[open] { animation: media-arrive .18s ease-out; }
.inner-page .return-top { position: fixed; left: 22px; bottom: 20px; z-index: 8; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #8496a05c; border-radius: 50%; background: #07090be6; color: #dce8ef; font-size: 17px; transition: border-color .25s,transform .25s; }
.inner-page .return-top[hidden] { display: none; }
.inner-page .return-top:hover { transform: translateY(-2px); border-color: #dce7ee; }
.inner-page:has(dialog[open]) :is(.chapter-dock,.return-top,.reading-line) { visibility: hidden; }
@keyframes media-arrive { from { opacity: 0; transform: translateY(5px) scale(.99); } to { opacity: 1; transform: none; } }
@media (max-width: 1099px) { .chapter-dock { display: none; } }
.inner-page.motion-paused *, .inner-page.motion-paused *::before, .inner-page.motion-paused *::after { animation: none!important; transition: none!important; }
@media (prefers-reduced-motion: reduce) { .inner-page .media-dialog[open] { animation: none; } }

/* Current focus: one venture, two connected practices. */
.profile-tags { display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: center; }
.profile-tags span { font-size: 12px; line-height: 1.6; color: #b9c8d2; padding-bottom: 4px; border-bottom: 1px solid #a0b9c64d; white-space: nowrap; }
.orbit-bio .profile-tags { margin-bottom: 16px; }
.orbit-bio .profile-tags span { font-size: 12px; }
.direction-intro { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 9%; }
.direction-intro .profile-tags { margin-top: 26px; }
.direction-intro h1 { font-size: clamp(42px,5vw,68px); }
.direction-intro>div>p:last-child { font-size: 16px; margin-top: 21px; }
.direction-section { scroll-margin-top: 60px; }
.direction-section h2 { font-size: clamp(26px,2.4vw,34px); margin-bottom: 22px; line-height: 1.4; }
.direction-section p:not(.eyebrow) { font-size: 16px; line-height: 1.95; color: #afbbc5; max-width: 640px; margin-bottom: 20px; }
.focus-venture { display: grid; grid-template-columns: 1fr 1.08fr; gap: 7%; padding-block: 55px 65px; border-top: 1px solid #7287974a; align-items: center; }
.focus-venture .eyebrow { color: #d0e0ec; }
.focus-product { display: block; border: 1px solid #97b4c454; background: #080e13; border-radius: 6px; overflow: hidden; transition: border-color .25s,transform .3s; }
.focus-product img { width: 100%; height: auto; display: block; }
.focus-product>span { display: flex; justify-content: space-between; padding: 15px 18px; font-size: 12px; color: #bbd0dd; }
.focus-product>span>span { transition: transform .25s; }
.focus-product:is(:hover,:focus-visible) { border-color: #d7edf5aa; transform: translateY(-3px); }
.focus-product:is(:hover,:focus-visible)>span>span { transform: translate(3px,-3px); }
.focus-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; border-top: 1px solid #7287974a; }
.focus-secondary>section { padding-block: 50px 60px; }
.focus-secondary h2 { font-size: 27px; }
.focus-principles { padding-block: 55px 70px; border-top: 1px solid #7287974a; }
.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: start; }
.principle-card { border-top: 1px solid #c7dfeca6; background: linear-gradient(#0d151bb0,transparent); }
.principle-card h3 { display: flex; align-items: center; gap: 15px; padding: 24px 16px; font-size: 20px; font-weight: 400; letter-spacing: normal; line-height: normal; }
.principle-card h3>span { font-size: 11px; color: #8dabbc; }
.principle-card p { padding: 0 16px 10px; font-size: 14px!important; }
.direction-page .small-cta h2 { font-size: 28px; }

/* Independent scene layers replace the flattened image drift. */
.space-scene[data-space-scene] > img { width:100%; height:100%; margin:0; object-fit:cover; object-position:center; animation:none; transform:none; opacity:1; }
.space-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .35s ease; }
.space-ready .space-canvas { opacity:1; }
.space-scene[data-space-scene]::after { background:linear-gradient(90deg,#05060718,transparent 70%); }
.direction-page .space-scene[data-space-scene]::after { background:linear-gradient(90deg,#05060750,transparent 57%); }
@media(prefers-reduced-motion:reduce){.space-canvas{transition:none}}

.direction-intro { grid-template-columns:1.16fr 1fr; min-height:540px; }
.direction-intro .direction-lead { max-width:31em; font-size:17px; color:#c5cbd1; line-height:1.9; margin-top:26px; }
.direction-intro .direction-aside { color:#929da7; margin-top:15px; font-size:15px; }
.direction-intro .orbit-text-link { display:inline-flex; align-items:center; gap:24px; padding-bottom:8px; margin-top:25px; border-bottom:1px solid #9eaebc80; font-size:15px; }
.direction-intro .orbit-text-link span { transition:transform .25s; }
.direction-intro .orbit-text-link:is(:hover,:focus-visible) span { transform:translate(3px,-3px); }
.catalog-page .space-scene[data-space-scene]::after { background:linear-gradient(90deg,#05060738,transparent 74%); }
.case-page .space-scene[data-space-scene]::after { background:linear-gradient(90deg,#05060760,transparent 80%); }
.contact-page .space-scene[data-space-scene]::after { background:linear-gradient(#05060720,transparent 75%); }
.contact-page .contact-card { background:#090d13c7; }
.contact-page .contact-card:is(:hover,:focus-visible) { background:#10171ee0; }
@media(min-width:901px) and (max-height:820px){.direction-intro{min-height:510px;padding-block:65px 60px}.direction-intro h1{font-size:54px}.direction-intro .direction-lead{font-size:16px}}

/* Feather text support in both axes, without a rectangular seam on the planet. */
.inner-page .tile-copy, .inner-page .case-body { position:relative; isolation:isolate; background:none; }
.inner-page .tile-copy::before, .inner-page .case-body::before { content:'';position:absolute;inset:-30px -28px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#050607e0 10%,#050607a0 48%,transparent 73%); }

/* Only these tiny layers move; cinematic artwork stays rasterized and still. */
.space-tracks { position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#c9d3dc;stroke-width:.7;opacity:.28; }
.space-tracks path { transition:stroke-opacity .25s;stroke-opacity:.5; }
.space-tracks path.is-active { stroke-opacity:1; }
.space-tracks-hidden { visibility:hidden; }
.space-traveler,.space-node { position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#eef3f6 0 8%,#d8e2ed55 15%,transparent 65%); }
.space-traveler { opacity:.65; }
.space-node { width:16px;height:16px;margin:-8px;opacity:.25;transition:opacity .25s; }
.space-node.is-active { opacity:1; }
.space-rim-light { position:absolute;width:150px;height:28px;margin:-14px -75px;opacity:.025;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#edf5ffbb,transparent 70%); }
.space-scene[data-state="fallback"] :is(.space-traveler,.space-node,.space-rim-light){display:none}
@media(prefers-reduced-motion:reduce){.space-traveler,.space-rim-light{display:none}.space-node,.space-tracks path{transition:none}}

/* Static, project-specific crops of the shared close rocky limb. */
.case-page [data-space-scene] > img { object-position:var(--case-crop,center); }
[data-space-scene="contextox"] { --case-crop:50% 25%; }
[data-space-scene="mars-quant"] { --case-crop:50% 85%; }
[data-space-scene="mars-reader"] { --case-crop:50% 0%; }
[data-space-scene="chatbi"] { --case-crop:50% 60%; }
[data-space-scene="ai-interviewer"] { --case-crop:50% 100%; }

/* Wide feathering keeps scrolled prose legible as it crosses the silver limb. */
.inner-page .tile-copy::before,.inner-page .case-body::before { inset:-48px -70px;background:radial-gradient(ellipse at center,#050607f5 0%,#050607da 65%,transparent 100%); }
.direction-section { position:relative;isolation:isolate; }
.direction-section::before { content:'';position:absolute;inset:-26px -35px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#050607e8 5%,#050607a6 62%,transparent 100%); }

/* Thoughts: a continuous editorial page, all prose visible without controls. */
.thoughts-intro { display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center;padding-block:72px 76px; }
.thoughts-intro h1 { font-size:clamp(56px,5vw,72px);line-height:1.25; }
.thoughts-intro .eyebrow { margin-bottom:22px; }
.thoughts-lead { font-size:19px;color:#bcc5cd;line-height:1.9;max-width:28em; }
.thoughts-feature,.thoughts-closing { display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-block:52px 58px;border-top:1px solid #94a4b547; }
.thoughts-feature h2 { font-size:clamp(30px,2.8vw,40px); }
.thoughts-page .direction-section p:not(.eyebrow) { max-width:30em;font-size:17px;line-height:1.95; }
.thoughts-prose { padding-top:4px; }
.thoughts-pair { display:grid;grid-template-columns:1fr 1fr;gap:10%; }
.thoughts-pair>section { padding-block:44px 50px;border-top:1px solid #94a4b547; }
.thoughts-pair h2,.thoughts-closing h2 { font-size:30px; }
.thoughts-page .eyebrow { font-size:12px;letter-spacing:.13em;color:#a5b0bb; }
.home-thoughts { display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-block:64px 70px;border-top:1px solid var(--line); }
.home-thoughts h2 { font-size:32px;line-height:1.45; }
.home-thoughts p:not(.eyebrow) { font-size:16px;max-width:30em;color:#aeb7c0;margin-bottom:20px; }
@media(max-width:900px){.thoughts-intro,.thoughts-feature,.thoughts-closing,.thoughts-pair,.home-thoughts{grid-template-columns:1fr;gap:24px}.thoughts-intro{padding-block:50px}.thoughts-pair>section{padding-block:35px}.thoughts-intro h1{font-size:52px}}
.thoughts-lead { position:relative;isolation:isolate; }
.thoughts-lead::before { content:'';position:absolute;inset:-36px -45px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#050607ed 10%,#050607cc 52%,transparent 100%); }
/* Continue the hero's dark lower edge into the compact thoughts entry. */
.home-page .orbit-foreground { bottom:0; }
.home-thoughts { position:relative;isolation:isolate;border-top:0; }
.home-thoughts::before { content:'';position:absolute;inset:0 calc((100vw - 100%) / -2);z-index:-1;pointer-events:none;background:linear-gradient(#050607ed,#050607d9); }