@font-face {
  font-family: "Museum Serif SC";
  src: url("assets/fonts/noto-serif-sc-museum-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Museum Sans SC";
  src: url("assets/fonts/noto-sans-sc-museum-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --kiln: #122d2a;
  --kiln-deep: #0b1d1b;
  --clay: #71392e;
  --paper: #e8e3d8;
  --paper-light: #f2eee5;
  --ink: #172025;
  --muted: #756f65;
  --vermilion: #c83931;
  --seal: #932e28;
  --line: rgba(232, 227, 216, .38);
  --serif: "Museum Serif SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans: "Museum Sans SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--kiln-deep); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 80px; }
a, button, input { touch-action: manipulation; -webkit-tap-highlight-color: rgba(200,57,49,.18); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 14px; background: #fff; color: #000; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 4px; }

.museum-nav { position: fixed; z-index: 100; inset: 0 0 auto; height: 72px; display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 0 3.5vw; color: var(--paper-light); background: rgba(7,18,17,.94); border-bottom: 1px solid rgba(232,227,216,.12); backdrop-filter: blur(10px); }
.brand { justify-self: start; display: flex; align-items: center; gap: 15px; }
.brand-cn { font-family: var(--serif); font-weight: 800; font-size: 19px; letter-spacing: .12em; }
.brand-museum { display: grid; gap: 3px; padding-left: 15px; border-left: 1px solid rgba(232,227,216,.24); font-family: var(--serif); font-size: 11px; letter-spacing: .12em; }
.brand-museum small { font-family: var(--sans); font-size: 7px; font-weight: 400; letter-spacing: .2em; opacity: .52; }
.museum-nav nav { justify-self: end; display: flex; gap: clamp(24px, 3vw, 48px); font-family: var(--serif); font-size: 13px; letter-spacing: .12em; }
.museum-nav nav a { position: relative; padding: 8px 0; }
.museum-nav nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; border-bottom: 1px solid; transition: right .35s var(--ease); }
.museum-nav nav a:hover::after { right: 0; }
.mobile-menu-toggle, .mobile-navigation { display: none; }

.scroll-rail { position: fixed; z-index: 90; right: 20px; top: 18vh; bottom: 18vh; width: 1px; background: rgba(255,255,255,.16); mix-blend-mode: difference; }
.scroll-rail span { display: block; width: 1px; height: 0; background: #fff; }

.hero { position: relative; min-height: max(680px, 100svh); display: grid; align-items: center; isolation: isolate; overflow: hidden; background: #081412; }
.hero-relief { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.8) contrast(1.06) brightness(.78); transform: scale(1.015); }
.hero-master { position: absolute; z-index: 3; top: 72px; right: 0; bottom: 0; width: 57%; margin: 0; overflow: hidden; background: #081412; box-shadow: -54px 0 92px 28px #081412; }
.hero-master::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 150px 0 120px -72px #081412, inset 0 -100px 100px -64px #081412, inset 0 68px 72px -66px #081412; }
.hero-master img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; filter: saturate(.7) contrast(1.12) brightness(.7) sepia(.08); transform: scale(1.035); }
.hero-master figcaption { position: absolute; z-index: 2; right: 3.5vw; bottom: 26px; color: rgba(242,238,229,.58); font-size: 9px; letter-spacing: .14em; }
.hero-incision { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 6px rgba(183,99,55,.22)); }
.hero-incision-back { z-index: 2; }
.hero-incision-front { z-index: 4; }
.hero-incision path { fill: none; stroke: #b76a3d; stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: 2800; stroke-dashoffset: 2800; vector-effect: non-scaling-stroke; }
.hero-copy { position: relative; z-index: 5; width: min(760px, 51vw); margin-left: 5.2vw; padding-top: 7vh; color: var(--paper-light); }
.eyebrow { margin: 0 0 22px; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.hero .eyebrow { margin-bottom: 24px; color: rgba(242,238,229,.82); font-family: var(--serif); font-size: 17px; font-weight: 500; letter-spacing: .22em; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.03; letter-spacing: -.025em; text-shadow: 0 2px 28px rgba(0,0,0,.28); }
.hero h1 span { display: block; }
.hero h1 span:first-child { font-size: clamp(38px, 4.15vw, 66px); letter-spacing: .04em; white-space: nowrap; }
.hero h1 span:last-child { margin-top: 15px; font-size: clamp(50px, 5.5vw, 88px); white-space: nowrap; }
.hero-lede { width: min(440px, 40vw); margin: 27px 0 30px; color: rgba(242,238,229,.66); font-family: var(--serif); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.9; letter-spacing: .04em; }
.enter-link { display: inline-flex; align-items: center; justify-content: space-between; min-width: 260px; gap: 42px; padding: 16px 18px; border: 1px solid rgba(232,227,216,.4); background: rgba(7,18,17,.24); font-family: var(--serif); font-size: 14px; letter-spacing: .14em; transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.enter-link span { transition: transform .3s var(--ease); }
.enter-link:hover { color: #fff; border-color: rgba(213,127,75,.78); background: rgba(142,70,42,.22); }
.enter-link:hover span { transform: translateX(5px); }
.hero-chapter { position: absolute; z-index: 6; left: 5.2vw; bottom: 30px; display: grid; justify-items: center; gap: 8px; color: rgba(242,238,229,.58); font-family: var(--serif); font-size: 10px; letter-spacing: .15em; }
.hero-chapter i { width: 7px; height: 7px; border: 1px solid #cf7d4b; border-radius: 50%; background: #cf7d4b; box-shadow: 0 0 0 5px rgba(207,125,75,.08); }

.js .hero-master { opacity: 0; transform: translateX(12px); }
.js.hero-ready .hero-master { opacity: 1; transform: none; transition: opacity 1.1s .12s var(--ease), transform 1.1s .12s var(--ease); }
.js.hero-ready .hero-incision-back path { animation: hero-carve 1.85s .46s var(--ease) forwards; }
.js.hero-ready .hero-incision-front path { animation: hero-carve .82s 1.55s var(--ease) forwards; }

.route-section { position: relative; isolation: isolate; overflow: hidden; padding: 15vh 7vw 12vh; color: var(--paper-light); background: #172a26; }
.route-section::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.025), transparent 48%), url("assets/guancanghai-line.webp") center 44% / 120% auto no-repeat; opacity: .1; filter: invert(1) contrast(1.4); }
.route-section > header { display: grid; grid-template-columns: 1.05fr .62fr; gap: 10vw; align-items: end; }
.route-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(44px, 5.6vw, 88px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.route-section > header > p { max-width: 470px; margin: 0; color: rgba(242,238,229,.74); font-family: var(--serif); font-size: 15px; line-height: 1.9; }
.route-board { position: relative; height: 310px; margin-top: 10vh; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.route-incision { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 0 rgba(255,255,255,.15)); }
.route-incision path { fill: none; stroke: #a85e43; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route-stops { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: repeat(5,1fr); gap: 2.3vw; list-style: none; margin: 0; padding: 0; }
.route-stops li { padding-top: 106px; }
.route-stops li:nth-child(2) { padding-top: 61px; }
.route-stops li:nth-child(3) { padding-top: 98px; }
.route-stops li:nth-child(4) { padding-top: 73px; }
.route-stops li:nth-child(5) { padding-top: 102px; }
.route-stops a { position: relative; display: grid; grid-template-columns: 34px 1fr auto; column-gap: 10px; align-items: start; padding-top: 28px; }
.route-stops a::before { content: ""; position: absolute; top: -9px; left: 4px; width: 18px; height: 18px; border: 2px solid #c27859; border-radius: 50%; background: #172a26; box-shadow: inset 0 0 0 4px #172a26, inset 0 0 0 9px #c27859; transition: transform .35s var(--ease), background .35s; }
.route-stops a:hover::before { transform: scale(1.35); background: #c27859; }
.route-stops span { color: #d28a6a; font-family: var(--serif); font-size: 13px; }
.route-stops b { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.45; }
.route-stops small { grid-column: 2 / -1; margin-top: 7px; color: rgba(242,238,229,.7); font-size: 12px; letter-spacing: .04em; }
.route-stops i { color: #d28a6a; font-style: normal; transition: transform .3s var(--ease); }
.route-stops a:hover i { transform: translate(5px,5px); }
.route-start { display: inline-flex; align-items: center; gap: 18px; margin-top: 7vh; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: 12px; letter-spacing: .14em; }

.museum-section { position: relative; padding: 15vh 7vw; }
.section-mark { position: absolute; top: 58px; right: 7vw; font-family: var(--serif); font-size: 12px; letter-spacing: .18em; color: var(--muted); }
.person-section { min-height: 125vh; display: grid; grid-template-columns: .8fr 1.25fr; grid-template-rows: auto auto; gap: 8vw; align-items: center; background: var(--paper); }
.person-copy { align-self: start; padding-top: 7vh; }
.person-copy h2, .compare-head h2, .collection-head h2, .sources-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(44px, 6vw, 96px); font-weight: 600; line-height: 1.12; letter-spacing: -.04em; }
.person-copy > p:not(.eyebrow) { margin: 36px 0; max-width: 520px; color: #504b44; font-family: var(--serif); font-size: 17px; line-height: 2; }
.text-link, .light-link { display: inline-flex; gap: 28px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid; font-size: 13px; letter-spacing: .13em; }
.person-figure { margin: 0; position: relative; height: 92vh; overflow: hidden; background: var(--kiln); }
.person-figure img { width: 100%; height: 112%; object-fit: cover; object-position: 50% calc(50% + var(--parallax, 0px)); }
.person-figure figcaption { position: absolute; inset: auto 0 0; padding: 30px; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent); }
.person-figure figcaption span, .person-figure figcaption small { display: block; }
.person-figure figcaption span { font-family: var(--serif); font-size: 20px; }
.person-figure figcaption small { margin-top: 7px; opacity: .7; }
.person-section blockquote { grid-column: 1 / -1; width: 78%; margin: 4vh auto 0; font-family: var(--serif); font-size: clamp(24px, 3.6vw, 56px); line-height: 1.45; text-align: center; }
.person-section blockquote cite { display: block; margin-top: 20px; color: var(--muted); font-family: var(--sans); font-size: 11px; font-style: normal; letter-spacing: .12em; }

.timeline-section { padding: 15vh 7vw 18vh; color: var(--paper-light); background: #263735; }
.timeline-section > header { display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 8vw; align-items: end; margin-bottom: 10vh; }
.timeline-section > header .eyebrow { grid-column: 1 / -1; }
.timeline-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(48px, 6vw, 94px); line-height: 1.08; font-weight: 500; letter-spacing: -.045em; }
.timeline-section > header > p:last-child { margin: 0; max-width: 520px; color: rgba(242,238,229,.66); font-family: var(--serif); line-height: 1.9; }
.timeline-track { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.26); }
.timeline-track li { display: grid; grid-template-columns: 180px 1fr 110px; gap: 4vw; align-items: start; padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.timeline-track time { font-family: var(--serif); font-size: clamp(26px, 3vw, 48px); }
.timeline-track b { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.timeline-track p { max-width: 650px; margin: 12px 0 0; color: rgba(242,238,229,.58); font-size: 12px; line-height: 1.9; }
.timeline-track > li > span { justify-self: end; padding: 6px 9px; border: 1px solid rgba(255,255,255,.25); font-size: 9px; letter-spacing: .12em; }

.media-journey { background: var(--kiln-deep); color: var(--paper-light); }
.media-scroll { height: 260vh; }
.media-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.media-stage::before { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11,29,27,.95), rgba(11,29,27,.2) 48%, rgba(11,29,27,.38)); }
.media-stage-head { position: absolute; z-index: 6; left: 7vw; top: 18vh; width: min(470px, 38vw); }
.media-stage-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(48px, 6vw, 94px); line-height: 1.08; font-weight: 600; letter-spacing: -.045em; }
.media-stage-head > p:last-child { max-width: 390px; margin-top: 30px; color: rgba(242,238,229,.7); font-family: var(--serif); line-height: 1.9; }
.media-images, .media-slide { position: absolute; inset: 0; }
.media-slide { margin: 0; opacity: 0; transform: scale(1.035); transition: opacity .65s var(--ease), transform .9s var(--ease); }
.media-slide.is-active { opacity: 1; transform: scale(1); }
.media-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; filter: saturate(.82) contrast(1.05); }
.media-slide[data-medium="坭兴陶"] { background: #132522; }
.media-slide[data-medium="坭兴陶"] img { object-fit: contain; object-position: 76% center; padding: 5vh 3vw 5vh 44vw; background: #132522; filter: saturate(.92) contrast(1.02); }
.media-slide figcaption { position: absolute; z-index: 4; right: 5vw; bottom: 8vh; display: grid; justify-items: end; color: #fff; text-align: right; }
.media-slide figcaption b { font-family: var(--serif); font-size: clamp(42px, 6vw, 90px); font-weight: 500; }
.media-slide figcaption span { max-width: 310px; font-size: 12px; letter-spacing: .12em; line-height: 1.7; opacity: .8; }
.media-progress { position: absolute; z-index: 7; left: 7vw; bottom: 8vh; display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .16em; }
.media-track { width: 170px; height: 1px; background: rgba(255,255,255,.22); }
.media-track i { display: block; width: 20%; height: 1px; background: var(--paper-light); transition: width .6s var(--ease); }
.media-jump { position: absolute; z-index: 8; left: 7vw; bottom: 13vh; display: flex; flex-wrap: wrap; gap: 8px; max-width: 500px; }
.media-jump button { min-width: 44px; min-height: 44px; padding: 10px 12px; color: rgba(255,255,255,.76); background: rgba(11,29,27,.56); border: 1px solid rgba(255,255,255,.28); cursor: pointer; font-size: 11px; letter-spacing: .06em; transition: color .25s, background .25s, border-color .25s; }
.media-jump button:hover, .media-jump button.is-active { color: var(--kiln-deep); background: var(--paper-light); border-color: var(--paper-light); }

.compare-section { min-height: 140vh; background: var(--paper); }
.compare-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 8vw; margin-bottom: 9vh; }
.compare-head .eyebrow { grid-column: 1 / -1; }
.compare-head p:last-child { max-width: 530px; margin: 0; color: #575149; font-family: var(--serif); font-size: 16px; line-height: 1.9; }
.compare-frame { position: relative; width: 100%; height: 80vh; min-height: 560px; overflow: hidden; background: var(--kiln); }
.compare-frame:focus-within { outline: 3px solid var(--vermilion); outline-offset: 4px; }
.compare-frame > img, .compare-front, .compare-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-back { object-position: 50% 42%; filter: brightness(.72) saturate(.72); transform: scale(2.2); transform-origin: 0 56%; }
.compare-front { width: var(--split); overflow: hidden; border-right: 1px solid rgba(255,255,255,.9); }
.compare-front img { width: calc(100vw - 14vw); max-width: none; object-position: center 34%; filter: sepia(.08) contrast(1.06); }
.compare-frame input { position: absolute; z-index: 8; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.compare-deep-link { margin-top: 36px; }
.compare-divider { position: absolute; z-index: 7; top: 0; bottom: 0; left: var(--split); width: 1px; background: #fff; pointer-events: none; }
.compare-divider i { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; border: 1px solid #fff; border-radius: 50%; background: rgba(18,45,42,.72); transform: translate(-50%,-50%); }
.compare-divider i::before, .compare-divider i::after { position: absolute; top: 50%; color: #fff; transform: translateY(-54%); }
.compare-divider i::before { content: "‹"; left: 11px; }
.compare-divider i::after { content: "›"; right: 11px; }
.compare-label { position: absolute; z-index: 6; top: 26px; padding: 9px 13px; color: #fff; background: rgba(11,29,27,.72); font-size: 11px; letter-spacing: .12em; }
.label-paper { left: 26px; }
.label-clay { right: 26px; }

.guansheng-section { position: relative; min-height: 120vh; display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; color: var(--paper-light); background: #5c1816; }
.guan-color-field { position: absolute; inset: 0; background: #5c1816; }
.guan-art { position: relative; z-index: 2; height: 120vh; overflow: hidden; background: var(--paper-light); }
.guan-art img { width: 100%; height: 110%; object-fit: cover; object-position: center calc(50% + var(--parallax, 0px)); filter: none; }
.guan-copy { position: relative; z-index: 3; align-self: center; padding: 12vh 8vw 12vh 6vw; }
.guan-kicker { margin: 0 0 -16px; font-family: var(--serif); font-size: 18px; }
.guan-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(82px, 10vw, 170px); line-height: 1; font-weight: 700; letter-spacing: -.08em; }
.guan-copy > p:not(.eyebrow):not(.guan-kicker) { max-width: 500px; margin: 38px 0; font-family: var(--serif); font-size: 16px; line-height: 2; color: rgba(242,238,229,.8); }
.guan-copy ul { list-style: none; margin: 0 0 42px; padding: 0; border-top: 1px solid rgba(255,255,255,.25); }
.guan-copy li { display: flex; gap: 22px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.25); font-size: 13px; letter-spacing: .08em; }
.guan-copy li span { opacity: .55; }

.collection-section { background: var(--paper-light); }
.collection-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; align-items: end; }
.collection-head > p { max-width: 520px; margin: 0; color: #5d574e; font-family: var(--serif); font-size: 16px; line-height: 1.9; }
.collection-counts { display: grid; grid-template-columns: repeat(5, 1fr); margin: 10vh 0 13vh; border-top: 1px solid #aaa399; border-bottom: 1px solid #aaa399; }
.collection-counts article { padding: 30px 20px; border-right: 1px solid #aaa399; }
.collection-counts article:last-child { border: 0; }
.collection-counts strong, .collection-counts span { display: block; }
.collection-counts strong { font-family: var(--serif); font-size: clamp(46px, 6vw, 88px); font-weight: 400; }
.collection-counts span { margin-top: 4px; color: var(--muted); font-size: 12px; letter-spacing: .12em; }
.collection-wall { display: grid; grid-template-columns: 1fr 1.3fr .82fr; gap: 5vw; align-items: start; }
.wall-item { margin: 0; }
.wall-item img { width: 100%; height: 68vh; object-fit: cover; background: #d3cec4; }
.wall-wide { margin-top: 15vh; }
.wall-wide img { height: 52vh; object-position: center 35%; }
.wall-red { margin-top: 5vh; }
.wall-red img { height: 60vh; }
.wall-item figcaption { display: flex; justify-content: space-between; gap: 18px; padding-top: 14px; border-top: 1px solid #8e887e; }
.wall-item figcaption b { font-family: var(--serif); font-size: 18px; }
.wall-item figcaption span { color: var(--muted); font-size: 10px; line-height: 1.5; text-align: right; }
.archive-entry { position: relative; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; margin-top: 16vh; padding: 38px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.archive-entry > span { font-family: var(--serif); font-size: clamp(32px, 4vw, 60px); }
.archive-entry small { color: var(--muted); letter-spacing: .08em; }
.archive-entry i { font-size: 32px; font-style: normal; transition: transform .35s var(--ease); }
.archive-entry:hover i { transform: translate(8px,-8px); }

.archive-browser { margin-top: 17vh; padding-top: 9vh; border-top: 1px solid #8e887e; }
.archive-browser > header { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: end; margin-bottom: 7vh; }
.archive-browser h3 { margin: 0; font-family: var(--serif); font-size: clamp(38px, 5vw, 72px); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; }
.archive-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.archive-filters button { min-height: 44px; padding: 10px 14px; color: var(--ink); background: transparent; border: 1px solid #827c73; cursor: pointer; font-size: 12px; }
.archive-filters button:hover, .archive-filters button.is-active { color: var(--paper-light); background: var(--kiln); border-color: var(--kiln); }
.archive-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6vh 2.6vw; }
.archive-card { display: block; width: 100%; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.archive-card[hidden] { display: none; }
.archive-card img { width: 100%; height: 54vh; object-fit: cover; object-position: center 32%; background: #d1ccc2; filter: saturate(.88); transition: transform .6s var(--ease), filter .6s var(--ease); }
.archive-card:nth-child(3n+2) img { height: 44vh; }
.archive-card:hover img { transform: scale(1.012); filter: saturate(1) contrast(1.015); }
.archive-card > span { display: flex; justify-content: space-between; gap: 18px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #9e988f; }
.archive-card b { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.archive-card small { color: #5f5a52; font-size: 11px; line-height: 1.5; text-align: right; }

.work-dialog { width: min(1080px,92vw); max-height: 88vh; padding: 0; color: var(--ink); background: var(--paper-light); border: 0; box-shadow: 0 30px 90px rgba(0,0,0,.4); overscroll-behavior: contain; }
.work-dialog::backdrop { background: rgba(6,16,15,.84); backdrop-filter: blur(8px); }
.work-dialog[open] { display: grid; grid-template-columns: 1.05fr .95fr; }
.dialog-close { position: absolute; z-index: 3; top: 16px; right: 20px; width: 48px; height: 48px; color: #fff; background: var(--kiln); border: 0; border-radius: 50%; cursor: pointer; font-size: 26px; line-height: 1; }
.dialog-image { position: relative; min-height: 70vh; background: #cdc7bc; overflow: hidden; }
.dialog-image img { width: 100%; height: 100%; max-height: 82vh; object-fit: contain; transition: transform .55s var(--ease); cursor: zoom-in; }
.dialog-image.is-zoomed img { transform: scale(1.9); cursor: zoom-out; }
.dialog-zoom { position: absolute; z-index: 2; left: 20px; bottom: 20px; padding: 9px 13px; color: var(--paper-light); background: rgba(11,29,27,.86); border: 1px solid rgba(255,255,255,.3); cursor: pointer; font-size: 10px; letter-spacing: .12em; }
.dialog-copy { padding: 10vh 5vw; overflow: auto; }
.dialog-copy h3 { margin: 0 0 40px; font-family: var(--serif); font-size: clamp(42px,6vw,82px); font-weight: 500; line-height: 1.08; }
.dialog-copy dl { margin: 0; border-top: 1px solid #9e988f; }
.dialog-copy dl div { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid #b4aea4; }
.dialog-copy dt { color: var(--muted); font-size: 11px; }
.dialog-copy dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-family: var(--serif); font-size: 14px; }
.dialog-detail-link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-top: 28px; padding: 0 16px; color: var(--paper-light); background: var(--kiln); border: 1px solid var(--kiln); font-size: 12px; letter-spacing: .1em; transition: color .3s var(--ease), background .3s var(--ease); }
.dialog-detail-link:hover { color: var(--kiln); background: transparent; }
.dialog-detail-link span { font-size: 19px; }
.dialog-copy > p:last-child { margin-top: 35px; color: #5f5a52; font-size: 12px; line-height: 1.9; }

.sources-section { display: grid; grid-template-columns: 1.1fr .9fr; gap: 9vw; padding: 17vh 7vw; color: var(--paper-light); background: var(--kiln); }
.sources-section h2 { color: var(--paper-light); }
.source-copy { padding-top: 6vh; border-top: 1px solid rgba(255,255,255,.25); }
.source-copy p { margin: 0 0 30px; max-width: 560px; color: rgba(242,238,229,.7); font-family: var(--serif); font-size: 15px; line-height: 2; }

footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 5vw; padding: 48px 7vw; color: var(--paper-light); background: var(--kiln-deep); border-top: 1px solid rgba(255,255,255,.12); }
footer div b, footer div span { display: block; }
footer div b { font-family: var(--serif); font-size: 18px; }
footer div span, footer p, footer a { margin: 4px 0 0; color: rgba(242,238,229,.55); font-size: 10px; letter-spacing: .1em; }

.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes hero-carve { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .museum-nav { grid-template-columns: 1fr auto; height: calc(62px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left)); }
  .museum-nav nav { display: none; }
  .brand-museum small, .scroll-rail { display: none; }
  .brand-museum { font-size: 10px; }
  .mobile-menu-toggle { position: relative; display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; padding: 0; color: var(--paper-light); background: transparent; border: 1px solid rgba(255,255,255,.24); cursor: pointer; }
  .mobile-menu-toggle span { display: block; width: 20px; border-top: 1px solid currentColor; transition: transform .25s var(--ease); }
  .mobile-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-navigation { position: fixed; z-index: 99; inset: calc(62px + env(safe-area-inset-top)) 0 0; display: grid; align-content: start; padding: 4vh calc(20px + env(safe-area-inset-right)) calc(4vh + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); overflow-y: auto; color: var(--paper-light); background: rgba(11,29,27,.98); overscroll-behavior: contain; }
  .mobile-navigation a { min-height: 68px; display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid rgba(255,255,255,.17); }
  .mobile-navigation a:first-child { border-top: 1px solid rgba(255,255,255,.17); }
  .mobile-navigation span { font-family: var(--serif); font-size: 24px; }
  .mobile-navigation small { color: rgba(242,238,229,.68); font-size: 12px; }
  body.menu-open { overflow: hidden; }
  .hero { min-height: max(720px,100svh); align-items: end; }
  .hero-relief { object-position: 62% center; filter: saturate(.72) contrast(1.08) brightness(.58); }
  .hero-master { top: calc(62px + env(safe-area-inset-top)); width: 100%; opacity: .72; box-shadow: inset 0 -70px 80px #081412; }
  .hero-master::after { box-shadow: inset 0 -260px 180px -76px #081412, inset 0 92px 92px -78px #081412, inset 92px 0 110px -72px #081412; }
  .hero-master img { width: 100%; height: 100%; object-fit: cover; object-position: 57% center; filter: saturate(.68) contrast(1.14) brightness(.58) sepia(.08); }
  .hero-master figcaption { display: none; }
  .hero-copy { width: 88vw; margin: 0 6vw 18vh; padding-top: 0; }
  .hero .eyebrow { margin-bottom: 15px; font-size: 13px; }
  .hero h1 span:first-child { font-size: clamp(27px, 7.2vw, 48px); white-space: normal; }
  .hero h1 span:last-child { margin-top: 10px; font-size: clamp(42px, 11vw, 68px); line-height: 1.08; white-space: normal; }
  .hero-lede { width: 78vw; margin: 20px 0 22px; font-size: 13px; line-height: 1.75; }
  .enter-link { min-width: 230px; padding: 14px 16px; }
  .hero-incision-back { z-index: 4; opacity: .84; transform: translateY(155px) scaleY(.5); transform-origin: center; }
  .hero-incision-front { display: none; }
  .hero-chapter { left: 6vw; bottom: calc(24px + env(safe-area-inset-bottom)); }
  .route-section { padding: 12vh 6vw 10vh; }
  .route-section > header { grid-template-columns: 1fr; gap: 28px; }
  .route-board { height: auto; margin-top: 8vh; border-bottom: 0; }
  .route-incision { display: none; }
  .route-stops { display: block; height: auto; }
  .route-stops li, .route-stops li:nth-child(n) { padding-top: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .route-stops a { grid-template-columns: 42px 1fr auto; padding: 22px 0; }
  .route-stops a::before { display: none; }
  .route-stops small { margin-top: 3px; }
  .museum-section { padding: 13vh 6vw; }
  .person-section { grid-template-columns: 1fr; gap: 8vh; }
  .person-figure { height: 78vh; }
  .person-section blockquote { width: 100%; }
  .timeline-section { padding: 13vh 6vw; }
  .timeline-section > header { grid-template-columns: 1fr; gap: 30px; }
  .timeline-track li { grid-template-columns: 1fr auto; gap: 12px; }
  .timeline-track li > div { grid-column: 1 / -1; grid-row: 2; }
  .timeline-track > li > span { grid-column: 2; grid-row: 1; }
  .media-scroll { height: 220vh; }
  .media-stage-head { left: 6vw; top: 14vh; width: 82vw; }
  .media-stage-head > p:last-child { display: none; }
  .media-slide img { object-position: 58% center; }
  .media-slide[data-medium="坭兴陶"] img { object-position: center; padding: 12vh 5vw 28vh; }
  .media-slide[data-medium="坭兴陶"] figcaption { bottom: 22vh; }
  .media-slide[data-medium="坭兴陶"] figcaption span { opacity: .92; }
  .media-stage::before { background: linear-gradient(0deg, rgba(11,29,27,.88), rgba(11,29,27,.04) 65%, rgba(11,29,27,.6)); }
  .media-slide figcaption { right: 6vw; bottom: 21vh; }
  .media-progress { left: 6vw; bottom: 7vh; }
  .media-jump { left: 6vw; right: 6vw; bottom: 12vh; max-width: none; }
  .media-jump button { min-width: 44px; min-height: 44px; padding: 9px 10px; font-size: 10px; }
  .compare-head, .collection-head, .sources-section { grid-template-columns: 1fr; }
  .compare-frame { height: 68vh; min-height: 500px; }
  .compare-front img { width: 88vw; }
  .guansheng-section { grid-template-columns: 1fr; }
  .guan-color-field { background: #5c1816; }
  .guan-art { height: 68vh; }
  .guan-copy { padding: 10vh 7vw 13vh; }
  .collection-counts { grid-template-columns: repeat(2, 1fr); }
  .collection-counts article { border-bottom: 1px solid #aaa399; }
  .collection-wall { grid-template-columns: 1fr; gap: 10vh; }
  .wall-wide, .wall-red { margin-top: 0; }
  .wall-item img, .wall-wide img, .wall-red img { height: 72vh; }
  .archive-entry { grid-template-columns: 1fr auto; }
  .archive-entry small { grid-row: 2; margin-top: 8px; }
  .archive-browser > header { grid-template-columns: 1fr; }
  .archive-filters { justify-content: flex-start; }
  .archive-grid { grid-template-columns: 1fr 1fr; gap: 5vh 4vw; }
  .archive-card img, .archive-card:nth-child(3n+2) img { height: 46vh; }
  .archive-card > span { display: block; }
  .archive-card small { display: block; margin-top: 5px; text-align: left; }
  .work-dialog[open] { grid-template-columns: 1fr; }
  .dialog-image { min-height: 44vh; height: 44vh; }
  .dialog-copy { padding: 7vh 7vw; }
  footer { grid-template-columns: 1fr; }
}

@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 .hero-master { opacity: 1; transform: none; }
  .hero-incision path { stroke-dashoffset: 0 !important; }
  .person-figure img, .guan-art img { object-position: center !important; }
}