:root { --ink: #000; --paper: #fff; --rule: #dadada; --muted: #6e6e6e; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #000; color: var(--ink); font-family: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .65; }
img, video { display: block; width: 100%; }

.frame { padding: clamp(16px, 3vw, 48px) clamp(12px, 3vw, 64px); }
.page { display: flex; background: var(--paper); min-height: 100vh; }
.stripes { flex: 0 0 auto; width: clamp(40px, 7vw, 112px); background: #000; display: flex; gap: 5px; padding-left: 6px; position: sticky; top: 0; height: 100vh; align-self: flex-start; }
.stripes > div { display: flex; flex-direction: column; }
main { flex: 1 1 auto; min-width: 0; padding: 14px clamp(16px, 2vw, 28px) 48px; }

.mega { margin: 0; font-weight: 500; font-size: clamp(56px, 10vw, 176px); line-height: .84; letter-spacing: -0.058em; }
.lede { font-size: clamp(22px, 2.3vw, 36px); line-height: 1.08; letter-spacing: -0.035em; margin: 56px 0 0; }
.cap, .nav, .ruled, .career, .toc, .top, .facts, .sidecap { font-size: 14px; line-height: 17px; }
.muted { color: var(--muted); }
.r { text-align: right; }

.g8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
.bar { grid-row: 1; height: 24px; background: #000; }
.bar.white { background: #fff; }
.g8 > .cap, .g4 > .cap { grid-row: 2; padding-top: 10px; }

.hero2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hero2 .hl { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.hero2 .mega { font-size: clamp(64px, 8.4vw, 136px); line-height: .82; letter-spacing: -0.055em; }
.hero2 .hr { position: relative; min-width: 0; }
#profile + .hero2 { margin-top: 140px; }
.ghost { position: absolute; top: -6px; right: 0; pointer-events: none; mix-blend-mode: multiply; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ruled { list-style: none; margin: 0; padding: 0; }
.ruled li { border-bottom: 1px solid var(--rule); }
.ruled li.blank { height: 17px; }
.ruled .row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; padding-top: 1px; min-height: 17px; }
.ruled .row:hover { background: #f1f1ec; opacity: 1; }

.block { color: #000; }
.block:hover { opacity: 1; }
.imgs { grid-row: 3; margin-top: 52px; display: grid; gap: 3px; }
.imgs img { object-fit: cover; transition: filter .4s ease; }
.imgs video { width: 100%; aspect-ratio: 16 / 9; }

.sidegrid { grid-column: 1 / 9; margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 24px; }
.sidecard:hover { opacity: 1; }
.sidecard .thumb { background: #0b0b0b; aspect-ratio: 16 / 10; overflow: hidden; }
.sidecard .thumb img { height: 100%; object-fit: cover; object-position: top; transition: filter .4s ease; }
.sidecap { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #000; }

.career { list-style: none; margin: 48px 0 0; padding: 0; }
.career li { display: grid; grid-template-columns: 48px 1fr 1fr auto; gap: 8px; border-bottom: 1px solid var(--rule); padding-top: 1px; }

.top { padding: 0 0 10px; }
.heroimg { background: #0b0b0b; }
.heroimg img, .heroimg video { height: clamp(320px, 46vw, 780px); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); column-gap: 24px; margin: 48px 0 0; }
.facts > div { border-top: 1px solid #000; padding-top: 8px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 2px 0 0; }
.live { display: flex; justify-content: space-between; margin-top: 24px; padding: 14px 16px; background: #000; color: #fff; font-size: 14px; }
.toc { margin-top: 56px; }
.tochead { padding-bottom: 2px; border-bottom: 1px solid #000; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding-top: 1px; }
.chap { margin-top: 140px; scroll-margin-top: 24px; }
.chap .uxnote { grid-column: 5 / 9; grid-row: 4; margin: 28px 0 0; max-width: 520px; }
.fullimg { grid-row: 3; margin-top: 40px; background: #0b0b0b; }
.fullimg iframe.embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.pairimg iframe.embed { width: 100%; height: 100%; border: 0; }
.fullimg img, .fullimg video { height: auto; max-height: 1100px; object-fit: contain; }
.pairimg { grid-row: 3; margin-top: 40px; background: #0b0b0b; aspect-ratio: 4 / 3; display: flex; align-items: center; }
.pairimg img, .pairimg video { height: 100%; }
.next { margin-top: 160px; color: #000; }
.next .mega { grid-row: 3; }

.locked { position: relative; min-height: 760px; overflow: hidden; background: #0b0b0b; }
.lockbg { position: absolute; inset: 0; height: 100%; object-fit: cover; filter: blur(28px) grayscale(.4) brightness(.55); transform: scale(1.1); }
.lockin { position: relative; padding: 28px 24px 40px; color: #fff; }
.lockin .cap { grid-row: auto; }
.lockin > .cap:nth-of-type(1), .lockin > .cap:nth-of-type(2), .lockin > .cap:nth-of-type(3) { grid-row: 2; }
#lockform { display: flex; flex-direction: column; gap: 8px; }
.pwrow { display: flex; }
.pwrow input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 1px solid #fff; border-right: 0; background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 16px; }
.pwrow button { min-height: 52px; padding: 0 24px; border: 1px solid #fff; background: #fff; color: #000; font: inherit; font-size: 14px; cursor: pointer; }
.err { color: #ff8a7a; min-height: 17px; }

.morebtn { margin-top: 32px; min-height: 56px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; background: #000; color: #fff; border: 0; font: inherit; font-size: 14px; letter-spacing: -0.02em; cursor: pointer; }
.morebtn:hover { background: #222; }
.morebtn:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.procgrid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 24px; }
.procgrid[hidden] { display: none; }
.pcell { margin: 0; }
.pthumb { background: #0b0b0b; aspect-ratio: 4 / 3; display: flex; align-items: center; }
.pthumb video { height: 100%; object-fit: contain; }
.pcell figcaption { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #000; font-size: 14px; line-height: 17px; }

@media (max-width: 760px) {
  .hero2 { grid-template-columns: 1fr; }
  .g8 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; }
  .g8 > * { grid-column: 1 / -1 !important; }
  .g8 > .bar { grid-row: auto; }
  .g8 > .cap { grid-row: auto; padding-top: 6px; text-align: left !important; }
  .imgs, .fullimg, .pairimg { grid-row: auto; margin-top: 20px; }
  .g8 > .morebtn, .g8 > .procgrid, .g8 > p.cap, .g8 > .uxnote { grid-row: auto !important; }
  .g4 > * { grid-column: 1 / -1 !important; }
  .g4 > .cap { grid-row: auto; }
  .stripes { width: 28px; gap: 3px; }
  .career li { grid-template-columns: 32px 1fr auto; }
  .career li span:nth-child(3) { display: none; }
}

/* career fold (Baoneng and earlier) */
.career .old { display: none; }
.career.open .old { display: grid; }
.career .cfold { cursor: pointer; user-select: none; }
.career .cfold:hover span, .career .cfold:focus-visible span { opacity: .6; }
.career .cfold .yrs { font-weight: inherit; }
.career .cfold .tg::before { content: '+'; display: inline-block; width: 1em; text-align: right; margin-left: 6px; font-style: normal; }
.career.open .cfold .tg::before { content: '−'; }
.career.open .cfold .yrs { display: none; }
.career.open .cfold .tg::after { content: 'Close'; }
.career.open .cfold .tg::before { content: ''; width: 0; margin: 0; }

/* hide ’27 while hovering the index list */
.hero2 .ghost { transition: opacity .25s ease; }
@media (hover: hover) { .hero2 .hr:has(.ruled:hover) .ghost { opacity: 0; } }

/* career: one column grid shared by every row (subgrid), logos, total */
.career .logo { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; }
.career .logo[style] { background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.career .chead { border-bottom-color: #000; }
.career .chead .r { grid-column: -2 / -1; }
@supports (grid-template-columns: subgrid) {
  .career { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 8px; }
  .career li { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

@media (max-width: 760px) {
  /* index list: one title column, no stagger */
  .ruled .row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .ruled .row > span:nth-child(2) { padding-left: 0 !important; }
  .ruled .row > .r { white-space: nowrap; }
  /* ’27 sits on the Works row, right side */
  .hero2 { position: relative; }
  .hero2 .hr { position: static; }
  .career li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  /* paired chapters: each caption sits on top of its own image */
  .chap > div.cap:nth-child(n+5), .chap > .pairimg + .pairimg { order: 1; }
  .chap > div.cap:nth-child(5) { margin-top: 32px; }
  /* lock screen: 00 and Locked no longer share one row */
  .lockin > .cap { grid-row: auto !important; }
  /* bigger touch area for small text links, same look */
  @supports (grid-template-columns: subgrid) { .career { grid-template-columns: 40px minmax(0, 1fr) auto; } .career li { grid-template-columns: subgrid; } }
}

/* larger hit area for small text links, no visual change */
@media (max-width: 760px), (pointer: coarse) { .nav a, .top > a { display: inline-block; padding: 14px 0; margin: -14px 0; } }
/* tap-to-open images */
.zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.zoom:hover { opacity: 1; }
.fullimg .zoom { height: auto; }
/* chapter note sits between title and image (title -> why -> screen) */
.chap .uxnote { grid-row: 3; margin-top: 12px; }
.chap .fullimg.noted { grid-row: 4; }
/* portrait captures (phone) in a narrow centred box */
.fullimg.tall { justify-self: center; width: 100%; max-width: 480px; }
/* compact locked rows on home */
.lockrow { color: #000; }
.lockrow:hover { opacity: 1; }
.lockrow:hover .cap { opacity: .65; }

@media (max-width: 760px) {
  /* index + toc rows: bigger tap rows */
  .ruled .row { padding: 7px 0 6px; }
  .toc a { padding: 7px 0 6px; }
  /* home tiles: one 16:9 image instead of a 4:5 triptych */
  .block .imgs { grid-template-columns: minmax(0, 1fr) !important; }
  .block .imgs img, .block .imgs video { aspect-ratio: 16 / 9 !important; }
  .block .imgs img + img { display: none; }
  /* project hero */
  .heroimg img, .heroimg video { height: auto; aspect-ratio: 16 / 10; }
  .heroimg.screen img { object-fit: contain !important; }
  /* spacing */
  .chap { margin-top: 88px; }
  a.block, a.lockrow { margin-top: 64px !important; }
  .hero2 + a.block, .hero2 + a.lockrow { margin-top: 36px !important; }
  a.block + section, a.lockrow + section { margin-top: 96px !important; }
  #profile + .hero2 { margin-top: 96px; }
  .next { margin-top: 104px; }
  .chap .uxnote { margin-top: 12px; }
  .chap .fullimg.noted { grid-row: auto; }
  /* reading text */
  .body { font-size: 15px; line-height: 22px; }
  .lede { line-height: 26px; }
  /* career: role in grey under the company */
  .career li span:nth-child(3) { display: block; grid-column: 2; grid-row: 2; color: var(--muted); padding-left: 24px; }
  .career .cfold span:nth-child(3) { padding-left: 24px; }
  .career li span:nth-child(4) { grid-column: 3; grid-row: 1; }
  .career li { row-gap: 0; }
  .career li span:nth-child(3) { padding-bottom: 1px; }
  /* compact project header: ← Works ... 22 / 23, then code · category */
  .g8.top { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; }
  .g8.top > :nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1; }
  .g8.top > :nth-child(4) { grid-column: 3 / 4 !important; grid-row: 1; }
  .g8.top > :nth-child(2) { grid-column: 1 / 2 !important; grid-row: 2; }
  .g8.top > :nth-child(3) { grid-column: 2 / 4 !important; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}