:root{--paper:#f7f7fa;--ink:#26232b;--muted:#6c6673;--plum:#703c62;--line:#dedbe2;--white:#fff;--sans:"Trebuchet MS","Microsoft YaHei","PingFang SC",sans-serif;--serif:Georgia,"Times New Roman",serif;color:var(--ink);background:var(--paper);font-family:var(--sans);font-synthesis:none;font-size:16px;line-height:1.7}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:5px}button{color:inherit;cursor:pointer}img{display:block;max-width:100%;height:auto}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--plum);outline-offset:5px}::selection{background:#e4d2e2}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;left:16px;top:-90px;padding:10px 20px;background:white;z-index:50}.skip:focus{top:12px}.header{width:min(1344px,calc(100% - 96px));min-height:100px;margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:24px}.identity{text-decoration:none;font-size:21px;font-weight:700;white-space:nowrap}.identity span{display:block;font-size:11px;letter-spacing:.06em;font-weight:400;color:var(--muted)}.header nav{display:flex;gap:32px;font-size:14px}.header nav a{text-decoration:none;padding:8px 0}.header nav a:hover{color:var(--plum);text-decoration:underline}.showcase{margin-bottom:98px}.stage{display:flex;gap:28px;overflow:auto;padding:8px 0 20px;scroll-snap-type:x mandatory}.stage-card{flex:0 0 64%;scroll-snap-align:center;background:#e8e6eb;overflow:hidden;border-radius:3px}.stage-card img{width:100%;height:100%;object-fit:contain}.js .stage{position:relative;display:block;overflow:hidden;height:clamp(280px,36vw,512px);padding:0}.js .stage-card{position:absolute;left:50%;top:0;width:min(70vw,1000px);height:100%;background:transparent;transition:transform .35s ease,opacity .35s ease}.js .stage-card img{object-fit:cover;border-radius:3px}.js .stage-card[data-slot=current]{transform:translateX(-50%);opacity:1;z-index:2}.js .stage-card[data-slot=prev]{transform:translateX(calc(-150% - 24px)) scale(.88);transform-origin:right center;opacity:.52;z-index:1}.js .stage-card[data-slot=next]{transform:translateX(calc(50% + 24px)) scale(.88);transform-origin:left center;opacity:.52;z-index:1}.js .stage-card[data-slot=hidden]{visibility:hidden;transform:translateX(-50%);opacity:0;pointer-events:none}.stage-caption{width:min(1000px,70vw);margin:auto;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding-top:25px}.stage-title h2{font:400 21px/1.3 var(--serif);margin:0 0 3px}.stage-title p{margin:0;font-size:12px;color:var(--muted)}.stage-controls{display:none;align-items:center;gap:14px}.js .stage-controls{display:flex}.stage-controls>button{border:1px solid var(--line);background:transparent;width:36px;height:36px;border-radius:50%;font-size:25px;line-height:1}.stage-controls>button:hover{background:white}.stage-dots{display:flex}.stage-dots button{width:23px;height:32px;display:grid;place-items:center;padding:0;border:0;background:none}.stage-dots span{width:5px;height:5px;border-radius:50%;background:#b4aeb9}.stage-dots [aria-pressed=true] span{width:7px;height:7px;background:var(--plum)}.text-link{justify-self:end;font-size:13px;color:var(--plum)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.section-heading h2{font-size:22px;font-weight:500;margin:0}.section-heading span{font-size:13px;color:var(--muted)}.work-row{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:42px;align-items:center;border-top:1px solid var(--line);padding:25px 0;text-decoration:none}.work-row:last-child{border-bottom:1px solid var(--line)}.work-row img{width:200px;height:112px;object-fit:cover;border-radius:2px}.work-row h3{font:400 32px/1.2 var(--serif);margin:0 0 4px}.work-row p{font-size:13px;color:var(--muted);margin:0}.open-text{font-size:13px;color:var(--muted);white-space:nowrap}.footer{width:min(1240px,calc(100% - 96px));margin:auto;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:30px 0 40px;color:var(--muted);font-size:12px}.footer a{text-decoration:none}.back-link{display:inline-block;margin:34px 0 44px;color:var(--muted);font-size:13px}.project-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;padding:0 0 44px;scroll-margin-top:28px}.project-category{margin:0 0 17px;color:var(--plum);font-size:13px}.project-intro h1{font:400 clamp(42px,5vw,70px)/1.08 var(--serif);margin:0;overflow-wrap:anywhere}.project-type{font-size:13px;color:var(--muted);margin:24px 0 0}.project-overview{margin:0;font-size:17px;line-height:1.8;max-width:65ch}.facts{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:12px 0 0;padding:0;color:var(--muted);font-size:13px}.project-hero{margin-bottom:70px}.project-hero figcaption{font-size:12px}.media-figure{margin:0;min-width:0}.media-figure img{width:100%;height:auto;max-height:670px;object-fit:contain}.media-figure figcaption{font-size:12px;line-height:1.6;color:var(--muted);margin-top:9px}.image-button{display:block;width:100%;padding:0;border:0;background:#e9e6ed;cursor:zoom-in;overflow:hidden;border-radius:2px}.hero-figure img{max-height:640px}.article-layout{display:grid;grid-template-columns:185px minmax(0,1fr);gap:65px;align-items:start}.contents{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;padding-right:10px}.contents h2{font-size:12px;font-weight:500;margin:0 0 18px;color:var(--plum)}.contents a{display:block;font-size:12px;line-height:1.5;margin-bottom:15px;color:var(--muted);text-decoration:none;overflow-wrap:break-word}.contents a:hover{color:var(--plum);text-decoration:underline}.native-article{min-width:0}.article-section{margin-bottom:84px;scroll-margin-top:28px}.article-section>h2{font:400 34px/1.25 var(--serif);margin:0 0 30px;max-width:34ch}.section-content>p,.prose{max-width:72ch;font-size:17px;line-height:1.85;margin:0 0 24px}.section-content>h3{font-size:18px;margin:30px 0 18px;font-weight:500}.asset-gallery{display:grid;gap:28px;margin:32px 0;align-items:start}.asset-gallery.columns-1{grid-template-columns:minmax(0,1fr)}.asset-gallery.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-gallery.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.asset-gallery img{max-height:540px}.layout-route .section-content{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px;align-items:start}.layout-route .asset-gallery{margin:0}.layout-route .asset-gallery img{max-height:none}.native-list{padding-left:22px;max-width:72ch;font-size:16px;line-height:1.8}.native-list>li{margin:0 0 16px;padding-left:3px}.native-steps{list-style:none;padding:0;margin:22px 0 28px;font-size:16px;line-height:1.8}.native-steps>li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:0 0 20px;margin-bottom:18px;border-bottom:1px solid var(--line)}.step-number{font-size:13px;color:var(--plum);padding-top:3px}.native-steps>li:last-child{border-bottom:0;margin-bottom:0}.layout-route .native-steps{margin:0}.layout-route .step-number{font-size:12px}.native-diagram{margin:34px 0}.native-diagram>figcaption,.board-diagram>figcaption{font-size:15px;color:var(--plum);margin-bottom:18px}.flow-nodes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.flow-nodes>li{border-block:2px solid var(--line);padding:20px 12px 22px 0}.flow-nodes h3{font-size:17px;line-height:1.4;font-weight:500;margin:0 0 14px}.flow-nodes p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.table-wrap{overflow:auto;margin:28px 0 36px;border-bottom:1px solid var(--line)}table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7;text-align:left}caption{text-align:left;font-size:16px;color:var(--plum);padding:0 0 16px}th,td{padding:15px 18px 15px 0;border-top:1px solid var(--line);vertical-align:top}th{font-weight:500}thead th{font-size:12px;color:var(--muted)}tbody th{min-width:110px}tbody td{min-width:90px}.native-timeline{list-style:none;padding:0;margin:0}.native-timeline>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:30px;border-top:1px solid var(--line);padding:25px 0 38px}.native-timeline h3{font-size:19px;color:var(--plum);font-weight:500;margin:0 0 16px}.native-timeline p{font-size:16px;line-height:1.85;margin:0}.native-timeline .media-figure img{max-height:360px}.story{border-left:3px solid #d6b8d0;padding:4px 0 4px 28px;margin:0 0 32px;max-width:72ch}.story p{font:400 20px/1.8 var(--serif);margin:0 0 28px}.story p:last-child{margin-bottom:0}.phase-list{display:grid;gap:25px;margin:28px 0 34px}.phase-list>section{border-left:2px solid var(--line);padding:3px 0 4px 25px;max-width:72ch}.phase-list h3{font-size:19px;font-weight:500;color:var(--plum);line-height:1.4;margin:0 0 14px}.phase-list p,.phase-list ul{font-size:16px;line-height:1.8;margin:0}.phase-list ul{padding-left:20px;margin-top:18px}.phase-list li{padding-bottom:12px}.board-diagram{margin:32px 0;padding:25px;background:#f0edf3}.vessel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,80px);max-width:520px;gap:10px;margin:0 auto 25px}.body-part{display:grid;place-items:center;background:white;border:1px solid #cfc6d5;font-size:14px;text-align:center;padding:10px}.part-0{grid-area:1/2}.part-1{grid-area:2/1}.part-2{grid-area:2/2}.part-3{grid-area:2/3}.part-4{grid-area:3/2}.board-extras{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;padding:0;margin:0;font-size:12px;color:var(--muted)}.evaluation>h3{font-size:18px;font-weight:500;color:var(--plum);margin:0 0 28px}.evaluation>section{margin-bottom:35px}.evaluation h4{font-size:18px;font-weight:500;line-height:1.6;margin:0 0 16px;max-width:65ch}.evaluation p{font-size:16px;line-height:1.85;max-width:72ch;margin:0 0 18px}.video-section{margin-bottom:80px;scroll-margin-top:28px}.video-section h2{font-size:25px;font-weight:500;margin:0 0 24px}.video-shell{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}.video-shell>img{width:100%;height:100%;object-fit:cover;opacity:.7}.video-shell>button{position:absolute;inset:0;margin:auto;width:190px;height:64px;border:1px solid #fff8;border-radius:3px;background:#1b1721eb;color:white}.video-shell button span{margin-right:12px}.video-shell iframe{width:100%;height:100%;border:0}.video-section>p{font-size:13px;margin:15px 0}.video-note{margin-left:20px;color:var(--muted)}.project-pagination{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;margin:100px 0 80px;padding-top:35px;border-top:1px solid var(--line)}.project-pagination a{display:flex;flex-direction:column;align-items:start;gap:10px;text-decoration:none}.project-pagination a:last-child{text-align:right;align-items:end}.project-pagination span,.pagination-home{font-size:12px;color:var(--muted)}.project-pagination strong{font:400 25px/1.25 var(--serif)}.project-pagination a:hover{color:var(--plum)}.artwork-dialog{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-width:1600px;max-height:none;padding:0;border:0;border-radius:3px;background:var(--paper);color:var(--ink)}.artwork-dialog::backdrop{background:#151018e8}.artwork-dialog[open]{display:flex;flex-direction:column}.artwork-bar{display:flex;align-items:center;gap:12px;padding:13px 20px;font-size:13px;flex:none}.artwork-bar p{flex:1;min-width:0;overflow-wrap:anywhere;margin:0}.artwork-bar button{padding:7px 12px;border:1px solid var(--line);border-radius:2px;background:white;white-space:nowrap}.artwork-canvas{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center;align-items:center;background:#151217}.artwork-canvas img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}.artwork-canvas.zoomed{display:block}.artwork-canvas.zoomed img{max-width:none;max-height:none;width:auto;height:auto;cursor:zoom-out}.modal-open{overflow:hidden}.not-found{min-height:65vh;padding:100px 0}.not-found h1{font-size:36px;font-weight:500}.not-found>p{color:var(--plum)}
@media(min-width:1600px){.js .stage{height:490px}}
@media(max-width:1100px){.wrap,.header,.footer{width:calc(100% - 56px)}.work-row{grid-template-columns:160px minmax(0,1fr) auto;gap:28px}.work-row img{width:160px;height:94px}.work-row h3{font-size:28px}.article-layout{grid-template-columns:150px minmax(0,1fr);gap:34px}.project-intro{gap:45px}.project-overview{font-size:16px}.article-section>h2{font-size:30px}.layout-route .section-content{display:block}.layout-route .asset-gallery{margin-bottom:30px}.flow-nodes{gap:14px}.flow-nodes h3{font-size:15px}.stage-caption{grid-template-columns:1fr auto}.stage-controls{grid-column:2;grid-row:1/3}.text-link{grid-column:1;justify-self:start}.stage-title h2{font-size:18px}}
@media(max-width:850px){.article-layout{display:block}.contents{position:static;max-height:none;padding:0 0 28px;margin-bottom:50px;border-bottom:1px solid var(--line)}.contents nav{display:flex;gap:12px 24px;flex-wrap:wrap}.contents h2{width:100%;margin:0 0 8px}.contents a{margin:0}.native-article{max-width:760px;margin-inline:auto}.native-timeline>li{gap:25px}.article-section{margin-bottom:65px}.asset-gallery.columns-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wrap,.header,.footer{width:calc(100% - 40px)}.header{min-height:88px}.identity{font-size:18px}.identity span{font-size:9px}.header nav{gap:22px;font-size:12px}.js .stage{height:clamp(205px,58vw,340px)}.js .stage-card{width:84vw}.js .stage-card[data-slot=prev]{transform:translateX(calc(-150% - 12px)) scale(.9)}.js .stage-card[data-slot=next]{transform:translateX(calc(50% + 12px)) scale(.9)}.stage-caption{width:calc(100% - 40px);gap:12px;padding-top:20px;grid-template-columns:minmax(0,1fr) auto}.stage-title h2{font-size:18px}.stage-title p{font-size:11px}.stage-controls{gap:4px}.stage-controls>button{width:30px;height:30px}.stage-dots button{width:18px}.text-link{font-size:12px}.showcase{margin-bottom:65px}.section-heading{margin-bottom:20px}.section-heading h2{font-size:20px}.work-row{grid-template-columns:100px minmax(0,1fr);gap:18px;padding:22px 0}.work-row img{width:100px;height:76px}.work-row h3{font-size:23px}.work-row p{font-size:11px;margin-top:7px}.open-text{display:none}.footer{font-size:11px;padding-bottom:30px}.back-link{margin:20px 0 32px}.project-intro{display:block;padding-bottom:30px}.project-intro h1{font-size:45px;overflow-wrap:normal}.project-category{font-size:12px;margin-bottom:14px}.project-type{font-size:12px;margin-top:20px}.project-overview{font-size:15px;margin-top:28px;line-height:1.85}.project-hero{margin-bottom:42px}.contents{margin-bottom:40px;padding-bottom:24px}.contents nav{gap:12px 18px}.contents a{font-size:11px}.article-section>h2{font-size:28px;margin-bottom:24px}.section-content>p,.prose{font-size:16px;line-height:1.85;margin-bottom:22px}.asset-gallery{gap:20px;margin:25px 0}.asset-gallery.columns-2,.asset-gallery.columns-3{grid-template-columns:minmax(0,1fr)}.media-figure figcaption{font-size:11px}.media-figure img{max-height:520px}.native-steps{font-size:15px}.native-steps>li{grid-template-columns:29px minmax(0,1fr);gap:11px;padding-bottom:17px;margin-bottom:15px}.native-list{font-size:15px}.flow-nodes{grid-template-columns:minmax(0,1fr);gap:0}.flow-nodes>li{border-bottom:0;padding:20px 0}.flow-nodes>li:last-child{border-bottom:2px solid var(--line)}.flow-nodes h3{font-size:17px}.flow-nodes p{font-size:14px}.native-timeline>li{grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:30px}.native-timeline p{font-size:15px}.native-timeline h3{font-size:18px}.table-wrap{margin:24px 0 30px}table{font-size:13px}caption{font-size:15px}th,td{padding:12px 12px 12px 0}tbody th{min-width:85px}tbody td{min-width:70px}.story{padding-left:20px}.story p{font-size:18px;line-height:1.85}.phase-list>section{padding-left:20px}.phase-list h3{font-size:18px}.phase-list p,.phase-list ul,.evaluation p{font-size:15px}.evaluation h4{font-size:17px}.board-diagram{padding:18px 12px}.vessel-grid{gap:7px;grid-template-rows:repeat(3,64px)}.body-part{font-size:11px;padding:5px}.board-extras{font-size:11px;gap:10px 16px}.video-section{margin-bottom:55px}.video-section h2{font-size:22px}.video-shell>button{font-size:12px;width:160px;height:50px}.video-note{font-size:11px;margin-left:12px}.project-pagination{grid-template-columns:1fr 1fr;gap:20px;margin:65px 0}.project-pagination strong{font-size:21px}.project-pagination .pagination-home{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:15px}.artwork-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px)}.artwork-bar{padding:12px;gap:8px;font-size:11px}.artwork-bar button{padding:6px 8px;font-size:11px}}
@media(max-width:350px){.stage-caption{grid-template-columns:1fr}.stage-controls{grid-column:1;grid-row:3;justify-self:start}.text-link{grid-row:2}.project-intro h1{font-size:39px}.work-row h3{font-size:21px}.work-row{grid-template-columns:90px minmax(0,1fr);gap:14px}.work-row img{width:90px;height:70px}}

/* The complete supplied introduction precedes every project on all screens. */
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: center;
  padding: 56px 0 82px;
  scroll-margin-top: 28px;
}
.home-intro-copy { min-width: 0; }
.home-intro h1 {
  margin: 0 0 28px;
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .08em;
}
.home-intro-text { max-width: 40em; }
.home-intro-text p { margin: 0 0 9px; font-size: 16px; line-height: 1.95; }
.home-intro-text p:first-child { margin-bottom: 18px; font-size: 20px; }
.home-intro-text p:last-child { margin-top: 17px; color: var(--plum); }
.intro-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--plum);
  text-decoration-thickness: 1px;
}
.home-portrait { justify-self: center; width: 100%; max-width: 330px; margin: 0; }
.home-portrait img { width: 100%; height: auto; }
.works { padding-bottom: 100px; }

/* Feedback follows an interaction; the text and images are visible on entry. */
.work-row { transition: background-color .14s ease; }
.work-row h3 {
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: color .18s ease, background-size .18s ease;
}
.work-row:is(:focus-visible, :active) h3 { color: var(--plum); background-size: 100% 1px; }
.work-row:active { background-color: #eee9f1; }
.stage-controls { gap: 8px; }
.stage-controls > button { width: 44px; height: 44px; }
.stage-dots button { width: 24px; height: 44px; }
.stage-controls > button, .artwork-bar button, .video-shell > button {
  transition: transform .14s ease, background-color .14s ease;
}
.stage-controls > button:active, .artwork-bar button:active, .video-shell > button:active {
  transform: scale(.94);
}
@media (hover: hover) {
  .work-row:hover h3 { color: var(--plum); background-size: 100% 1px; }
  .work-row:hover .open-text { color: var(--plum); }
}
@media (max-width: 850px) {
  .home-intro { grid-template-columns: minmax(0, 1.7fr) minmax(180px, .8fr); gap: 36px; }
  .home-intro-text p { font-size: 15px; }
  .home-portrait { max-width: 240px; }
}
@media (max-width: 600px) {
  .home-intro { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 0 48px; }
  .home-intro h1 { margin-bottom: 24px; font-size: 44px; }
  .home-intro-text p { font-size: 15px; line-height: 1.9; }
  .home-intro-text p:first-child { font-size: 18px; }
  .intro-link { margin-top: 12px; }
  .home-portrait { max-width: 180px; }
  .works { padding-bottom: 65px; }
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}