/* Whole-site design system: midnight / paper / electric blue. */
@font-face { font-family:Caveat; src:url('./vendor/caveat-medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
:root { --night:#120f17; --paper:#f3f4f0; --white:#f7f8fa; --muted:#92949b; --accent:#145bff; --shell:1120px; --space-shell:1120px; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; scroll-padding-top:100px; }
body { margin:0; font-family:Inter,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
.portfolio-page { background:var(--night); color:var(--white); overflow-x:clip; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
button, a { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
img { max-width:100%; height:auto; display:block; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
h1,h2,h3,p { margin:0; }
[hidden] { display:none!important; }
:focus-visible { outline:2px solid #7699ff; outline-offset:6px; }
.shell { width:min(var(--shell),calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:200; top:12px; left:12px; padding:12px 20px; background:var(--accent); color:#fff; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.scroll-scene { position:fixed; z-index:0; inset:0; pointer-events:none; background:var(--night); }
#aero-background { width:100%; height:100%; }
.background-status { position:fixed; z-index:61; left:24px; bottom:20px; max-width:min(390px,calc(100% - 90px)); color:#d6cfe1; background:#221b2ce8; border:1px solid #ffffff25; border-radius:12px; padding:10px 14px; font-size:12px; line-height:1.7; }
.background-status:empty { display:none; }
.reading-progress { --track-height:194px; --thumb-height:26px; position:fixed; z-index:60; top:50%; right:18px; width:5px; height:var(--track-height); transform:translateY(-50%); border-radius:8px; background:#80808742; pointer-events:none; }
.reading-progress::after { content:""; position:absolute; top:0; left:0; width:100%; height:var(--thumb-height); border-radius:inherit; background:linear-gradient(180deg,#fff,#b9c7ed); box-shadow:0 0 9px #c6d4ff55; transform:translateY(calc(var(--page-progress,0) * (var(--track-height) - var(--thumb-height)))); }
@media (max-width:760px) { .reading-progress { --track-height:140px; --thumb-height:22px; right:8px; width:3px; } }
.p-header { position:fixed; inset:0 0 auto; height:94px; width:min(var(--shell),calc(100% - 96px)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; z-index:50; color:#fff; mix-blend-mode:difference; }
.p-header .brand { font-size:25px; font-weight:760; letter-spacing:-1px; }
.p-header { transition:opacity .32s ease,transform .38s cubic-bezier(.22,1,.36,1); }
.p-header.is-scroll-hidden { opacity:0; transform:translateY(-24px); pointer-events:none; }
.p-header:has(:focus-visible),.is-mobile-menu-open .p-header { opacity:1; transform:none; pointer-events:auto; }
.p-header .brand,.p-header .nav-links { color:inherit; }
.p-header .nav-links { display:flex; align-items:center; gap:31px; font-size:14px; font-weight:500; }
.p-header .nav-links a { display:inline-flex; align-items:center; gap:6px; position:relative; opacity:.72; padding:10px 0; }
.p-header .nav-links a::after { content:""; position:absolute; height:1px; bottom:3px; left:0; right:0; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.p-header .nav-links a:hover,.p-header .nav-links a[aria-current] { opacity:1; }
.p-header .nav-links a[aria-current]::after,.p-header .nav-links a:hover::after { transform:scaleX(1); }
.p-header .nav-links svg { width:12px; height:12px; }
.menu-button { display:none; border:0; background:none; padding:10px 0 10px 10px; width:40px; }
.menu-button span { display:block; height:1px; background:currentColor; margin:7px 0; transition:transform .25s; }
.portfolio-main { position:relative; }
.portfolio-hero { height:100svh; min-height:760px; position:relative; padding:110px 48px 90px; display:flex; align-items:center; overflow:clip; }
.space-layout { width:100%; max-width:var(--shell); gap:24px; }
.space-copy { will-change:transform,opacity; }
.hero-eyes { display:flex; gap:9px; margin-bottom:24px; }
.hero-eye { display:grid; place-items:center; width:57px; height:64px; border-radius:50%; background:#fff; box-shadow:inset -3px -3px 0 #dedee52b; }
.hero-eye i { position:relative; width:27px; height:30px; background:#080a12; border-radius:50%; transform:translate(var(--eye-x,9px),var(--eye-y,2px)); transition:transform .12s ease-out; }
.hero-eye i::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:#fff; right:4px; top:4px; }
.space-greeting { font-family:Caveat,cursive; font-size:37px; font-weight:500; letter-spacing:.3px; line-height:1.25; margin-bottom:36px; }
.greeting-moon { color:#ffd650; display:inline-block; font-family:serif; font-size:.9em; transform:rotate(-22deg); }
.space-title { font-size:clamp(42px,4.6vw,62px); font-weight:750; letter-spacing:-2px; line-height:1.25; }
.space-title span { background:linear-gradient(180deg,#8e8e94 0%,#d9d9dc 43%,#fff 76%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero-title-rule { width:240px; max-width:60%; height:4px; border-radius:4px; background:linear-gradient(90deg,#2474ff,#72a9ff 45%,#fff); margin-top:38px; }
.space-keywords { color:#a1a3ac; max-width:430px; margin-top:24px; border-top:0; padding-top:0; }
.portrait-stage { will-change:transform; }
.portrait-rig { --tilt-x:3deg; --tilt-y:-9deg; --tilt-z:6deg; }
.portrait-orbit { max-width:none; }
.portrait-photo img { max-width:none; }
.orbit-star { stroke:none; }
.hero-bottom { position:absolute; bottom:44px; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; }
.hero-coordinate { font-size:10px; color:#878891; letter-spacing:.16em; }
.section-eyebrow { font-size:11px; line-height:1.5; font-weight:500; letter-spacing:.16em; color:#85868e; margin-bottom:22px; }
.practice-band { padding:85px 0 110px; overflow:hidden; }
.practice-band .section-eyebrow { margin-bottom:45px; }
.name-marquee { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.name-track { display:flex; gap:52px; align-items:center; width:max-content; padding-left:6vw; will-change:transform; }
.name-track span { font-size:30px; font-weight:650; letter-spacing:-1px; color:#b2b3b8; white-space:nowrap; }
.name-track i { font-size:24px; color:#5b5e6b; font-style:normal; }
.work-world { padding-top:60px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:30px; }
.section-heading h2 { font-size:64px; letter-spacing:-3px; font-weight:650; line-height:1.1; }
.blue-dot { color:#4e78ff; }
.text-link { display:inline-flex; align-items:center; gap:12px; font-size:14px; line-height:1.5; padding-block:10px; }
.text-link svg { transition:transform .25s; width:17px; height:17px; }
.text-link:hover svg { transform:translate(3px,-3px); }
.feature-journey { position:relative; height:calc(100svh + 210px); min-height:920px; }
.feature-sticky { position:sticky; top:108px; perspective:1400px; }
.feature-shell { --thumb-size:104px; --thumb-overlap:13px; width:min(1200px,calc(100% - 48px),calc((100svh - 230px) * 16 / 9)); margin:auto; transform-origin:50% 15%; will-change:transform; }
.feature-media { display:block; width:100%; position:relative; overflow:hidden; border-radius:clamp(30px,5.5vw,72px); background:#120f17; aspect-ratio:1672/941; box-shadow:0 24px 65px #0003; isolation:isolate; }
.feature-project-link { display:block; position:absolute; inset:0; border-radius:inherit; }
.feature-project-link:focus-visible { outline:4px solid #6da2ff; outline-offset:-7px; }
.feature-media img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.feature-project-link::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 30%,#ffffff24 48%,transparent 65%); transform:translateX(-130%); transition:transform .8s cubic-bezier(.22,1,.36,1); }
@media (hover:hover) { .feature-project-link:hover::after { transform:translateX(130%); } }
.feature-announcement,.feature-tab span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.feature-dock { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:max-content; max-width:100%; margin:-25px auto 0; padding-bottom:30px; }
.feature-tabs { display:flex; align-items:center; gap:0; }
.feature-tab,.feature-more { width:var(--thumb-size); height:var(--thumb-size); flex:none; border:6px solid #fff; border-radius:34%; background:#090909; box-shadow:0 12px 22px #0005; position:relative; }
.feature-tab { padding:0; margin-right:calc(-1 * var(--thumb-overlap)); transform:rotate(var(--thumb-angle)); transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .3s; cursor:pointer; }
.feature-tab:nth-child(1) { --thumb-angle:-10deg; }
.feature-tab:nth-child(2) { --thumb-angle:6deg; }
.feature-tab:nth-child(3) { --thumb-angle:-7deg; }
.feature-tab:nth-child(4) { --thumb-angle:7deg; }
.feature-tab:nth-child(5) { --thumb-angle:-10deg; }
.feature-tab img { display:block; width:100%; height:100%; object-fit:cover; border-radius:calc(var(--thumb-size) * .25); }
.feature-tab.is-selected { z-index:2; box-shadow:0 14px 28px #0008; }
.feature-tab:hover,.feature-tab:focus-visible { transform:translateY(-14px) rotate(0deg) scale(1.08); z-index:4; }
.feature-tab:focus-visible,.feature-more:focus-visible { outline:3px solid #77aaff; outline-offset:5px; }
.feature-more { display:flex; flex-direction:column; justify-content:flex-end; padding:12px; color:#fff; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.feature-more svg { width:19px; height:19px; position:absolute; right:13px; top:12px; }
.feature-more span { font-size:18px; line-height:1; letter-spacing:-.5px; }
.feature-more:hover { transform:translateY(-10px); z-index:4; }
.project-index { padding:70px 0 160px; }
.index-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:25px; }
.index-head h3 { font-size:28px; font-weight:500; }
.index-head > span { font-size:12px; color:#9799a3; }
.project-filters { display:flex; gap:10px; flex-wrap:wrap; padding-bottom:28px; }
.project-filters button { background:transparent; border:1px solid #ffffff29; font-size:13px; padding:9px 22px; border-radius:30px; transition:background .2s,color .2s; }
.project-filters button:hover { border-color:#ffffff80; }
.project-filters button[aria-pressed="true"] { background:#f0f1f4; border-color:#f0f1f4; color:#080809; }
.project-row { display:grid; grid-template-columns:32px 140px minmax(0,1fr) 135px 20px; align-items:center; gap:24px; min-height:124px; border-top:1px solid #ffffff23; padding:22px 0; transition:background .25s; }
.project-row:last-child { border-bottom:1px solid #ffffff23; }
.project-number { color:#848791; font-size:12px; font-variant-numeric:tabular-nums; }
.project-row img { width:140px; height:77px; object-fit:cover; border-radius:8px; background:#e6e7eb; transition:transform .35s; }
.project-row:hover img { transform:scale(1.06) rotate(-2deg); }
.project-row:hover { background:#ffffff04; }
.project-summary h3 { font-size:20px; font-weight:500; letter-spacing:-.4px; }
.project-summary p { font-size:12px; color:#868993; line-height:1.7; max-width:540px; margin-top:8px; }
.project-type { color:#a3a6af; font-size:11px; line-height:1.8; }
.project-row > svg { transition:transform .25s; }
.project-row:hover > svg { transform:translate(3px,-3px); }
.about-world { position:relative; color:#111214; background:var(--paper); border-radius:var(--paper-radius,60px); clip-path:inset(0 var(--paper-gutter,24px) round var(--paper-radius,60px)); padding-bottom:150px; }
.manifesto-journey { height:145svh; min-height:1000px; }
.manifesto-sticky { height:100svh; min-height:680px; position:sticky; top:0; display:grid; place-items:center; }
.manifesto-content { padding-block:100px; text-align:center; }
.manifesto-content .section-eyebrow { color:#878990; margin-bottom:42px; }
.manifesto-title { font-size:clamp(48px,6.2vw,82px); font-weight:430; line-height:1.44; letter-spacing:-3px; }
.manifesto-title span { color:rgb(var(--statement-tone,150),var(--statement-tone,150),var(--statement-tone,150)); }
.manifesto-title em { font-style:normal; color:var(--accent); }
.skill-orbits { display:flex; justify-content:center; gap:32px; margin-top:74px; }
.skill-orbits span { font-size:17px; border:1px solid #282a316e; padding:16px 32px; border-radius:50px; white-space:nowrap; will-change:transform; }
.skill-orbits span:nth-child(1) { transform:rotate(-9deg); }
.skill-orbits span:nth-child(2) { transform:rotate(4deg); }
.skill-orbits span:nth-child(3) { transform:rotate(-6deg); }
.skill-orbits span:nth-child(4) { transform:rotate(8deg); }
.capabilities-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:75px; align-items:start; padding-top:20px; }
.capabilities-intro { position:sticky; top:145px; }
.capabilities-intro h2 { font-size:46px; line-height:1.2; font-weight:600; letter-spacing:-2px; }
.capabilities-intro > p:not(.section-eyebrow) { margin-top:28px; font-size:16px; line-height:1.9; color:#676a73; }
.capability-caption { display:block; margin-top:60px; font-size:11px; color:#787b84; }
.capability-item { border-top:1px solid #11121430; padding:32px 0 40px; will-change:transform; }
.capability-item:last-child { border-bottom:1px solid #11121430; }
.capability-head { display:flex; gap:24px; align-items:baseline; margin-bottom:20px; }
.capability-head > span { font-size:13px; color:#848893; }
.capability-head strong { font-size:25px; line-height:1.45; font-weight:550; letter-spacing:-.6px; }
.capability-item > p { color:#666a73; font-size:14px; line-height:1.9; padding-left:41px; }
.capability-metrics { display:flex; flex-wrap:wrap; gap:10px 18px; padding-left:41px; margin-top:22px; font-size:13px; line-height:1.7; color:#145bff; }
.capability-metrics b { font-weight:500; }
.capability-label { display:none; }
.contact-world { position:relative; padding:140px 0 32px; min-height:100svh; overflow:clip; }
.contact-layout { display:grid; grid-template-columns:1.12fr 1fr; gap:24px; align-items:center; min-height:570px; }
.contact-copy { position:relative; z-index:1; min-width:0; }
.contact-copy h2 { font-size:86px; line-height:1.15; font-weight:650; letter-spacing:-4px; }
.contact-statement { font-size:36px; line-height:1.5; margin-top:20px; letter-spacing:-1.8px; white-space:nowrap; }
.contact-statement em { color:#fff; font-style:normal; background:#155bff; padding:0 3px 2px; }
.contact-details { margin-top:48px; }
.contact-hello { display:inline-block; padding:10px 23px; border-radius:24px 24px 24px 0; background:var(--paper); color:var(--night); font-size:12px; font-weight:800; }
.contact-email { display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; font-size:clamp(25px,2.6vw,36px); margin-top:26px; letter-spacing:-1.1px; border-bottom:1px solid transparent; padding-bottom:8px; line-height:1.3; }
.contact-email strong { font-weight:800; min-width:0; overflow-wrap:anywhere; }
.contact-mail-icon { width:26px; height:26px; stroke-width:2; }
.contact-mail-arrow { width:28px; height:28px; stroke-width:2.8; }
.contact-email:hover { border-color:#ffffff60; }
.contact-hint { color:var(--muted); font-size:13px; line-height:1.8; }
.contact-actions { display:flex; align-items:center; gap:26px; margin-top:22px; }
.contact-actions a,.contact-actions button { background:transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:10px; font-size:13px; min-height:44px; padding:8px 0; transition:opacity .2s,transform .2s; }
.contact-actions a:hover,.contact-actions button:hover { opacity:.7; transform:translateY(-2px); }
.contact-actions a svg { width:14px; height:14px; }
.contact-actions .contact-wechat { width:44px; }
.contact-wechat svg { width:30px; height:30px; }
.contact-sculpture { width:115%; margin-left:-5%; mix-blend-mode:screen; will-change:transform; }
.contact-sculpture img { width:100%; }
.site-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ffffff2a; padding-top:25px; margin-top:95px; font-size:12px; color:#8e929a; }
.site-footer a { display:inline-flex; align-items:center; gap:10px; }
.site-footer svg { width:16px; height:16px; }
.motion-controls { position:fixed; z-index:60; right:22px; bottom:22px; }
.motion-toggle { backdrop-filter:blur(10px); background:#111218c9; border-color:#ffffff40; color:white; }
.modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; }
.modal-backdrop { position:absolute; inset:0; background:#000a; backdrop-filter:blur(12px); }
.modal-card { position:relative; background:#f3f4f0; color:#111; width:min(420px,100%); max-height:90svh; overflow:auto; border-radius:24px; padding:36px; text-align:center; box-shadow:0 30px 100px #0005; }
.modal-card h2 { font-size:25px; margin-bottom:24px; }
.wechat-qr { width:100%; height:auto; border-radius:14px; }
.modal-card > p { font-size:13px; color:#656773; margin-top:20px; }
.modal-close { position:absolute; right:14px; top:14px; padding:7px; border:0; border-radius:50%; background:#11111108; display:grid; place-items:center; }
.is-motion-paused .portrait-rig { will-change:auto; }
.portfolio-detail .menu-button { color:inherit; }
@media (min-width:761px) and (max-width:920px) {
  .space-layout { max-width:var(--shell); grid-template-columns:1fr 1fr; gap:15px; }
  .space-title { font-size:36px; }
  .space-keywords { font-size:12px; column-gap:18px; }
  .portrait-stage { --card-width:250px; }
  .portrait-orbit { width:390px; height:156px; }
}

/* Reading pages use the same paper, blue accent, navigation and typography. */
.portfolio-detail { --bg:#f3f4f0; --ink:#111214; --muted:#626670; --soft:#444854; --cyan:#145bff; --wood:#145bff; --blue:#145bff; --line:#11121424; background:var(--paper); color:#111214; }
.portfolio-detail .p-header { color:#111214; mix-blend-mode:normal; }
.portfolio-detail .p-header::before { content:""; position:absolute; z-index:-1; inset:0 -30px; background:#f3f4f0ed; backdrop-filter:blur(16px); }
.portfolio-detail .detail-hero { width:min(var(--shell),calc(100% - 96px)); margin:auto; padding-inline:0; }
.portfolio-detail .case-hero-visual img { object-fit:contain; }
.portfolio-detail .detail-hero { padding-top:130px; }
.portfolio-detail .case-kicker,.portfolio-detail .case-section-index,.portfolio-detail .case-toc > p,.portfolio-detail .case-hero-visual figcaption span,.portfolio-detail .case-toc a.is-active,.portfolio-detail .case-external-link,.portfolio-detail .case-section blockquote { color:#145bff; }
.portfolio-detail .case-toc a::before { background:#145bff; }
.portfolio-detail .case-hero-visual,.portfolio-detail .detail-product-cover { border-radius:22px; box-shadow:0 25px 60px #111a3310; }
.portfolio-detail .case-hero h1 { font-size:clamp(38px,5.3vw,72px); letter-spacing:-2px; line-height:1.2; }
.portfolio-detail .case-tags span { background:#fff7; }
.portfolio-detail .case-section blockquote { background:#e8edff; border-color:#145bff; }
.portfolio-detail .back-link { border-radius:30px; box-shadow:none; background:transparent; }
.portfolio-detail .site-footer { color:#6c707a; border-color:#1112; padding-bottom:36px; }
.portfolio-detail .case-toc { top:115px; }
.portfolio-detail .case-section { scroll-margin-top:16px; }
.portfolio-detail .thinking-grid article { background:#e9ecef; }
.portfolio-detail .thinking-grid article > span,.portfolio-detail .insight-list em,.portfolio-detail .design-list article > span,.portfolio-detail .work-timeline > div > span,.portfolio-detail .result-cards span,.portfolio-detail .screen-gallery figcaption > span { color:var(--accent); }
.portfolio-detail .goal-band div { border-top-color:var(--accent); }
.portfolio-detail .architecture-figure,.portfolio-detail .detail-product-cover { box-shadow:0 20px 55px #18213b10; }
.portfolio-detail .header-actions { display:flex; gap:15px; margin-left:20px; }
.portfolio-detail .header-action { color:inherit; border:0; padding:8px; background:transparent; display:flex; }

@media (min-width:1600px) {
  :root { --shell:1280px; --space-shell:1280px; }
  .space-layout { transform:none; }
  .space-title { font-size:72px; }
  .feature-shell { max-width:1280px; }
  .feature-journey { min-height:1100px; }
  .contact-copy h2 { font-size:100px; }
}
@media (max-width:1000px) {
  .shell,.p-header { width:calc(100% - 64px); }
  .p-header .nav-links { gap:22px; }
  .portfolio-hero { padding-inline:32px; }
  .space-title { font-size:44px; }
  .space-keywords { font-size:14px; column-gap:22px; max-width:350px; }
  .portrait-stage { --card-width:295px; }
  .portrait-orbit { width:470px; height:188px; }
  .project-row { grid-template-columns:25px 110px 1fr 100px 18px; gap:16px; }
  .project-row img { width:110px; height:64px; }
  .capabilities-layout { grid-template-columns:240px 1fr; gap:40px; }
  .contact-copy h2 { font-size:70px; }
  .contact-statement { font-size:29px; }
  .contact-email { font-size:24px; gap:8px; }
  .contact-layout { min-height:490px; }
}
@media (max-width:760px) {
  html { scroll-padding-top:88px; }
  .shell,.p-header { width:calc(100% - 48px); }
  .p-header { height:76px; }
  .p-header .brand { font-size:22px; }
  .p-header .nav-links { display:none; }
  .menu-button { display:block; }
  .is-mobile-menu-open .p-header { mix-blend-mode:normal; color:white; }
  .is-mobile-menu-open .p-header .nav-links { display:flex; align-items:stretch; flex-direction:column; gap:6px; position:absolute; top:70px; left:0; right:0; padding:18px 24px; border:1px solid #ffffff25; border-radius:16px; background:#111217f5; backdrop-filter:blur(20px); }
  .is-mobile-menu-open .menu-button span:first-child { transform:translateY(4px) rotate(45deg); }
  .is-mobile-menu-open .menu-button span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .portfolio-hero { height:auto; min-height:100svh; padding:130px 26px 110px; }
  .space-layout { grid-template-columns:1fr; gap:28px; max-width:520px; }
  .space-copy { width:100%; max-width:none; }
  .space-title { font-size:clamp(34px,8.8vw,53px); line-height:1.3; letter-spacing:-1px; }
  .space-greeting { font-size:30px; margin-bottom:24px; }
  .hero-eyes { margin-bottom:18px; gap:7px; }
  .hero-eye { width:43px; height:48px; }
  .hero-eye i { width:21px; height:23px; }
  .hero-title-rule { width:190px; margin-top:25px; }
  .space-keywords { font-size:13px; margin-top:24px; padding-top:22px; gap:13px 24px; }
  .portrait-stage { --card-width:255px; height:385px; }
  .portrait-orbit { width:365px; height:146px; }
  .hero-bottom { bottom:36px; }
  .hero-coordinate { display:none; }
  .space-scroll { font-size:11px; }
  .practice-band { padding:55px 0 75px; }
  .practice-band .section-eyebrow { font-size:9px; margin-bottom:30px; }
  .name-track { gap:30px; }
  .name-track span { font-size:23px; }
  .work-world { padding-top:45px; }
  .section-heading { align-items:start; gap:15px; padding-bottom:28px; }
  .section-heading h2 { font-size:43px; letter-spacing:-2px; }
  .section-heading > .text-link { font-size:11px; margin-top:36px; gap:4px; white-space:nowrap; }
  .section-eyebrow { font-size:9px; margin-bottom:17px; }
  .feature-journey { height:auto; min-height:0; }
  .feature-sticky { position:relative; top:auto; }
  .feature-shell { --thumb-size:clamp(46px,12.8vw,76px); --thumb-overlap:clamp(6px,1.6vw,10px); width:calc(100% - 32px); transform:none!important; }
  .feature-media { border-radius:clamp(24px,6vw,44px); max-height:none; min-height:0; }
  .feature-dock { margin-top:-14px; padding-bottom:22px; }
  .feature-tab,.feature-more { border-width:4px; }
  .feature-tab:hover,.feature-tab:focus-visible { transform:translateY(-8px) rotate(0deg) scale(1.06); }
  .feature-more { padding:6px; }
  .feature-more span { font-size:clamp(10px,2.5vw,14px); }
  .feature-more svg { width:12px; height:12px; right:6px; top:5px; }
  .project-index { padding:64px 0 88px; }
  .index-head h3 { font-size:23px; }
  .project-filters { gap:7px; }
  .project-filters button { font-size:11px; padding:8px 14px; }
  .project-row { grid-template-columns:72px minmax(0,1fr) 16px; gap:14px; padding:22px 0; min-height:110px; }
  .project-number,.project-type { display:none; }
  .project-row img { width:72px; height:57px; }
  .project-summary h3 { font-size:16px; line-height:1.5; }
  .project-summary p { font-size:10px; line-height:1.6; }
  .project-row > svg { width:16px; }
  .about-world { padding-bottom:85px; }
  .manifesto-journey { height:110svh; min-height:690px; }
  .manifesto-sticky { height:80svh; min-height:550px; }
  .manifesto-title { font-size:clamp(32px,7.7vw,50px); letter-spacing:-1.5px; line-height:1.65; }
  .manifesto-content { padding-block:85px; }
  .manifesto-content .section-eyebrow { margin-bottom:28px; }
  .skill-orbits { display:grid; grid-template-columns:repeat(2,max-content); gap:24px 16px; margin-top:55px; }
  .skill-orbits span { font-size:12px; padding:12px 23px; }
  .capabilities-layout { grid-template-columns:1fr; gap:38px; }
  .capabilities-intro { position:static; }
  .capabilities-intro h2 { font-size:39px; }
  .capabilities-intro > p:not(.section-eyebrow) { font-size:14px; margin-top:20px; }
  .capability-caption { margin-top:24px; }
  .capability-head { gap:16px; margin-bottom:14px; }
  .capability-head strong { font-size:21px; }
  .capability-item > p { font-size:13px; padding-left:32px; }
  .capability-metrics { padding-left:32px; gap:8px 14px; font-size:12px; }
  .contact-world { padding:95px 0 25px; }
  .contact-layout { grid-template-columns:1fr; gap:15px; }
  .contact-copy h2 { font-size:66px; letter-spacing:-3px; }
  .contact-statement { font-size:27px; letter-spacing:-1.5px; }
  .contact-details { margin-top:36px; }
  .contact-email { font-size:clamp(17px,5.3vw,30px); margin-top:24px; gap:7px; letter-spacing:-.7px; }
  .contact-mail-icon { width:20px; height:20px; }
  .contact-mail-arrow { width:21px; height:21px; }
  .contact-hint { font-size:12px; }
  .contact-actions { gap:22px; }
  .contact-sculpture { width:86%; margin:12px auto 0; max-width:390px; }
  .site-footer { margin-top:45px; font-size:10px; padding-top:22px; }
  .motion-controls { right:13px; bottom:13px; }
  .motion-toggle { width:34px; height:34px; }
  .portfolio-detail .header-actions { margin-left:auto; margin-right:14px; }
  .portfolio-detail .case-hero h1 { font-size:39px; }
  .portfolio-detail .detail-hero { width:calc(100% - 48px); }
  .portfolio-detail.is-mobile-menu-open .p-header { color:#111214; }
  .portfolio-detail.is-mobile-menu-open .nav-links { color:white; }
  .portfolio-detail .case-toc a.is-active { color:#fff; background:#145bff; }
}
/* The compact contents bar and header form one opaque, gap-free stack. */
@media (max-width:820px) {
  .portfolio-detail { --detail-header-height:94px; --detail-gutter:48px; --detail-header-gutter:32px; --detail-toc-top:var(--detail-header-height); }
  .portfolio-detail:has(.p-header.is-scroll-hidden):not(:has(.p-header :focus-visible)):not(.is-mobile-menu-open) { --detail-toc-top:0px; }
  .portfolio-detail .p-header::before { inset:0 calc(-1 * var(--detail-header-gutter)); background:var(--paper); backdrop-filter:none; }
  .portfolio-detail .case-toc {
    top:var(--detail-toc-top); margin-inline:calc(-1 * var(--detail-gutter));
    padding:10px var(--detail-gutter); overflow:visible; background:var(--paper);
    backdrop-filter:none; border-bottom:1px solid var(--line);
    transition:top .38s cubic-bezier(.22,1,.36,1);
  }
  /* Cover the moving seam while the header fades in/out. Scrolling is confined
     to nav so this backing is not clipped by an overflow container. */
  .portfolio-detail .case-toc::before { content:""; position:absolute; bottom:100%; left:0; right:0; height:var(--detail-header-height); background:var(--paper); pointer-events:none; }
  .portfolio-detail .case-toc nav { width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .portfolio-detail .case-toc nav::-webkit-scrollbar { display:none; }
  .portfolio-detail .case-toc a { flex-shrink:0; }
  .portfolio-detail .case-toc a.is-active { color:#fff; background:#145bff; }
}
@media (max-width:760px) {
  .portfolio-detail { --detail-header-height:76px; --detail-gutter:24px; --detail-header-gutter:24px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
  .feature-journey { min-height:0; height:auto; }
  .feature-sticky,.manifesto-sticky { position:relative; top:auto; }
  .manifesto-journey { height:auto; min-height:0; }
  .manifesto-sticky { height:auto; min-height:550px; }
  .feature-shell,.space-copy,.portrait-stage,.skill-orbits span,.contact-sculpture,.capability-item { transform:none!important; opacity:1!important; }
  .about-world { clip-path:none; border-radius:0; }
  .manifesto-title { --statement-tone:17; }
  .motion-controls { display:none; }
}