/* 门二 · 木马地球。与门一同一套墨与纸，但这一扇门亮着：线画在白纸上，楼也该站在纸上。 */
:root { --ink:#11140f; --ink-soft:#3a3b34; --paper:#f3eee3; --paper-deep:#e8e1d2; --mist:#8d8a80; --line:rgba(17,20,15,.16); --gold:#9a7340; --serif: Georgia, "Times New Roman", "Songti SC", serif; --sans: "Helvetica Neue", Arial, "PingFang SC", sans-serif; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.5; }
a, button { font:inherit; color:inherit; }
img { display:block; max-width:100%; }

.site-header { position:absolute; inset:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.5rem clamp(1.25rem,4vw,4rem); }
.project-name { display:inline-flex; align-items:center; gap:.68rem; text-decoration:none; font-family:var(--serif); font-size:.9rem; letter-spacing:.04em; }
.muma-logo { display:block; height:3.4rem; width:auto; }
.brand-copy span { display:block; }
.brand-en { margin-top:.22rem; color:var(--mist); font-family:var(--sans); font-size:.58rem; letter-spacing:.1em; }
.doors { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem 1.4rem; font-size:.74rem; letter-spacing:.06em; }
.doors a, .door-closed { padding-bottom:.2rem; border-bottom:1px solid transparent; text-decoration:none; white-space:nowrap; }
.doors span span, .doors a span { color:var(--mist); margin-right:.25rem; font-size:.62rem; letter-spacing:.12em; }
.doors a:hover, .doors a:focus-visible { border-color:var(--ink); outline:0; }
.doors a[aria-current="page"] { border-color:var(--ink); }
.door-closed { color:#b2ad9f; cursor:default; }

.hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:clamp(2rem,6vw,7rem); min-height:100svh; padding:clamp(8rem,16vh,11rem) clamp(1.25rem,6vw,8rem) clamp(3rem,6vw,6rem); }
.eyebrow { margin:0 0 1.4rem; color:var(--mist); font-size:.66rem; letter-spacing:.16em; }
h1, h2 { margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.045em; }
h1 { font-size:clamp(3rem,6.6vw,7rem); line-height:.98; }
.statement-en { display:block; margin-top:.6em; font-family:var(--sans); font-size:.2em; line-height:1.3; letter-spacing:.03em; color:var(--ink-soft); }
.hero-hook { max-width:30rem; margin:2rem 0 0; font-family:var(--serif); font-size:clamp(1.1rem,1.8vw,1.55rem); line-height:1.35; }
.hero-hook span { display:block; }
.hero-hook span:last-child { margin-top:.6rem; color:var(--mist); font-family:var(--sans); font-size:.62em; letter-spacing:.03em; }
.hero-copy { animation:rise-in 1s cubic-bezier(.22,.61,.36,1) both; }

/* 一笔 ↔ 建筑：同一个竖框里，左边是纸上的线，右边是长出来的楼。 */
.compare { margin:0; justify-self:center; width:min(100%,27rem); animation:rise-in 1.2s .15s cubic-bezier(.22,.61,.36,1) both; }
.compare-frame { --cut:56%; position:relative; aspect-ratio:9/16; overflow:hidden; background:#fff; box-shadow:0 1px 0 var(--line), 0 30px 60px -40px rgba(17,20,15,.45); }
.compare-building { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-line { position:absolute; inset:0; display:grid; place-items:center; padding:12%; background:#fff; clip-path:inset(0 calc(100% - var(--cut)) 0 0); }
.compare-line img { width:100%; mix-blend-mode:multiply; }
.compare-handle { position:absolute; top:0; bottom:0; left:var(--cut); width:1px; background:var(--ink); pointer-events:none; }
.compare-handle::after { content:""; position:absolute; top:50%; left:50%; width:2.4rem; aspect-ratio:1; border:1px solid var(--ink); border-radius:50%; background:rgba(243,238,227,.86); transform:translate(-50%,-50%); }
.compare-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.compare-range:focus-visible ~ .compare-handle, .compare-frame:has(.compare-range:focus-visible) .compare-handle::after { outline:2px solid var(--gold); outline-offset:3px; }
.compare figcaption { display:flex; justify-content:space-between; gap:1rem; margin-top:.9rem; font-size:.72rem; letter-spacing:.06em; }
.compare figcaption [data-compare-name] { font-family:var(--serif); font-size:1rem; letter-spacing:0; }
.compare-hint { color:var(--mist); }

.gallery { padding:clamp(4rem,10vw,10rem) clamp(1.25rem,6vw,8rem) clamp(3rem,6vw,6rem); border-top:1px solid var(--line); }
.section-intro { margin-bottom:clamp(3rem,6vw,6rem); }
h2 { max-width:18ch; text-wrap:balance; font-size:clamp(2.1rem,4vw,4.2rem); line-height:1.02; }
.section-copy-zh { max-width:26ch; text-wrap:balance; margin:1rem 0 0; color:var(--ink-soft); font-family:var(--serif); font-size:clamp(1rem,1.4vw,1.35rem); line-height:1.4; }
.tally { margin:1.6rem 0 0; color:var(--mist); font-size:.74rem; letter-spacing:.08em; }
.tally b { color:var(--ink); font-weight:400; font-family:var(--serif); font-size:1.1rem; }
.tally > span { margin-left:1rem; }
.empty-state { margin:0 0 4rem; font-family:var(--serif); font-size:1.4rem; }
.empty-state span { color:var(--mist); font-family:var(--sans); font-size:.8rem; }

.work-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(2.5rem,5vw,5rem) clamp(1rem,2.4vw,2.6rem); margin:0; padding:0; list-style:none; }
.work-card button { display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; }
.work-media { display:block; position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--paper-deep); }
.work-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.work-media .work-line { padding:14%; object-fit:contain; background:#fff; mix-blend-mode:normal; opacity:0; }
.work-card button:hover .work-line, .work-card button:focus-visible .work-line { opacity:1; }
.work-card button:hover .work-building, .work-card button:focus-visible .work-building { transform:scale(1.03); }
.work-card button:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.work-info { display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; padding-top:.9rem; }
.work-name { margin:0; font-family:var(--serif); font-size:clamp(1.1rem,1.5vw,1.45rem); letter-spacing:-.02em; }
.work-no { color:var(--mist); font-size:.66rem; letter-spacing:.12em; white-space:nowrap; }
.work-caption { margin:.35rem 0 0; color:var(--ink-soft); font-size:.8rem; line-height:1.45; }
.work-pending { display:inline-block; margin-left:.4rem; padding:0 .35rem; border:1px solid var(--gold); color:var(--gold); font-size:.58rem; letter-spacing:.1em; vertical-align:middle; }
.disclaimer { margin:clamp(4rem,8vw,7rem) 0 0; color:var(--mist); font-size:.72rem; letter-spacing:.04em; }
.disclaimer span { margin-left:.8rem; }

.next-wing { padding:clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,8rem); color:var(--paper); background:var(--ink); }
.next-wing .eyebrow { color:#8f8c82; }
.next-title { margin:0; font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,3.4rem); letter-spacing:-.03em; }
.next-en { margin:.6rem 0 0; color:#a9a59a; font-size:.8rem; letter-spacing:.04em; }

.closing { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding:3rem clamp(1.25rem,6vw,8rem); color:#a9a59a; background:var(--ink); font-size:.74rem; letter-spacing:.06em; border-top:1px solid rgba(243,238,227,.12); }
.closing p { margin:0; }
.closing-brand { color:var(--paper); font-family:var(--serif); font-size:1.1rem; }
.closing-brand p + p { margin-top:.3rem; color:#a9a59a; font-family:var(--sans); font-size:.58rem; letter-spacing:.1em; }
.closing a { color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(243,238,227,.3); }
.contact-line { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:end; }

/* 作品展开：一笔 → 外观 → 剖透视 → 内部，横向一张张走进去。 */
.work-dialog { width:100vw; max-width:none; height:100svh; max-height:none; margin:0; padding:0; border:0; color:var(--paper); background:#0e100c; }
.work-dialog::backdrop { background:rgba(14,16,12,.9); }
.dialog-bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem clamp(1.25rem,4vw,3rem) .4rem; }
.dialog-meta { display:flex; align-items:baseline; gap:1rem; margin:0; }
.dialog-meta span:first-child { color:#8f8c82; font-size:.66rem; letter-spacing:.14em; }
.dialog-meta span:last-child { font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,2rem); letter-spacing:-.02em; }
.dialog-actions { display:flex; gap:.4rem; }
.dialog-actions button { width:2.6rem; height:2.6rem; border:1px solid rgba(243,238,227,.28); border-radius:50%; color:var(--paper); background:transparent; cursor:pointer; font-size:1rem; }
.dialog-actions button:hover, .dialog-actions button:focus-visible { border-color:var(--paper); outline:0; }
.dialog-caption { min-height:1.4em; margin:0; padding:0 clamp(1.25rem,4vw,3rem); color:#bdb9ad; font-family:var(--serif); font-size:clamp(.95rem,1.3vw,1.15rem); }
.sequence { display:flex; gap:clamp(.8rem,1.6vw,1.6rem); height:calc(100svh - 7.5rem); margin:0; padding:1.4rem clamp(1.25rem,4vw,3rem) 1.6rem; overflow-x:auto; list-style:none; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.sequence li { flex:0 0 auto; display:flex; flex-direction:column; height:100%; scroll-snap-align:center; }
.sequence img { height:calc(100% - 2rem); width:auto; aspect-ratio:9/16; object-fit:cover; background:#1a1d17; }
.sequence .is-line img { object-fit:contain; padding:10%; background:#fff; }
.sequence p { margin:.6rem 0 0; color:#8f8c82; font-size:.66rem; letter-spacing:.14em; }
.noscript { padding:2rem; }

/* 只做位移不做透明：动画若被浏览器暂停（如后台页、部分微信内置浏览器），内容仍然可见。 */
@keyframes rise-in { from { transform:translateY(1.25rem); } to { transform:none; } }

@media (max-width:980px) { .work-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .site-header { flex-direction:column; align-items:flex-start; }
  .doors { justify-content:flex-start; }
  .hero { grid-template-columns:1fr; padding-top:11rem; }
  .compare { width:min(100%,22rem); }
  .section-intro { display:block; }
  .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem 1rem; }
  .work-caption { display:none; }
  .sequence { height:calc(100svh - 8.5rem); }
  .disclaimer span { display:block; margin:.3rem 0 0; }
}
@media (hover:none) { .work-media .work-line { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .hero-copy, .compare { animation:none; } .work-media img { transition:none; } }

/* 第二间 · 原生数字：墨色底，作品方形大图，每张如实标注数据来源与生成方式。 */
.native { padding:clamp(4rem,9vw,9rem) clamp(1.25rem,6vw,8rem); color:var(--paper); background:var(--ink); }
.native[hidden] { display:none; }
.native .eyebrow { color:#8f8c82; }
.native h2 { max-width:none; color:var(--paper); }
.native-en { display:block; margin-top:.8rem; color:#a9a59a; font-family:var(--sans); font-size:.26em; letter-spacing:.06em; }
.native-lead { max-width:34rem; margin:2rem 0 0; color:#d8d3c8; font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5; }
.native-lead-en { max-width:34rem; margin:.6rem 0 0; color:#8f8c82; font-size:.8rem; }
.native-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,4vw,4rem); margin:clamp(3rem,6vw,5rem) 0 0; padding:0; list-style:none; }
.native-grid img { width:100%; aspect-ratio:1; object-fit:cover; background:#1a1d17; }
.native-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:1.1rem; }
.native-name { font-family:var(--serif); font-size:clamp(1.25rem,1.8vw,1.7rem); }
.native-name small { display:block; margin-top:.25rem; color:#a9a59a; font-family:var(--sans); font-size:.62rem; letter-spacing:.12em; }
.native-no { color:#8f8c82; font-size:.66rem; letter-spacing:.14em; white-space:nowrap; }
.native-reads { margin:.8rem 0 0; color:#d8d3c8; font-size:.86rem; }
.native-meta { margin:.8rem 0 0; padding:.7rem 0 0; border-top:1px solid rgba(243,238,227,.14); color:#8f8c82; font-size:.7rem; letter-spacing:.04em; line-height:1.7; }
.native-tally { margin:clamp(2.5rem,5vw,4rem) 0 0; color:#8f8c82; font-size:.74rem; letter-spacing:.08em; }
@media (max-width:760px) { .native-grid { grid-template-columns:1fr; } }