:root {
  --blue: #143cff;
  --black: #0b0b0c;
  --paper: #f4f4f0;
  --line: rgba(12, 12, 13, .18);
  --muted: #727274;
  --case-accent: var(--blue);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--black);
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
  padding: 0 3vw;
  background: rgba(244, 244, 240, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 800; letter-spacing: .08em; }
.brand small { display: block; margin-top: 2px; font: 8px/1.2 "Courier New", monospace; letter-spacing: .13em; }
.brand-mark { display: grid; grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 9px); gap: 2px; transform: rotate(45deg); }
.brand-mark i { background: var(--blue); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { opacity: .42; }
.site-header nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 42px); font-size: 13px; }
.site-header nav a { position: relative; }
.site-header nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--black); transition: right .25s; }
.site-header nav a:hover::after { right: 0; }
.nav-cta { padding: 10px 17px; background: var(--black); color: white; }

.hero {
  position: relative;
  min-height: calc(100vh - 76px);
  overflow: hidden;
  padding: 6vw 3vw 3vw;
  background: var(--black);
  color: white;
}
.hero-grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.hero::before { content: ""; position: absolute; width: 45vw; height: 45vw; left: 55%; top: -15%; border: 1px solid rgba(44, 76, 255, .75); border-radius: 50%; box-shadow: 0 0 160px rgba(20,60,255,.22); }
.hero::after { content: "+"; position: absolute; right: 2vw; top: 7vw; color: var(--blue); font: 220px/1 "Courier New", monospace; }
.eyebrow, .section-no { position: relative; z-index: 1; margin: 0; font: 11px/1.4 "Courier New", monospace; letter-spacing: .13em; }
.hero h1 { position: relative; z-index: 1; max-width: 1100px; margin: 8vh 0 12vh; font-size: clamp(64px, 10vw, 168px); font-weight: 800; line-height: .91; letter-spacing: -.07em; }
.hero h1 span { color: var(--blue); -webkit-text-stroke: 1px #7790ff; }
.hero-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.3); }
.hero-bottom p { margin: 0; color: #b4b4b7; font-size: clamp(13px, 1.15vw, 17px); line-height: 1.8; }
.round-link { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font-size: 24px; transition: .25s; }
.round-link:hover { background: var(--blue); border-color: var(--blue); transform: translateY(4px); }
.pixel-cursor { position: absolute; right: 3vw; bottom: 2vw; color: #777; font: 9px "Courier New", monospace; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 3vw; border-bottom: 1px solid var(--line); }
.metrics div { padding: 32px 20px 28px 0; border-right: 1px solid var(--line); }
.metrics div:not(:first-child) { padding-left: 24px; }
.metrics div:last-child { border-right: 0; }
.metrics strong { display: block; font-size: clamp(30px, 4vw, 64px); line-height: 1; letter-spacing: -.06em; }
.metrics span { display: block; margin-top: 12px; color: var(--muted); font-size: 11px; }

.section { padding: 110px 3vw; }
.section-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: end; margin-bottom: 58px; }
.section-head h2 { margin: 12px 0 0; font-size: clamp(48px, 7vw, 104px); line-height: .9; letter-spacing: -.07em; }
.section-head > p { max-width: 570px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 24px; }
.filter, .year-filter { cursor: pointer; padding: 9px 15px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: 11px; }
.filter.is-active, .filter:hover { background: var(--black); border-color: var(--black); color: white; }

.project-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 5vw 2vw; }
.project-card:nth-child(3), .project-card:nth-child(6) { grid-column: 1 / -1; width: 74%; margin-left: auto; }
.project-card[hidden] { display: none; }
.project-image { position: relative; display: block; overflow: hidden; background: #ddd; }
.project-image::after { content: ""; position: absolute; inset: 0; background: var(--blue); mix-blend-mode: color; opacity: 0; transition: opacity .3s; }
.project-image img { aspect-ratio: 16/9; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.project-card:hover img { transform: scale(1.025); }
.project-card:hover .project-image::after { opacity: .23; }
.project-index { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 7px 9px; background: var(--paper); font: 10px "Courier New", monospace; }
.view-case { position: absolute; z-index: 2; right: 0; bottom: 0; padding: 14px 18px; background: var(--blue); color: white; font: 10px "Courier New", monospace; transform: translateY(100%); transition: transform .25s; }
.project-card:hover .view-case { transform: translateY(0); }
.project-meta { display: flex; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid var(--black); }
.project-meta h3 { margin: 0 0 7px; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: -.04em; }
.project-meta p { margin: 0; color: var(--muted); font-size: 12px; }
.project-meta > div:last-child { display: grid; gap: 7px; text-align: right; font: 10px "Courier New", monospace; }

.archive-section { background: var(--black); color: white; }
.section-head.inverse > p { color: #858589; }
.archive-filters { display: flex; gap: 7px; margin-bottom: 18px; }
.archive-filters button { border-color: #333; color: #858589; }
.archive-filters button.is-active, .archive-filters button:hover { background: var(--blue); border-color: var(--blue); color: white; }
.archive-list { border-top: 1px solid #333; }
.archive-list article { display: grid; grid-template-columns: 60px 2fr 1fr 80px 80px; align-items: center; gap: 15px; min-height: 76px; border-bottom: 1px solid #29292b; transition: .2s; }
.archive-list article:hover { padding-left: 12px; background: #111; }
.archive-list span, .archive-list time, .archive-list em { color: #666; font: normal 10px "Courier New", monospace; }
.archive-list strong { font-size: clamp(16px, 2vw, 25px); font-weight: 500; }
.archive-list p { color: #96969a; font-size: 12px; }
.archive-list em { justify-self: end; padding: 6px 8px; border: 1px solid #333; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black); border-left: 1px solid var(--black); }
.service-grid article { min-height: 220px; padding: 24px; border-right: 1px solid var(--black); border-bottom: 1px solid var(--black); transition: .2s; }
.service-grid article:hover { background: var(--blue); color: white; }
.service-grid span { font: 10px "Courier New", monospace; }
.service-grid h3 { margin: 70px 0 8px; font-size: clamp(21px, 2.4vw, 35px); letter-spacing: -.04em; }
.service-grid p { margin: 0; color: var(--muted); font-size: 12px; }
.service-grid article:hover p { color: #c7d0ff; }

.contact { padding: 9vw 3vw 3vw; background: var(--blue); color: white; }
.contact h2 { max-width: 1150px; margin: 32px 0 9vw; font-size: clamp(58px, 10vw, 160px); line-height: .89; letter-spacing: -.075em; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.45); }
.contact-row p { margin: 0; font-size: 12px; }
.contact-row div { display: grid; grid-template-columns: repeat(3, auto); gap: 18px; justify-content: end; font: 10px "Courier New", monospace; }
footer { display: flex; justify-content: space-between; padding: 22px 3vw; background: var(--black); color: #757579; font: 9px "Courier New", monospace; }

/* case */
.case-nav { background: rgba(11,11,12,.93); border-bottom-color: #29292b; color: white; }
.case-hero { min-height: 73vh; padding: 14vh 3vw 4vw; background: var(--black); color: white; }
.case-kicker { display: flex; justify-content: space-between; color: var(--case-accent); font: 10px "Courier New", monospace; }
.case-hero h1 { max-width: 1300px; margin: 17vh 0 10px; font-size: clamp(54px, 9vw, 145px); line-height: .9; letter-spacing: -.075em; }
.case-hero > p { margin: 0; color: #8c8c90; font-size: clamp(14px, 1.5vw, 22px); }
.case-cover { margin: 0; padding: 3vw; background: var(--case-accent); }
.case-cover img { aspect-ratio: 16/9; object-fit: cover; }
.case-summary { display: grid; grid-template-columns: 1.55fr .65fr; gap: 9vw; padding: 10vw 3vw; }
.case-intro h2 { max-width: 950px; margin: 20px 0 0; font-size: clamp(34px, 5.2vw, 78px); line-height: 1.03; letter-spacing: -.055em; }
.case-summary dl { margin: 0; border-top: 1px solid var(--black); }
.case-summary dl div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.case-summary dt { margin-bottom: 8px; color: var(--muted); font: 9px "Courier New", monospace; }
.case-summary dd { margin: 0; font-size: 12px; line-height: 1.7; }
.case-story { display: grid; grid-template-columns: 1fr 1fr; background: var(--black); color: white; }
.case-story article { min-height: 440px; padding: 4vw 8vw 4vw 3vw; border-right: 1px solid #333; }
.case-story span { color: var(--case-accent); font: 11px "Courier New", monospace; }
.case-story h3 { margin: 13vh 0 24px; font-size: clamp(28px, 3.5vw, 52px); }
.case-story p { max-width: 630px; margin: 0; color: #aaa; font-size: 14px; line-height: 2; }
.case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; background: var(--black); }
.case-gallery figure { margin: 0; background: white; }
.case-gallery figure.wide { grid-column: 1 / -1; }
.case-gallery img { min-height: 46vw; max-height: 78vh; object-fit: contain; background: #eee; }
.case-gallery .wide img { min-height: 0; width: 100%; aspect-ratio: 16/9; object-fit: contain; }
.case-gallery figcaption { padding: 14px 18px; border-top: 1px solid #ddd; font: 9px "Courier New", monospace; }
.next-case { display: grid; grid-template-columns: 120px 1fr 60px; align-items: center; gap: 20px; min-height: 210px; padding: 3vw; background: var(--case-accent); }
.next-case span { font: 10px "Courier New", monospace; }
.next-case strong { font-size: clamp(34px, 6vw, 92px); letter-spacing: -.06em; }
.next-case i { font: normal 40px serif; transition: transform .2s; }
.next-case:hover i { transform: translateX(12px); }

@media (max-width: 820px) {
  .site-header { min-height: 64px; padding: 0 18px; }
  .site-header nav { gap: 15px; }
  .site-header nav a:not(:last-child) { display: none; }
  .hero { min-height: calc(100svh - 64px); padding: 9vh 18px 24px; }
  .hero::after { font-size: 110px; top: 15%; }
  .hero h1 { margin-top: 13vh; font-size: clamp(57px, 18vw, 100px); }
  .hero-bottom { align-items: center; }
  .hero-bottom p br { display: none; }
  .round-link { flex: 0 0 48px; width: 48px; height: 48px; }
  .metrics { grid-template-columns: 1fr 1fr; padding: 0 18px; }
  .metrics div:nth-child(2) { border-right: 0; }
  .metrics div { padding: 24px 12px 22px 0; }
  .metrics div:not(:first-child) { padding-left: 12px; }
  .metrics div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .section { padding: 78px 18px; }
  .section-head { grid-template-columns: 1fr; gap: 26px; margin-bottom: 42px; }
  .section-head h2 { font-size: 58px; }
  .filter-bar { overflow-x: auto; padding-bottom: 5px; }
  .filter { flex: 0 0 auto; }
  .project-grid { grid-template-columns: 1fr; gap: 52px; }
  .project-card:nth-child(3), .project-card:nth-child(6) { grid-column: auto; width: 100%; }
  .project-meta { display: block; }
  .project-meta > div:last-child { display: flex; justify-content: space-between; margin-top: 16px; text-align: left; }
  .archive-filters { overflow-x: auto; }
  .year-filter { flex: 0 0 auto; }
  .archive-list article { grid-template-columns: 34px 1fr 52px; min-height: 82px; }
  .archive-list p, .archive-list em { display: none; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .service-grid article { min-height: 180px; padding: 18px; }
  .service-grid h3 { margin-top: 58px; }
  .contact { padding: 80px 18px 28px; }
  .contact h2 { margin-bottom: 80px; }
  .contact-row { grid-template-columns: 1fr; }
  .contact-row div { grid-template-columns: 1fr; justify-content: start; }
  .case-hero { min-height: 65vh; padding: 13vh 18px 30px; }
  .case-hero h1 { margin-top: 20vh; }
  .case-cover { padding: 18px; }
  .case-summary { grid-template-columns: 1fr; padding: 76px 18px; }
  .case-story { grid-template-columns: 1fr; }
  .case-story article { min-height: auto; padding: 60px 18px; border-bottom: 1px solid #333; }
  .case-story h3 { margin-top: 60px; }
  .case-gallery { grid-template-columns: 1fr; }
  .case-gallery figure.wide { grid-column: auto; }
  .case-gallery img, .case-gallery .wide img { min-height: 0; max-height: none; aspect-ratio: auto; }
  .next-case { grid-template-columns: 1fr 36px; padding: 50px 18px; }
  .next-case span { grid-column: 1 / -1; }
}

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