@font-face {
  font-family:Anton;
  src:url("assets/fonts/anton.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap
}
:root {
  --bg:#111214;
  --surface:#1c1d22;
  --ink:#ededf0;
  --muted:#a7a8b2;
  --accent:#9698ff;
  --line:rgba(237,237,240,.16);
  --paper:#e5e5ec;
  --body:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.7 var(--body);
  -webkit-font-smoothing:antialiased
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23777777' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")
}
::selection {
  background:var(--accent);
  color:var(--bg)
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
img {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  display:block
}
h1,h2,h3,h4,p,figure {
  margin:0
}
h1,h2,h3,h4 {
  text-wrap:balance
}
h1,h2 {
  letter-spacing:-.045em
}
p {
  text-wrap:pretty
}
[hidden] {
  display:none!important
}
.skip {
  position:fixed;
  inset:10px auto auto 20px;
  z-index:150;
  padding:12px 20px;
  color:var(--bg);
  background:var(--accent);
  transform:translateY(-160%)
}
.skip:focus {
  transform:none
}
.site-header {
  max-width:1440px;
  margin:auto;
  padding:18px 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  gap:24px;
  position:relative;
  z-index:20
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.04em
}
.brand-symbol {
  font-size:39px;
  line-height:1;
  color:var(--accent)
}
.site-header nav {
  display:flex;
  gap:8px
}
.site-header nav a {
  min-height:44px;
  min-width:64px;
  padding:9px 18px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:14px
}
.site-header nav a[aria-current] {
  border-color:var(--line);
  background:var(--surface)
}
.site-header nav a:hover {
  color:var(--accent)
}
main,footer {
  max-width:1440px;
  margin-inline:auto;
  padding-inline:38px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-height:44px;
  font-size:14px
}
.text-link:hover {
  color:var(--accent)
}
.primary {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  min-height:52px;
  padding:12px 24px;
  border-radius:999px;
  background:var(--accent);
  color:var(--bg);
  font-size:14px;
  font-weight:650
}
.primary:hover {
  background:#e0ff77
}
.primary span {
  font-size:20px
}
.meta {
  color:var(--muted);
  font-size:12px;
  letter-spacing:.07em
}
.back {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  font-size:14px;
  color:var(--muted)
}
.back:hover {
  color:var(--accent)
}
/* The signature is typeset artwork;
 all project pictures below are existing real screenshots. */
.portfolio-intro {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  gap:64px;
  padding-block:46px 86px
}
.hero-signature {
  position:relative
}
.hello-mark {
  display:block;
  font:400 96px/.9 Anton,Impact,sans-serif;
  color:var(--accent);
  letter-spacing:-.035em
}
.hero-name {
  position:relative;
  display:flex;
  align-items:baseline;
  gap:1px;
  width:max-content;
  max-width:100%;
  font:400 clamp(200px,24vw,340px)/.86 Anton,Impact,sans-serif;
  letter-spacing:-.05em;
  margin-top:10px;
  perspective:1100px
}
.hero-name>span {
  display:block;
  transform-origin:center bottom
}
.hero-spark {
  position:absolute;
  inset:12% -42% auto auto;
  width:clamp(56px,7vw,100px);
  height:auto;
  color:var(--accent);
  transform:rotate(12deg);
  transition:transform 500ms var(--ease)
}
.hero-signature:hover .hero-spark {
  transform:rotate(102deg)
}
.portfolio-intro h1 {
  font-size:clamp(28px,3vw,42px);
  font-weight:650;
  line-height:1.3
}
.intro-copy {
  max-width:590px;
  padding-top:60px
}
.intro-role {
  margin-bottom:12px;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted)
}
.intro-description {
  max-width:480px;
  margin-top:24px;
  font-size:15px;
  line-height:1.9;
  color:var(--muted)
}
.intro-proof { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin:18px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.intro-proof strong { color:var(--accent); font-size:25px; font-weight:650; }
.intro-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:26px;
  margin-top:30px
}
.work-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px
}
.work-heading h2,.section-intro h2 {
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.18;
  font-weight:650
}
.work-heading>.text-link {
  flex-shrink:0
}
.selected-work {
  padding-bottom:78px
}
.gallery-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}
.gallery-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.gallery-filters button,.filters button {
  min-height:44px;
  padding:8px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  transition:background 180ms ease,color 180ms ease
}
.gallery-filters button[aria-pressed=true],.filters button[aria-pressed=true] {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg)
}
.gallery-filters button:hover,.filters button:hover {
  border-color:var(--accent)
}
.gallery-count {
  font-size:13px;
  color:var(--muted);
  white-space:nowrap
}
.poster-gallery {
  columns:3;
  column-gap:22px
}
.gallery-project {
  break-inside:avoid-column;
  margin-bottom:32px;
  padding-top:3px;
  perspective:1100px
}
.project-image {
  position:relative;
  display:block;
  isolation:isolate;
  overflow:hidden;
  aspect-ratio:4/5;
  border-radius:4px;
  color:var(--poster-ink,#20221b);
  background:var(--poster-bg,var(--paper));
  border:1px solid rgba(240,240,229,.07)
}
.project-image::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.08)
}
.poster-preview {
  position:absolute;
  z-index:2;
  width:91%;
  height:58%;
  inset:auto auto -2% 4.5%;
  overflow:hidden;
  border-radius:3px;
  background:rgba(240,240,229,.65);
  box-shadow:0 24px 34px -18px rgba(21,23,19,.35);
  transform:rotate(-4deg);
  transition:transform 500ms var(--ease)
}
.poster-preview img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center
}
.project-image:hover .poster-preview {
  transform:rotate(-2deg) translateY(-7px)
}
.selected-caption {
  padding:20px 1px 0
}
.selected-caption h3 {
  font-size:21px;
  font-weight:550;
  line-height:1.45;
  letter-spacing:-.025em
}
.selected-caption h3 a {
  min-height:44px;
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:18px
}
.selected-caption h3 span {
  color:var(--muted);
  font-size:20px;
  flex-shrink:0;
  transition:transform 300ms var(--ease)
}
.gallery-project:hover .selected-caption h3 span {
  color:var(--accent);
  transform:translate(3px,-3px)
}
.project-summary {
  margin-top:12px;
  color:var(--muted);
  font-size:14px;
  line-height:1.85
}
.selected-caption .text-link {
  margin-top:10px
}
/* Individual covers derive their visual character from the project type. */
.poster-charity {
  --poster-bg:#e2edc6;
  --poster-ink:#27391d
}
.poster-charity .project-image {
  aspect-ratio:4/4.7
}
.poster-charity .poster-preview {
  height:54%;
  bottom:0;
  transform:rotate(4deg);
  background:transparent
}
.poster-legal {
  --poster-bg:#e9e4d8;
  --poster-ink:#3f302a
}
.poster-legal .project-image {
  aspect-ratio:4/5.35
}
.poster-legal .poster-preview {
  inset:0;
  width:100%;
  height:100%;
  transform:none;
  background:var(--poster-bg)
}
.poster-legal .poster-preview img {
  object-fit:cover;
  object-position:48% top
}
.poster-legal .project-image:hover .poster-preview {
  transform:scale(1.025)
}
.poster-inventory {
  --poster-bg:#bed0ef;
  --poster-ink:#152d58
}
.poster-inventory .project-image {
  aspect-ratio:4/4.4
}
.poster-inventory .poster-preview {
  height:47%;
  width:114%;
  left:-7%;
  bottom:0;
  transform:rotate(-7deg)
}
.poster-office {
  --poster-bg:#f2a475;
  --poster-ink:#582714
}
.poster-office .project-image {
  aspect-ratio:4/4
}
.office-art {
  position:absolute;
  bottom:8px;
  left:5%;
  width:90%;
  height:39%;
  color:var(--poster-ink)
}
.poster-water {
  --poster-bg:#c6aa84;
  --poster-ink:#302821
}
.poster-water .project-image {
  aspect-ratio:4/5
}
.poster-water .poster-preview {
  inset:0;
  height:100%;
  width:100%;
  transform:none;
  background:#332d25
}
.poster-water .poster-preview::after {
  content:"";
  position:absolute;
  inset:36px 0 0;
  background:linear-gradient(180deg,rgba(21,23,19,.65),transparent 48%);
  pointer-events:none
}
.poster-water .project-image:hover .poster-preview {
  transform:scale(1.025)
}
.poster-water .poster-preview img {
  object-fit:cover;
  object-position:65% center
}
.poster-support {
  --poster-bg:#d4f74b;
  --poster-ink:#263515
}
.poster-support .project-image {
  aspect-ratio:4/5.5
}
.poster-support .poster-preview {
  width:55%;
  height:72%;
  left:41%;
  bottom:-6%;
  transform:rotate(7deg);
  background:transparent
}
.poster-support .poster-preview img {
  object-fit:contain;
  object-position:top
}
.poster-furniture {
  --poster-bg:#d4d0c5;
  --poster-ink:#342f28
}
.poster-scan {
  --poster-bg:#df806a;
  --poster-ink:#432a25
}
.poster-weave {
  --poster-bg:#a9c5b5;
  --poster-ink:#1f3f35
}
.poster-rove {
  --poster-bg:#c9b8dc;
  --poster-ink:#433555
}
.supplemental-project {
  margin-top:14px
}
.home-about {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:60px;
  padding-block:70px 90px;
  border-top:1px solid var(--line)
}
.home-about h2 {
  font-size:clamp(36px,4vw,60px);
  line-height:1.15
}
.home-personality {
  font-size:clamp(22px,2.7vw,36px);
  line-height:1.55;
  letter-spacing:-.025em;
  max-width:650px
}
.about-links {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  margin-top:30px
}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:32px;
  border-top:1px solid var(--line);
  font-size:13px
}
footer>a {
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.footer-brand {
  display:flex;
  flex-direction:column;
  align-items:start;
  line-height:1.5;
  font-size:20px;
  font-weight:600
}
.footer-brand span {
  font-size:9px;
  font-weight:400;
  letter-spacing:.09em;
  color:var(--muted);
  margin-top:4px
}
footer>a:hover {
  color:var(--accent)
}
/* The same type and color system follows visitors into the archive and detail pages. */
.about-main,.records-main {
  padding-top:64px
}
.about-opening {
  padding-block:0 70px;
  border-bottom:1px solid var(--line)
}
.about-opening h1 {
  font-size:clamp(58px,9vw,130px);
  line-height:1;
  letter-spacing:-.06em
}
.about-opening-intro {
  max-width:700px;
  font-size:clamp(22px,3vw,36px);
  line-height:1.6;
  margin-top:34px;
  color:var(--accent)
}
.experience-section,.client-section {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:70px;
  padding-block:60px;
  border-bottom:1px solid var(--line)
}
.experience-section h2,.client-section h2,.contact-section h2 {
  font-size:clamp(30px,3.3vw,48px);
  line-height:1.25
}
.experience-section p {
  color:var(--muted);
  margin-bottom:20px;
  max-width:650px
}
.client-section>div>p {
  margin-top:18px;
  color:var(--muted);
  font-size:13px
}
.client-list {
  list-style:none;
  padding:0;
  margin:0
}
.client-list li+li {
  border-top:1px solid var(--line)
}
.client-list a {
  display:grid;
  grid-template-columns:1fr 20px;
  gap:12px;
  padding:22px 0
}
.client-list li:first-child a {
  padding-top:0
}
.client-list a>span:first-child {
  font-size:20px;
  font-weight:550;
  letter-spacing:-.025em
}
.client-summary {
  grid-column:1;
  font-size:14px;
  color:var(--muted)
}
.client-list a>span:last-child {
  grid-column:2;
  grid-row:1/3;
  align-self:center
}
.client-list a:hover>span:first-child {
  color:var(--accent)
}
.contact-section {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:70px;
  padding-block:70px
}
.contact-details {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:32px
}
.contact-method+.contact-method {
  margin-top:28px
}
.contact-method p {
  color:var(--muted);
  font-size:13px
}
.contact-method .text-link {
  font-size:clamp(16px,1.7vw,24px);
  word-break:break-word;
  min-height:52px
}
.wechat-contact {
  padding:16px 16px 20px;
  background:var(--paper);
  color:var(--bg);
  max-width:240px;
  border-radius:4px;
  transform:none
}
.wechat-contact h3 {
  font-size:14px;
  margin-bottom:12px;
  font-weight:550
}
.wechat-contact img {
  width:100%;
  height:auto
}
.wechat-contact a:focus-visible {
  outline-color:var(--bg)
}
.about-ending {
  padding-block:48px 80px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.about-ending p {
  font-size:clamp(30px,4vw,52px);
  line-height:1.25;
  letter-spacing:-.035em
}
.records-heading {
  margin-bottom:55px
}
.records-heading h1 {
  font-size:clamp(44px,6.5vw,94px);
  line-height:1.1
}
.records-heading p {
  margin-top:22px;
  color:var(--muted)
}
.archive-disclosure>summary {
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px;
  font-size:20px;
  border-block:1px solid var(--line);
  padding-block:20px;
  list-style:none
}
.archive-disclosure>summary::-webkit-details-marker {
  display:none
}
.archive-tools {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  padding-block:28px
}
.filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:740px
}
.search-field {
  min-width:220px;
  max-width:330px;
  flex:1
}
.search-field label {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px
}
.search-field input {
  width:100%;
  min-height:46px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  border-radius:4px;
  padding:10px 14px
}
.search-field input::placeholder {
  color:var(--muted)
}
.result-count {
  font-size:13px;
  color:var(--muted);
  margin-bottom:24px
}
.archive-list {
  list-style:none;
  padding:0;
  margin:0 0 80px
}
.archive-list li {
  border-top:1px solid var(--line)
}
.archive-list a {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 22px;
  gap:40px;
  padding:28px 0;
  align-items:center
}
.archive-name {
  font-size:21px;
  line-height:1.45;
  font-weight:550;
  letter-spacing:-.02em
}
.archive-summary {
  color:var(--muted);
  font-size:14px;
  line-height:1.8
}
.archive-list a:hover .archive-name {
  color:var(--accent)
}
.empty {
  padding:40px 0 80px
}
.empty p {
  margin-bottom:16px
}
.reset-search {
  color:var(--accent);
  background:none;
  border:0;
  padding:0
}
.detail-main {
  padding-block:45px 0
}
.detail-header {
  max-width:1150px;
  margin-top:28px;
  margin-bottom:50px
}
.detail-header h1 {
  font-size:clamp(38px,5.8vw,82px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.045em;
  overflow-wrap:anywhere
}
.detail-intro {
  max-width:740px;
  font-size:17px;
  color:var(--muted);
  line-height:1.9;
  margin-top:30px
}
.detail-image {
  margin:0 0 60px
}
.detail-image img {
  width:100%;
  height:auto;
  max-height:1000px;
  object-fit:contain;
  object-position:center;
  background:var(--paper);
  border-radius:4px
}
.detail-image.p36 {
  max-width:520px;
  margin-inline:auto
}
.detail-image.p36 img {
  max-height:780px
}
.detail-image figcaption {
  text-align:right;
  margin-top:14px
}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 2.2fr;
  gap:70px;
  padding-bottom:70px
}
.detail-grid aside {
  position:sticky;
  top:35px;
  align-self:start
}
.detail-grid aside h2 {
  font-size:16px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:24px
}
.case-index {
  display:flex;
  flex-direction:column;
  gap:5px
}
.case-index a {
  display:flex;
  align-items:center;
  min-height:44px;
  font-size:14px
}
.case-index a:hover {
  color:var(--accent)
}
.detail-content section {
  border-top:1px solid var(--line);
  padding:30px 0 48px;
  scroll-margin-top:32px
}
.detail-content h2 {
  font-size:30px;
  font-weight:550;
  letter-spacing:-.025em;
  line-height:1.25;
  margin-bottom:22px
}
.detail-content p {
  font-size:16px;
  line-height:1.9;
  color:var(--muted);
  margin-top:14px;
  max-width:780px
}
.case-related {
  padding-block:16px;
  border-top:1px solid var(--line)
}
.case-related a {
  color:var(--ink)
}
.detail-end {
  padding-block:20px 50px;
  border-top:1px solid var(--line)
}
.not-found {
  padding-block:100px 140px;
  min-height:65dvh
}
.not-found h1 {
  font-size:clamp(40px,6vw,82px);
  margin-block:20px
}
.not-found p {
  color:var(--muted);
  margin-bottom:30px
}
@media(min-width:1550px) {
  
}
@media(max-width:1050px) {
  .site-header,main,footer {
    padding-inline:28px
  }
  .portfolio-intro {
    gap:40px;
    padding-block:38px 70px
  }
  .hero-name {
    font-size:clamp(180px,25vw,260px)
  }
  .hero-spark {
    right:-35%;
    width:66px
  }
  .portfolio-intro h1 {
    font-size:30px
  }
  .intro-copy {
    padding-top:38px
  }
  .poster-gallery {
    columns:2
  }
  .home-about,.experience-section,.client-section,.contact-section {
    gap:40px
  }
  .contact-details {
    grid-template-columns:1fr
  }
  .wechat-contact {
    max-width:220px
  }
  .detail-grid {
    gap:45px
  }
  .archive-tools {
    align-items:start;
    flex-direction:column
  }
  .search-field {
    width:100%;
    max-width:450px
  }
  
}
@media(max-width:650px) {
  html {
    scroll-padding-top:24px
  }
  .site-header,main,footer {
    padding-inline:20px
  }
  .site-header {
    min-height:70px;
    padding-block:14px;
    gap:10px
  }
  .brand {
    font-size:20px;
    gap:8px
  }
  .brand-symbol {
    font-size:34px
  }
  .site-header nav {
    gap:0
  }
  .site-header nav a {
    font-size:12px;
    padding:8px 12px;
    min-width:48px;
    min-height:44px
  }
  .portfolio-intro {
    grid-template-columns:1fr;
    gap:32px;
    padding-block:30px 58px
  }
  .hero-signature {
    max-width:340px
  }
  .hello-mark {
    font-size:84px
  }
  .hero-name {
    font-size:clamp(185px,51vw,250px);
    margin-top:12px;
    letter-spacing:-.04em
  }
  .hero-spark {
    width:58px;
    right:-48%;
    top:15%
  }
  .intro-copy {
    padding:0;
    max-width:100%
  }
  .portfolio-intro h1 {
    font-size:29px;
    line-height:1.35
  }
  .intro-description {
    font-size:14px;
    line-height:1.85;
    margin-top:20px;
    max-width:100%
  }
  .intro-actions {
    gap:24px;
    margin-top:24px
  }
  .primary {
    min-height:50px;
    padding:10px 22px
  }
  .work-heading {
    gap:16px;
    align-items:center;
    margin-bottom:22px
  }
  .work-heading h2,.section-intro h2 {
    font-size:34px;
    line-height:1.2
  }
  .work-heading>.text-link {
    font-size:12px;
    gap:8px
  }
  .gallery-tools {
    align-items:start;
    margin-bottom:23px;
    gap:14px
  }
  .gallery-filters {
    gap:8px
  }
  .gallery-filters button {
    font-size:12px;
    padding:8px 12px;
    min-height:44px
  }
  .gallery-count {
    display:none
  }
  .poster-gallery {
    columns:1
  }
  .gallery-project {
    margin-bottom:34px
  }
  .project-image {
    border-radius:3px
  }
  .selected-caption {
    padding-top:18px
  }
  .selected-caption h3 {
    font-size:21px;
    line-height:1.45
  }
  .project-summary {
    font-size:14px;
    line-height:1.9;
    margin-top:10px
  }
  .selected-work {
    padding-bottom:34px
  }
  .home-about {
    grid-template-columns:1fr;
    gap:25px;
    padding-block:45px 60px
  }
  .home-about h2 {
    font-size:38px
  }
  .home-personality {
    font-size:25px;
    line-height:1.6
  }
  .about-links {
    margin-top:22px;
    gap:25px
  }
  footer {
    flex-wrap:wrap;
    justify-content:start;
    gap:12px 26px;
    padding-block:26px
  }
  .footer-brand {
    width:100%;
    margin-bottom:10px
  }
  footer>.text-link,footer>a {
    font-size:12px
  }
  .about-main,.records-main {
    padding-top:38px
  }
  .about-opening {
    padding-bottom:45px
  }
  .about-opening h1 {
    font-size:68px
  }
  .about-opening-intro {
    font-size:25px;
    margin-top:26px
  }
  .experience-section,.client-section,.contact-section {
    grid-template-columns:1fr;
    gap:30px;
    padding-block:40px
  }
  .experience-section h2,.client-section h2,.contact-section h2 {
    font-size:34px
  }
  .experience-section p {
    font-size:15px;
    line-height:1.9
  }
  .client-list a>span:first-child {
    font-size:20px
  }
  .client-summary {
    font-size:14px;
    line-height:1.9
  }
  .contact-details {
    gap:35px;
    grid-template-columns:1fr
  }
  .contact-method .text-link {
    font-size:21px
  }
  .wechat-contact {
    width:230px;
    max-width:100%;
    transform:none
  }
  .about-ending {
    padding-block:36px 48px
  }
  .about-ending p {
    font-size:32px
  }
  .records-heading {
    margin-bottom:35px
  }
  .records-heading h1 {
    font-size:44px;
    line-height:1.15
  }
  .records-heading p {
    font-size:14px;
    margin-top:18px
  }
  .filters button {
    font-size:12px;
    padding:8px 14px
  }
  .archive-tools {
    gap:24px;
    padding-block:22px
  }
  .search-field {
    max-width:100%
  }
  .archive-list a {
    grid-template-columns:minmax(0,1fr) 20px;
    gap:12px 18px;
    padding-block:23px
  }
  .archive-name {
    font-size:20px;
    grid-column:1
  }
  .archive-summary {
    font-size:14px;
    grid-column:1
  }
  .archive-list a>span:last-child {
    grid-column:2;
    grid-row:1/3
  }
  .archive-list {
    margin-bottom:50px
  }
  .detail-main {
    padding-top:25px
  }
  .detail-header {
    margin-top:20px;
    margin-bottom:35px
  }
  .detail-header h1 {
    font-size:35px;
    line-height:1.3
  }
  .detail-intro {
    font-size:15px;
    margin-top:22px
  }
  .detail-image {
    margin-bottom:36px
  }
  .detail-grid {
    grid-template-columns:1fr;
    gap:32px;
    padding-bottom:45px
  }
  .detail-grid aside {
    position:static;
    border-top:1px solid var(--line);
    padding-top:25px
  }
  .detail-grid aside h2 {
    margin-bottom:10px
  }
  .case-index {
    flex-direction:row;
    flex-wrap:wrap;
    gap:5px 22px
  }
  .detail-content h2 {
    font-size:27px
  }
  .detail-content p {
    font-size:15px
  }
  .detail-content section {
    padding-bottom:36px
  }
  .not-found {
    padding-block:65px 90px
  }
  
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .hero-spark,.poster-preview {
    transition:none!important
  }
  .hero-signature:hover .hero-spark {
    transform:rotate(12deg)
  }
  .project-image:hover .poster-preview {
    transform:none
  }
  .hero-name>span {
    transform:none!important
  }
  
}
@media print {
  body {
    background:#fafaf6;
    color:#20221c
  }
  body::after {
    display:none
  }
  .site-header nav,.gallery-tools,.project-cursor {
    display:none
  }
  .poster-gallery {
    columns:2
  }
  .project-image {
    break-inside:avoid
  }
  .selected-caption,.project-summary {
    color:#30332a
  }
  .text-link,.back {
    color:#20221c
  }
  footer {
    display:none
  }
  .detail-grid {
    display:block
  }
  .detail-grid aside {
    display:none
  }
  
}

.project-process { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.project-process summary { cursor: pointer; min-height: 44px; display: list-item; font-size: 14px; }
.project-process p { color: var(--muted); font-size: 14px; line-height: 1.9; margin: 4px 0 18px; }

.fde-method { display:grid; grid-template-columns:1fr 1.15fr; gap:70px; padding-block:60px; border-bottom:1px solid var(--line); scroll-margin-top:100px; }
.fde-method-heading h2 { font-size:clamp(30px,3.3vw,48px); line-height:1.3; margin:20px 0; }
.fde-method-heading>p:last-child { max-width:360px; color:var(--muted); }
.fde-method-content p,.fde-principles dd { color:var(--muted); line-height:1.9; }
.fde-lead { margin:0 0 30px; }
.fde-principles { margin:0 0 40px; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.fde-principles>div { border-top:1px solid var(--line); padding-top:16px; }
.fde-principles dt { font-size:18px; font-weight:600; margin-bottom:8px; }
.fde-principles dd { margin:0; font-size:14px; }
.fde-method-content>h3 { font-size:22px; margin-bottom:24px; }
.fde-cycle { padding:0; list-style:none; counter-reset:fde-step; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.fde-cycle li { counter-increment:fde-step; }
.fde-cycle h4 { font-size:16px; margin-bottom:8px; }
.fde-cycle h4::before { content:counter(fde-step,decimal-leading-zero); color:var(--accent); font-size:12px; margin-right:12px; }
.fde-cycle p { font-size:14px; margin:0; }
@media(max-width:1050px) { .fde-method { gap:35px; } }
@media(max-width:650px) { .fde-method { grid-template-columns:1fr; gap:30px; padding-block:40px; } .fde-method-heading h2 { font-size:34px; } .fde-principles,.fde-cycle { grid-template-columns:1fr; gap:22px; } }

button.project-image { width:100%; padding:0; text-align:left; cursor:pointer; font:inherit; }
.project-title-toggle { width:100%; min-height:44px; display:flex; align-items:start; justify-content:space-between; gap:18px; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.gallery-project:hover .selected-caption h3 span { transform:none; }

/* Blue editorial layout; existing interaction and motion hooks remain in place. */
body::after { opacity:.012; }
.primary:hover { background:#b4b5ff; }
.site-header,main,footer { max-width:1440px; padding-inline:clamp(20px,5vw,72px); }
.portfolio-intro { grid-template-columns:1.25fr 1fr; gap:clamp(40px,7vw,100px); padding-block:70px 90px; border-bottom:1px solid var(--line); }
.hello-mark { color:var(--ink); font-size:clamp(100px,12vw,170px); line-height:1; }
.hero-name { color:#615dff; font-size:clamp(100px,12vw,170px); line-height:1; gap:0; margin-top:0; letter-spacing:-.04em; }
.hero-prefix { margin-right:.15em; }
.hero-spark { width:clamp(32px,3vw,44px); right:-13%; top:20%; color:var(--accent); }
.intro-copy { padding-top:0; }
.portfolio-intro h1 { font-size:clamp(30px,3vw,42px); line-height:1.4; }
.intro-description { margin-top:28px; line-height:1.95; }
.selected-work { padding-top:48px; }
.work-heading { margin-bottom:38px; }
.gallery-tools { margin-bottom:36px; }
.poster-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 28px; columns:auto; }
.gallery-project { min-width:0; margin-bottom:0; }
.selected-caption { padding-top:24px; }
.project-summary { max-width:540px; }
.project-process { margin-top:16px; }
@media(max-width:1050px) {
 .portfolio-intro { gap:35px; padding-block:55px 65px; }
 .hello-mark,.hero-name { font-size:clamp(80px,12vw,126px); }
 .hero-spark { right:-12%; width:30px; }
}
@media(max-width:650px) {
 .portfolio-intro { grid-template-columns:1fr; gap:38px; padding-block:35px 48px; }
 .hero-signature { max-width:100%; }
 .hello-mark,.hero-name { font-size:clamp(78px,23vw,140px); }
 .hero-spark { width:26px; right:-13%; top:22%; }
 .portfolio-intro h1 { font-size:28px; }
 .intro-description { margin-top:20px; }
 .selected-work { padding-top:36px; }
 .work-heading { margin-bottom:24px; }
 .gallery-tools { margin-bottom:26px; }
 .poster-gallery { grid-template-columns:1fr; gap:36px; }
 .selected-caption { padding-top:20px; }
}

.primary,.gallery-filters button[aria-pressed=true],.filters button[aria-pressed=true] { background:#4e4bff; color:#fff; border-color:#4e4bff; }
.primary:hover { background:#615dff; }

/* Case images retain their original proportions; copy carries the hierarchy. */
.gallery-project { --poster-bg:#1c1e24; --poster-ink:#ededf0; }
.poster-water { --poster-bg:#25221f; }
.poster-inventory,.poster-scan { --poster-bg:#1b2427; }
.gallery-project .project-image { aspect-ratio:auto; display:flex; align-items:center; justify-content:center; padding:20px; border:1px solid var(--line); border-radius:4px; }
.gallery-project .poster-preview { position:static; inset:auto; width:100%; height:auto; aspect-ratio:auto; transform:none; border-radius:0; background:transparent; box-shadow:none; }
.gallery-project .poster-preview img { width:100%; height:auto; object-fit:contain; object-position:center; }
.gallery-project .poster-preview::after { display:none; }
.gallery-project .project-image:hover .poster-preview { transform:none; }
.gallery-project .office-art { position:static; width:100%; height:auto; aspect-ratio:16/9; color:#a5adcb; }
.gallery-project .project-image::after { box-shadow:none; }
.gallery-project.poster-support .poster-preview,.gallery-project.poster-rove .poster-preview { width:auto; max-width:100%; }
.gallery-project.poster-support .poster-preview img,.gallery-project.poster-rove .poster-preview img { width:auto; max-width:100%; height:430px; object-fit:contain; }
.case-type { color:var(--muted); font-size:12px; margin-bottom:8px; }
.selected-caption h3 { font-size:23px; font-weight:600; line-height:1.5; letter-spacing:0; }
.project-summary,.project-process p { font-size:16px; line-height:1.85; }
.project-process { margin-top:18px; }
.project-process summary { display:flex; align-items:center; min-height:44px; list-style:none; color:var(--ink); font-size:14px; }
.project-process summary::-webkit-details-marker { display:none; }
.project-process summary:hover { color:var(--accent); }
.project-process[open] summary { margin-bottom:12px; }
.poster-gallery { align-items:start; gap:50px 32px; }
.intro-description { font-size:16px; }
@media(max-width:650px) {
 .gallery-project .project-image { padding:14px; }
 .selected-caption h3 { font-size:21px; }
 .gallery-project.poster-support .poster-preview img,.gallery-project.poster-rove .poster-preview img { height:auto; max-height:440px; }
 .poster-gallery { gap:38px; }
}

footer { align-items:start; flex-wrap:wrap; gap:32px; padding-block:40px; }
.footer-contacts { display:grid; grid-template-columns:minmax(200px,1.4fr) minmax(160px,1fr) auto; gap:32px; flex:1; }
.footer-contact-method>p { color:var(--muted); font-size:12px; margin-bottom:10px; }
.footer-contact-method a { display:inline-flex; min-height:44px; align-items:center; overflow-wrap:anywhere; }
.footer-contact-method a:hover { color:var(--accent); }
.footer-wechat a { display:flex; flex-direction:column; align-items:start; gap:10px; font-size:12px; }
.footer-wechat img { width:144px; height:144px; background:white; }
@media(max-width:1050px) { .footer-contacts { order:3; flex-basis:100%; } }
@media(max-width:650px) { .footer-contacts { grid-template-columns:1fr; gap:22px; } .footer-contact-method>p { margin-bottom:2px; } .footer-wechat a { margin-top:12px; } }

/* Compact footer and a full-width FDE reading layout. */
footer { display:grid; grid-template-columns:130px minmax(0,1fr); gap:22px 40px; padding-block:32px; }
.footer-contacts { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 112px; gap:28px; order:initial; }
.footer-contact-method a { min-height:36px; }
.footer-wechat img { width:112px; height:112px; }
.footer-wechat a { margin:0; gap:0; }
.footer-links { grid-column:2; display:flex; gap:28px; border-top:1px solid var(--line); padding-top:12px; }
.footer-links a { min-height:36px; display:inline-flex; align-items:center; }
.footer-links a:hover { color:var(--accent); }
.fde-method { grid-template-columns:1fr; gap:34px; }
.fde-method-heading { display:grid; grid-template-columns:1fr 1fr; column-gap:50px; align-items:end; }
.fde-method-heading .meta { grid-column:1; }
.fde-method-heading h2 { grid-column:1; margin:14px 0 0; }
.fde-method-heading>p:last-child { grid-column:2; grid-row:1 / 3; max-width:none; align-self:end; }
.fde-lead { max-width:780px; margin-bottom:28px; }
.fde-principles { grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; margin-bottom:36px; }
.fde-cycle { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 32px; margin-bottom:0; }
@media(max-width:850px) { footer { grid-template-columns:100px minmax(0,1fr); gap:22px; } .footer-contacts { grid-template-columns:minmax(0,1fr) 112px; gap:16px 24px; } .footer-wechat { grid-column:2; grid-row:1 / 3; } .fde-principles { grid-template-columns:1fr 1fr; } .fde-cycle { grid-template-columns:1fr 1fr; } }
@media(max-width:650px) { footer { grid-template-columns:1fr; gap:24px; } .footer-brand { margin:0; } .footer-contacts { grid-template-columns:minmax(0,1fr) 100px; gap:16px; } .footer-wechat img { width:100px; height:100px; } .footer-contact-method a { font-size:12px; } .footer-links { grid-column:1; } .fde-method-heading { grid-template-columns:1fr; gap:18px; } .fde-method-heading>p:last-child { grid-column:1; grid-row:auto; } .fde-method-heading h2 { margin:0; } .fde-method { gap:28px; } .fde-principles,.fde-cycle { grid-template-columns:1fr; } }

.client-case { padding-block:20px; }
.client-case summary { display:flex; align-items:start; justify-content:space-between; gap:20px; min-height:44px; list-style:none; cursor:pointer; font-size:20px; font-weight:550; letter-spacing:0; }
.client-case summary::-webkit-details-marker,.experience-group>details>summary::-webkit-details-marker { display:none; }
.client-case-icon::before { content:'＋'; color:var(--muted); }
.client-case[open] .client-case-icon::before { content:'−'; }
.client-case summary:hover { color:var(--accent); }
.client-case-intro { color:var(--muted); font-size:15px; line-height:1.85; margin-top:4px; }
.client-case-process { padding-top:12px; margin-top:16px; border-top:1px solid var(--line); }
.client-case-process p { color:var(--muted); font-size:15px; line-height:1.85; margin-bottom:12px; }
.experience-group>details>summary { display:flex; justify-content:space-between; align-items:center; min-height:72px; font-size:18px; list-style:none; cursor:pointer; }
.experience-group>details>.client-list { padding-left:20px; border-left:1px solid var(--line); margin-bottom:24px; }
@media(max-width:650px) { .client-case summary { font-size:19px; } .experience-group>details>.client-list { padding-left:14px; } }

.client-section { grid-template-columns:1fr; gap:34px; }
.client-section>div>p { margin-top:12px; }
.project-experience-group+ .project-experience-group { margin-top:44px; }
.project-experience-group>h3 { font-size:22px; margin-bottom:26px; font-weight:600; }
.project-experience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; list-style:none; padding:0; margin:0; }
.project-experience-grid li { border-top:1px solid var(--line); padding-top:18px; min-width:0; }
.project-experience-grid h4 { font-size:17px; line-height:1.55; font-weight:600; letter-spacing:0; margin-bottom:12px; }
.project-experience-grid p { color:var(--muted); font-size:15px; line-height:1.9; margin-top:10px; }
@media(max-width:850px) { .project-experience-grid { grid-template-columns:1fr 1fr; gap:26px; } }
@media(max-width:650px) { .project-experience-grid { grid-template-columns:1fr; gap:26px; } .project-experience-group+ .project-experience-group { margin-top:36px; } }

/* Scroll-driven depth gallery: the active case stays front-facing and readable. */
.depth-controls[hidden] { display:none; }
.depth-enabled { padding-block:24px 20px; }
.depth-enabled .work-heading { margin-bottom:20px; }
.depth-enabled .gallery-tools { margin-bottom:18px; }
.depth-enabled .depth-stage { outline-offset:4px; }
.depth-enabled .poster-gallery { position:relative; display:block; height:clamp(380px,calc(100svh - 260px),720px); perspective:1600px; perspective-origin:32% 50%; isolation:isolate; }
.depth-enabled .gallery-project { position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center; margin:0; padding:0; perspective:none; }
.depth-enabled .project-image { transform-style:preserve-3d; backface-visibility:hidden; will-change:transform,opacity; height:100%; max-height:540px; min-height:0; box-shadow:0 18px 42px -30px rgba(0,0,0,.6); }
.depth-enabled .poster-preview { height:100%; display:flex; align-items:center; justify-content:center; }
.depth-enabled .poster-preview img { width:100%; height:100%; max-height:500px; object-fit:contain; }
.depth-enabled .poster-support .poster-preview img { width:auto; height:100%; max-height:500px; }
.depth-enabled .selected-caption { padding:0 4px 0 0; max-height:100%; overflow-y:auto; scrollbar-width:thin; opacity:0; pointer-events:none; }
.depth-enabled .depth-current .selected-caption { opacity:1; pointer-events:auto; }
.depth-enabled .gallery-project:not(.depth-current) .project-image { pointer-events:none; }
.depth-enabled .selected-caption h3 { font-size:clamp(25px,3vw,38px); line-height:1.4; }
.depth-enabled .case-type { margin-bottom:14px; }
.depth-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:20px; }
.depth-position { font-size:14px; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--accent); }
.depth-hint { color:var(--muted); font-size:13px; }
.depth-controls>div { display:flex; gap:10px; }
.depth-controls button { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:transparent; font-size:20px; }
.depth-controls button:hover { border-color:var(--accent); color:var(--accent); }
.depth-controls button:disabled { opacity:.3; cursor:default; }
@media(max-width:650px) {
 .depth-enabled { padding-block:18px; }
 .depth-enabled .work-heading h2 { font-size:30px; }
 .depth-enabled .gallery-tools { overflow:hidden; }
 .depth-enabled .gallery-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; }
 .depth-enabled .gallery-filters button { flex-shrink:0; }
 .depth-enabled .poster-gallery { height:calc(100svh - 205px); min-height:420px; perspective:1200px; perspective-origin:50% 30%; }
 .depth-enabled .gallery-project { grid-template-columns:1fr; grid-template-rows:minmax(180px,1fr) minmax(170px,.85fr); gap:20px; align-items:stretch; }
 .depth-enabled .project-image { height:100%; padding:12px; max-height:none; }
 .depth-enabled .poster-preview img,.depth-enabled .poster-support .poster-preview img { height:100%; max-height:100%; }
 .depth-enabled .selected-caption h3 { font-size:23px; }
 .depth-enabled .case-type { margin-bottom:6px; }
 .depth-enabled .project-summary { margin-top:8px; font-size:15px; }
 .depth-enabled .project-process { margin-top:12px; }
 .depth-controls { padding-top:12px; }
 .depth-hint { display:none; }
}

.depth-enabled .gallery-project { transform-style:preserve-3d; }
.depth-enabled .project-image { height:auto; aspect-ratio:4/3; }
.depth-enabled .poster-preview { height:100%; }
.depth-enabled .depth-stage { overflow:clip; padding-top:24px; }
@media(max-width:650px) { .depth-enabled .project-image { height:100%; aspect-ratio:auto; } .depth-enabled .depth-stage { padding-top:12px; } }

.depth-enabled .depth-current .selected-caption { background:var(--bg); position:relative; z-index:30; }
@media(max-width:650px) {
 .depth-enabled .poster-gallery { height:calc(100svh - 285px); min-height:330px; }
}

/* Softer reading pane; the existing page background stays continuous. */
.depth-enabled .depth-current .selected-caption { background:transparent; }
.depth-enabled .selected-caption { padding-left:12px; }
.depth-enabled .selected-caption h3 { font-size:clamp(25px,2.8vw,36px); line-height:1.5; font-weight:550; }
.depth-enabled .project-summary { line-height:1.95; margin-top:18px; }
.depth-enabled .project-process { border-top:0; margin-top:24px; }
.depth-controls .depth-exit { width:auto; height:44px; border:0; border-radius:0; font-size:13px; color:var(--muted); }
@media(max-width:650px) { .depth-enabled .selected-caption { padding-left:0; } .depth-enabled .selected-caption h3 { font-size:23px; } .depth-enabled .project-summary { margin-top:8px; line-height:1.85; } .depth-enabled .project-process { margin-top:12px; } .depth-controls { gap:8px; } .depth-controls .depth-exit { font-size:12px; } }

.footer-invitation { grid-column:1 / -1; font-size:clamp(22px,2.6vw,32px); line-height:1.65; padding-bottom:22px; max-width:900px; letter-spacing:0; }
.footer-invitation span { display:block; color:var(--muted); font-size:16px; margin-top:6px; }
@media(max-width:650px) { .footer-invitation { font-size:23px; padding-bottom:8px; } .footer-invitation span { font-size:15px; } }

/* Direct project selection and clear local-scroll controls. */
.depth-index { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.depth-index button { min-height:40px; border:0; border-bottom:1px solid var(--line); padding:6px 12px; background:transparent; color:var(--muted); font-size:13px; }
.depth-index button[aria-pressed=true] { color:var(--ink); border-color:var(--accent); }
.depth-index button:hover { color:var(--accent); }
.depth-enabled .depth-controls { position:sticky; top:0; z-index:60; background:var(--bg); padding:0 0 16px; }
.depth-help { color:var(--muted); font-size:12px; }
.case-evidence-note { color:var(--muted); font-size:12px; margin-top:18px; }
.screenshot-link { margin-top:12px; }
.depth-enabled .depth-stage { padding-top:0; }
.depth-enabled .depth-controls .depth-exit { flex-shrink:0; }
@media(max-width:850px) { .depth-help { display:none; } }
@media(max-width:650px) { .depth-index { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; } .depth-index button { flex-shrink:0; } .depth-enabled .depth-controls { padding-bottom:12px; } }

/* Native modal preserves focus and offers the untouched full-resolution image. */
html.screenshot-open { overflow:hidden; overscroll-behavior:none; scrollbar-gutter:stable; }
html.screenshot-open body { overflow:hidden; }
@supports not (scrollbar-gutter:stable) { html.screenshot-open { padding-right:var(--screenshot-scrollbar,0px); } }
.screenshot-dialog { width:min(1280px,94vw); max-height:92svh; padding:20px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); }
.screenshot-dialog::backdrop { background:rgba(0,0,0,.82); }
.screenshot-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:16px; }
.screenshot-toolbar h2 { font-size:18px; line-height:1.5; letter-spacing:0; }
.screenshot-toolbar>div { display:flex; gap:8px; flex-shrink:0; }
.screenshot-toolbar button { min-height:44px; padding:8px 14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:4px; font-size:13px; }
.screenshot-toolbar button:hover { border-color:var(--accent); }
.screenshot-figure { overflow:auto; max-height:70svh; overscroll-behavior:contain; }
.screenshot-figure img { margin:auto; width:auto; max-width:100%; max-height:70svh; object-fit:contain; }
.screenshot-dialog[data-actual=true] .screenshot-figure img { max-width:none; max-height:none; }
.screenshot-note { font-size:12px; color:var(--muted); margin-top:12px; }
@media(max-width:650px) { .screenshot-dialog { padding:12px; } .screenshot-toolbar { flex-direction:column; align-items:start; gap:10px; } .screenshot-toolbar h2 { font-size:16px; } }

/* Compact shared footer: copy and contacts occupy one row on desktop. */
footer { grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); gap:24px; padding-block:14px; align-items:center; }
.footer-invitation { font-size:20px; line-height:1.4; padding:0; }
.footer-invitation span { font-size:13px; margin-top:4px; line-height:1.6; }
.footer-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.footer-meta .footer-brand { font-size:16px; width:auto; margin:0; }
.footer-meta .footer-brand span { font-size:8px; margin-top:2px; }
.footer-meta .footer-links { grid-column:auto; border:0; padding:0; gap:16px; font-size:12px; }
.footer-meta .footer-links a { min-height:36px; }
.footer-contacts { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) 80px; gap:16px; }
.footer-contact-method>p { font-size:11px; margin-bottom:4px; }
.footer-contact-method a { font-size:12px; min-height:30px; }
.footer-wechat img { width:80px; height:80px; }
@media(max-width:850px) { footer { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:20px; } .footer-contacts { grid-template-columns:minmax(0,1fr) 72px; gap:8px 14px; } .footer-wechat img { width:72px; height:72px; } }
@media(max-width:650px) { footer { grid-template-columns:1fr; gap:12px; padding-block:12px; } .footer-invitation { font-size:18px; } .footer-meta { margin-top:6px; } .footer-contacts { grid-template-columns:minmax(0,1fr) 64px; gap:4px 14px; } .footer-contact-method>p { margin-bottom:0; } .footer-contact-method a { min-height:26px; } .footer-wechat img { width:64px; height:64px; } }
@media(max-width:650px) {
 footer { padding-block:10px; gap:10px; }
 .footer-contact-method:not(.footer-wechat) { display:flex; align-items:center; gap:10px; }
 .footer-contact-method:not(.footer-wechat)>p { margin:0; }
}

/* Small screens and landscape keep the full interactive scene reachable. */
@media(max-width:650px) {
 .depth-enabled .gallery-project { grid-template-rows:minmax(140px,1fr) minmax(140px,.85fr); gap:16px; }
}
@media(max-height:650px) and (min-width:651px) {
 .depth-enabled .poster-gallery { height:calc(100svh - 100px); min-height:0; }
 .depth-enabled .project-image { height:100%; max-height:100%; aspect-ratio:auto; }
 .depth-enabled .selected-caption h3 { font-size:23px; }
 .depth-enabled .case-type { margin-bottom:6px; }
 .depth-enabled .project-summary { margin-top:8px; line-height:1.7; }
 .depth-enabled .project-process { margin-top:10px; }
}
@media(max-height:500px) and (max-width:650px) {
 .depth-enabled .poster-gallery { height:calc(100svh - 80px); min-height:0; }
 .depth-enabled .gallery-project { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:16px; }
 .depth-enabled .selected-caption h3 { font-size:20px; }
 .depth-enabled .case-type { margin-bottom:4px; }
 .depth-enabled .project-summary { font-size:14px; }
}
@media(max-height:650px) and (min-width:651px) {
 .depth-enabled .poster-gallery { height:calc(100svh - 160px); }
}
@media(max-height:500px) and (max-width:650px) {
 .depth-enabled .poster-gallery { height:calc(100svh - 140px); }
}
@media(max-height:500px) {
 .screenshot-figure,.screenshot-figure img { max-height:calc(100svh - 180px); }
}

/* Bilingual navigation and English copy keep the same visual identity. */
.records-heading p { color:var(--accent); font-size:clamp(18px,2.2vw,30px); line-height:1.6; }
.records-main #archive { border-top:1px solid var(--line); }
.site-header nav .language-switch { border-left:1px solid var(--line); border-radius:0; margin-left:8px; padding-left:16px; }
html[lang="en"] .intro-copy h1 { font-size:clamp(24px,3vw,40px); line-height:1.25; }
html[lang="en"] .archive-tools { flex-wrap:nowrap; }
html[lang="en"] .archive-tools .filters {
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  flex-wrap:nowrap;
  overflow-x:auto;
}
html[lang="en"] .archive-tools .filters button { flex:0 0 auto; white-space:nowrap; }
html[lang="en"] .archive-tools .search-field { flex:0 0 clamp(220px,24vw,330px); }
@media(max-width:1050px) {
 html[lang="en"] .archive-tools .filters { flex:0 1 auto; width:100%; }
 html[lang="en"] .archive-tools .search-field { flex:0 1 auto; }
}
html[lang="en"] .selected-caption h3 { font-size:clamp(23px,2.5vw,34px); overflow-wrap:break-word; }
@media(max-width:650px) {
 .site-header nav { gap:2px; }
 .site-header nav a { padding-inline:8px; }
 .site-header nav .language-switch { margin-left:2px; padding-left:10px; }
 html[lang="en"] .selected-caption h3 { font-size:22px; }
 html[lang="en"] .footer-invitation { font-size:17px; }
}
@media(max-width:360px) { .site-header nav a { padding-inline:5px; font-size:12px; } }

/* Keep horizontal scrolling inside the controls, never on the page. */
.archive-tools,.detail-grid>*,.case-hero>* { min-width:0; }
.detail-content { overflow-wrap:anywhere; }
.case-detail-link { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; padding-inline:8px; margin-left:-8px; color:var(--accent); font-weight:600; }
.image-view-hint { position:absolute; right:12px; bottom:12px; padding:5px 9px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--ink); font-size:12px; line-height:1.5; pointer-events:none; }
.depth-hint { flex:1; text-align:right; line-height:1.6; }
.depth-enabled.depth-reading .selected-caption { max-height:none; overflow:visible; }
@media(max-width:1050px) {
 .records-main .filters { width:100%; }
}
@media(max-width:650px) {
 /* The gallery keeps its depth transitions; the active story sets its height. */
 .depth-enabled .poster-gallery { height:auto; min-height:0; }
 .depth-enabled .gallery-project { inset:0 0 auto; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-items:start; }
 .depth-enabled .project-image { height:clamp(180px,60vw,320px); max-height:none; aspect-ratio:auto; }
 .depth-enabled .selected-caption { max-height:none; overflow:visible; }
 .depth-enabled .depth-index { max-width:100%; }
 .detail-main .detail-grid>* { min-width:0; }
}
/* Customer reading paths use the existing type, accent and spacing language. */
.customer-topics { padding-block:30px 36px; border-bottom:1px solid var(--line); }
.customer-topics h2 { margin:0 0 20px; font-size:20px; color:var(--muted); font-weight:500; }
.topic-start { margin:0 0 24px; max-width:62ch; color:var(--muted); font-size:15px; line-height:1.7; }
.topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:20px; }
.topic-grid article { min-width:0; }
.topic-grid h3 { margin:0 0 10px; font-size:25px; line-height:1.35; }
.topic-grid p { margin:0 0 8px; color:var(--muted); font-size:16px; line-height:1.6; }
.topic-actions { display:flex; flex-wrap:wrap; gap:8px 24px; }
.topic-actions a,.customer-search-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); font-size:14px; }
.customer-search-help { margin:18px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.customer-search-links { display:flex; flex-wrap:wrap; gap:8px 24px; margin-block:4px 12px; }
.case-contact { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding-block:28px; border-block:1px solid var(--line); }
.case-contact div { min-width:0; max-width:65ch; }
.case-contact h2 { margin:0 0 12px; font-size:clamp(24px,3vw,34px); line-height:1.3; }
.case-contact p { margin:0; color:var(--muted); font-size:16px; line-height:1.6; }
.case-contact>a { flex-shrink:0; display:inline-flex; align-items:center; min-height:44px; color:var(--accent); }
.contact-introduction .contact-start { margin:20px 0 0; max-width:38ch; color:var(--muted); font-size:16px; line-height:1.6; }
@media(max-width:650px) {
 .topic-grid { grid-template-columns:1fr; gap:24px; }
 .customer-topics { padding-block:26px; }
 .topic-grid h3 { font-size:22px; }
 .case-contact { flex-direction:column; align-items:flex-start; gap:12px; margin-top:32px; }
}

/* Compact service components share the existing portfolio palette. */
.intro-capabilities { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; padding:0; list-style:none; }
.intro-capabilities li { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:5px; color:var(--ink); font-size:14px; line-height:1.3; }
.intro-capabilities li span { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:var(--accent); }
.intro-role { color:var(--accent); font-size:13px; }
.topic-card { display:flex; flex-direction:column; padding:24px; background:#1b1c21; border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:border-color 220ms ease,background-color 220ms ease,transform 220ms var(--ease); }
.topic-card-mark { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.topic-symbol { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid rgba(150,152,255,.3); border-radius:8px; background:#25262e; color:var(--accent); }
.topic-symbol svg { width:24px; height:24px; }
.topic-number { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.topic-grid .topic-lead { margin-bottom:8px; font-size:14px; }
.topic-details { margin-top:8px; }
.topic-details summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; cursor:pointer; list-style:none; font-size:13px; color:var(--muted); }
.topic-details summary::-webkit-details-marker { display:none; }
.topic-toggle { color:var(--accent); font-size:20px; transition:transform 180ms ease; }
.topic-details[open] .topic-toggle { transform:rotate(45deg); }
.topic-grid .topic-detail-copy { margin:8px 0 16px; font-size:14px; line-height:1.7; }
.topic-actions { margin-top:8px; }
.topic-card .topic-actions { margin-top:auto; padding-top:8px; }
.topic-card:focus-within { border-color:var(--accent); }
.topic-details summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
@media(hover:hover) and (pointer:fine) {
 .topic-card:hover { border-color:rgba(150,152,255,.55); background:#202127; }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .topic-card:hover { transform:translateY(-3px); }
}
@media(prefers-reduced-motion:no-preference) {
 .topic-details[open] .topic-detail-copy { animation:topic-copy-in 180ms ease-out; }
}
@keyframes topic-copy-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1050px) and (min-width:651px) { .topic-card { padding:18px; } .topic-grid h3 { font-size:21px; } }
@media(max-width:650px) { .topic-grid { gap:16px; } .topic-card { padding:20px; } .topic-card-mark { margin-bottom:16px; } }
@media(prefers-reduced-motion:reduce) { .topic-card,.topic-toggle { transition:none; } }