:root {
      --ink: #151615;
      --paper: #f4f0e6;
      --paper-deep: #e0d5bf;
      --fog: #f9f7f0;
      --salt: #d9e1dc;
      --sea: #25545b;
      --deep: #10282d;
      --rust: #9a4f34;
      --green: #5e7157;
      --line: rgba(21, 22, 21, .18);
      --shadow: 0 24px 70px rgba(16, 40, 45, .22);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
      line-height: 1.65;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: var(--paper-deep);
    }

    button, a {
      font: inherit;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .site-nav {
      position: fixed;
      z-index: 30;
      top: 18px;
      left: 50%;
      display: flex;
      gap: 6px;
      align-items: center;
      max-width: calc(100vw - 28px);
      padding: 7px;
      border: 1px solid rgba(244, 240, 230, .32);
      background: rgba(16, 40, 45, .62);
      color: var(--fog);
      transform: translateX(-50%);
      backdrop-filter: blur(18px);
    }

    .site-nav a {
      display: inline-flex;
      min-height: 34px;
      align-items: center;
      padding: 5px 11px;
      white-space: nowrap;
      font-size: 13px;
      letter-spacing: 0;
    }

    .site-nav a:hover {
      background: rgba(244, 240, 230, .16);
    }

    .site-nav {
      scrollbar-width: none;
    }

    .site-nav::-webkit-scrollbar {
      display: none;
    }

    .hero {
      position: relative;
      min-height: 92vh;
      display: grid;
      align-items: end;
      overflow: hidden;
      color: var(--fog);
      background: var(--deep);
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(16, 40, 45, .88), rgba(16, 40, 45, .36) 46%, rgba(16, 40, 45, .14)),
        linear-gradient(0deg, rgba(16, 40, 45, .86), rgba(16, 40, 45, .1) 48%, rgba(16, 40, 45, .35));
    }

    .hero-media {
      position: absolute;
      inset: 0;
    }

    .hero-media img,
    .hero-media video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-media img {
      opacity: .9;
      filter: saturate(.86) contrast(1.04);
    }

    .hero-media video {
      z-index: 1;
      opacity: .92;
      filter: saturate(.86) contrast(1.04);
    }

    .hero-content {
      position: relative;
      z-index: 1;
      width: min(1180px, calc(100vw - 36px));
      margin: 0 auto;
      padding: 128px 0 88px;
    }

    .kicker {
      margin: 0 0 14px;
      color: rgba(249, 247, 240, .78);
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    h1, h2, h3, p {
      margin-top: 0;
    }

    h1 {
      max-width: 900px;
      margin-bottom: 18px;
      font-size: clamp(48px, 8vw, 112px);
      line-height: .98;
      letter-spacing: 0;
      font-weight: 700;
    }

    .lead {
      max-width: 680px;
      margin: 0;
      font-size: clamp(18px, 2vw, 25px);
      line-height: 1.55;
    }

    .version-pill {
      display: inline-flex;
      min-height: 34px;
      align-items: center;
      margin-bottom: 18px;
      padding: 5px 12px;
      border: 1px solid rgba(249, 247, 240, .48);
      background: rgba(249, 247, 240, .1);
      color: var(--fog);
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .hero-strip {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      width: min(1180px, calc(100vw - 36px));
      margin: -54px auto 0;
    }

    .strip-item {
      min-height: 138px;
      overflow: hidden;
      border: 1px solid rgba(249, 247, 240, .34);
      background: var(--paper-deep);
      box-shadow: var(--shadow);
    }

    .media-mosaic {
      position: relative;
      z-index: 3;
      width: min(1280px, calc(100vw - 72px));
      min-height: 760px;
      margin: -30px auto 96px;
    }

    .media-tile {
      position: absolute;
      overflow: hidden;
      border: 1px solid rgba(249, 247, 240, .46);
      border-radius: 8px;
      background: var(--paper-deep);
      box-shadow: var(--shadow);
      transition: transform .65s ease, filter .65s ease, opacity .65s ease;
    }

    .media-tile:hover,
    .media-tile.is-active {
      transform: translateY(-10px) scale(1.018);
      filter: contrast(1.05) saturate(.95);
    }

    .media-tile img {
      transition: transform 8s ease;
    }

    .media-tile:hover img,
    .media-tile.is-active img {
      transform: scale(1.08);
    }

    .media-main {
      left: 28%;
      top: 32px;
      width: 44%;
      height: 300px;
    }

    .media-left {
      left: 2%;
      top: 168px;
      width: 31%;
      height: 255px;
    }

    .media-right {
      right: 2%;
      top: 146px;
      width: 28%;
      height: 320px;
    }

    .media-bottom {
      left: 38%;
      top: 468px;
      width: 36%;
      height: 230px;
    }

    .motion-stack {
      position: absolute;
      inset: 0;
    }

    .motion-stack img {
      position: absolute;
      inset: 0;
      opacity: 0;
      animation: motionFade 12s infinite;
    }

    .motion-stack img:nth-child(1) {
      opacity: 1;
      animation-delay: 0s;
    }

    .motion-stack img:nth-child(2) {
      animation-delay: 4s;
    }

    .motion-stack img:nth-child(3) {
      animation-delay: 8s;
    }

    .video-mark {
      position: absolute;
      right: 14px;
      bottom: 14px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 4px 10px;
      border: 1px solid rgba(249, 247, 240, .5);
      background: rgba(16, 40, 45, .64);
      color: var(--fog);
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      backdrop-filter: blur(12px);
    }

    .mosaic-caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 12px 14px;
      background: linear-gradient(0deg, rgba(16, 40, 45, .78), rgba(16, 40, 45, 0));
      color: var(--fog);
      font-size: 13px;
      letter-spacing: .03em;
    }

    @keyframes motionFade {
      0%, 28% {
        opacity: 1;
        transform: scale(1);
      }

      36%, 92% {
        opacity: 0;
        transform: scale(1.1);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    main {
      overflow: hidden;
    }

    .section {
      padding: 108px 0;
    }

    .section.alt {
      background: var(--fog);
    }

    .wrap {
      width: min(1180px, calc(100vw - 36px));
      margin: 0 auto;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(280px, 1.2fr);
      gap: 56px;
      align-items: end;
      margin-bottom: 42px;
    }

    .eyebrow {
      margin: 0 0 12px;
      color: var(--rust);
      font-size: 13px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    h2 {
      margin-bottom: 0;
      font-size: clamp(34px, 5vw, 72px);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .section-head p {
      margin: 0;
      max-width: 680px;
      font-size: 18px;
    }

    .intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
      gap: 28px;
      align-items: stretch;
    }

    .map-panel {
      min-height: 560px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--paper-deep);
    }

    .archive-note {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 560px;
      padding: 34px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(224, 213, 191, .52), rgba(244, 240, 230, .88));
    }

    .archive-note strong {
      display: block;
      margin-bottom: 12px;
      color: var(--sea);
      font-size: 24px;
      line-height: 1.25;
    }

    .archive-note p {
      margin-bottom: 22px;
    }

    .code-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      border: 1px solid var(--line);
      padding: 4px 9px;
      color: var(--deep);
      background: rgba(249, 247, 240, .48);
      font-size: 12px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .timeline {
      display: grid;
      gap: 1px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--line);
    }

    .time-row {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr) 270px;
      gap: 28px;
      align-items: start;
      padding: 26px 0;
      background: var(--fog);
    }

    .time-row > * {
      padding: 0 24px;
    }

    .year {
      color: var(--rust);
      font-size: 28px;
      line-height: 1;
      font-weight: 700;
    }

    .time-row h3 {
      margin-bottom: 8px;
      font-size: 22px;
      line-height: 1.25;
    }

    .time-row p {
      margin: 0;
    }

    .time-meta {
      color: rgba(21, 22, 21, .62);
      font-size: 13px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .chapter {
      min-height: 82vh;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
      border-top: 1px solid var(--line);
      background: var(--paper);
    }

    .chapter:nth-child(even) {
      background: var(--fog);
    }

    .chapter-media {
      position: sticky;
      top: 0;
      height: 100vh;
      min-height: 620px;
      overflow: hidden;
      background: var(--deep);
    }

    .chapter-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(16, 40, 45, .28), transparent 52%);
      pointer-events: none;
    }

    .chapter-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 28px;
      padding: 110px min(8vw, 86px);
    }

    .chapter-number {
      color: var(--rust);
      font-size: 14px;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .chapter h2 {
      font-size: clamp(32px, 4vw, 62px);
    }

    .chapter-copy {
      max-width: 560px;
      font-size: 18px;
    }

    .specimen-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .specimen-list li {
      display: grid;
      grid-template-columns: 94px 1fr;
      gap: 16px;
      padding: 14px 0;
      border-top: 1px solid var(--line);
    }

    .specimen-list span {
      color: var(--sea);
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 12px;
    }

    .image-section .section-head {
      grid-template-columns: minmax(0, .72fr) minmax(260px, .9fr);
      margin-bottom: 28px;
    }

    .image-section .section-head p {
      max-width: 520px;
      color: rgba(21, 22, 21, .68);
      font-size: 15px;
    }

    .image-section h2 {
      font-size: clamp(30px, 4.5vw, 56px);
    }

    .image-section .gallery-grid {
      gap: 16px;
    }

    .image-section .archive-card {
      min-height: 290px;
      border-radius: 8px;
    }

    .image-section .archive-card.wide {
      min-height: 360px;
    }

    .image-section .archive-card.tall {
      min-height: 590px;
    }

    .image-section .caption {
      padding: 12px 14px;
    }

    .image-section .caption b {
      font-size: 14px;
    }

    .archive-card {
      position: relative;
      grid-column: span 3;
      min-height: 330px;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--fog);
      cursor: pointer;
      text-align: left;
      color: inherit;
      padding: 0;
    }

    .archive-card.wide {
      grid-column: span 6;
    }

    .archive-card.tall {
      grid-row: span 2;
      min-height: 672px;
    }

    .thumb {
      min-height: 250px;
      overflow: hidden;
      background: var(--paper-deep);
    }

    .archive-card img {
      transition: transform .45s ease, filter .45s ease;
    }

    .archive-card:hover img {
      transform: scale(1.045);
      filter: saturate(.88) contrast(1.08);
    }

    .caption {
      padding: 16px;
      background: rgba(249, 247, 240, .94);
      border-top: 1px solid var(--line);
    }

    .caption b {
      display: block;
      margin-bottom: 4px;
      font-size: 15px;
      line-height: 1.25;
    }

    .caption small {
      color: rgba(21, 22, 21, .62);
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .curatorial {
      color: var(--fog);
      background: var(--deep);
    }

    .curatorial-grid {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: 58px;
      align-items: start;
    }

    .curatorial h2 {
      color: var(--fog);
    }

    .curatorial p {
      color: rgba(249, 247, 240, .78);
      font-size: 18px;
    }

    .method {
      display: grid;
      gap: 1px;
      background: rgba(249, 247, 240, .18);
      border: 1px solid rgba(249, 247, 240, .18);
    }

    .method div {
      padding: 22px;
      background: rgba(249, 247, 240, .06);
    }

    .method h3 {
      margin-bottom: 8px;
      font-size: 20px;
      color: var(--salt);
    }

    .method p {
      margin: 0;
      font-size: 15px;
    }

    footer {
      padding: 42px 0;
      background: #0b1c1f;
      color: rgba(249, 247, 240, .68);
      font-size: 13px;
    }

    .modal {
      position: fixed;
      z-index: 60;
      inset: 0;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(11, 28, 31, .86);
    }

    .modal.is-open {
      display: grid;
    }

    .modal-inner {
      width: min(1120px, 100%);
      max-height: calc(100vh - 48px);
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
      overflow: hidden;
      border: 1px solid rgba(249, 247, 240, .24);
      background: var(--fog);
      box-shadow: var(--shadow);
    }

    .modal-image {
      min-height: 520px;
      background: var(--deep);
    }

    .modal-text {
      position: relative;
      overflow: auto;
      padding: 34px;
    }

    .modal-text h3 {
      margin-right: 38px;
      font-size: 28px;
      line-height: 1.2;
    }

    .modal-close {
      position: absolute;
      top: 22px;
      right: 22px;
      width: 36px;
      height: 36px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
    }

    @media (max-width: 920px) {
      .site-nav {
        width: calc(100vw - 24px);
        overflow-x: auto;
        justify-content: flex-start;
      }

      .hero-strip {
        grid-template-columns: repeat(2, 1fr);
      }

      .media-mosaic {
        min-height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: -40px;
      }

      .media-tile,
      .media-main,
      .media-left,
      .media-right,
      .media-bottom {
        position: relative;
        inset: auto;
        width: auto;
        height: 230px;
      }

      .media-main {
        grid-column: 1 / -1;
        height: 260px;
      }

      .section-head,
      .intro-grid,
      .curatorial-grid,
      .chapter,
      .modal-inner {
        grid-template-columns: 1fr;
      }

      .chapter-media {
        position: relative;
        height: 62vh;
        min-height: 420px;
      }

      .chapter-body {
        padding: 54px 24px 70px;
      }

      .time-row {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .archive-card,
      .archive-card.wide {
        grid-column: span 6;
      }

      .archive-card.tall {
        min-height: 520px;
      }
    }

    @media (max-width: 620px) {
      .section {
        padding: 76px 0;
      }

      .hero {
        min-height: 88vh;
      }

      .hero-content {
        padding: 110px 0 78px;
      }

      h1 {
        font-size: clamp(38px, 11vw, 48px);
        line-height: 1.05;
      }

      .lead,
      .section-head p,
      .chapter-copy,
      .curatorial p {
        font-size: 16px;
      }

      .hero-strip {
        margin-top: -34px;
        gap: 8px;
      }

      .media-mosaic {
        grid-template-columns: 1fr;
        margin-bottom: 18px;
      }

      .media-tile,
      .media-main {
        height: 230px;
      }

      .strip-item {
        min-height: 108px;
      }

      .archive-note,
      .map-panel {
        min-height: 440px;
      }

      .archive-card,
      .archive-card.wide,
      .archive-card.tall {
        grid-column: 1 / -1;
        min-height: 420px;
      }

      .modal {
        padding: 12px;
      }

      .modal-image {
        min-height: 340px;
      }
    }