:root{--paper:#f1f1f0;--ink:#101010;--ink-2:#3a3a38;--mute:#8a8a86;--rule:#d6d6d2;--hover-row:#e8e8e5;--danger:#c0392b;--code-accent:#2f3bff;--arch-accent:#38f9d7;--f-label:"IBM Plex Mono", ui-monospace, monospace;--f-body:"Noto Sans TC", system-ui, sans-serif;--f-code:"Azeret Mono", ui-monospace, monospace;--f-arch:"Schibsted Grotesk", system-ui, sans-serif;--accent:var(--code-accent);--accent-text:var(--code-accent);--on-accent:#fff;--display:var(--f-arch)}[data-site=code]{--accent:var(--code-accent);--accent-text:var(--code-accent);--on-accent:#fff;--display:var(--f-code)}[data-site=arch]{--accent:var(--arch-accent);--accent-text:var(--ink);--on-accent:var(--ink);--display:var(--f-arch)}*{box-sizing:border-box}html,body{background:var(--paper);color:var(--ink);margin:0;padding:0}body{font-family:var(--f-body);-webkit-font-smoothing:antialiased;font-weight:300;overflow-x:hidden}a{color:inherit;text-decoration:none}::selection{background:var(--accent);color:var(--on-accent)}input,textarea,button{color:inherit;font-family:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[data-site=arch] :focus-visible{outline-color:var(--ink)}.skip{z-index:100;background:var(--ink);color:var(--paper);font-family:var(--f-label);letter-spacing:.16em;padding:10px 14px;font-size:11px;position:absolute;top:0;left:-9999px}.skip:focus{top:8px;left:8px}.label{font-family:var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-size:11px}.label-sm{font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-size:10px}.display{font-family:var(--display)}.stroke{color:#0000;-webkit-text-stroke:1.4px var(--ink)}.accent{color:var(--accent)}.body-text{color:var(--ink-2);text-wrap:pretty;font-size:16px;line-height:1.9}.h-hero{font-family:var(--display);letter-spacing:-.035em;text-transform:uppercase;margin:0;font-size:clamp(38px,8.4vw,118px);font-weight:500;line-height:.92}.h-page{font-family:var(--display);letter-spacing:-.035em;text-transform:uppercase;margin:0;font-size:clamp(38px,8vw,108px);font-weight:500;line-height:.94}.site{flex-direction:column;min-height:100vh;display:flex}.site main{flex:1}.topbar{z-index:20;background:var(--paper);border-bottom:1px solid var(--rule);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px 28px;display:flex;position:sticky;top:0}.brand{font-family:var(--display);letter-spacing:.04em;font-size:17px;font-weight:500}.brand .slash{color:var(--accent)}.nav{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.nav a{font-family:var(--f-label);letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid #0000;padding-bottom:2px;font-size:11px}.nav a:hover{color:var(--accent-text);border-bottom-color:var(--accent)}.nav a[aria-current=page]{border-bottom-color:var(--accent)}.nav .dash{border:1px solid var(--ink);padding:7px 12px}.nav .dash:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}.metabar{border-bottom:1px solid var(--rule);justify-content:space-between;gap:24px;padding:13px 28px;display:flex}.metabar span:last-child{text-align:right}.metabar a:hover{color:var(--accent-text)}.footer{border-top:1px solid var(--rule);flex-wrap:wrap;justify-content:space-between;gap:20px;padding:24px 28px;display:flex}.footer a:hover{color:var(--accent-text)}.coords{font-family:var(--f-label);letter-spacing:.14em;color:var(--mute);align-items:flex-start;gap:8px;font-size:10px;display:flex}.coords:before{content:"";background:var(--ink);flex:none;width:6px;height:6px;margin-top:4px}.hero{padding:clamp(44px,8vw,104px) 28px 44px}.hero-foot{flex-wrap:wrap;justify-content:space-between;gap:40px;margin-top:clamp(28px,4.5vw,60px);display:flex}.hero-foot p{white-space:pre-line;max-width:560px;margin:0}.hero-intro{flex:320px;max-width:640px}.hero-points{margin:26px 0 0}.hero-points>div{grid-template-columns:84px minmax(0,1fr);align-items:baseline;gap:12px;padding:12px 0;display:grid;position:relative}.hero-points>div:before{content:"";background:var(--rule);transform-origin:0;height:1px;animation:.6s cubic-bezier(.2,.7,.2,1) both draw-line;animation-delay:calc(var(--i,0) * .11s + .12s);position:absolute;top:0;left:0;right:0}.hero-points dd{color:var(--ink-2);text-wrap:pretty;margin:0;font-size:15px;line-height:1.75}.reveal{animation:.55s cubic-bezier(.2,.7,.2,1) both reveal-up;animation-delay:calc(var(--i,0) * .11s + .12s)}@keyframes reveal-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes draw-line{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.brand-sec{border-top:1px solid var(--rule);padding:clamp(48px,7vw,96px) 28px clamp(48px,7vw,88px)}.brand-label{margin-bottom:26px}.brand-block{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 64px;display:flex}.h-brand{font-family:var(--display);letter-spacing:-.03em;text-transform:uppercase;margin:0;font-size:clamp(34px,6vw,84px);font-weight:500;line-height:.96}.brand-block p{flex:0 460px;margin:0}.brand-svcs{background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1px;margin-top:clamp(36px,5vw,64px);display:grid}.brand-svc{background:var(--paper);flex-direction:column;gap:12px;min-height:164px;padding:22px;transition:background .15s;display:flex}.brand-svc:hover,.brand-svc:focus-visible{background:var(--hover-row)}.brand-svc .st{font-family:var(--display);letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(18px,1.7vw,23px);line-height:1.15}.brand-svc:hover .st{color:var(--accent-text)}.brand-svc .sd{color:var(--ink-2);margin-top:auto;font-size:14px;line-height:1.75}.worklist{border-bottom:0;padding:0 28px}.works-heading{margin:0;padding:0 6px 14px;font-weight:400}.worklist-end{border-top:1px solid var(--rule)}.work-row{border-top:1px solid var(--rule);flex-wrap:wrap;align-items:baseline;gap:18px;padding:20px 6px;display:flex;position:relative}.work-row:hover,.work-row:focus-within{background:var(--hover-row)}.work-row .num{font-family:var(--f-label);letter-spacing:.14em;color:var(--mute);width:34px;font-size:11px}.work-row .title{min-width:180px;font-weight:400;font-family:var(--display);letter-spacing:-.025em;text-transform:uppercase;flex:1;margin:0;font-size:clamp(26px,4.6vw,58px);line-height:1}.work-row .title a:after{content:"";position:absolute;inset:0}.work-row .title a:focus-visible{outline:none}.work-row:has(.title a:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}.work-row .type{font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);font-size:11px}[data-site=arch] .work-row .type{border-bottom:1px solid var(--accent)}.work-row .year{font-family:var(--f-label);letter-spacing:.14em;color:var(--mute);font-size:11px}.live{z-index:1;border:1px solid var(--rule);width:30px;height:30px;color:var(--ink);font-family:var(--f-label);flex:none;justify-content:center;align-self:center;align-items:center;font-size:13px;line-height:1;transition:background .15s,border-color .15s,transform .15s,color .15s;display:flex;position:relative}.live:hover,.live:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:translate(2px,-2px)}.empty{border-top:1px solid var(--rule);flex-wrap:wrap;align-items:baseline;gap:18px;padding:56px 6px;display:flex}.empty .bar{background:var(--accent);align-self:center;width:28px;height:8px}.cta{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:24px;padding:clamp(56px,8vw,104px) 28px 40px;display:flex}.cta a{font-family:var(--display);letter-spacing:-.02em;text-transform:uppercase;border-bottom:2px solid var(--accent);font-size:clamp(24px,4.4vw,54px)}.cta a:hover{color:var(--accent-text)}[data-site=arch] .cta a:hover{background:var(--accent)}.work-head{padding:clamp(40px,7vw,88px) 28px 36px}.work-head h1{font-size:clamp(40px,9vw,118px)}.work-sub{flex-wrap:wrap;align-items:center;gap:18px;margin-top:18px;display:flex}.work-sub .tag{font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);font-size:12px}.btn-outline{white-space:nowrap;border:1px solid var(--ink);font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:0 0;flex:none;align-items:center;gap:10px;padding:9px 14px;font-size:11px;display:inline-flex}.btn-outline:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.meta-grid{background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;display:grid}.meta-grid>div{background:var(--paper);padding:20px 22px}.meta-grid .label-sm{margin-bottom:10px}.meta-grid .v{font-size:15px;line-height:1.6}.case{flex-wrap:wrap;gap:44px;padding:clamp(36px,6vw,76px) 28px;display:flex}.case p{flex:1;min-width:min(280px,100%);max-width:620px;margin:0;line-height:1.95}.stack{min-width:200px}.stack .label-sm{margin-bottom:12px}.stack div.item{font-family:var(--f-label);letter-spacing:.1em;border-top:1px solid var(--rule);padding:9px 0;font-size:12px}.frame-wrap{padding:0 28px clamp(44px,6vw,76px)}.frame{border:1px solid var(--ink);background:#fff}.frame-bar{border-bottom:1px solid var(--ink);background:var(--paper);justify-content:space-between;align-items:center;gap:16px;padding:10px 14px;display:flex}.frame-dots{flex:none;gap:6px;display:flex}.frame-dots span{border:1px solid var(--ink);width:8px;height:8px}.frame-dots span:last-child{background:var(--accent);border-color:var(--accent)}.frame-url{text-overflow:ellipsis;white-space:nowrap;text-align:center;min-width:0;font-family:var(--f-label);letter-spacing:.08em;color:var(--ink-2);flex:1;font-size:11px;overflow:hidden}.frame-open{font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;flex:none;font-size:10px}.frame-open:hover{color:var(--accent-text)}.frame iframe{background:#fff;border:none;width:100%;height:min(78vh,820px);display:block}.frame img{width:100%;height:auto;display:block}.frame-note{margin-top:10px}.gallery{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;padding:0 28px clamp(44px,6vw,76px);display:grid}.gallery figure{border:1px solid var(--rule);aspect-ratio:4/3;background:var(--hover-row);margin:0;overflow:hidden}.gallery img{object-fit:cover;width:100%;height:100%;display:block}.next{border-top:1px solid var(--rule);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;padding:30px 28px;display:flex}.next:hover,.next:focus-visible{background:var(--hover-row)}.next .t{font-family:var(--display);text-transform:uppercase;letter-spacing:-.025em;font-size:clamp(24px,4vw,48px)}.about-head{padding:clamp(44px,8vw,104px) 28px 48px}.about-head p{max-width:600px;margin:36px 0 0;line-height:1.95}.timeline{padding:0 28px clamp(44px,6vw,76px)}.timeline .label-sm{margin-bottom:8px}.tl-row{border-top:1px solid #0000;flex-wrap:wrap;align-items:baseline;gap:20px;padding:18px 0;display:flex;position:relative}.tl-row:before{content:"";background:var(--rule);transform-origin:0;height:1px;position:absolute;top:-1px;left:0;right:0}.scroll-reveal:before{transition:transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .12s)}.scroll-reveal>*{transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .12s + var(--d,0s))}.scroll-reveal>:nth-child(2){--d:90ms}.scroll-reveal>:nth-child(3){--d:.18s}@media (prefers-reduced-motion:no-preference){.js .scroll-reveal:not(.is-in):before{transform:scaleX(0)}.js .scroll-reveal:not(.is-in)>*{opacity:0;transform:translateY(16px)}}.tl-row .y{font-family:var(--f-label);letter-spacing:.12em;color:var(--accent-text);width:52px;font-size:12px}[data-site=arch] .tl-row .y{border-bottom:2px solid var(--accent);width:auto;min-width:40px}.tl-row .t{min-width:190px;font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;flex:1;font-size:18px}.tl-row .d{min-width:200px;color:var(--ink-2);flex:1.4;font-size:14px;line-height:1.75}.svc-head{padding:clamp(44px,8vw,100px) 28px 40px}.svc-list{padding:0 28px clamp(24px,4vw,48px)}.svc-row{border-top:1px solid var(--rule);flex-wrap:wrap;gap:28px;padding:26px 0;display:flex}.svc-row .n{font-family:var(--f-label);letter-spacing:.14em;color:var(--mute);width:34px;font-size:11px}.svc-row .main{flex:1;min-width:220px}.svc-row .st{font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:12px;font-size:clamp(20px,3vw,32px)}.svc-row .sd{color:var(--ink-2);max-width:440px;font-size:14px;line-height:1.85}.svc-row .items{min-width:170px}.svc-row .items .label-sm{letter-spacing:.16em;margin-bottom:8px}.svc-row .items div.i{color:var(--ink-2);font-size:13px;line-height:1.9}.svc-row .price{text-align:right;min-width:150px}.svc-row .p{font-family:var(--display);letter-spacing:-.01em;color:var(--accent-text);font-size:20px}[data-site=arch] .svc-row .p{border-bottom:2px solid var(--accent);display:inline-block}.svc-row .tm{font-family:var(--f-label);letter-spacing:.14em;color:var(--mute);margin-top:8px;font-size:10px}.svc-note{font-family:var(--f-label);letter-spacing:.12em;color:var(--mute);padding:0 28px clamp(48px,6vw,80px);font-size:11px;line-height:1.8}.contact-head{padding:clamp(44px,8vw,100px) 28px 28px}.contact-head .coords{margin-top:36px}.contact-cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;padding:0 28px 36px;display:grid}.contact-cards>div{border:1px solid var(--rule);padding:18px}.contact-cards .label-sm{margin-bottom:8px}.contact-cards .mono{font-family:var(--f-label);font-size:15px}.contact-cards a.mono{border-bottom:2px solid var(--accent)}.contact-cards .note{color:var(--ink-2);font-size:14px;line-height:1.7}.form{padding:0 28px clamp(48px,6vw,80px)}.f-row{border-top:1px solid var(--rule);flex-wrap:wrap;align-items:baseline;gap:24px;padding:22px 0;display:flex}.f-row.top{padding:22px 0 8px;display:block}.f-row .label{letter-spacing:.16em;width:230px}.f-row .label .hint{letter-spacing:.1em;text-transform:none}.f-input{min-width:min(220px,100%);font-family:var(--f-label);background:0 0;border:none;flex:1;padding:0;font-size:clamp(16px,2.2vw,22px);line-height:1.6}.f-input:focus{outline:none}.f-row:focus-within{border-top-color:var(--ink)}.f-input::placeholder{color:#b4b4ae}.f-prompt{align-items:flex-start;gap:12px;margin-top:14px;display:flex}.cursor{background:var(--accent);flex:none;width:3px;height:26px;animation:1.1s step-end infinite blink}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}textarea.f-input{resize:vertical}.spec-toggle{border:none;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:left;background:0 0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:18px 0;display:flex}.spec-toggle:hover .label{color:var(--accent-text)}.spec-toggle .mark{font-family:var(--f-label);font-size:16px;line-height:1}.spec-row{border-bottom:1px solid var(--rule);flex-wrap:wrap;align-items:flex-start;gap:20px;padding:20px 0;display:flex}.spec-row .label{letter-spacing:.16em;width:230px}.chips{flex-wrap:wrap;flex:1;gap:8px;min-width:min(220px,100%);display:flex}.chip{white-space:nowrap;font-family:var(--f-label);letter-spacing:.12em;border:1px solid var(--rule);color:var(--ink-2);background:0 0;flex:none;align-items:center;padding:8px 12px;font-size:11px;display:inline-flex}.chip:hover{border-color:var(--ink)}.chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.spec-row .f-input{font-size:18px}.f-submit{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:30px;display:flex}.f-status{font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-size:11px}.f-status.err{color:var(--danger);text-transform:none}.btn-submit{white-space:nowrap;border:1px solid var(--ink);font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;background:0 0;flex:none;padding:17px 26px;font-size:13px}.btn-submit:hover:not(:disabled){background:var(--ink);color:var(--paper)}.btn-submit:disabled{opacity:.5;cursor:wait}.hp{width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}.sent{padding:0 28px clamp(64px,8vw,110px)}.sent>div{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:36px 0}.sent .ok{color:var(--accent-text);margin-bottom:14px}.sent .big{font-family:var(--display);letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(22px,3.4vw,38px)}.sent button{background:0 0;border:none;margin-top:24px;padding:0}.sent button:hover{color:var(--accent-text)}.entry{min-height:100vh;font-family:var(--f-arch);flex-direction:column;display:flex}.entry-top{justify-content:space-between;gap:16px;padding:18px 28px;display:flex}.entry-split{border-top:1px solid var(--rule);flex-wrap:wrap;flex:1;align-items:stretch;display:flex}.entry-half{background:var(--paper);min-width:280px;color:var(--ink);flex-direction:column;flex:1;justify-content:flex-end;gap:14px;padding:44px 28px;transition:background .18s;display:flex}.entry-half+.entry-half{border-left:1px solid var(--rule)}.entry-half.code:hover,.entry-half.code:focus-visible{background:var(--code-accent)}.entry-half.arch:hover,.entry-half.arch:focus-visible{background:var(--arch-accent)}.entry-half:focus-visible{outline:none}.entry-half .domain{font-family:var(--f-label);letter-spacing:.18em;text-transform:uppercase;font-size:11px}.entry-half .name{letter-spacing:-.035em;font-size:clamp(40px,7vw,88px);font-weight:500;line-height:.95}.entry-half .name .slash{color:var(--paper);transition:color .18s}.entry-half:hover .name .slash,.entry-half:focus-visible .name .slash{color:var(--ink)}.entry-half .enter{font-family:var(--f-label);letter-spacing:.14em;font-size:12px}.entry-bar{border-top:1px solid var(--rule);height:8px;display:flex}.entry-bar span{flex:1}.entry-bar span:first-child{background:var(--code-accent)}.entry-bar span:last-child{background:var(--arch-accent)}.entry-foot{letter-spacing:.16em;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:16px 28px;font-size:10px;display:flex}@media (max-width:640px){.entry-half{min-height:42vh}.entry-half+.entry-half{border-left:none;border-top:1px solid var(--rule)}.metabar{flex-direction:column;gap:6px}.metabar span:last-child,.svc-row .price{text-align:left}.f-row .label,.spec-row .label{width:100%}}.admin-hold{background:var(--ink);min-height:100vh;color:var(--paper);flex-direction:column;justify-content:center;padding:32px;display:flex}.admin-hold>div{width:100%;max-width:440px;margin:0 auto}.admin-hold .label,.admin-hold .label-sm{color:#77776f}.admin-hold .brand .slash,.admin-hold a:hover{color:#4d57ff}@media (prefers-reduced-motion:reduce){.cursor,.reveal,.hero-points>div:before{animation:none}*{transition:none!important}}
