:root{color-scheme:only light;--surface:#fff;--ink:#38443e;--muted:#48564d;--line:#dedede}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--surface);color:var(--ink);font:16px/1.65 'Helvetica Neue',Helvetica,Arial,sans-serif;isolation:isolate}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
a:focus-visible,summary:focus-visible{outline:2px solid #38443e;outline-offset:5px}
.skip{position:fixed;top:-80px;left:20px;z-index:10;padding:12px;background:white}.skip:focus{top:10px}
.atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--surface)}
#fog-canvas{position:absolute;inset:-18px;width:calc(100% + 36px);height:calc(100% + 36px);z-index:2;pointer-events:none;filter:blur(17px)}
/* Native cursor: movement is independent of JavaScript and canvas rendering. */
@media(pointer:fine){
  html,body{cursor:url("cursor-ring.svg") 28 28,auto}
  :root a,:root button,:root summary{cursor:url("cursor-ring.svg") 28 28,pointer}
}
#particles-js{position:relative;z-index:1}
#particles-js,#particles-js canvas{display:block;width:100%;height:100%}
header,main,footer{position:relative;z-index:1}
header{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:25px 5%;background:transparent}
header::before{content:"";position:absolute;inset:0 0 -160px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 52% 85% at 12% 0%,rgba(205,218,225,.68),transparent 100%),radial-gradient(ellipse 48% 75% at 76% 4%,rgba(216,226,231,.56),transparent 100%),radial-gradient(ellipse 28% 55% at 46% 17%,rgba(228,235,239,.37),transparent 100%),linear-gradient(to bottom,rgba(223,232,237,.32),rgba(230,237,240,.12) 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.98) 24%,rgba(0,0,0,.71) 50%,rgba(0,0,0,.28) 78%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.98) 24%,rgba(0,0,0,.71) 50%,rgba(0,0,0,.28) 78%,transparent 100%)}
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{display:block;width:152px;height:auto}
.primary-nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:clamp(18px,2.5vw,42px);margin-left:auto}
.primary-nav a{font-size:14px;line-height:1.3;white-space:nowrap}
.lang-switch{display:flex;align-items:center;gap:13px;flex:none;padding-left:23px;border-left:1px solid var(--line)}
.lang-switch a{font-size:12px;line-height:1.5;color:#48564d;letter-spacing:.05em}
.lang-switch a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
body:lang(zh-Hant){font-family:'Noto Sans CJK TC','Microsoft JhengHei','PingFang TC','Heiti TC',sans-serif;line-height:1.75}
body:lang(zh-Hant) .hero h1{font-family:'Noto Serif CJK TC','Songti TC','PMingLiU',serif;letter-spacing:.04em;line-height:1.35}
.hero{padding:0 5%;min-height:min(740px,calc(100svh - 102px));display:flex;flex-direction:column}
.hero-layout{width:100%;max-width:1400px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:7%;padding:90px 0 105px;flex:1}
.hero-message{max-width:720px}
.eyebrow,.section-label,.hero-aside{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,3.8vw,50px);line-height:1.22;font-weight:400;letter-spacing:.018em;margin:32px 0}
.hero-message p{max-width:570px;margin:0;color:#46534a;font-size:clamp(17px,1.45vw,20px);line-height:1.75}
.hero-intro span{display:block}.hero-intro span+span{margin-top:.45em}
.text-link{display:inline-block;margin-top:34px;font-size:14px;text-decoration:underline;text-underline-offset:6px}
.hero-aside{display:flex;flex-direction:column;gap:0;align-self:center;border-top:1px solid #bfbfbf;letter-spacing:.025em}
.hero-aside span{padding:20px 0;border-bottom:1px solid var(--line)}
.chinese{font-size:14px;letter-spacing:.03em}
.section{padding:95px 5%;display:grid;grid-template-columns:28% minmax(0,72%);border-top:1px solid var(--line)}
.section-label{padding-top:5px;line-height:1.6}
.section h2,.contact h2{font-size:clamp(27px,2.4vw,34px);font-weight:300;line-height:1.25;letter-spacing:.018em;margin:0 0 32px}
.studio-columns{max-width:720px}.studio-columns p{margin:0 0 20px;line-height:1.85;color:#48564d}
.practice-list article{display:flex;align-items:baseline;gap:26px;padding:27px 0;border-top:1px solid var(--line);scroll-margin-top:110px}
.practice-list article>span:first-child{font-size:12px;color:#48564d}
.practice-list article>div{flex:1}.practice-list h3{font-size:21px;line-height:1.4;font-weight:300;letter-spacing:.018em;margin:0 0 10px}
.practice-list p{max-width:560px;margin:0;color:#48564d;line-height:1.8}
.discipline{font-family:serif;font-size:27px;color:#48564d}
.project-list{position:relative;padding-left:34px}.project-list::before{content:"";position:absolute;left:7px;top:18px;bottom:20px;width:2px;background:linear-gradient(#b4c1c7,#cdd5d8 62%,#e0e4e5)}
.project-list details{position:relative;border-top:1px solid var(--line)}.project-list details::before{content:"";position:absolute;left:-32px;top:37px;width:12px;height:12px;border:2px solid #9cabb1;border-radius:50%;background:#fff;z-index:1}.project-list details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:30px 0}summary::-webkit-details-marker{display:none}
.timeline-phase{align-self:flex-start;padding-top:6px;min-width:116px;font-size:12px;line-height:1.4;color:#48564d}.project-title{font-size:21px;line-height:1.4;letter-spacing:.018em;font-weight:300;flex:1}
.project-title small{display:block;margin-top:8px;color:#48564d;font-size:14px;line-height:1.7;letter-spacing:0}
.plus{font-size:20px;font-weight:300;transition:transform .2s}details[open] .plus{transform:rotate(45deg)}
.project-copy{max-width:710px;padding:0 15px 25px 40px}.project-copy p{margin:0 0 15px;color:#48564d;line-height:1.85}
.project-copy.featured{max-width:710px}
.book-follow{display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:7px 0;color:#496457;font-size:14px;text-decoration:underline;text-underline-offset:5px}.book-follow svg{width:19px;height:19px;flex:none}
.contact{padding:85px 5% 30px;display:grid;grid-template-columns:28% minmax(0,72%);border-top:1px solid var(--line)}
.contact .section-label{grid-column:1;grid-row:1}.contact h2,.contact .email,.social-links,.contact-bottom{grid-column:2}
.email{justify-self:start;font-size:16px;text-decoration:underline;text-underline-offset:5px}.email span{margin-left:6px;font-size:13px}
.social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(182,197,205,.52);border-radius:14px;background:rgba(237,243,246,.38);backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 20px rgba(81,105,119,.07);color:#405a4d;transition:background .2s,transform .2s}
.social-links a:hover{background:rgba(224,235,241,.7);transform:translateY(-2px);text-decoration:none}.social-links svg{display:block;width:23px;height:23px;flex:none}
.contact-bottom{display:flex;justify-content:space-between;gap:24px;margin:60px 0 35px;font-size:14px;color:#48564d}
footer{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:0 5%;padding:28px 0;border-top:1px solid var(--line);font-size:12px;color:#48564d}footer .logo img{width:125px}
.legal-nav{display:flex;gap:18px;flex-wrap:wrap}.legal-nav a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.section,.contact{grid-template-columns:1fr;gap:24px}.contact .section-label,.contact h2,.contact .email,.social-links,.contact-bottom{grid-column:1}.contact .section-label{margin-bottom:4px}.hero-layout{grid-template-columns:minmax(0,1fr) 180px;gap:4%}}
@media(max-width:650px){html{scroll-padding-top:120px}header{padding:19px 6% 15px;flex-wrap:wrap;gap:17px}.logo img{width:125px}.lang-switch{order:2;margin-left:auto;padding-left:0;border-left:0}.primary-nav{order:3;width:100%;margin-left:0;justify-content:space-between;gap:10px 16px;padding-top:13px;border-top:1px solid var(--line)}.primary-nav a{font-size:13px}.hero{padding:0 6%;min-height:600px}.hero-layout{grid-template-columns:1fr;gap:60px;padding:85px 0 70px}.hero h1{font-size:clamp(31px,7vw,39px);margin:23px 0}.hero-aside{display:grid;grid-template-columns:repeat(3,1fr);align-self:auto;gap:14px;font-size:11px}.hero-aside span{padding:13px 0}.section{padding:65px 6%;gap:25px}.section h2{font-size:28px}.practice-list article{gap:17px}.practice-list h3{font-size:20px}.project-title{font-size:19px}summary{gap:12px;flex-wrap:wrap}.project-title{min-width:65%}.plus{margin-left:auto}.project-copy,.project-copy.featured{padding-left:25px;padding-right:0}.project-copy.featured{display:block}.contact{padding:65px 6% 10px}.contact-bottom{margin-top:55px;flex-direction:column}footer{margin:0 6%;flex-wrap:wrap;align-items:flex-start}footer>span:last-child{width:100%}}
@media(max-width:390px){.primary-nav{gap:9px}.primary-nav a{font-size:12px}.hero-aside{display:none}}
@media(max-width:650px){body:lang(zh-Hant) .hero h1{font-size:clamp(28px,6.8vw,38px)}}
@media(max-width:650px){.timeline-phase{width:100%;padding:0}.project-list details::before{top:35px}.project-copy,.project-copy.featured{padding-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Keep the fog present at the very top edge and give the book copy a quieter scale. */
header::before{top:-32px;background-color:rgba(226,234,238,.18)}
.book-description p{font-size:15px;line-height:1.75}
@media(max-width:650px){header::before{top:-24px}.book-description p{font-size:15px}}

body:lang(zh-Hant) .hero h1{letter-spacing:.05em}
@media(max-width:650px){.hero h1{letter-spacing:.012em}}

body:lang(zh-Hant) :is(.section h2,.contact h2,.practice-list h3,.project-title){letter-spacing:.05em}
@media(max-width:650px){:is(.section h2,.contact h2,.practice-list h3,.project-title){letter-spacing:.012em}}

/* Adapt the complete scene together, including the canvas fog. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){color-scheme:only dark;--surface:#171d1b;--ink:#edf3ee;--muted:#c5d2c9;--line:#62716a}
  :root:not([data-theme="light"]) :is(.lang-switch a,.hero-message p,.studio-columns p,.practice-list article>span:first-child,.practice-list p,.discipline,.timeline-phase,.project-title small,.project-copy p,.contact-bottom,footer){color:var(--muted)}
  :root:not([data-theme="light"]) a:focus-visible,summary:focus-visible{outline-color:var(--ink)}
  :root:not([data-theme="light"]) .skip{background:var(--surface)}
  :root:not([data-theme="light"]) #fog-canvas{filter:blur(17px) brightness(.28)}
  :root:not([data-theme="light"]) #particles-js{filter:invert(1)}
  :root:not([data-theme="light"]) header::before{background:radial-gradient(ellipse at 30% 0%,rgba(67,88,80,.5),transparent 75%)}
  :root:not([data-theme="light"]) .hero-aside{border-top-color:var(--line)}
  :root:not([data-theme="light"]) .project-list::before{background:var(--line)}
  :root:not([data-theme="light"]) .project-list details::before{background:var(--surface);border-color:var(--muted)}
  :root:not([data-theme="light"]) .book-follow{color:#c4e0cf}
  :root:not([data-theme="light"]) .social-links a{background:rgba(32,46,39,.8);border-color:var(--line);color:var(--ink);box-shadow:none}
  :root:not([data-theme="light"]) .social-links a:hover{background:#34483d}
}

  :root[data-theme="dark"]{color-scheme:only dark;--surface:#171d1b;--ink:#edf3ee;--muted:#c5d2c9;--line:#62716a}
  :root[data-theme="dark"] :is(.lang-switch a,.hero-message p,.studio-columns p,.practice-list article>span:first-child,.practice-list p,.discipline,.timeline-phase,.project-title small,.project-copy p,.contact-bottom,footer){color:var(--muted)}
  :root[data-theme="dark"] a:focus-visible,summary:focus-visible{outline-color:var(--ink)}
  :root[data-theme="dark"] .skip{background:var(--surface)}
  :root[data-theme="dark"] #fog-canvas{filter:blur(17px) brightness(.28)}
  :root[data-theme="dark"] #particles-js{filter:invert(1)}
  :root[data-theme="dark"] header::before{background:radial-gradient(ellipse at 30% 0%,rgba(67,88,80,.5),transparent 75%)}
  :root[data-theme="dark"] .hero-aside{border-top-color:var(--line)}
  :root[data-theme="dark"] .project-list::before{background:var(--line)}
  :root[data-theme="dark"] .project-list details::before{background:var(--surface);border-color:var(--muted)}
  :root[data-theme="dark"] .book-follow{color:#c4e0cf}
  :root[data-theme="dark"] .social-links a{background:rgba(32,46,39,.8);border-color:var(--line);color:var(--ink);box-shadow:none}
  :root[data-theme="dark"] .social-links a:hover{background:#34483d}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;padding:14px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.theme-toggle[hidden]{display:none}
.theme-toggle svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.theme-toggle:hover{border-color:var(--ink)}
.theme-sun{display:none}
:root[data-theme="dark"] .theme-sun{display:block}
:root[data-theme="dark"] .theme-moon{display:none}

/* Transparent padding enlarges real targets without intercepting nearby links. */
.logo{min-height:44px}
.primary-nav{gap:clamp(8px,1.5vw,24px)}
.primary-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;padding:14px 12px;font-size:18px}
.lang-switch{gap:4px;padding-left:16px}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;padding:14px 10px;font-size:16px}
:is(.text-link,.book-follow,.email,.contact-bottom>a,.legal-nav a){display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding:10px 8px}
.text-link,.book-follow{font-size:16px}
.email{font-size:17px}
.legal-nav a{font-size:16px;min-height:52px;padding:12px}
.social-links a{width:48px;height:48px}
.social-links svg{width:25px;height:25px}
summary{min-height:48px}
@media(max-width:1100px){header{flex-wrap:wrap;gap:16px}.primary-nav{order:3;width:100%;justify-content:space-between}.lang-switch{margin-left:auto}}
@media(max-width:650px){.primary-nav{gap:4px 8px;justify-content:flex-start}.primary-nav a{font-size:17px}.lang-switch{padding-left:0}.legal-nav{gap:8px}.contact-bottom>a{align-self:flex-start}}