@font-face { font-family: Manrope; src: url('/assets/fonts/manrope-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('/assets/fonts/manrope-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: Manrope; src: url('/assets/fonts/manrope-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url('/assets/fonts/manrope-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --bg: #ffffff;
  --surface: #f4f6f8;
  --text: #182230;
  --text-secondary: #526071;
  --link: #2455a4;
  --action: #2455a4;
  --action-hover: #193f7d;
  --action-active: #182230;
  --on-action: #ffffff;
  --focus: #2455a4;
  --focus-gap: #ffffff;
  --border-subtle: #dee4eb;
  --border-control: #526071;
  --s1: .25rem; --s2: .5rem; --s3: .75rem;
  --s4: 1rem; --s6: 1.5rem; --s8: 2rem;
  --s12: 3rem; --s16: 4rem; --s24: 6rem;
  --width-work: 75rem;
  --width-read: 45rem;
  --project-min: 22.5rem;
  --gutter: 1.25rem;
  --section-gap: var(--s12);
  --radius-control: .5rem;
  --radius-cover: .75rem;
  --radius-image: 0;
  --shadow: none;
  --border-width: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --target: 2.75rem;
  --icon: 1.25rem;
  --cover-ratio: 4 / 3;
  --duration: 120ms;
  --ease: ease-out;
  --size-display: 2rem; --lh-display: 1.3;
  --size-title: 1.625rem;
  --size-heading: 1.25rem;
  --size-body: 1rem;
  --size-caption: .9375rem;
  --size-ui: 1rem;
  --weight-normal: 400; --weight-ui: 500; --weight-emphasis: 600;
  --lh-title: 1.4; --lh-heading: 1.5;
  --lh-body: 1.8; --lh-caption: 1.65; --lh-ui: 1.5;
  --tracking: 0;
}
@media (min-width: 48rem) {
  :root {
    --gutter: 2rem; --section-gap: var(--s16);
    --size-display: 3rem; --lh-display: 1.25;
    --size-title: 2rem; --size-heading: 1.5rem;
    --size-body: 1.125rem; --lh-heading: 1.45;
  }
}
@media (min-width: 80rem) { :root { --gutter: 3rem; } }
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--size-body); line-height: var(--lh-body); letter-spacing: var(--tracking); }
.work, .reading { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
.work { max-width: var(--width-work); }
.reading { max-width: var(--width-read); }
/* reading 若嵌套在 work 内，不重复扣除页面留白。 */
.work .reading { width: 100%; }
.display { font-size: var(--size-display); line-height: var(--lh-display); font-weight: var(--weight-emphasis); }
.title { font-size: var(--size-title); line-height: var(--lh-title); font-weight: var(--weight-emphasis); }
.heading { font-size: var(--size-heading); line-height: var(--lh-heading); font-weight: var(--weight-emphasis); }
.caption, figcaption { font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-secondary); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3, p, a { overflow-wrap: anywhere; }
p + p { margin-block-start: var(--s4); }
.section { padding-block: var(--section-gap); }
.stack > * + * { margin-block-start: var(--s4); }
.projects { display: grid; gap: var(--s8); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--project-min)), 1fr)); }
.projects > * { min-width: 0; }
/* 外层最多宽 1200px，所以本参数组合最多两列。 */
img { display: block; max-width: 100%; height: auto; }
.cover { aspect-ratio: var(--cover-ratio); width: 100%; object-fit: contain; background: var(--surface); border-radius: var(--radius-cover); }
figcaption { margin-block-start: var(--s2); }
a { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
a:hover { color: var(--action-hover); text-decoration-thickness: .12em; }
.button, .nav-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); padding: var(--s2) var(--s4); font-size: var(--size-ui); line-height: var(--lh-ui); font-weight: var(--weight-ui); }
.button { border: var(--border-width) solid var(--action); border-radius: var(--radius-control); background: var(--action); color: var(--on-action); text-decoration: none; transition: background-color var(--duration) var(--ease); }
.button:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--on-action); }
.button:active { background: var(--action-active); border-color: var(--action-active); }
.button-secondary { background: var(--bg); color: var(--link); border-color: var(--border-control); }
.button-secondary:hover { background: var(--surface); color: var(--action-hover); border-color: var(--border-control); }
.button-secondary:active { background: var(--border-subtle); color: var(--text); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.project-entry { display: block; min-height: var(--target); color: var(--text); text-decoration: none; }
.project-entry:hover .heading { text-decoration: underline; }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-offset) var(--focus-gap); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

header{padding-block:var(--s6);border-bottom:var(--border-width) solid var(--border-subtle)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}.brand{font-weight:600;color:var(--text);text-decoration:none}.brand span{font-size:var(--size-caption);font-weight:400;margin-left:var(--s3);color:var(--text-secondary)}.nav a{text-decoration:none}.nav a:hover{text-decoration:underline}.intro{padding-block:var(--s16) var(--s12)}.intro .display{max-width:18em}.intro p{margin-top:var(--s6);max-width:35em;color:var(--text-secondary)}.intro>a{display:inline-block;margin-top:var(--s6)}.eyebrow{color:var(--link);font-size:var(--size-caption);margin-bottom:var(--s4)}.section-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s8);gap:var(--s4)}.project-entry .heading{margin-top:var(--s6)}.project-entry p{margin-top:var(--s3)}.project-entry .caption{margin-top:var(--s3)}.entry-cta{display:inline-block;color:var(--link);text-decoration:underline;margin-top:var(--s4)}.projects{row-gap:var(--s12)}.about{border-top:var(--border-width) solid var(--border-subtle);margin-top:var(--s16)}footer{border-top:var(--border-width) solid var(--border-subtle);padding-block:var(--s8)}.footer-inner{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}.case-head{padding-top:var(--s8);padding-bottom:var(--s12)}.back{display:inline-block;margin-bottom:var(--s8)}.case-head h1{margin-bottom:var(--s4)}.lead{color:var(--text-secondary)}dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);margin-top:var(--s8)}dt{font-size:var(--size-caption);color:var(--text-secondary)}dd{margin:0}.case-section{padding-block:var(--s12)}.case-section h2{margin-bottom:var(--s6)}.case-section .work{margin-top:var(--s8)}.figures{display:grid;gap:var(--s8)}.figures figure{min-width:0}.figures img{width:100%;object-fit:contain}.figures .caption a{margin-left:var(--s3)}.toc{border-block:var(--border-width) solid var(--border-subtle);padding-block:var(--s6);margin-block:var(--s8)}.toc ul{padding-left:var(--s6);margin:0;display:flex;flex-wrap:wrap;column-gap:var(--s8)}.skip{position:absolute;left:var(--s4);top:var(--s4);transform:translateY(-200%);background:white;padding:var(--s3);z-index:5}.skip:focus{transform:none}.case-end{border-top:var(--border-width) solid var(--border-subtle);padding-block:var(--s12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s6)}@media(max-width:47.99rem){.intro{padding-block:var(--s12) var(--s8)}dl{grid-template-columns:1fr}.brand span{display:block;margin-left:0}.case-section{padding-block:var(--s8)}}@media(min-width:60rem){.figures.pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

.projects{grid-template-columns:1fr}@media(min-width:52rem){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
.intro .display{max-width:20em}