@font-face{font-family:Literata;src:url('/assets/literata-medium-latin.woff2') format('woff2'),url('/assets/literata-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
:root{--dark:#161c1a;--dark-surface:#25322c;--light:#eef2ed;--white:#fafbf8;--ink:#1b2922;--muted:#526257;--jade:#9fc7b8;--focus:#176243;--display:Literata,Georgia,serif;--body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--light);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.65}::selection{background:var(--jade);color:var(--dark)}body{scrollbar-color:var(--muted) var(--light)}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}.stage :focus-visible{outline-color:var(--jade)}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.15;letter-spacing:-.025em;text-wrap:balance}h1{font-size:clamp(48px,4.6vw,72px)}h2{font-size:clamp(34px,3.2vw,48px)}h3{font-size:32px}h4{font-size:18px;line-height:1.4}p{margin-top:20px}p,dd{max-width:70ch}img{display:block;width:100%;height:auto}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}button{border:0}a,button,summary,input{ -webkit-tap-highlight-color:transparent}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:10px;left:10px;padding:12px 20px;background:var(--white);color:var(--ink);z-index:10;transform:translateY(-160%)}.skip-link:focus{transform:none}.portfolio-layout{display:grid;grid-template-columns:45% 55%;align-items:start}.stage{position:sticky;top:0;height:100svh;min-height:650px;max-height:1200px;background:var(--dark);color:var(--light);padding:36px clamp(28px,3.2vw,54px);display:flex;flex-direction:column;overflow:hidden}.identity{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;font-weight:600}.location{font-size:15px;color:#bac8bf;font-weight:400}.stage-title{font-family:var(--display);font-size:clamp(32px,3.4vw,54px);line-height:1.15;letter-spacing:-.025em;margin-top:auto;padding-top:26px}.stage-art{margin:28px -12px 20px}.stage-art img{aspect-ratio:1.6;object-fit:cover;background:#26312a;transition:opacity .45s ease,transform .9s var(--ease)}.stage-art img.is-switching{opacity:.35;transform:scale(.985)}figcaption{font-size:13px;line-height:1.5;margin-top:10px;color:var(--muted)}.stage-art figcaption{color:#bac8bf;min-height:40px}.route-nav{display:flex;flex-direction:column;gap:7px}.route-link{display:flex;align-items:center;gap:14px;width:fit-content;text-decoration:none;font-size:16px;padding:4px 0;color:#c4d1c8;transition:color .2s,transform .25s var(--ease)}.route-dot{width:11px;height:11px;border:2px solid currentColor;border-radius:50%;flex:none}.route-link.is-current{color:var(--jade)}.is-current .route-dot{background:var(--jade)}.route-link:hover{color:var(--white);transform:translateX(5px)}.stage-contact{display:flex;gap:12px;align-items:center;font-size:15px;margin-top:auto;padding-top:28px;width:fit-content}.stage-contact svg{width:17px;height:17px}.reading{padding-left:clamp(28px,4.2vw,72px);padding-right:clamp(28px,4.2vw,72px)}.intro{padding-top:80px;padding-bottom:80px;background:var(--light)}.lead{font-size:23px;line-height:1.45}.intro .lead{margin-top:30px}.intro-note{font-size:14px;color:var(--muted);margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:13px 22px;min-height:50px;border-radius:4px;text-decoration:none;font-size:16px;font-weight:600;line-height:1.4;transition:background .2s,color .2s,transform .25s var(--ease)}.primary{background:var(--dark);color:var(--white)}.primary:hover{background:#365444;transform:translateY(-2px)}.secondary{background:#dae4d9;color:var(--ink)}.secondary:hover{background:#c6d6c5;transform:translateY(-2px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.intro .button{margin-top:30px}.work{padding-top:48px;padding-bottom:64px;background:var(--white)}.work>p{color:var(--muted)}.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.filters button{padding:10px 14px;min-height:44px;border-radius:4px;color:var(--ink);background:var(--light);font-size:14px;transition:background .2s,color .2s,transform .2s}.filters button[aria-pressed=true]{background:var(--dark);color:var(--white)}.filters button:hover{transform:translateY(-2px)}.project{padding-top:58px;padding-bottom:22px;scroll-margin-top:32px}.project-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:18px}.project-meta span:last-child{font-style:italic}.project-intent{font-size:21px;line-height:1.45;margin-top:18px}.project-image{margin-top:28px;margin-left:calc(clamp(28px,4.2vw,72px)*-.45);margin-right:calc(clamp(28px,4.2vw,72px)*-.45)}.project-image img{aspect-ratio:1.6;object-fit:cover}.project-image.render img{aspect-ratio:1.7;object-position:center 35%}.project-image figcaption{padding:0 12px}.project>p:not(.project-intent){font-size:17px}.project details{margin-top:22px}summary{cursor:pointer;font-size:16px;font-weight:600;padding:14px 0;transition:color .2s}summary:hover{color:var(--focus)}.case-content{padding:18px 20px 24px;background:var(--light);font-size:16px}.case-content h4:not(:first-child){margin-top:26px}.case-content p{margin-top:10px}.case-content figure{margin-top:24px}.text-link{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:16px;margin-top:22px}.text-link span{display:inline-block;transition:transform .2s}.text-link:hover span{transform:translate(3px,-3px)}.planning-project{padding-bottom:32px}.wide-section{padding:80px clamp(24px,6vw,96px)}.lab{background:var(--jade)}.lab-heading{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}.lab-heading p:first-child{margin-top:0}.demo-disclosure{font-size:14px;color:#274438;max-width:58ch}input[type=range]{width:100%;accent-color:#2c634b;height:40px;margin:6px 0 18px;cursor:pointer}input[type=checkbox]{width:20px;height:20px;accent-color:#2c634b;flex:none;margin:3px 0 0}.state-label{font-size:13px;padding:5px 10px;background:#e3ebe1;border-radius:4px}table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums;text-align:left}th{font-size:13px;font-weight:600;color:var(--muted);padding:10px 8px}td{padding:10px 8px}tbody tr:nth-child(odd){background:var(--light)}tbody tr.selected{background:#d5e8d9}td:last-child{font-weight:600}.plan-actions{display:flex;gap:10px;flex-wrap:wrap}.approach{background:var(--light)}.approach-opening{display:grid;grid-template-columns:1fr 1fr;gap:60px}.approach-opening p{margin-top:0}.approach-body{margin:32px 0 0 50%;padding-left:30px;max-width:70ch}.approach-body p{font-size:17px}.method{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin:56px 0 0}.method dt{font-family:var(--display);font-size:24px;line-height:1.3}.method dd{margin:18px 0 0;font-size:16px;color:var(--muted)}.contact{background:var(--dark);color:var(--light)}.contact h2{font-size:clamp(32px,4.2vw,64px)}.contact p{color:#c4d1c8}.contact .primary{background:var(--jade);color:var(--dark);margin-top:28px}.contact .primary:hover{background:#badbca}.contact :focus-visible{outline-color:var(--jade)}.footer-line{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:13px;color:#bac8bf;margin-top:70px}.reveal{animation:arrive .75s var(--ease) both}.intro h1{animation:arrive .85s var(--ease)}.intro .lead{animation:arrive 1s var(--ease)}.stage-title{animation:arrive 1s var(--ease)}.stage-art{animation:arrive 1.15s var(--ease)}@keyframes arrive{from{transform:translateY(14px);opacity:.75}to{transform:none;opacity:1}}@media(min-width:1600px){body{max-width:1800px;margin:auto}.stage{max-height:1100px}}@media(max-height:760px) and (min-width:901px){.stage{min-height:600px;padding-top:24px;padding-bottom:24px}.stage-title{font-size:36px;padding-top:20px}.stage-art{margin-top:18px;margin-bottom:10px}.stage-art img{max-height:230px;object-fit:contain}.stage-contact{padding-top:18px}.route-link{font-size:14px}.intro{padding-top:56px}}
@media(max-width:1100px){.portfolio-layout{grid-template-columns:43% 57%}.stage{padding-left:24px;padding-right:24px}.stage-title{font-size:38px}.reading{padding-left:32px;padding-right:32px}.intro{padding-top:56px}h1{font-size:50px}.lab-heading,.approach-opening{gap:36px}.method{gap:28px}}
@media(max-width:900px){.portfolio-layout{display:block}.stage{position:relative;height:auto;min-height:0;max-height:none;padding:24px}.stage-title{font-size:40px;margin-top:28px;padding:0}.stage-art{margin:24px 0 16px;max-width:640px}.stage-art img{aspect-ratio:1.75}.stage-art figcaption{min-height:0}.route-nav{flex-direction:row;flex-wrap:wrap;gap:8px 22px;margin-top:10px}.route-link{font-size:14px}.route-dot{width:9px;height:9px}.stage-contact{padding-top:24px}.reading{padding-left:clamp(24px,7vw,60px);padding-right:clamp(24px,7vw,60px)}.intro{padding-top:56px;padding-bottom:56px}.intro h1{font-size:56px}.intro p{max-width:58ch}.project-image{margin-left:0;margin-right:0}.lab-heading,.approach-opening{grid-template-columns:1fr;gap:28px}.approach-body{margin:28px 0 0;padding:0;max-width:65ch}.wide-section{padding-top:56px;padding-bottom:56px}.method{gap:24px}.method dt{font-size:22px}.method dd{font-size:16px}.contact h2{font-size:42px}}
@media(max-width:520px){body{font-size:17px}.identity{font-size:17px}.stage{padding:22px}.stage-title{font-size:35px;margin-top:26px}.stage-art{margin-top:22px}.stage-art figcaption{font-size:12px}.route-nav{gap:6px 18px}.stage-contact{font-size:14px}.reading{padding-left:24px;padding-right:24px}.intro h1{font-size:46px}.lead{font-size:21px}.intro-note{font-size:13px}.work{padding-top:36px}.work h2{font-size:35px}.filters{gap:6px}.filters button{font-size:13px;padding:10px 12px}.project{padding-top:42px}h3{font-size:29px}.project-meta{font-size:12px;gap:4px}.project-intent{font-size:20px}.project-image{margin-left:-24px;margin-right:-24px}.project-image figcaption{padding:0 24px}.project-image img{aspect-ratio:1.4}.case-content{padding:18px 16px}.wide-section{padding-left:24px;padding-right:24px}h2{font-size:34px}.state-label{font-size:12px}table{font-size:13px}th{font-size:12px}th,td{padding:10px 5px}.plan-actions .button{font-size:14px;padding:12px 16px}.method{grid-template-columns:1fr;margin-top:36px;gap:30px}.method dt{font-size:25px}.method dd{margin-top:10px}.contact h2{font-size:35px}.footer-line{margin-top:48px;flex-direction:column;gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.project-meta{margin-top:16px;margin-bottom:0}.text-link svg{width:18px;height:18px;transition:transform .2s}.text-link:hover svg{transform:translate(3px,-3px)}
@media(max-width:900px){.stage-title,.stage-art,.stage-contact{display:none}.stage{padding:22px 24px}.route-nav{margin-top:18px}.intro{padding-top:40px}.route-link{font-size:13px}}

.evidence-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}.evidence-pair img{aspect-ratio:1.6;object-fit:cover}.project .evidence-note{font-size:13px;margin-top:10px;color:var(--muted)}
@media(max-width:520px){.project-meta,.state-label,th,.stage-art figcaption{font-size:13px}.evidence-pair{grid-template-columns:1fr;gap:22px}}

.project-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px}.project-actions .text-link{margin-top:0}.supporting-heading{margin-top:64px;padding-top:32px}.supporting-heading p{color:var(--muted);font-size:17px}.supporting-project{padding-top:36px;padding-bottom:12px}.supporting-project h3{font-size:29px}.supporting-project>p{margin-top:16px}@media(max-width:520px){.supporting-heading h2{font-size:30px}.project-actions{gap:16px}.supporting-project h3{font-size:27px}}

.language-nav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:14px;flex-shrink:0}
.language-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:#c4d1c8;text-decoration:none}
.language-nav a[aria-current=page]{color:var(--jade);text-decoration:underline;text-underline-offset:6px}
.language-nav a:hover{color:var(--white)}
.stage :focus-visible{outline-color:var(--jade)}
html:lang(zh-Hans){--body:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;--display:"Literata","Noto Serif SC","Noto Serif CJK SC","Songti SC","SimSun",serif}
html:lang(zh-Hant){--body:system-ui,-apple-system,"Segoe UI","PingFang HK","PingFang TC","Microsoft JhengHei","Noto Sans HK","Noto Sans TC","Noto Sans CJK TC",sans-serif;--display:"Literata","Noto Serif TC","Noto Serif CJK TC","Songti TC","PMingLiU",serif}
html:lang(zh) h1,html:lang(zh) h2,html:lang(zh) .stage-title{letter-spacing:0;line-height:1.35}
html:lang(zh) .intro h1{font-size:clamp(32px,3.5vw,54px)}
html:lang(zh) .stage-title{font-size:clamp(28px,3vw,42px)}
@media(max-width:520px){.language-nav{margin-top:8px}.route-nav{margin-top:8px}html:lang(zh) .intro h1{font-size:32px}html:lang(zh) .contact h2{font-size:30px}}

/* ---------- v2 (2026-11-02): hero facts, proof strip, project fact sheets, practice note, route row ---------- */
.intro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.intro .intro-actions .button{margin-top:0}
.button svg{flex:none}
.glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:36px 0 0;padding-top:24px;border-top:1px solid #cfdacf;max-width:640px}.proof-strip+.glance{margin-top:28px}
.glance dt{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}.glance dd{margin:4px 0 0;font-size:15px;line-height:1.5}
.proof-strip{display:none}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:24px 0 0;border-top:1px solid #d3ddd2}
.facts>div{padding:12px 16px 12px 0;border-bottom:1px solid #d3ddd2}.facts>div:nth-child(even){padding-left:16px;border-left:1px solid #d3ddd2}
.facts dt{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:3px 0 0;font-size:15px;line-height:1.45}
html:lang(zh) .facts dt{text-transform:none;letter-spacing:0;font-size:13px}
.in-practice{margin:36px 0 0 50%;padding:20px 24px 24px 30px;background:var(--white);border-left:3px solid var(--focus);max-width:70ch}
.in-practice h3{font-size:22px}.in-practice p{font-size:16px;margin-top:10px}.in-practice .text-link{margin-top:12px}
@media(min-width:901px){
  .route-nav{gap:2px}.route-link{min-height:32px;padding:3px 0}
  .stage-art img{max-height:max(150px,calc(100svh - 610px));object-fit:cover}
}
@media(min-width:901px) and (max-height:860px){
  .stage-title{display:none}.stage-art{margin-top:28px}
  .stage-art img{max-height:max(140px,calc(100svh - 480px));object-fit:cover}
  .stage-art figcaption{min-height:0}
}
@media(max-width:1100px){.in-practice{margin-left:0}}
@media(max-width:900px){
  .route-nav{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-left:-24px;margin-right:-24px;padding:4px 24px 6px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:24px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%)}
  .route-nav::-webkit-scrollbar{display:none}
  .route-link{flex:none;scroll-snap-align:start;min-height:44px;padding:0 14px;border:1px solid #3a4a42;border-radius:4px;gap:9px;white-space:nowrap}
  .route-link:hover{transform:none}.route-link.is-current{border-color:var(--jade)}
  .proof-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:32px}
  .proof-strip a{display:block;text-decoration:none;font-size:13px;font-weight:600;line-height:1.35}
  .proof-strip img{aspect-ratio:1.6;object-fit:cover;background:#26312a;border-radius:4px}
  .proof-strip span{display:block;margin-top:8px}
  .in-practice{margin-top:28px}
}
@media(max-width:520px){
  .intro-actions{flex-direction:column;align-items:stretch}.intro-actions .button{width:100%}
  .glance{grid-template-columns:1fr;gap:14px;margin-top:30px}
  .facts{grid-template-columns:1fr}.facts>div:nth-child(even){padding-left:0;border-left:0}.facts>div{padding-right:0}
  .proof-strip{gap:8px}.proof-strip a{font-size:12px}
  .in-practice{padding:18px 18px 20px}
}
@media(min-width:901px) and (max-width:1100px){.glance{grid-template-columns:1fr}}

.footer-line a{display:inline-flex;align-items:center;min-height:44px}.footer-line{align-items:center}
.footer-ask{background:none;border:0;padding:0;min-height:44px;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;cursor:pointer}.footer-ask:hover{color:var(--white)}
