/* Matthew Xu — Editor
   左栏固定索引 + 右栏视频流。排版语言取自 mattnee.com */

:root {
  --bg:    #0e0e10;   /* 暗房底 */
  --ink:   #ece8e0;   /* 暖白 */
  --mute:  #9b968c;   /* 灰褐 */
  --faint: #6d675e;   /* 更暗 */
  --rule:  #26262a;   /* 细线 */
  --gold:  #d3a04c;   /* 香槟金：唯一强调色 */
  --panel: #141416;
  --pad:   26px;
  --side:  minmax(330px, 38%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  display: grid;
  grid-template-columns: var(--side) 1fr;
  background: var(--bg);
  color: var(--ink);
  font-family: "SF Mono", ui-monospace, "Menlo", "DejaVu Sans Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 左栏：索引 ---------- */
.side {
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 24px var(--pad) 20px;
  border-right: 1px solid var(--rule);
  scrollbar-width: thin;
}
.side-head { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.side-head .name {
  display: block; color: var(--ink); text-decoration: none;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 400;
}
.side-head .contact {
  display: flex; gap: 18px; margin-top: 7px;
  color: var(--mute); font-size: 11px; letter-spacing: .1em;
}
.side-head .contact a { color: var(--mute); text-decoration: none; }
.side-head .contact a:hover { color: var(--gold); }

.side-nav { padding: 16px 0 14px; border-bottom: 1px solid var(--rule); }
.side-nav .lat {
  display: block; color: var(--ink); text-decoration: none;
  letter-spacing: .16em; text-transform: uppercase; font-size: 12px;
  margin-bottom: 14px;
}
.cats { display: flex; flex-direction: column; gap: 3px; }
.cats a {
  color: var(--ink); text-decoration: none;
  letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px;
}
.cats a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cats a.on { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.idx { list-style: none; padding: 14px 0 20px; }
.idx li { line-height: 1.62; }
.idx a {
  color: var(--ink); text-decoration: none; letter-spacing: .01em;
  display: block;
}
.idx a b { font-weight: 700; color: var(--ink); }
.idx a:hover { color: var(--gold); }
.idx li.hide { display: none; }

/* ---------- 右栏：视频流 ---------- */
main { padding: 24px var(--pad) 70px; min-width: 0; }

.stage {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}
.stage video {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.stage { box-shadow: 0 0 0 1px #1c1c20; }

.credits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 36px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--rule);
}
.credits .client {
  display: inline-block;
  color: var(--gold); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.credits .role { display: block; color: var(--mute); margin-top: 5px; letter-spacing: .1em; font-size: 12px; }
.credits .title { display: block; color: var(--ink); }
.credits .dur { display: block; color: var(--mute); margin-top: 5px; letter-spacing: .1em; font-size: 12px; }

.work + .work { padding-top: 30px; }

/* ---------- 托管方注入的浮标，对作品集不需要 ---------- */
#minimax-floating-ball { display: none !important; }

/* ---------- 响应式 ---------- */@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .side {
    position: static; height: auto; max-height: 58vh;
    border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .credits { grid-template-columns: 1fr; gap: 12px; }
  main { padding: 18px var(--pad) 50px; }
}