:root { --paper:#f1f0eb; --ink:#121210; --muted:#77766f; --line:rgba(18,18,16,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
body.locked { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.site-header { position:absolute; z-index:20; top:0; left:0; width:100%; height:88px; padding:0 3.5vw; display:flex; align-items:center; justify-content:space-between; color:white; mix-blend-mode:difference; }
.logo { font-size:20px; font-weight:700; letter-spacing:.14em; }
.logo span { margin-left:8px; font-size:8px; vertical-align:top; letter-spacing:0; }
.site-header nav { display:flex; align-items:center; gap:32px; font-size:11px; letter-spacing:.1em; }
.sound { display:flex; align-items:center; gap:3px; padding:8px 0; border:0; background:transparent; color:inherit; cursor:pointer; font-size:11px; letter-spacing:.1em; }
.sound i { display:block; width:1px; height:10px; margin-right:1px; background:currentColor; transform-origin:center; }
.sound i:nth-child(2) { height:16px; }
.sound span { margin-left:7px; }
.sound.playing i { animation:wave .8s ease-in-out infinite alternate; }
.sound.playing i:nth-child(2) { animation-delay:-.4s; }
.sound.playing i:nth-child(3) { animation-delay:-.2s; }

.cover { position:relative; min-height:100svh; overflow:hidden; color:white; }
.cover-photo { position:absolute; inset:0; background:url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=2200&q=92") center/cover; animation:slowZoom 18s ease-out both; }
.cover-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.53),rgba(0,0,0,.04) 70%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 38%); }
.cover-copy { position:absolute; left:7vw; top:50%; transform:translateY(-48%); }
.kicker { margin:0 0 28px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; }
.kicker.dark { color:var(--muted); }
h1 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:clamp(72px,10vw,156px); font-weight:400; line-height:.9; letter-spacing:-.07em; }
.intro { margin:45px 0 0 4px; font-family:Georgia,"Songti SC",serif; font-size:15px; line-height:1.8; letter-spacing:.08em; }
.cover-meta { position:absolute; left:3.5vw; right:3.5vw; bottom:27px; display:flex; justify-content:space-between; font-size:8px; letter-spacing:.19em; }
.down { position:absolute; right:6vw; bottom:76px; display:flex; align-items:center; gap:20px; font-size:10px; letter-spacing:.12em; }
.down i { width:54px; height:1px; background:white; transition:width .3s; }
.down:hover i { width:76px; }

.index-intro { min-height:82vh; padding:14vh 7vw; display:grid; grid-template-columns:1fr 3fr 1fr; gap:40px; align-items:start; border-bottom:1px solid var(--line); }
.section-no { margin:0; font-size:10px; color:var(--muted); letter-spacing:.15em; }
.index-intro h2 { max-width:850px; margin:0; font-family:Georgia,"Songti SC",serif; font-size:clamp(48px,6.6vw,100px); line-height:1.16; font-weight:400; letter-spacing:-.055em; }
.index-note { align-self:end; margin:0; color:var(--muted); font-size:11px; line-height:1.9; letter-spacing:.05em; }

.chapter { padding:13vh 5vw 16vh; border-bottom:1px solid var(--line); }
.chapter.pale { background:#dfded7; }
.chapter-head { display:grid; grid-template-columns:1fr 2fr 1fr; gap:40px; align-items:start; margin:0 2vw 12vh; }
.chapter-head > p:first-child { font-size:10px; letter-spacing:.1em; }
.chapter-head > p:first-child span { display:block; margin-bottom:8px; color:var(--muted); }
.chapter-head h3 { margin:0; font-family:Georgia,serif; font-size:clamp(68px,9vw,136px); font-weight:400; line-height:.77; letter-spacing:-.07em; }
.chapter-desc { align-self:end; max-width:260px; color:var(--muted); font-family:Georgia,"Songti SC",serif; font-size:13px; line-height:1.9; }
.gallery { display:grid; gap:7vw 3vw; }
.photo { margin:0; cursor:zoom-in; outline:none; }
.photo img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.75); transition:filter .5s,transform .7s cubic-bezier(.2,.7,.2,1); }
.photo:hover img,.photo:focus img { filter:saturate(1); transform:scale(1.015); }
.photo { overflow:hidden; }
.photo figcaption { display:flex; justify-content:space-between; padding-top:12px; background:inherit; font-size:9px; letter-spacing:.1em; color:var(--muted); }
.city-grid { grid-template-columns:1.45fr .55fr; align-items:start; }
.p1 { grid-row:span 2; }
.p1 img { aspect-ratio:1.08; }
.p2 { margin-top:18vh; }
.p2 img { aspect-ratio:.8; }
.p3 { width:75%; }
.p3 img { aspect-ratio:1.2; }
.nature-grid { grid-template-columns:.75fr 1.25fr; }
.n1 { margin-top:13vh; }
.n1 img { aspect-ratio:.78; }
.n2 img { aspect-ratio:1.38; }
.n3 { grid-column:1/-1; width:69%; margin:3vh auto 0; }
.n3 img { aspect-ratio:1.7; }
.dark-section { background:#131311; color:#eee; }
.dark-section .chapter-desc,.dark-section .chapter-head span,.dark-section figcaption { color:#82827d; }
.people-grid { grid-template-columns:1fr 1fr; align-items:start; padding:0 5vw; }
.h1 { width:80%; margin-top:16vh; }
.h1 img { aspect-ratio:.72; }
.h2 img { aspect-ratio:.82; }

.about { min-height:100vh; padding:14vh 7vw 8vh; display:flex; flex-direction:column; justify-content:space-between; }
.about-label { display:flex; gap:60px; color:var(--muted); font-size:10px; letter-spacing:.15em; }
blockquote { margin:16vh auto; max-width:1050px; font-family:Georgia,"Songti SC",serif; font-size:clamp(38px,5.5vw,82px); font-weight:400; line-height:1.36; letter-spacing:-.045em; }
.about-bottom { margin-left:50%; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; }
.about-bottom p { max-width:330px; margin:0; color:var(--muted); font-size:12px; line-height:1.9; }
.about-bottom a { justify-self:end; padding-bottom:7px; border-bottom:1px solid; font-size:11px; letter-spacing:.12em; }
.about-bottom a span { margin-left:25px; }
footer { padding:35px 3.5vw; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; color:var(--muted); font-size:9px; letter-spacing:.12em; }
footer p { margin:0; }
footer p:nth-child(2) { text-align:center; }
footer a { text-align:right; }

.lightbox { position:fixed; z-index:100; inset:0; display:grid; grid-template-columns:80px 1fr 80px; grid-template-rows:1fr; place-items:center; background:#090909; color:white; }
.lightbox[hidden] { display:none; }
.lightbox-stage { width:100%; height:82vh; display:grid; place-items:center; }
.lightbox-stage img { max-width:100%; max-height:100%; object-fit:contain; animation:fadeIn .35s ease; }
.lightbox-close { position:absolute; z-index:2; top:25px; right:30px; border:0; background:none; color:#aaa; font-size:10px; letter-spacing:.12em; cursor:pointer; }
.lightbox-nav { width:48px; height:48px; border:1px solid #333; border-radius:50%; background:none; color:#aaa; cursor:pointer; }
.lightbox-info { position:absolute; bottom:24px; left:30px; right:30px; display:flex; justify-content:space-between; color:#888; font-size:9px; letter-spacing:.12em; }
.lightbox-info div { display:flex; gap:25px; }
.lightbox-info strong { color:white; font-weight:400; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:none; }
@keyframes slowZoom { from{transform:scale(1.08)} to{transform:scale(1)} }
@keyframes wave { to{transform:scaleY(.25)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

@media (max-width:760px) {
  .site-header { height:65px; padding:0 20px; }
  .site-header nav>a { display:none; }
  .cover-copy { left:25px; top:47%; }
  h1 { font-size:21vw; }
  .intro { margin-top:30px; font-size:13px; }
  .cover-meta { left:20px; right:20px; }
  .cover-meta span:last-child { display:none; }
  .down { right:20px; }
  .index-intro { min-height:auto; padding:100px 24px; grid-template-columns:1fr; }
  .index-note { margin-top:40px; }
  .chapter { padding:90px 20px 110px; }
  .chapter-head { display:block; margin:0 0 70px; }
  .chapter-head h3 { margin:34px 0; font-size:22vw; }
  .chapter-desc { max-width:300px; }
  .gallery,.city-grid,.nature-grid,.people-grid { display:block; padding:0; }
  .photo,.p2,.p3,.n1,.n2,.n3,.h1,.h2 { width:100%; margin:0 0 65px; }
  .photo img { aspect-ratio:auto; max-height:72vh; }
  .about { min-height:90vh; padding:100px 24px 55px; }
  blockquote { margin:120px 0; }
  .about-bottom { margin:0; grid-template-columns:1fr; }
  .about-bottom a { justify-self:start; }
  footer { grid-template-columns:1fr 1fr; gap:20px; }
  footer p:nth-child(2) { display:none; }
  .lightbox { grid-template-columns:55px 1fr 55px; }
  .lightbox-stage { height:72vh; }
  .lightbox-nav { width:38px; height:38px; }
  .lightbox-info { left:18px; right:18px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}