: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; }
.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; }

.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; }
.hero2 .hr:has(.ruled:hover) .ghost { opacity: 0; }