.project-page{--project-accent:#df765d;--project-field:#edf3fb;--project-field-deep:#73839a;--project-evidence-ink:#1c2734}.project-page--joi-mobile{--project-accent:#7b5cc7;--project-field:#eeeaf8;--project-field-deep:#81779f;--project-evidence-ink:#241d37}.project-detail-tagline{grid-column:2;max-width:18ch;margin:28px 0 0;color:var(--project-accent);font-family:Georgia,Times New Roman,serif;font-size:clamp(24px,2.5vw,42px);font-style:italic;line-height:1.05;letter-spacing:-.035em}.project-detail-summary dl div:last-child{border-bottom-color:var(--ink)}.project-case-frame span,.project-detail-kicker{color:var(--project-accent)}.project-detail-motion{margin:72px 0 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);background:var(--project-field)}.project-web-experience{display:grid;grid-template-columns:.7fr 1.7fr auto;grid-gap:clamp(24px,5vw,70px);gap:clamp(24px,5vw,70px);align-items:start;margin-top:72px;padding:28px 0 34px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);color:var(--ink);background:radial-gradient(circle at 82% 40%,color-mix(in srgb,var(--project-accent) 15%,transparent),transparent 30%),linear-gradient(90deg,transparent,color-mix(in srgb,var(--project-field) 64%,transparent));text-decoration:none;transition:color .22s ease,background-position .36s cubic-bezier(.16,1,.3,1)}.project-web-experience>span,.project-web-experience>strong{color:var(--project-accent);font:700 10px/1.4 var(--mono);letter-spacing:.11em}.project-web-experience h2{max-width:13ch;margin:0 0 22px;font-size:clamp(36px,4.5vw,68px);line-height:.94;letter-spacing:-.05em}.project-web-experience p{max-width:58ch;margin:0 0 10px;color:#555a61;font-size:14px;line-height:1.62}.project-web-experience>strong{display:flex;gap:12px;align-items:center;white-space:nowrap}.project-web-experience>strong b{font-size:17px;font-weight:400;transition:transform .22s ease}.project-web-experience:focus-visible,.project-web-experience:hover{background-position:10px 0}.project-next:focus-visible,.project-web-experience:focus-visible{outline:2px solid var(--project-accent);outline-offset:7px}.project-web-experience:focus-visible>strong b,.project-web-experience:hover>strong b{transform:translate(4px,-4px)}.project-detail-motion video{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--project-field)}.project-page--joi-mobile .project-detail-motion video{aspect-ratio:16/9;object-fit:contain}.project-detail-motion figcaption{display:grid;grid-template-columns:.75fr 2.5fr;grid-gap:40px;gap:40px;padding:18px 0 0;color:#4a4e54}.project-detail-motion figcaption span{color:var(--project-accent);font:700 10px/1.4 var(--mono);letter-spacing:.1em}.project-detail-motion figcaption p{max-width:54ch;margin:0;padding-bottom:18px;font-size:14px;line-height:1.55}.project-detail-loop{margin-bottom:92px;border-top:1px solid var(--ink)}.project-detail-loop>header{display:grid;grid-template-columns:.7fr 1.7fr;grid-gap:70px;gap:70px;padding:28px 0 58px}.project-detail-loop>header h2{max-width:16ch;margin:0;font-size:clamp(42px,5.2vw,76px);line-height:.94;letter-spacing:-.055em}.project-detail-loop>header div>p{max-width:28ch;margin:20px 0 0;color:var(--muted);font-size:16px;line-height:1.6}.project-detail-loop ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--ink);list-style:none}.project-detail-loop li{position:relative;min-height:360px;padding:22px 22px 30px;border-left:1px solid var(--line)}.project-detail-loop li:first-child{border-left:0}.project-detail-loop li>span{color:var(--project-accent);font:700 10px/1 var(--mono);letter-spacing:.08em}.project-detail-loop li>strong{display:block;margin-top:54px;color:var(--project-evidence-ink);font:700 11px/1 var(--mono);letter-spacing:.12em}.project-detail-loop li h3{margin:18px 0 0;font-size:clamp(22px,2vw,30px);line-height:1.08;letter-spacing:-.035em}.project-detail-loop li p{margin:34px 0 0;color:#5b5f64;font-size:14px;line-height:1.6}.project-detail-loop li:after{content:"";position:absolute;right:22px;bottom:24px;left:22px;height:2px;background:linear-gradient(90deg,var(--project-accent) 0 22%,var(--line) 22% 100%)}.project-detail-gallery{gap:1px;padding:1px;background:var(--line)}.project-detail-gallery figure{overflow:hidden;border:0}.project-detail-gallery figcaption{min-height:48px;border-top:1px solid var(--line)}.project-page--joi .project-detail-figure--1 img,.project-page--joi .project-detail-figure--2 img{aspect-ratio:1132/768}.project-page--joi .project-detail-figure--3 img,.project-page--joi .project-detail-figure--4 img{object-fit:contain;padding:clamp(18px,3vw,42px);background:#f2f4f6}.project-page--joi-mobile .project-detail-gallery{background:rgba(36,29,55,.14)}.project-page--joi-mobile .project-detail-figure img{height:min(78vh,820px);aspect-ratio:auto;object-fit:contain;padding:clamp(18px,3.5vw,54px);background:radial-gradient(circle at 50% 40%,#f7f2ff 0,transparent 38%),#e3dff0}.project-page--joi-mobile .project-detail-figure--3,.project-page--joi-mobile .project-detail-figure--4{background:#e3dff0}.project-next span{color:var(--project-accent);font:700 10px/1 var(--mono);letter-spacing:.12em}.project-next strong{transition:color .22s ease,transform .36s cubic-bezier(.16,1,.3,1)}.project-next:focus-visible strong,.project-next:hover strong{color:var(--project-accent);transform:translateX(10px)}.project-page{caret-color:var(--project-accent);scrollbar-color:var(--project-accent) var(--paper)}.project-page ::selection{color:#fff;background:var(--project-accent)}.project-case-frame,.project-detail-hero-top h1,.project-detail-motion,.project-detail-summary{animation:projectEvidenceIn .76s cubic-bezier(.16,1,.3,1) both}.project-detail-summary{animation-delay:80ms}.project-case-frame{animation-delay:.14s}.project-detail-motion{animation-delay:.2s}@keyframes projectEvidenceIn{0%{opacity:0;transform:translateY(22px)}}@media (max-width:900px){.project-detail-loop ol{grid-template-columns:repeat(2,minmax(0,1fr))}.project-detail-loop li:nth-child(odd){border-left:0}.project-detail-loop li:nth-child(n+3){border-top:1px solid var(--line)}}@media (max-width:760px){.project-detail-tagline{grid-column:1;margin-top:12px}.project-detail-motion{margin-top:46px}.project-detail-loop>header,.project-detail-motion figcaption,.project-web-experience{grid-template-columns:1fr;gap:18px}.project-detail-loop{margin-bottom:64px}.project-detail-loop>header{padding-bottom:42px}.project-detail-loop ol{grid-template-columns:1fr}.project-detail-loop li,.project-detail-loop li:nth-child(odd){min-height:0;padding:22px 0 56px;border-top:1px solid var(--line);border-left:0}.project-detail-loop li>strong{margin-top:24px}.project-detail-loop li p{max-width:42ch;margin-top:20px}.project-detail-loop li:after{right:0;bottom:24px;left:0}.project-page--joi-mobile .project-detail-figure img{height:72vh;min-height:560px;padding:18px}}@media (prefers-reduced-motion:reduce){.project-case-frame,.project-detail-hero-top h1,.project-detail-motion,.project-detail-summary{animation:none}.project-next strong{transition:none}}.joi-live-session{margin-top:72px;padding:28px 0 34px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);color:var(--ink)}.joi-live-session>header{display:grid;grid-template-columns:.7fr 1.7fr;grid-gap:clamp(24px,5vw,70px);gap:clamp(24px,5vw,70px);align-items:start;margin-bottom:28px}.joi-live-session h2{max-width:13ch;margin:0 0 18px;font-size:clamp(32px,4vw,60px);line-height:.96;letter-spacing:-.05em}.joi-live-session header p[lang=zh-CN]{max-width:52ch;margin:0;color:#555a61;font-size:14px;line-height:1.62}.joi-experience-mount{display:block;width:100%}.joi-experience-fallback{position:absolute;inset:0;z-index:1;border-radius:28px;background:#edf1f8;border:1px solid color-mix(in srgb,#172033 12%,transparent);display:grid;grid-gap:10px;gap:10px;place-content:center;height:100%;padding:32px;text-align:center}.joi-experience-fallback strong{color:var(--project-accent);font:700 11px/1.4 var(--mono);letter-spacing:.11em}.joi-experience-fallback p{max-width:46ch;margin:0 auto;color:#555a61;font-size:13px;line-height:1.6}.joi-experience-note{margin-top:22px}.joi-experience-note p{max-width:62ch;margin:0;color:#555a61;font-size:13px;line-height:1.62}@media (max-width:860px){.joi-live-session>header{grid-template-columns:1fr;gap:16px}}