:root {
  --black: #0d0f0e;
  --black-soft: #151815;
  --ink: #ebe9e2;
  --ink-strong: #fbfaf6;
  --muted: #9ea29c;
  --paper: #e8e4da;
  --paper-2: #ddd8cc;
  --paper-ink: #171a17;
  --paper-muted: #62675f;
  --line: rgba(240, 238, 229, .16);
  --paper-line: rgba(23, 26, 23, .18);
  --moss: #8f9b75;
  --copper: #ad6849;
  --serif: Georgia, "Songti SC", "STSong", serif;
  --sans: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
  color-scheme: dark;
  font-family: var(--sans);
  background: var(--black);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--black); color: var(--ink); }
body, button, a { letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
video { width: 100%; background: #050605; }
h1, h2, h3, p, figure, dl, dd, dt, ul { margin: 0; }
h1, h2, h3 { font-weight: 400; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 9px 13px; background: var(--paper); color: var(--paper-ink); transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 68px;
  padding: 0 5vw;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.site-header.is-scrolled { background: rgba(13, 15, 14, .97); border-color: var(--line); }
.wordmark { color: var(--ink-strong); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.wordmark span { margin: 0 7px; color: var(--moss); }
.main-nav { display: flex; gap: 27px; color: #b8bab4; font-size: 10px; }
.main-nav a, .header-contact { transition: color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible, .header-contact:hover, .header-contact:focus-visible { color: var(--ink-strong); }
.header-contact { justify-self: end; color: #c7cac3; font-size: 10px; }
.header-contact span { margin-left: 4px; color: var(--moss); font-size: 14px; }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
  align-items: center;
  gap: clamp(52px, 7vw, 118px);
  padding: 120px 7vw 80px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 72% 38%, rgba(143, 155, 117, .11), transparent 35%), linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.018) 44.1% 44.2%, transparent 44.3%); }
.hero-copy { position: relative; z-index: 2; }
.identity, .kicker { color: var(--moss); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.identity span { margin: 0 9px; color: var(--copper); }
.hero h1 { margin-top: 25px; color: var(--ink-strong); font-family: var(--serif); font-size: clamp(68px, 8.2vw, 134px); line-height: .9; letter-spacing: -.055em; }
.role { margin-top: 32px; color: var(--ink); font-size: clamp(15px, 1.45vw, 21px); line-height: 1.7; }
.role i { margin: 0 .35em; color: var(--copper); font-style: normal; }
.hero-deck { max-width: 570px; margin-top: 22px; color: var(--muted); font-size: 13px; line-height: 2; }
.hero-status { display: flex; flex-wrap: wrap; gap: 9px 24px; margin-top: 38px; color: #c8cbc3; font-size: 9px; letter-spacing: .08em; }
.hero-status span { position: relative; }
.hero-status span + span::before { content: ""; position: absolute; left: -14px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--copper); transform: translateY(-50%); }

.hero-mosaic { position: relative; z-index: 1; display: grid; grid-template-columns: 1.32fr .68fr; grid-template-rows: 1fr 1fr; gap: 10px; height: min(70vh, 720px); min-height: 520px; }
.hero-mosaic figure { position: relative; overflow: hidden; background: #090a09; }
.hero-mosaic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.04) brightness(.72); transform: scale(1.015); transition: filter .6s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hero-mosaic figure:hover img { filter: saturate(.94) contrast(1.03) brightness(.87); transform: scale(1.04); }
.mosaic-main { grid-row: 1 / 3; }
.hero-mosaic figcaption { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 10px; align-items: center; color: rgba(255,255,255,.82); font-family: var(--serif); font-size: 12px; }
.hero-mosaic figcaption span { color: rgba(255,255,255,.42); font-family: var(--sans); font-size: 8px; letter-spacing: .12em; }
.scroll-cue { position: absolute; z-index: 3; left: 7vw; bottom: 28px; color: #7f837c; font-size: 9px; letter-spacing: .1em; }
.scroll-cue span { margin-left: 8px; color: var(--moss); }

.section { padding: 135px 7vw; }
.light-section { background: var(--paper); color: var(--paper-ink); }
.dark-section { background: var(--black-soft); }
.section-heading { display: grid; grid-template-columns: minmax(250px, .85fr) minmax(280px, 1.15fr); gap: clamp(42px, 8vw, 145px); align-items: end; margin-bottom: 76px; padding-bottom: 25px; border-bottom: 1px solid var(--paper-line); }
.section-heading h2, .archive-heading h2, .about h2 { margin-top: 15px; font-family: var(--serif); font-size: clamp(48px, 6vw, 92px); line-height: .95; letter-spacing: -.045em; }
.section-heading > p, .archive-heading > p { max-width: 580px; color: var(--paper-muted); font-size: 13px; line-height: 1.9; }
.dark-heading { border-color: var(--line); }
.dark-heading h2 { color: var(--ink-strong); }
.dark-heading > p { color: var(--muted); }

.video-shell { position: relative; overflow: hidden; background: #060706; }
.video-shell video { aspect-ratio: 16 / 9; object-fit: contain; }
.media-index { position: absolute; z-index: 2; right: 12px; top: 11px; padding: 5px 7px; background: rgba(8,9,8,.76); color: rgba(255,255,255,.76); font-size: 8px; letter-spacing: .12em; pointer-events: none; }
.feature-project { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: clamp(38px, 6vw, 100px); align-items: start; }
.feature-copy { padding-top: 8px; }
.project-type { color: var(--copper); font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.project-head h3, .card-copy h3, .doc-copy h3 { margin-top: 13px; font-family: var(--serif); font-size: clamp(31px, 3vw, 48px); line-height: 1.12; letter-spacing: -.025em; }
.project-summary, .card-copy > p:not(.project-type), .doc-copy > p:not(.project-type) { margin-top: 25px; color: var(--paper-muted); font-size: 12px; line-height: 1.95; }
.project-facts { margin-top: 35px; border-top: 1px solid var(--paper-line); }
.project-facts div { display: grid; grid-template-columns: 54px 1fr; gap: 17px; padding: 13px 0; border-bottom: 1px solid var(--paper-line); }
.project-facts dt { color: #8b756a; font-size: 9px; }
.project-facts dd { font-size: 11px; line-height: 1.55; }

.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 76px 18px; margin-top: 110px; }
.project-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(290px, .72fr); gap: clamp(35px, 6vw, 92px); align-items: center; }
.card-copy { padding: 20px 7px 0; }
.project-card-wide .card-copy { padding-top: 0; }
.card-copy h3 { font-size: clamp(29px, 3.4vw, 51px); }
.tags { display: flex; flex-wrap: wrap; gap: 8px 19px; margin-top: 25px; padding: 15px 0 0; border-top: 1px solid var(--paper-line); list-style: none; color: #555d54; font-size: 9px; }
.tags li::before { content: "+"; margin-right: 6px; color: var(--copper); }
.award-line { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--paper-line); color: #7f5e49; font-size: 10px; font-weight: 700; letter-spacing: .03em; }

.documentary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 85px 18px; }
.doc-card-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: clamp(38px, 6vw, 96px); align-items: center; }
.doc-copy { padding: 20px 7px 0; }
.doc-card-lead .doc-copy { padding-top: 0; }
.doc-copy .project-type { color: var(--moss); }
.doc-copy h3 { color: var(--ink-strong); font-size: clamp(28px, 3vw, 45px); }
.doc-copy > p:not(.project-type) { color: var(--muted); }
.award-dark { border-color: var(--line); color: #bec7a9; }

.social-section { position: relative; overflow: hidden; background: #111512; }
.social-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 22%, rgba(143,155,117,.12), transparent 34%), linear-gradient(135deg, transparent 0 54%, rgba(255,255,255,.018) 54.1% 54.2%, transparent 54.3%); }
.social-section > * { position: relative; }
.social-panel { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(52px, 8vw, 130px); align-items: start; }
.social-copy h3 { margin-top: 15px; color: var(--ink-strong); font-family: var(--serif); font-size: clamp(44px, 5vw, 76px); line-height: 1; letter-spacing: -.04em; }
.social-copy > p:last-child { max-width: 610px; margin-top: 28px; color: var(--muted); font-size: 12px; line-height: 2; }
.platform-grid { display: grid; gap: 16px; }
.platform-card { padding: clamp(24px, 3.5vw, 42px); border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.platform-card-head { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.platform-card-head span { color: var(--moss); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.platform-card-head small { color: #737970; font-size: 9px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 26px 0 22px; }
.metric-grid div { min-width: 0; }
.metric-grid dt { color: var(--ink-strong); font-family: var(--serif); font-size: clamp(26px, 3vw, 43px); line-height: 1; }
.metric-grid dd { margin-top: 9px; color: #858b82; font-size: 8px; letter-spacing: .08em; }
.platform-link { display: inline-flex; align-items: center; gap: 7px; color: #c8ccc3; font-size: 9px; letter-spacing: .06em; transition: color .2s ease; }
.platform-link span { color: var(--copper); font-size: 13px; }
.platform-link:hover, .platform-link:focus-visible { color: var(--ink-strong); }

.visual-archive { padding: 90px 7vw 110px; background: var(--paper-2); color: var(--paper-ink); }
.archive-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; padding-bottom: 18px; border-bottom: 1px solid var(--paper-line); }
.archive-heading h2 { font-size: clamp(34px, 4vw, 60px); }
.archive-heading > p { max-width: 420px; text-align: right; font-size: 11px; }
.poster-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.poster-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #cfc9bd; filter: saturate(.74) contrast(.96); transition: filter .3s ease; }
.poster-card:nth-child(n+2) img { object-fit: contain; background: #292b28; }
.poster-card:hover img { filter: saturate(.94) contrast(1); }
.poster-card figcaption { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; }
.poster-card strong { font-family: var(--serif); font-size: 14px; font-weight: 400; }
.poster-card span { color: #78796f; font-size: 8px; }

.about { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: clamp(50px, 10vw, 170px); background: var(--paper); color: var(--paper-ink); border-top: 1px solid var(--paper-line); }
.about h2 { font-size: clamp(52px, 6vw, 90px); }
.about-identity { margin-top: 36px; color: #74786f; font-family: var(--serif); font-size: 17px; line-height: 1.75; }
.about-body { max-width: 760px; padding-top: 30px; }
.about-body > p { color: #50564e; font-size: 14px; line-height: 2; }
.about-body > p + p { margin-top: 20px; }
.capabilities { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 40px; padding-top: 19px; border-top: 1px solid var(--paper-line); color: #323831; font-size: 10px; }
.capabilities span::before { content: "+"; margin-right: 6px; color: var(--copper); }

.site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; padding: 80px 7vw 34px; background: var(--black); }
.site-footer h2 { margin-top: 18px; color: var(--ink-strong); font-family: var(--serif); font-size: clamp(44px, 5.2vw, 78px); line-height: 1; }
.site-footer > div:first-child > p:last-child { margin-top: 15px; color: var(--muted); font-size: 11px; }
.contact-list { align-self: end; border-top: 1px solid var(--line); }
.contact-list a, .contact-list p { display: grid; grid-template-columns: 80px 1fr; padding: 13px 0; border-bottom: 1px solid var(--line); color: #d8dbd3; font-family: var(--serif); font-size: 15px; }
.contact-list span { color: #737870; font-family: var(--sans); font-size: 9px; }
.contact-list a:hover { color: var(--moss); }
.footer-base { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 45px; padding-top: 13px; border-top: 1px solid var(--line); color: #696e67; font-size: 9px; letter-spacing: .08em; }
.footer-base a:hover { color: var(--ink); }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .48s ease, transform .48s cubic-bezier(.2,.72,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@supports (content-visibility: auto) {
  .section, .visual-archive, .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .main-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero { grid-template-columns: 1fr; align-items: end; padding-top: 120px; }
  .hero-copy { max-width: 700px; }
  .hero-mosaic { height: 55vh; min-height: 420px; }
  .scroll-cue { display: none; }
  .feature-project, .project-card-wide, .doc-card-lead, .social-panel { grid-template-columns: 1fr; gap: 38px; }
  .feature-copy, .project-card-wide .card-copy, .doc-card-lead .doc-copy { max-width: 720px; }
  .poster-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
}

@media (max-width: 700px) {
  .site-header { min-height: 58px; padding: 0 20px; background: rgba(13,15,14,.9); border-color: var(--line); }
  .wordmark, .header-contact { font-size: 9px; }
  .hero { min-height: auto; gap: 52px; padding: 105px 22px 60px; }
  .identity { font-size: 9px; }
  .hero h1 { font-size: clamp(66px, 23vw, 96px); }
  .role { margin-top: 24px; font-size: 14px; }
  .hero-deck { font-size: 12px; }
  .hero-status { display: grid; gap: 8px; }
  .hero-status span + span::before { display: none; }
  .hero-mosaic { grid-template-columns: 1fr 1fr; height: 58vh; min-height: 450px; }
  .mosaic-main { grid-column: 1 / -1; grid-row: auto; }
  .section { padding: 88px 22px; }
  .section-heading { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .section-heading h2, .about h2 { font-size: 50px; }
  .feature-project { gap: 31px; }
  .project-grid, .documentary-grid { grid-template-columns: 1fr; gap: 62px; margin-top: 75px; }
  .project-card-wide, .doc-card-lead { grid-column: auto; }
  .card-copy, .doc-copy { padding: 18px 0 0; }
  .metric-grid { gap: 10px; }
  .project-head h3, .card-copy h3, .doc-copy h3 { font-size: 32px; }
  .visual-archive { padding: 70px 22px 82px; }
  .archive-heading { display: block; }
  .archive-heading > p { margin-top: 17px; text-align: left; }
  .poster-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poster-card figcaption { display: grid; }
  .about { grid-template-columns: 1fr; gap: 35px; }
  .about-body { padding-top: 0; }
  .site-footer { grid-template-columns: 1fr; padding: 70px 22px 30px; }
  .footer-base { grid-column: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 420px) {
  .hero-mosaic { min-height: 390px; }
  .poster-strip { grid-template-columns: 1fr 1fr; }
  .contact-list a, .contact-list p { grid-template-columns: 58px 1fr; font-size: 13px; }
}