@font-face{font-family:StudioSerif;src:url('fonts/StudioSerif.woff2') format('woff2');font-style:normal;font-weight:200 900;font-display:swap}
:root{--paper:#f5f8fc;--surface:#e8eff6;--ink:#203a58;--muted:#596b7e;--accent:#167b86;--line:#c9d6e3;--light:#edf4fa;--display:StudioSerif,'Songti SC',serif;--ease:cubic-bezier(.16,1,.3,1)}
html{scrollbar-color:#6f879d var(--paper)}
h1,h2{font-weight:500;letter-spacing:0}
svg{stroke-width:1.4}
:is(button,a,input,summary):focus-visible{outline-width:2px}
.home-body{--paper:#f5f8fc;--ink:#203a58;--muted:#596b7e;--accent:#167b86;--line:#c9d6e3;--entry-color:#167b86;background:var(--paper);color:var(--ink)}
.home-body[data-entry=tools]{--entry-color:#167f75}
.home-body[data-entry=profile]{--entry-color:#a6533e}
.home-body ::selection{background:var(--accent);color:#fff}
.home-body .skip-link{background:var(--accent);color:#fff}
.home-shell{width:min(1800px,100%);min-height:700px;min-height:max(700px,100svh);margin:auto;padding:0 5.5%;display:grid;grid-template-rows:110px 1fr 86px}
.home-top{display:flex;justify-content:space-between;align-items:center;gap:24px}
.home-sign{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:13px;color:var(--muted)}
.home-sign svg{width:24px;height:24px;stroke:var(--ink);stroke-width:1}
.home-about{display:inline-flex;align-items:center;gap:18px;min-height:44px;font-size:13px;color:var(--muted)}
.home-about svg{width:14px;height:14px;transition:transform 450ms var(--ease)}
.home-about:hover{color:var(--ink)}.home-about:hover svg{transform:translate(2px,-2px)}
.home-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.85fr);align-items:center;gap:9%;padding:20px 0 40px}
.identity{align-self:center;padding-bottom:30px;min-width:0}
.identity-wordmark{font-family:var(--display);font-size:clamp(100px,14.8vw,228px);font-weight:300;line-height:1.24;letter-spacing:-.035em;white-space:nowrap}
.wordmark-last{color:var(--entry-color);transition:color 500ms var(--ease)}
.identity-caption{display:flex;align-items:center;gap:20px;margin-top:38px;font-size:13px;color:var(--muted)}
.caption-line{width:64px;height:1px;background:var(--entry-color);transition:background-color 500ms var(--ease)}
.entry-nav{width:100%;min-width:0}
.entry-link{position:relative;display:block;border-bottom:1px solid var(--line);padding:22px 0 20px;transition:border-color 500ms var(--ease)}
.entry-link:first-child{border-top:1px solid var(--line)}
.entry-main{display:flex;align-items:baseline;gap:18px;transition:transform 600ms var(--ease);padding-right:4px}
.entry-name{font:400 clamp(28px,2.75vw,43px)/1.45 var(--display);white-space:nowrap}
.entry-en{font:400 12px/1.4 SiteDisplay,var(--font);color:var(--muted);margin-left:auto}
.entry-main svg{align-self:center;width:26px;height:26px;stroke-width:1.1;margin-left:20px;transition:transform 600ms var(--ease),color 500ms var(--ease)}
.entry-detail{display:block;max-height:0;overflow:hidden;opacity:0;font-size:12px;line-height:1.8;color:var(--muted);transition:max-height 550ms var(--ease),padding-top 550ms var(--ease),opacity 350ms ease}
.home-body[data-entry=work] .entry-work,.home-body[data-entry=tools] .entry-tools,.home-body[data-entry=profile] .entry-profile{border-bottom-color:var(--entry-color)}
.home-body[data-entry=work] .entry-work .entry-name,.home-body[data-entry=tools] .entry-tools .entry-name,.home-body[data-entry=profile] .entry-profile .entry-name{color:var(--entry-color)}
.home-body[data-entry=work] .entry-work .entry-detail,.home-body[data-entry=tools] .entry-tools .entry-detail,.home-body[data-entry=profile] .entry-profile .entry-detail{max-height:34px;padding-top:8px;opacity:1}
.entry-link:hover .entry-main,.entry-link:focus-visible .entry-main{transform:translateX(7px)}
.entry-link:hover svg,.entry-link:focus-visible svg{transform:rotate(45deg);color:var(--entry-color)}
.entry-link:focus-visible{outline-color:var(--entry-color);outline-offset:8px}
.home-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.home-bottom>span:first-child{font:400 16px/1.5 var(--display);color:var(--ink)}
@media(min-width:901px) and (max-height:760px){
.home-shell{min-height:max(560px,100svh);grid-template-rows:84px 1fr 66px}
.home-main{padding-block:5px 24px}
.entry-link{padding-block:15px}
.identity-wordmark{font-size:clamp(100px,14.8vw,210px)}
.identity-caption{margin-top:26px}
}
@media(max-width:1050px){.home-main{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:7%}.identity-wordmark{font-size:13.8vw}}
@media(max-width:900px){
.home-shell{min-height:100svh;grid-template-rows:86px 1fr 68px;padding-inline:7%}
.home-main{grid-template-columns:1fr;gap:45px;padding:34px 0 52px;align-content:center}
.identity{padding:0}
.identity-wordmark{font-size:clamp(100px,20vw,166px);line-height:1.2;letter-spacing:.015em}
.identity-caption{margin-top:20px;font-size:12px;gap:16px}.caption-line{width:42px}
.entry-nav{max-width:650px}
.entry-link{padding:17px 0}
.entry-name{font-size:32px}
.entry-main svg{width:23px;height:23px}
.entry-en{font-size:12px}
}
@media(max-width:480px){
.home-shell{grid-template-rows:72px 1fr 58px;padding-inline:7%}
.home-top{gap:14px}.home-sign,.home-about{font-size:11px}.home-sign{gap:7px}.home-about{gap:10px}
.home-main{gap:37px;padding:23px 0 34px;align-content:center}
.identity-wordmark{font-size:clamp(76px,23vw,110px);letter-spacing:.005em}
.identity-caption{margin-top:18px;font-size:11px}
.entry-link{padding:15px 0}.entry-name{font-size:29px}.entry-en{font-size:11px}
.entry-main{gap:12px}.entry-main svg{margin-left:12px;width:21px;height:21px}
.entry-detail{font-size:11px}
}
@media(hover:none){.entry-detail{max-height:30px;padding-top:5px;opacity:1}.entry-link:hover .entry-main{transform:none}.entry-link:hover svg{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.entry-link:hover .entry-main,.entry-link:focus-visible .entry-main,.entry-link:hover svg,.entry-link:focus-visible svg,.home-about:hover svg{transform:none}}

.wrap{width:min(1200px,calc(100% - 112px))}
.site-header{height:106px;gap:32px}
.brand{font:500 29px/1.4 var(--display);letter-spacing:.055em}
.desktop-nav{gap:30px;margin:0;font-size:14px}
.desktop-nav a{padding:11px 2px;position:relative}
.desktop-nav a[aria-current=page]::after{content:'';position:absolute;left:2px;right:2px;bottom:5px;height:1px;background:var(--ink)}
.desktop-nav a:hover,.quiet-link:hover{text-decoration:underline}
.mobile-menu{background:var(--surface)}
.mobile-menu a[aria-current=page]{text-decoration:underline}
.quiet-link{min-height:44px;color:var(--accent)}
.button,.search-field input,.article-code pre{border-radius:4px}
.collection-main,.notes-main{padding-block:64px 96px;min-height:70vh}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:64px}
.page-heading h1{font-size:clamp(48px,5.3vw,76px);line-height:1.35;font-weight:400}
.page-heading p{font-size:16px;color:var(--muted);margin-top:20px;max-width:32em;line-height:1.9}

.collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}
.collection-toolbar>p{font-size:13px;color:var(--muted)}
.project{grid-template-columns:280px 1fr 110px;gap:36px;padding:34px 0}
.project-visual,.case-figure a{border-radius:0}
.project-copy h3{font:500 24px/1.65 var(--display)}
.project-description{font-size:15px;margin-top:14px}
.project-stack{margin-top:16px}
.project:hover h3,.note-index-row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.capability-head,.capability-row{gap:48px}
.capability-row{padding-block:36px}
.capability-row:last-child{border-bottom:1px solid var(--line);padding-bottom:36px}
.capability-row h3{font:500 23px/1.5 var(--display)}
.toolbox>h3,.delivery-guide>h3{font:500 24px/1.6 var(--display);margin-bottom:24px}
.tool-entry h4{font-family:SiteDisplay,var(--font)}
.delivery-guide{padding-left:36px}
.delivery-guide li::marker{font-family:SiteDisplay,var(--font)}
.notes-controls{margin-top:0}
.search-field input{min-height:48px;background:transparent}
.notes-status{margin-top:28px;margin-bottom:16px}
.note-index-row{grid-template-columns:1fr 150px;gap:14px 40px;padding:34px 0}
.note-index-row h3{font:500 25px/1.6 var(--display)}
.detail-main{padding-block:36px 96px}
.detail-back{margin-bottom:42px}
.detail-header,.reading-body{max-width:720px}
.reading-body{width:min(100%,720px)}
.detail-header h1{font-size:clamp(30px,3.5vw,48px);line-height:1.5}
.detail-next{min-height:44px}
.detail-next:hover{text-decoration:underline}
.page-exits{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 40px;border-top:1px solid var(--line);padding-block:30px}
.page-exits a{display:flex;align-items:center;gap:30px;min-height:44px;font:400 22px/1.5 var(--display)}
.page-exits a:hover{text-decoration:underline;text-decoration-thickness:1px}
.page-exits svg{width:20px}
.site-footer{min-height:100px}
.footer-brand{font:500 20px/1.5 var(--display)}
.site-footer>a:last-child{display:flex;align-items:center;gap:9px;min-height:44px}
.site-footer svg{width:16px}
@media(max-width:1050px){
.wrap{width:calc(100% - 64px)}
.desktop-nav{gap:23px}
.project{grid-template-columns:210px 1fr;gap:24px}
.project-foot{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;margin-top:-12px}
.project-visual{grid-row:span 2}
.capability-head,.capability-row{gap:26px}
}
@media(max-width:760px){
.wrap{width:calc(100% - 40px)}
.site-header{height:86px;gap:16px}
.brand{font-size:25px}
.collection-main,.notes-main{padding-block:40px 64px}
.page-heading{gap:20px;margin-bottom:40px}
.page-heading h1{font-size:46px}
.page-heading p{font-size:14px;line-height:1.85;margin-top:16px}

.collection-toolbar{align-items:flex-start;flex-wrap:wrap;gap:12px}
.collection-toolbar>p{display:none}
.project{grid-template-columns:1fr;gap:20px;padding:25px 0 32px}
.project-visual{grid-row:auto;aspect-ratio:16/9;width:100%}
.project-copy h3{font-size:24px}
.project-description{font-size:15px}
.project-foot{grid-column:auto;margin-top:0;gap:12px;font-size:12px}
.capability-row:first-child{border-top:1px solid var(--line);padding-top:28px}
.capability-row h3{font-size:23px}
.delivery-guide{padding:30px 0 0}
.toolbox>h3,.delivery-guide>h3{font-size:23px}
.notes-controls{gap:20px;align-items:stretch}
.search-field{width:100%}
.note-index-row{grid-template-columns:1fr;gap:13px;padding-block:27px}
.note-index-row h3{font-size:23px}
.note-index-row>.note-description{font-size:15px}
.detail-main{padding-block:24px 64px}
.detail-back{margin-bottom:30px}
.detail-header h1{font-size:31px}
.page-exits{gap:8px 24px;padding-block:24px}
.page-exits a{font-size:20px;gap:18px}
.site-footer{min-height:90px}
}

.page-heading{padding-bottom:40px;border-bottom:1px solid var(--line)}
@media(max-width:760px){.page-heading{padding-bottom:28px}}