:root { --site-signature: linxiao; --paper:#e9e4da; --paper-2:#dcd5c8; --ink:#2f302c; --muted:#716f67; --wood:#8a6748; --moss:#5f6651; --rule:rgba(47,48,44,.32); --serif:"Songti SC","STSong",Iowan Old Style,serif; --sans:"Avenir Next","PingFang SC",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.8 var(--serif); } body::after { content:""; position:fixed; inset:0; z-index:10; pointer-events:none; opacity:.05; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { display:block; max-width:100%; } a { color:inherit; text-underline-offset:.25em; } a:focus-visible { outline:2px solid var(--wood); outline-offset:4px; }.skip-link { position:fixed; top:-5rem; left:1rem; z-index:99; padding:.7rem 1rem; color:var(--paper); background:var(--ink); }.skip-link:focus { top:1rem; }
.site-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:2rem; padding:1.4rem 3vw; border-bottom:1px solid var(--ink); font:500 .68rem/1.45 var(--sans); letter-spacing:.12em; text-transform:uppercase; }.name { font:500 1.1rem/1 var(--serif); text-decoration:none; }.name span { margin-left:.7rem; font:500 .65rem/1 var(--sans); letter-spacing:.13em; }.site-head nav { display:flex; gap:2rem; }.site-head nav a { text-decoration:none; }.site-head nav a[aria-current="page"]::after,.site-head nav a:hover::after { content:" ·"; color:var(--wood); }.site-head > p { justify-self:end; margin:0; text-align:right; }
main { overflow:hidden; } main > section,.case-page > header,.case-page > figure,.case-next { width:min(1320px,92vw); margin-inline:auto; }.hero { min-height:82svh; display:grid; grid-template-columns:.28fr 1fr; grid-template-rows:1fr auto; gap:2rem 5rem; align-items:center; padding:8rem 0 3rem; }.index-no,.section-head,.project-meta dl,.materials,figcaption,.case-hero dl,.plan-module header,.section-diagram header,.program-grid header,.detail-drawing header,footer { font:500 .66rem/1.5 var(--sans); letter-spacing:.09em; text-transform:uppercase; }.index-no { align-self:start; color:var(--wood); }.hero h1 { max-width:18ch; margin:0; font:400 clamp(3.3rem,6.6vw,7rem)/1.1 var(--serif); letter-spacing:-.035em; }.hero h1 em,.about-hero h1 em { color:var(--wood); font-style:normal; }.hero-note { grid-column:2; display:grid; grid-template-columns:1fr .45fr; gap:8rem; align-items:end; padding-top:1rem; border-top:1px solid var(--ink); }.hero-note p { margin:0; }.hero-note p:first-child { max-width:38rem; font-size:1.15rem; }.hero-note p:last-child { color:var(--muted); font:500 .67rem/1.6 var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.projects { padding:8rem 0; }.section-head { display:flex; justify-content:space-between; align-items:end; padding-bottom:.7rem; border-bottom:1px solid var(--ink); }.section-head h2,.section-head p { margin:0; font:inherit; }.section-head p { color:var(--muted); }.project { display:grid; grid-template-columns:1.5fr .55fr; gap:clamp(2rem,5vw,6rem); padding:5rem 0 11rem; }.project--secondary { width:84%; grid-template-columns:.8fr .55fr; margin-left:auto; }.project--compact { width:72%; grid-template-columns:.7fr .5fr; }.project-photo { overflow:hidden; background:var(--paper-2); text-decoration:none; }.project-photo img { width:100%; aspect-ratio:3/2; object-fit:cover; opacity:.92; transform:scale(1.003); transition:transform 1.2s ease,opacity .8s ease; }.project--secondary .project-photo img { aspect-ratio:4/5; }.project--compact .project-photo img { aspect-ratio:5/4; }.project-photo:hover img { transform:scale(1.018); opacity:1; }.project-meta { display:flex; flex-direction:column; border-top:1px solid var(--ink); }.project-index { margin:.6rem 0 auto; color:var(--wood); font:500 .68rem/1 var(--sans); }.project h3 { margin:4rem 0 1.5rem; font:400 clamp(2.8rem,5vw,5.5rem)/1 var(--serif); }.project h3 a { text-decoration:none; }.project-meta dl { display:grid; grid-template-columns:1fr 1fr; margin:0; }.project-meta dl div { padding:.65rem 0; border-top:1px solid var(--rule); }.project-meta dt { color:var(--muted); }.project-meta dd { margin:0; }.project-meta > p:not(.project-index,.materials) { color:var(--muted); }.materials { margin-top:1.5rem; color:var(--moss); }
.approach { display:grid; grid-template-columns:.25fr .9fr .7fr; gap:clamp(2rem,5vw,7rem); padding:8rem 0; border-top:1px solid var(--ink); }.approach h2,.about-page h2,.case-text h2,.closing h2 { margin:0 0 2rem; font:400 clamp(2.5rem,4.7vw,5rem)/1.15 var(--serif); }.lead { font-size:clamp(1.35rem,2.4vw,2.2rem); line-height:1.55; }.approach ol { list-style:none; margin:0; padding:0; }.approach li { display:flex; gap:1.5rem; padding:.8rem 0; border-bottom:1px solid var(--rule); }.approach li span { color:var(--wood); font:500 .64rem/2 var(--sans); }.timeline { padding:8rem 0; }.timeline > div { display:grid; grid-template-columns:.45fr .85fr 1fr; gap:2rem; padding:1rem 0; border-bottom:1px solid var(--rule); }.timeline time,.timeline strong { font:500 .7rem/1.5 var(--sans); letter-spacing:.06em; text-transform:uppercase; }.timeline p { margin:0; color:var(--muted); }.contact { margin-bottom:8rem; padding:clamp(3rem,7vw,7rem); background:var(--ink); color:var(--paper); }.contact > p { font:500 .66rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; }.contact h2 { margin:4rem 0; font:400 clamp(3rem,5.8vw,6rem)/1.15 var(--serif); }.contact a { display:block; padding-top:1rem; border-top:1px solid var(--paper); text-align:right; font-size:1.1rem; }
footer { display:grid; grid-template-columns:1fr 1fr auto; gap:2rem; padding:1.4rem 3vw; border-top:1px solid var(--ink); } footer p { margin:0; }
.about-page,.case-page { padding-top:clamp(6rem,10vw,10rem); }.about-hero h1 { max-width:16ch; margin:1rem 0 7rem; font:400 clamp(3.3rem,6.5vw,7rem)/1.08 var(--serif); }.intro { display:grid; grid-template-columns:1fr .7fr; gap:9rem; border-top:1px solid var(--ink); }.intro p { margin-top:1rem; }.studio-note { display:grid; grid-template-columns:.3fr 1fr; gap:6rem; padding:10rem 0; }.studio-note > div { max-width:50rem; }.experience { padding:4rem 0 9rem; }.experience article { display:grid; grid-template-columns:.4fr .9fr 1.1fr; gap:3rem; padding:1.5rem 0; border-bottom:1px solid var(--rule); }.experience article time { color:var(--wood); font:500 .65rem/1.5 var(--sans); }.experience h3,.experience p { margin:0; }.experience h3 { font:400 1.45rem/1.3 var(--serif); }.experience p { color:var(--muted); }.scope { display:grid; grid-template-columns:.7fr 1.2fr; gap:8rem; padding:8rem 0; border-top:1px solid var(--ink); }.scope ul { list-style:none; margin:0; padding:0; }.scope li { display:grid; grid-template-columns:3rem 1fr; padding:1rem 0; border-bottom:1px solid var(--rule); }.scope li span { color:var(--wood); font:500 .65rem/1.7 var(--sans); }.material-ledger { display:grid; grid-template-columns:repeat(4,1fr); padding:8rem 0; }.material-ledger .section-head { grid-column:1/-1; margin-bottom:2rem; }.swatch { min-height:18rem; display:flex; flex-direction:column; padding:1rem; border:1px solid var(--ink); border-right:0; }.swatch:last-child { border-right:1px solid; }.swatch span { font:500 .62rem/1 var(--sans); }.swatch strong { margin-top:auto; font-size:1.2rem; }.swatch p { margin-bottom:0; color:var(--muted); }.swatch::before { content:""; display:block; width:3.5rem; height:3.5rem; margin-bottom:auto; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(47,48,44,.2); }.stone::before { background:radial-gradient(circle at 30% 30%,#a8a69c,#6d7068); }.timber::before { background:repeating-linear-gradient(90deg,#92704f 0 5px,#77573c 6px 8px); }.plaster::before { background:#d8d1c3; }.tile::before { background:radial-gradient(circle at 35% 30%,#627365,#334a3e); }
.case-hero h1 { margin:1rem 0 2rem; font:400 clamp(4rem,10vw,10rem)/1 var(--serif); letter-spacing:-.045em; }.subtitle { max-width:30ch; margin-bottom:6rem; font-size:clamp(1.3rem,2.2vw,2rem); }.case-hero dl { display:grid; grid-template-columns:repeat(5,1fr); margin:0; border-top:1px solid var(--ink); }.case-hero dl div { padding:1rem 0; }.case-hero dt { color:var(--muted); }.case-hero dd { margin:.25rem 0 0; }.case-cover { padding:5rem 0 10rem; }.case-cover img { width:100%; aspect-ratio:16/10; object-fit:cover; }.case-cover--bookstore { width:min(1100px,86vw)!important; }.case-cover--bookstore img { aspect-ratio:4/3; } figcaption { display:flex; gap:2rem; margin-top:.7rem; color:var(--muted); } figcaption span { color:var(--wood); }
.case-text,.closing { display:grid; grid-template-columns:.35fr 1fr; gap:clamp(3rem,8vw,10rem); padding:7rem 0; border-top:1px solid var(--ink); }.case-text > div,.closing > div { max-width:52rem; }.case-text h2,.closing h2 { font-size:clamp(2.6rem,4.8vw,5rem); }.case-text p:not(.lead) { color:var(--muted); }.case-text aside { display:flex; flex-wrap:wrap; gap:1rem; margin-top:3rem; padding:1rem 0; border-block:1px solid var(--rule); }.case-text aside span { padding:.2rem .5rem; background:var(--paper-2); font:500 .62rem/1.5 var(--sans); }
.plan-module,.section-diagram,.program-grid,.detail-drawing { padding:2rem 0 10rem; }.plan-module header,.section-diagram header,.program-grid header,.detail-drawing header { display:flex; justify-content:space-between; border-bottom:1px solid var(--ink); }.plan-module h2,.section-diagram h2,.program-grid h2,.detail-drawing h2 { margin:0 0 .7rem; font:inherit; }.plan-module header p,.section-diagram header p,.program-grid header p,.detail-drawing header p { margin:0; }.plan { position:relative; width:min(800px,100%); aspect-ratio:16/10; margin:4rem auto; border:1px solid var(--ink); background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:2rem 2rem; }.room { position:absolute; display:grid; place-items:center; border:5px double var(--ink); background:var(--paper); font-style:normal; }.room-a { inset:8% 48% 55% 7%; }.room-b { inset:62% 60% 8% 7%; }.room-c { inset:10% 7% 48% 68%; }.courtyard { position:absolute; left:45%; top:48%; font-weight:400; }.tree { position:absolute; left:53%; top:51%; display:grid; place-items:center; width:3rem; aspect-ratio:1; border:1px solid var(--moss); border-radius:50%; color:var(--moss); }.route { position:absolute; left:23%; top:50%; width:50%; height:20%; border:2px dashed var(--wood); border-top:0; transform:skewX(-18deg); }.scale { width:min(800px,100%); display:flex; align-items:end; margin:auto; font:500 .6rem/1 var(--sans); }.scale i { width:7rem; height:.5rem; margin:0 .5rem; border-inline:1px solid; border-bottom:2px solid; }
.material-strip { display:grid; grid-template-columns:repeat(4,1fr); padding:5rem 0 10rem; }.material { min-height:17rem; display:flex; flex-direction:column; padding:1rem; border:1px solid var(--ink); border-right:0; }.material:last-child { border-right:1px solid; }.material span { font:500 .62rem/1 var(--sans); }.material strong { margin-top:auto; font-size:1.15rem; }.material p { margin-bottom:0; color:var(--muted); }.material::before { content:""; display:block; height:4rem; margin:1rem 0 auto; }.material.stone::before { background:radial-gradient(circle,#8b8d85 1px,transparent 2px),#b5b2a8; background-size:9px 9px; }.material.timber::before,.material.ash::before { background:repeating-linear-gradient(90deg,#92704f 0 3px,#b49470 4px 8px); }.material.lime::before { background:#d8d1c3; }.material.metal::before { background:#393a37; }.material.acoustic::before { background:radial-gradient(circle,#555 1px,transparent 1.5px),#c7bba5; background-size:8px 8px; }.material.cork::before { background:radial-gradient(circle,#8b6949 1px,transparent 2px),#a98966; background-size:7px 7px; }
.section-line { position:relative; min-height:28rem; margin-top:3rem; border-bottom:2px solid var(--ink); overflow:hidden; }.section-line .roof { position:absolute; left:12%; bottom:36%; width:35%; height:16%; border:2px solid var(--ink); border-bottom:0; transform:skewX(-18deg); }.section-line .wall { position:absolute; left:16%; bottom:0; width:27%; height:36%; border-inline:4px double var(--ink); }.tree-line { position:absolute; right:16%; bottom:0; width:7rem; height:18rem; border:1px solid var(--moss); border-radius:55% 45% 35% 50%; }.sun { position:absolute; right:4%; width:48%; height:1px; transform-origin:right; background:var(--wood); color:var(--wood); font:500 .6rem/1 var(--sans); }.sun.summer { top:20%; transform:rotate(-30deg); }.sun.winter { top:45%; transform:rotate(-12deg); }.section-line span { position:relative; top:24rem; margin:0 8%; font:500 .62rem/1 var(--sans); }
.program-grid { display:grid; grid-template-columns:repeat(4,1fr); }.program-grid header { grid-column:1/-1; margin-bottom:2rem; }.program-grid > div { min-height:18rem; display:flex; flex-direction:column; padding:1rem; border:1px solid var(--ink); border-right:0; }.program-grid > div:last-child { border-right:1px solid; }.program-grid span { color:var(--wood); font:500 .62rem/1 var(--sans); }.program-grid strong { margin-top:1rem; font:400 1.5rem/1 var(--serif); }.program-grid p { margin-top:auto; color:var(--muted); }.layout { display:block; flex:1; margin:1.5rem 0; background:repeating-linear-gradient(90deg,transparent 0 18%,var(--ink) 19% 21%); opacity:.45; }.layout.family { border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 12%,var(--ink) 13% 15%); }.layout.talk { background:repeating-linear-gradient(0deg,transparent 0 20%,var(--ink) 21% 23%); }.layout.dinner { background:linear-gradient(90deg,transparent 10%,var(--ink) 11% 42%,transparent 43% 57%,var(--ink) 58% 89%,transparent 90%); }
.detail-drawing { display:grid; grid-template-columns:1.3fr .7fr; gap:5rem; }.detail-drawing header { grid-column:1/-1; }.shelf { position:relative; min-height:25rem; margin-top:2rem; border:1px solid var(--ink); }.shelf b { position:absolute; left:15%; right:15%; height:1rem; border:1px solid var(--ink); }.shelf b:nth-of-type(1){top:18%}.shelf b:nth-of-type(2){top:48%}.shelf b:nth-of-type(3){top:78%}.shelf i { position:absolute; bottom:2%; width:1.5rem; aspect-ratio:1; border:1px solid;border-radius:50%; }.shelf i:nth-of-type(1){left:20%}.shelf i:nth-of-type(2){right:20%}.dim { position:absolute; color:var(--wood); font:500 .62rem/1 var(--sans); }.dim-w { left:15%; right:15%; bottom:-2rem; text-align:center; border-top:1px solid; }.dim-h { top:18%; bottom:18%; left:6%; writing-mode:vertical-rl; border-right:1px solid; }.detail-drawing ol { align-self:center; list-style:none; padding:0; }.detail-drawing li { display:grid; grid-template-columns:2.5rem 1fr; padding:1rem 0; border-bottom:1px solid var(--rule); }.detail-drawing li span { color:var(--wood); font:500 .62rem/1.8 var(--sans); }
.closing { margin-top:3rem; padding-block:8rem; background:var(--paper-2); box-shadow:0 0 0 100vmax var(--paper-2); clip-path:inset(0 -100vmax); }.case-next { display:flex; justify-content:space-between; align-items:end; padding:7rem 0; }.case-next a:last-child { display:grid; text-align:right; font:400 clamp(2rem,4vw,4rem)/1 var(--serif); }.case-next small { color:var(--wood); font:500 .62rem/1 var(--sans); }
.js .reveal { opacity:0; transform:translateY(1.5rem); transition:opacity 1s ease,transform 1s ease; }.js .reveal.is-visible { opacity:1; transform:none; }
@media(max-width:850px){.hero { grid-template-columns:1fr; }.hero .index-no { display:none; }.hero-note { grid-column:1; }.project,.project--secondary,.project--compact { width:100%; grid-template-columns:1fr; }.project--secondary .project-photo img { aspect-ratio:3/2; }.project-meta { min-height:25rem; }.approach,.studio-note,.scope,.case-text,.closing { grid-template-columns:1fr; gap:2rem; }.intro { grid-template-columns:1fr; gap:2rem; }.experience article { grid-template-columns:.3fr 1fr; }.experience article p { grid-column:2; }.material-ledger,.material-strip,.program-grid { grid-template-columns:1fr 1fr; }.material-ledger .section-head,.program-grid header { grid-column:1/-1; }.swatch:nth-child(3),.material:nth-child(2),.program-grid > div:nth-child(3){border-right:1px solid}.case-hero dl { grid-template-columns:1fr 1fr; }.detail-drawing { grid-template-columns:1fr; }.detail-drawing header { grid-column:1; }}
@media(max-width:560px){.site-head { grid-template-columns:1fr auto; padding:1rem 5vw; }.site-head > p { display:none; }.site-head nav { gap:1rem; }.hero { min-height:76svh; padding-top:5rem; }.hero h1 { font-size:3.3rem; }.hero-note { grid-template-columns:1fr; gap:2rem; }.projects,.timeline { padding-block:5rem; }.project { padding:3rem 0 6rem; }.project-meta { min-height:22rem; }.approach,.about-page .studio-note,.scope { padding-block:5rem; }.timeline > div { grid-template-columns:1fr; gap:.3rem; }.contact { margin-bottom:4rem; }.about-hero h1,.case-hero h1 { font-size:3.6rem; }.about-page,.case-page { padding-top:5rem; }.case-hero dl { grid-template-columns:1fr; }.case-cover { padding-bottom:6rem; }.case-text,.closing { padding-block:5rem; }.plan-module,.section-diagram,.program-grid,.detail-drawing { padding-bottom:6rem; }.material-ledger,.material-strip,.program-grid { grid-template-columns:1fr; }.material-ledger .section-head,.program-grid header { grid-column:1; }.swatch,.swatch:last-child,.material,.material:last-child,.program-grid > div,.program-grid > div:last-child { min-height:13rem; border-right:1px solid; border-bottom:0; }.swatch:last-child,.material:last-child,.program-grid > div:last-child { border-bottom:1px solid; }.section-line span { margin:0 4%; }.case-next a:last-child { font-size:1.7rem; } footer { grid-template-columns:1fr auto; } footer p:nth-child(2){display:none;} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}