:root { --ink:#2d2c2a; --paper:#f4efe5; --cream:#e9dfd0; --rose:#cf9889; --rust:#a8503d; --sage:#8e9785; --sky:#9ab2c7; --line:rgba(45,44,42,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; font-size:14px; overflow-x:hidden; }
body::selection { background:var(--rose); color:#fff; }
.grain { position:fixed; z-index:30; pointer-events:none; inset:0; opacity:.115; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.site-header { position:absolute; z-index:10; top:0; left:0; width:100%; display:flex; align-items:start; justify-content:space-between; padding:28px 38px; color:#fff; mix-blend-mode:soft-light; }
.brand { color:inherit; font-family:"EB Garamond", serif; font-size:19px; text-decoration:none; letter-spacing:.02em; line-height:1; }.brand span { display:block; margin-top:7px; font-family:"Ma Shan Zheng", cursive; font-size:13px; letter-spacing:.15em; }.header-link { color:inherit; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.16em; text-decoration:none; text-transform:uppercase; }.header-link span { margin-left:5px; font-size:14px; }
.hero { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; color:#fff; background:#40596c; isolation:isolate; }.hero-sky { position:absolute; inset:0; overflow:hidden; background:linear-gradient(180deg,#4f6679 0%,#869db2 30%,#e3a98e 62%,#eeb986 76%,#7790a0 77%,#32465a 100%); }.hero-sky::before { content:""; position:absolute; inset:0; opacity:.27; background:linear-gradient(105deg,transparent 0 36%,#ffe5bd 47%,transparent 58%), radial-gradient(ellipse at 88% 29%,#d9edf2 0 2%,transparent 31%); }.sun { position:absolute; width:clamp(150px,24vw,360px); aspect-ratio:1; border-radius:50%; left:13%; top:28%; background:#ffddb4; filter:blur(1px); box-shadow:0 0 70px 20px rgba(255,214,170,.42); }.cloud { position:absolute; height:10%; border-radius:100%; filter:blur(17px); background:rgba(239,223,209,.32); }.cloud-one{ width:55%;top:21%;right:-15%;}.cloud-two{width:40%;top:41%;left:-15%;opacity:.45}.hill { position:absolute; bottom:22%; width:140%; height:24%; border-radius:50% 50% 0 0; }.hill-back { left:-30%; background:#667783; opacity:.65; }.hill-front { right:-40%; bottom:18%; background:#3f5965; opacity:.9; }.water { position:absolute; bottom:0; width:100%; height:25%; background:repeating-linear-gradient(175deg,rgba(218,163,129,.35) 0 2px,rgba(49,74,88,.22) 3px 10px),linear-gradient(#8da2ad,#3f5967); }.hero-vignette { position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,25,31,.4),transparent 48%,rgba(15,25,31,.18)),linear-gradient(0deg,rgba(12,17,20,.48),transparent 35%); z-index:1; }.hero-content { position:relative; z-index:2; width:min(85%, 660px); padding:125px 0 88px; text-align:center; }.eyebrow,.card-number,.section-kicker { margin:0; font:10px/1.3 "DM Mono",monospace; letter-spacing:.16em; text-transform:uppercase; }.hero h1,.intro h2,.editorial h2,.travel-section h2,.sunrise-content h2,.everyday h2,.add-memory h2 { margin:15px 0 0; font:500 clamp(60px,9vw,120px)/.76 "EB Garamond",serif; letter-spacing:-.055em; }.hero h1 em,h2 em { font-weight:400; }.hero-chinese { margin:28px 0 0; font:22px/1 "Ma Shan Zheng",cursive; letter-spacing:.12em; }.polaroid { width:clamp(188px,19vw,238px); margin:34px auto 20px; padding:9px 9px 16px; color:#473e38; background:#f4efe8; box-shadow:8px 12px 26px rgba(20,26,30,.28); transform:rotate(3deg); }.photo-placeholder { position:relative; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,#9ca6a4,#e6bd94); }.photo-placeholder span,.card-photo span { position:relative; z-index:2; color:rgba(255,255,255,.8); font:8px/1.2 "DM Mono",monospace; letter-spacing:.12em; text-align:center; }.photo-placeholder i,.card-photo i { position:absolute; inset:0; background:linear-gradient(45deg,transparent 47%,rgba(255,255,255,.28) 49%,transparent 51%),linear-gradient(-45deg,transparent 47%,rgba(255,255,255,.28) 49%,transparent 51%); opacity:.3; }.hero-photo { height:220px; background:linear-gradient(145deg,#b6bfc1,#7d8f9a 43%,#d9b292); }.hero-photo::before { content:""; position:absolute; width:98px;height:98px;border-radius:50% 50% 43% 43%;background:#4d5e66;bottom:-13px;left:23%;box-shadow:54px -7px 0 -5px #c0a68e; }.hero-photo b { position:absolute; bottom:0;right:15%;height:90px;width:50px;border-radius:50% 50% 5px 5px;background:#e2d2c1;opacity:.8; }.polaroid figcaption { margin-top:11px; font:italic 14px "EB Garamond",serif; }.couple-meta { text-shadow:0 1px 15px rgba(28,33,36,.4); }.names { margin:0; font:500 27px/1 "EB Garamond",serif; letter-spacing:.02em; }.names span { color:#f1caa6; }.chinese-names { margin:7px 0 18px; font:17px "Ma Shan Zheng",cursive; letter-spacing:.17em; }.since { width:155px; margin:auto; padding-top:11px; border-top:1px solid rgba(255,255,255,.45); }.since span,.since small { display:block; font:9px "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }.since strong { display:block;margin:5px 0 4px;font:17px "EB Garamond",serif;letter-spacing:.08em; }.since small { color:#ffe2bd; }.scroll-cue { position:absolute; z-index:2; bottom:27px; left:50%; color:#fff; font:9px "DM Mono",monospace; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; transform:translateX(-50%); }.scroll-cue i { display:block; height:35px; width:1px; margin:9px auto 0; background:#fff; animation:scrollLine 2s infinite; transform-origin:top; } @keyframes scrollLine { 0%,100%{transform:scaleY(.2);opacity:.2}50%{transform:scaleY(1);opacity:1} }
.section-pad { padding-left:max(7vw,30px); padding-right:max(7vw,30px); }.intro { min-height:640px; position:relative; padding-top:120px; padding-bottom:100px; background:var(--paper); }.section-kicker { display:flex; gap:13px; align-items:center; color:#6c6862; }.section-kicker span { color:var(--rust); }.intro-copy { width:min(670px,75%); margin:85px auto 0; }.script { margin:0; color:var(--rust); font:26px "Ma Shan Zheng",cursive; letter-spacing:.14em; }.intro h2 { font-size:clamp(45px,6.5vw,91px); color:#393835; }.body-copy { max-width:350px; margin:25px 0 0; color:#6e6b65; font-size:13px; line-height:2; }.intro-note { position:absolute; right:9%; bottom:95px; color:#8c8880; font:10px/1.7 "DM Mono",monospace; letter-spacing:.05em; }.intro-note span { display:block; margin-top:8px; font-size:18px; color:var(--rust); }
.memory-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:6vw 5vw; padding-top:70px; padding-bottom:140px; background:var(--cream); }.memory-card { position:relative; }.card-photo { position:relative; overflow:hidden; min-height:360px; display:grid; place-items:center; }.photo-suzhou { min-height:580px; background:linear-gradient(142deg,#738b86,#d3b58d 60%,#80715e); }.photo-suzhou::before,.photo-cake::before,.photo-movie::before { content:""; position:absolute; inset:11% 15%; border:1px solid rgba(255,255,255,.36); }.card-content { padding:20px 0; }.card-content h3 { margin:11px 0 5px; font:500 clamp(38px,4.5vw,62px)/.84 "EB Garamond",serif; letter-spacing:-.045em; }.cn-title { margin:11px 0 0; font:20px "Ma Shan Zheng",cursive; letter-spacing:.08em; }.card-note { color:#74716b; font:12px/1.8 Manrope,sans-serif; }.offset-card { margin-top:160px; }.photo-movie { min-height:290px; background:linear-gradient(140deg,#2d4556,#bb7c58 48%,#e4c49e); }.photo-cake { min-height:410px; background:linear-gradient(135deg,#bc8278,#edd6b9 55%,#8a746e); }.card-cake { grid-column:2; margin-top:-120px; }.ticket-stub { display:flex; align-items:center; justify-content:space-between; position:absolute; z-index:2; width:174px; height:74px; padding:12px; right:-40px; top:-34px; color:#52483d; background:#dfc88d; transform:rotate(8deg); box-shadow:4px 6px 15px rgba(50,40,25,.15); }.ticket-stub span,.ticket-stub i { font:8px "DM Mono",monospace; letter-spacing:.05em; }.ticket-stub b { font:28px "EB Garamond",serif; }.ticket-stub i { position:absolute;right:9px;bottom:7px; }
.quote-band { padding:105px 20px; color:#f8efe3; text-align:center; background:#b26a58; }.quote-band p { margin:0; font:400 clamp(39px,5.5vw,76px)/.88 "EB Garamond",serif; letter-spacing:-.04em; }.quote-band span { display:block; margin-top:20px; font:10px "DM Mono",monospace; letter-spacing:.18em; text-transform:uppercase; }.editorial { display:grid; grid-template-columns:.83fr 1.17fr; gap:8%; padding-top:155px; padding-bottom:150px; background:#f5f0e6; }.editorial-heading { padding-top:35px; }.editorial h2,.travel-section h2,.sunrise-content h2,.everyday h2,.add-memory h2 { font-size:clamp(47px,6vw,88px); }.editorial-heading > p:last-child,.everyday-copy > p:last-child { margin-top:24px; font:20px "Ma Shan Zheng",cursive; color:#8b7264; letter-spacing:.1em; }.shanghai-collage { position:relative; min-height:580px; }.photo-forest { position:absolute; left:0; top:0; width:68%; height:410px; background:linear-gradient(135deg,#7f927f,#d5ceaa 62%,#c69b7c); }.photo-yuyuan { position:absolute; right:0; bottom:12px; width:48%; height:270px; background:linear-gradient(150deg,#ac6f55,#e6b97b 62%,#454953); }.collage-caption { position:absolute; z-index:2; left:4%; top:71%; padding:10px 12px; color:#fff7ec; background:var(--rust); font:italic 20px/1 "EB Garamond",serif; transform:rotate(-4deg); }.location-pin { position:absolute; right:1%; top:-27px; color:var(--rust); font-size:21px; }.location-pin small { vertical-align:middle; font:8px "DM Mono",monospace; letter-spacing:.1em; }.travel-section { padding-top:135px;padding-bottom:135px;background:#d9e0d7; }.travel-top { display:grid; grid-template-columns:.8fr 1fr .75fr; gap:4%; align-items:end; }.travel-top .script { margin-bottom:14px; }.travel-top .body-copy { margin-bottom:9px; }.nanjing-strip { display:grid; grid-template-columns:1.1fr .75fr 1fr; gap:13px; align-items:center; margin-top:75px; }.photo-nanjing { height:330px; background:linear-gradient(135deg,#a84f42,#d69c6b 55%,#424b51); }.photo-two { height:230px; background:linear-gradient(135deg,#5e7173,#b6aa87); }.photo-three { height:270px; background:linear-gradient(135deg,#e1bf8f,#ad584d 70%); }
.sunrise-section { position:relative; min-height:810px; display:flex; align-items:center; color:#fff; overflow:hidden; background:linear-gradient(180deg,#3f6d81,#daa183 56%,#617c83 57%,#263c45); }.sunrise-art { position:absolute;inset:0;overflow:hidden; }.sunrise-disc { position:absolute;width:min(40vw,520px); aspect-ratio:1;border-radius:50%;left:9%;top:11%; background:#fad19e;box-shadow:0 0 100px #ffd2a1; }.sunrise-water { position:absolute;left:0;bottom:0;width:100%;height:43%;background:repeating-linear-gradient(176deg,rgba(244,175,125,.45) 0 1px,rgba(42,70,80,.4) 3px 10px); }.sunrise-mountain { position:absolute;bottom:35%;left:-5%;width:110%;height:18%;background:#425c5e;clip-path:polygon(0 100%, 0 71%, 15% 40%, 31% 66%, 48% 12%, 66% 64%, 79% 42%, 100% 70%,100% 100%); }.sunrise-content { position:relative; z-index:1; margin-left:51%; }.sunrise-content .script { color:#ffdbad; }.sunrise-content .section-kicker { color:#fbe9d2; }.sunrise-content .section-kicker span { color:#ffdab0; }.sunrise-content .body-copy { color:#fff4e2; }
.everyday { display:grid; grid-template-columns:.72fr 1.28fr; gap:8%; align-items:center; padding-top:150px; padding-bottom:150px; background:#f2ece2; }.contact-sheet { display:grid; grid-template:repeat(2, 150px)/repeat(3,1fr); gap:8px; position:relative; padding:12px; background:#312f2c; transform:rotate(2deg); }.contact-cell { position:relative; min-width:0; overflow:hidden; background:linear-gradient(140deg,#bd9a85,#596c73); }.contact-cell::after { content:""; position:absolute;inset:0;background:linear-gradient(45deg,transparent,rgba(255,255,255,.28)); }.c2{background:linear-gradient(140deg,#e0be93,#b95e52)}.c3{background:linear-gradient(140deg,#718986,#d1ccab)}.c4{background:linear-gradient(140deg,#c47b67,#d8b08b)}.c5{background:linear-gradient(140deg,#8ba2ab,#c4b794)}.c6{background:linear-gradient(140deg,#d7bd9e,#71695d)}.contact-cell span { position:absolute;z-index:1;left:8px;bottom:7px;color:#fff;font:8px "DM Mono",monospace; }.contact-sheet p { grid-column:1/-1; position:absolute; top:44%; left:-87px; padding:10px 15px; color:#fff9ec; background:#9d5748; font:italic 18px/1 "EB Garamond",serif; transform:rotate(-7deg); }.add-memory { position:relative; padding-top:158px; padding-bottom:160px; color:#fff6e8; text-align:center; background:#3a4846; }.add-memory .tiny-star { color:#e8b887; font-size:26px; }.add-memory p { margin:33px 0 10px; font:11px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }.add-memory h2 { margin:0; }.add-link { display:inline-block; margin-top:48px; padding:14px 24px; color:#fff6e8; border:1px solid rgba(255,246,232,.55); text-decoration:none; font:10px "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; transition:.25s; }.add-link:hover { color:#3a4846;background:#fff6e8; }footer { display:flex; justify-content:space-between; padding:21px 35px; color:#74736d; font:9px "DM Mono",monospace; letter-spacing:.12em; background:#eee6d9; text-transform:uppercase; }.reveal { animation:fadeUp .9s both; }.reveal-delay-1{animation-delay:.13s}.reveal-delay-2{animation-delay:.23s}.reveal-delay-3{animation-delay:.32s}.reveal-delay-4{animation-delay:.42s}@keyframes fadeUp { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)} }.reveal-on-scroll { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s ease; }.reveal-on-scroll.is-visible { opacity:1;transform:none; }
@media (max-width:720px) { .site-header{padding:20px}.header-link{display:none}.hero-content{padding-top:110px}.hero h1{font-size:70px}.polaroid{margin-top:27px}.intro{min-height:570px;padding-top:85px}.intro-copy{width:100%;margin-top:70px}.intro-note{display:none}.memory-grid,.editorial,.everyday{display:block;padding-top:85px;padding-bottom:90px}.memory-card,.offset-card,.card-cake{margin:0 0 80px}.card-cake{margin-bottom:0}.card-photo,.photo-suzhou{min-height:350px}.offset-card .card-photo{min-height:290px}.ticket-stub{right:8px}.quote-band{padding:82px 20px}.editorial-heading{padding-top:0;margin-bottom:55px}.shanghai-collage{min-height:470px}.photo-forest{height:330px}.photo-yuyuan{height:205px}.travel-section{padding-top:85px;padding-bottom:85px}.travel-top{display:block}.travel-top>div{margin:45px 0}.nanjing-strip{margin-top:55px;gap:7px}.photo-nanjing{height:230px}.photo-two{height:175px}.photo-three{height:200px}.sunrise-section{min-height:680px;align-items:flex-end;padding:0 30px 95px}.sunrise-disc{width:290px;left:12%;top:10%}.sunrise-content{margin:0}.contact-sheet{margin-top:55px;grid-template:repeat(2,105px)/repeat(3,1fr)}.contact-sheet p{left:-10px;top:45%}.add-memory{padding-top:105px;padding-bottom:110px}footer{padding:18px 20px;font-size:7px;gap:10px}.section-pad{padding-left:25px;padding-right:25px} }
/* Real photo selections */
.hero-sky { background-image:linear-gradient(105deg,rgba(10,22,30,.53),rgba(10,22,30,.05) 58%,rgba(10,22,30,.22)),url("assets/moon-island-sunrise.jpg"); background-position:center; background-size:cover; }
.hero-sky::before { opacity:.23; }
.hero-sky .sun,.hero-sky .cloud,.hero-sky .hill,.hero-sky .water { display:none; }
.hero-photo { background:center/cover url("assets/hero-polaroid.jpg"); }
.hero-photo::before,.hero-photo b,.hero-photo span,.hero-photo i,.card-photo span,.card-photo i,.photo-forest span,.photo-forest i,.photo-yuyuan span,.photo-yuyuan i,.photo-nanjing span,.photo-nanjing i { display:none; }
.photo-suzhou { background:center/cover url("assets/suzhou-together.jpg"); }
.photo-movie { background:center/cover url("assets/movie-together.jpg"); }
.photo-cake { background:center/cover url("assets/new-year-cake.jpg"); }
.photo-forest { background:center/cover url("assets/shanghai-blossom.jpg"); }
.photo-yuyuan { background:center/cover url("assets/shanghai-yuyuan.jpg"); }
.photo-nanjing { background:center/cover url("assets/nanjing-river.jpg"); }
.photo-two { background-image:url("assets/nanjing-together.jpg"); }
.photo-three { background-image:url("assets/nanjing-detail.jpg"); }
.sunrise-section { background:center/cover url("assets/sunrise-waiting.jpg"); }
.sunrise-section::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,24,37,.34),rgba(18,24,37,.1) 55%,rgba(18,24,37,.55)); }
.sunrise-art { display:none; }
.contact-cell { background:center/cover url("assets/everyday-hanfu.jpg"); }
.c2 { background-image:url("assets/everyday-window.jpg"); }.c3 { background-image:url("assets/everyday-outside.jpg"); }.c4 { background-image:url("assets/everyday-closeup.jpg"); }.c5 { background-image:url("assets/everyday-rain.jpg"); }.c6 { background-image:url("assets/everyday-winter.jpg"); }

/* Extended photo-journal spreads */
figure { margin:0; }.portrait-ribbon { padding-top:85px; padding-bottom:105px; background:#f7f1e8; }.portrait-ribbon .section-kicker { justify-content:center; }.ribbon-photos { display:grid; grid-template-columns:1fr .76fr 1.1fr .76fr 1fr; gap:clamp(10px,2vw,28px); align-items:center; max-width:1180px; margin:52px auto 0; }.ribbon-photos figure { height:245px; overflow:hidden; box-shadow:0 12px 22px rgba(67,53,41,.12); }.ribbon-photos figure:nth-of-type(2) { height:320px; }.ribbon-photos figure:nth-of-type(3) { height:280px; }.ribbon-photos figure:nth-of-type(4) { height:215px; }.ribbon-photos img { width:100%; height:100%; object-fit:cover; }.ribbon-photos p { color:#554c45; font:400 clamp(25px,3.2vw,43px)/.9 "EB Garamond",serif; text-align:center; }.ribbon-photos p em { color:var(--rust); }.tilt-left { transform:rotate(-3deg); }.tilt-right { transform:rotate(3deg); }
.memory-atlas { padding-top:105px; padding-bottom:120px; background:#e9dfd0; }.atlas-head,.notebook-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin:0 auto 48px; max-width:1180px; }.atlas-head > p:last-child,.notebook-head > p:last-child { margin:0; color:#756d63; font:13px/1.8 Manrope,sans-serif; text-align:right; }.photo-atlas { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:88px; gap:14px; max-width:1180px; margin:auto; }.photo-atlas figure { overflow:hidden; background:#cec0ad; box-shadow:0 13px 20px rgba(64,46,35,.12); }.photo-atlas img,.new-year-photos img,.nanjing-mosaic img,.notes-gallery img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }.photo-atlas figure:hover img,.new-year-photos figure:hover img,.nanjing-mosaic figure:hover img,.notes-gallery figure:hover img { transform:scale(1.045); }.suzhou-atlas figure:nth-child(1) { grid-column:span 6; grid-row:span 5; }.suzhou-atlas figure:nth-child(2) { grid-column:span 3; grid-row:span 3; }.suzhou-atlas figure:nth-child(3) { grid-column:span 3; grid-row:span 3; }.suzhou-atlas figure:nth-child(4) { grid-column:8/span 5; grid-row:4/span 3; }.atlas-movie { background:#dbe3e2; }.movie-atlas figure:nth-child(1) { grid-column:span 3; grid-row:span 4; }.movie-atlas figure:nth-child(2) { grid-column:span 3; grid-row:span 4; }.movie-atlas figure:nth-child(3) { grid-column:span 6; grid-row:span 4; }.movie-atlas figure:nth-child(4) { grid-column:2/span 5; grid-row:5/span 3; }.movie-atlas figure:nth-child(5) { grid-column:7/span 4; grid-row:5/span 3; }.new-year-spread { display:grid; grid-template-columns:.72fr 1.28fr; gap:6%; padding-top:145px; padding-bottom:145px; background:#e2cfc3; }.spread-copy h2,.notes-heading h2 { margin:19px 0 0; color:#403a35; font:500 clamp(42px,5.4vw,72px)/.83 "EB Garamond",serif; letter-spacing:-.045em; }.new-year-photos { display:grid; grid-template:repeat(4,135px)/repeat(4,1fr); gap:10px; align-self:center; }.new-year-photos figure { overflow:hidden; box-shadow:0 8px 16px rgba(78,45,40,.12); }.new-year-photos figure:nth-child(1) { grid-column:span 2; grid-row:span 2; }.new-year-photos figure:nth-child(2) { grid-column:span 1; grid-row:span 2; }.new-year-photos figure:nth-child(3) { grid-column:span 1; grid-row:span 3; }.new-year-photos figure:nth-child(4) { grid-column:1/span 2; grid-row:3/span 2; }.new-year-photos figure:nth-child(5) { grid-column:3/span 1; grid-row:3/span 2; }.new-year-photos figure:nth-child(6) { grid-column:span 1; grid-row:4/span 1; }.new-year-photos figure:nth-child(7) { grid-column:span 1; grid-row:4/span 1; }.atlas-shanghai { background:#e7e9d8; }.shanghai-atlas figure:nth-child(1) { grid-column:span 7; grid-row:span 4; }.shanghai-atlas figure:nth-child(2) { grid-column:span 2; grid-row:span 4; }.shanghai-atlas figure:nth-child(3) { grid-column:span 3; grid-row:span 2; }.shanghai-atlas figure:nth-child(4) { grid-column:span 3; grid-row:3/span 4; }.shanghai-atlas figure:nth-child(5) { grid-column:span 4; grid-row:5/span 3; }.shanghai-atlas figure:nth-child(6) { grid-column:span 2; grid-row:3/span 3; }.shanghai-atlas figure:nth-child(7) { grid-column:span 3; grid-row:5/span 3; }.shanghai-atlas figure:nth-child(8) { grid-column:span 3; grid-row:3/span 2; }
.nanjing-notebook { padding-top:145px; padding-bottom:145px; background:#e9e6de; }.nanjing-mosaic { display:grid; grid-template-columns:1.16fr .84fr 1fr 1fr; grid-auto-rows:165px; gap:12px; max-width:1180px; margin:auto; }.nanjing-mosaic figure { overflow:hidden; background:#b2a99e; }.mosaic-tall { grid-row:span 2; }.nanjing-mosaic figure:nth-child(2) { grid-column:span 2; }.nanjing-mosaic figure:nth-child(5) { grid-row:span 2; }.nanjing-mosaic figure:nth-child(6) { grid-column:span 2; }.mosaic-wide { grid-column:span 2; }.nanjing-mosaic figure:nth-child(11) { grid-column:span 2; }.atlas-sunrise { color:#f6efe3; background:#405a65; }.atlas-sunrise .section-kicker,.atlas-sunrise .atlas-head > p:last-child { color:#f6efe3; }.sunrise-atlas figure:nth-child(1) { grid-column:span 3; grid-row:span 4; }.sunrise-atlas figure:nth-child(2) { grid-column:span 5; grid-row:span 3; }.sunrise-atlas figure:nth-child(3) { grid-column:span 4; grid-row:span 3; }.sunrise-atlas figure:nth-child(4) { grid-column:span 4; grid-row:4/span 3; }.sunrise-atlas figure:nth-child(5) { grid-column:span 5; grid-row:4/span 3; }.sunrise-atlas figure:nth-child(6) { grid-column:span 3; grid-row:4/span 3; }
.everyday-notes { display:grid; grid-template-columns:.68fr 1.32fr; gap:8%; align-items:center; padding-top:150px; padding-bottom:160px; background:#f5efe6; }.notes-heading > p:last-child { margin:23px 0 0; color:#756c64; font:13px/1.9 Manrope,sans-serif; }.notes-gallery { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:10px; }.notes-gallery figure { overflow:hidden; background:#bcae9b; }.notes-gallery figure:nth-child(1) { grid-column:span 2; grid-row:span 2; }.notes-gallery figure:nth-child(4) { grid-column:span 2; }.notes-gallery figure:nth-child(7) { grid-row:span 2; }.notes-gallery figure:nth-child(9) { grid-column:span 2; }.notes-gallery figure:nth-child(11) { grid-column:span 2; }
@media (max-width:720px) { .portrait-ribbon{padding-top:70px;padding-bottom:70px}.ribbon-photos{grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}.ribbon-photos p{grid-column:1/-1;grid-row:1;font-size:31px}.ribbon-photos figure,.ribbon-photos figure:nth-of-type(2),.ribbon-photos figure:nth-of-type(3),.ribbon-photos figure:nth-of-type(4){height:210px}.atlas-head,.notebook-head{display:block;margin-bottom:30px}.atlas-head>p:last-child,.notebook-head>p:last-child{margin-top:16px;text-align:left}.memory-atlas,.nanjing-notebook{padding-top:75px;padding-bottom:80px}.photo-atlas{grid-template-columns:repeat(2,1fr);grid-auto-rows:155px;gap:8px}.photo-atlas figure,.suzhou-atlas figure:nth-child(n),.movie-atlas figure:nth-child(n),.shanghai-atlas figure:nth-child(n),.sunrise-atlas figure:nth-child(n){grid-column:span 1;grid-row:span 1}.photo-atlas figure.wide{grid-column:span 2!important}.photo-atlas figure.portrait{grid-row:span 2!important}.new-year-spread,.everyday-notes{display:block;padding-top:85px;padding-bottom:85px}.new-year-photos{margin-top:50px;grid-template:repeat(4,102px)/repeat(4,1fr);gap:7px}.nanjing-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:135px;gap:7px}.nanjing-mosaic figure,.nanjing-mosaic figure:nth-child(n){grid-column:span 1;grid-row:span 1}.nanjing-mosaic .mosaic-tall{grid-row:span 2}.nanjing-mosaic .mosaic-wide{grid-column:span 2}.notes-gallery{margin-top:48px;grid-auto-rows:120px;gap:7px}.notes-gallery figure:nth-child(1){grid-column:span 2;grid-row:span 2}.notes-gallery figure:nth-child(4),.notes-gallery figure:nth-child(9),.notes-gallery figure:nth-child(11){grid-column:span 2}.notes-gallery figure:nth-child(7){grid-row:span 2} }

/* Jingwen's everyday photos — a looser scrapbook, not a gallery wall */
.everyday-notes { overflow:hidden; }.notes-gallery { padding:20px 17px 26px; margin-right:-17px; }.notes-gallery figure { position:relative; padding:6px 6px 21px; overflow:visible; background:#fbf7ee; box-shadow:5px 8px 18px rgba(67,49,36,.18); transform-origin:center; transition:transform .35s ease, box-shadow .35s ease; }.notes-gallery figure::after { content:""; position:absolute; inset:6px 6px 21px; border:1px solid rgba(255,255,255,.32); pointer-events:none; }.notes-gallery figure:hover { z-index:3; box-shadow:9px 14px 26px rgba(67,49,36,.23); transform:rotate(0deg) translateY(-7px) scale(1.03); }.notes-gallery figure:nth-child(1) { transform:rotate(-2.8deg) translateY(5px); }.notes-gallery figure:nth-child(2) { transform:rotate(2.3deg) translateY(-8px); }.notes-gallery figure:nth-child(3) { transform:rotate(-1.5deg) translateY(7px); }.notes-gallery figure:nth-child(4) { transform:rotate(2.8deg) translateY(-5px); }.notes-gallery figure:nth-child(5) { transform:rotate(-3.6deg) translateY(9px); }.notes-gallery figure:nth-child(6) { transform:rotate(1.6deg) translateY(-9px); }.notes-gallery figure:nth-child(7) { transform:rotate(-1.9deg) translateY(4px); }.notes-gallery figure:nth-child(8) { transform:rotate(3.2deg) translateY(-3px); }.notes-gallery figure:nth-child(9) { transform:rotate(-2.1deg) translateY(10px); }.notes-gallery figure:nth-child(10) { transform:rotate(2deg) translateY(-8px); }.notes-gallery figure:nth-child(11) { transform:rotate(-3deg) translateY(4px); }.notes-gallery figure:nth-child(3)::before,.notes-gallery figure:nth-child(8)::before { content:"little moment"; position:absolute; z-index:2; bottom:6px; left:50%; color:#756b62; font:italic 11px "EB Garamond",serif; letter-spacing:.04em; transform:translateX(-50%); white-space:nowrap; }.notes-gallery figure:nth-child(5)::before { content:"JINGWEN"; position:absolute; z-index:2; bottom:7px; left:9px; color:#a55849; font:7px "DM Mono",monospace; letter-spacing:.15em; }.notes-gallery figure img { height:calc(100% - 0px); }
.contact-sheet { transform:rotate(-1.4deg); }.contact-sheet .contact-cell { border:4px solid #f9f5ec; }.ribbon-photos figure { padding:5px 5px 17px; background:#faf6ee; }.ribbon-photos figure img { height:calc(100% - 0px); }
@media (max-width:720px) { .notes-gallery { padding:12px 8px 21px; margin-right:-8px; }.notes-gallery figure { padding:4px 4px 16px; }.notes-gallery figure::after { inset:4px 4px 16px; }.notes-gallery figure:nth-child(3)::before,.notes-gallery figure:nth-child(8)::before { bottom:4px; font-size:9px; }.notes-gallery figure:nth-child(5)::before { bottom:4px; font-size:6px; } }

/* Text, motion, and illustrated pauses */
.illustrated-note { position:relative; min-height:555px; display:grid; place-items:center; overflow:hidden; background:#d8dfd4; }.note-paper { position:relative; z-index:1; width:min(610px,75%); padding:58px 52px 64px; color:#443d38; text-align:center; background:#f8f1e6; box-shadow:15px 18px 33px rgba(52,57,49,.18); transform:rotate(-1.5deg); }.note-paper::before,.note-paper::after { content:""; position:absolute; width:86px; height:26px; background:rgba(182,143,103,.35); top:-13px; }.note-paper::before { left:10%; transform:rotate(-5deg); }.note-paper::after { right:10%; transform:rotate(5deg); }.tiny-type { margin:0 0 25px; color:#9a6556; font:9px "DM Mono",monospace; letter-spacing:.14em; }.note-paper > p:nth-child(2) { margin:0; font:400 clamp(29px,4.1vw,52px)/1 "EB Garamond",serif; letter-spacing:-.03em; }.note-paper em { color:var(--rust); }.note-paper span { display:block; margin-top:26px; color:#776e65; font:italic 15px "EB Garamond",serif; }.chibi { position:absolute; z-index:2; display:block; width:min(330px,30vw); height:auto; pointer-events:none; }.chibi-together { right:8%; bottom:7%; transform:rotate(3deg); }.doodle-star { position:absolute; color:#b56952; font-size:28px; }.doodle-star.one { top:21%; left:16%; }.doodle-star.two { right:23%; top:17%; font-size:18px; }
.motion-notes { display:grid; grid-template-columns:.72fr 1.28fr; gap:8%; align-items:center; padding-top:155px; padding-bottom:160px; color:#f8f1e5; background:#3f4947; }.motion-heading h2 { margin:18px 0 0; font:500 clamp(45px,5.6vw,74px)/.84 "EB Garamond",serif; letter-spacing:-.05em; }.motion-heading > p:last-child { max-width:320px; margin:24px 0 0; color:#dce0d7; font-size:13px; line-height:2; }.motion-heading .section-kicker { color:#dce0d7; }.motion-heading .section-kicker span { color:#e6b57e; }.motion-film { position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:18px; padding:15px 20px 38px 0; }.motion-film figure { overflow:hidden; background:#101617; box-shadow:12px 14px 0 rgba(230,181,126,.25); }.motion-film video { display:block; width:100%; height:100%; min-height:340px; object-fit:cover; background:#151c1c; }.motion-film .motion-small { align-self:end; transform:translateY(61px) rotate(3deg); }.motion-film .motion-small video { min-height:218px; }.motion-film figcaption { padding:11px 13px; color:#ded6ca; font:9px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.motion-whisper { position:absolute; right:-38px; bottom:-41px; margin:0; color:#e6b57e; font:italic 26px/.9 "EB Garamond",serif; transform:rotate(-6deg); }
.letter-break { position:relative; display:grid; grid-template-columns:.34fr 1fr .32fr; gap:4%; align-items:center; min-height:510px; padding-top:100px; padding-bottom:100px; overflow:hidden; background:#f7f0e5; }.letter-break::before { content:""; position:absolute; top:0; left:17%; width:1px; height:100%; background:rgba(70,63,55,.13); }.letter-index { color:#766f64; font:9px "DM Mono",monospace; letter-spacing:.16em; writing-mode:vertical-rl; }.letter-break h2 { margin:17px 0 0; color:#373632; font:500 clamp(41px,5.5vw,76px)/.83 "EB Garamond",serif; letter-spacing:-.05em; }.letter-break > div > p:last-child { margin:28px 0 0; color:#706b64; font:13px/1.9 Manrope,sans-serif; }.letter-stamp { justify-self:end; display:grid; place-items:center; width:96px; aspect-ratio:1; color:#a75140; border:1px solid currentColor; border-radius:50%; font:11px/1.05 "DM Mono",monospace; letter-spacing:.09em; text-align:center; transform:rotate(12deg); }
.sleepy-ending { position:relative; display:grid; grid-template-columns:1fr 1.1fr .7fr; gap:4%; align-items:end; min-height:410px; padding-top:80px; padding-bottom:55px; overflow:hidden; background:#d4c9ba; }.sleepy-copy .section-kicker { color:#6f645a; }.sleepy-copy > p:last-child { margin:19px 0 0; color:#48423d; font:400 clamp(29px,3.8vw,48px)/.95 "EB Garamond",serif; letter-spacing:-.03em; }.chibi-sleeping { position:relative; align-self:end; justify-self:center; width:min(420px,42vw); transform:rotate(-1deg) translateY(18px); }.sleepy-note { align-self:center; margin:0; color:#8d5549; font:italic 20px/.95 "EB Garamond",serif; transform:rotate(-7deg); }
@media (max-width:720px) { .illustrated-note{min-height:470px}.note-paper{width:88%;padding:45px 24px 54px}.note-paper>p:nth-child(2){font-size:32px}.chibi-together{width:200px;right:-11px;bottom:2%}.doodle-star.one{left:9%;top:12%}.doodle-star.two{right:14%;top:7%}.motion-notes{display:block;padding-top:85px;padding-bottom:115px}.motion-film{margin-top:48px;padding-right:5px;gap:9px}.motion-film video{min-height:245px}.motion-film .motion-small{transform:translateY(42px) rotate(3deg)}.motion-film .motion-small video{min-height:155px}.motion-whisper{right:3px;bottom:-72px;font-size:22px}.letter-break{grid-template-columns:.22fr 1fr;min-height:450px;padding-top:65px;padding-bottom:65px}.letter-break::before{left:14%}.letter-index{font-size:8px}.letter-stamp{display:none}.letter-break h2{font-size:45px}.sleepy-ending{display:block;min-height:490px;padding-top:75px;padding-bottom:0}.chibi-sleeping{display:block;width:330px;margin:18px auto -14px}.sleepy-note{position:absolute;right:28px;top:105px;font-size:18px} }

/* Final resilience and accessibility pass */
.chibi-sleeping { mix-blend-mode:multiply; }.site-header a:focus-visible,.scroll-cue:focus-visible,.add-link:focus-visible,video:focus-visible { outline:2px solid #f7d4a5; outline-offset:5px; }.motion-film video { border:1px solid rgba(255,255,255,.18); }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal,.reveal-on-scroll,.scroll-cue i { animation:none!important; transition:none!important; }.reveal-on-scroll { opacity:1; transform:none; }.photo-atlas figure:hover img,.new-year-photos figure:hover img,.nanjing-mosaic figure:hover img,.notes-gallery figure:hover img { transform:none; }.notes-gallery figure:hover { transform:none; } }

/* Event stories: show a scene, pause for words, then continue */
.city-story,.journey-story,.sunrise-story { width:min(100%,1180px); margin:auto; }.city-beat,.journey-beat,.sunrise-beat { align-items:center; gap:clamp(18px,4vw,65px); margin-top:clamp(72px,10vw,140px); }.city-beat:first-child,.journey-beat:first-child,.sunrise-beat:first-child { margin-top:0; }.city-beat figure,.journey-beat figure,.sunrise-beat figure { overflow:hidden; background:#c3b6a5; box-shadow:10px 14px 25px rgba(61,49,38,.13); }.city-beat img,.journey-beat img,.sunrise-beat img { display:block; width:100%; height:100%; object-fit:cover; }.beat-copy span { display:block; margin-bottom:15px; color:var(--rust); font:9px "DM Mono",monospace; letter-spacing:.16em; }.beat-copy p { margin:0; color:#4d4943; font:400 clamp(26px,3.4vw,45px)/.98 "EB Garamond",serif; letter-spacing:-.03em; }.beat-copy em { color:#a85d4d; }.city-beat { display:grid; }.city-beat-opening { grid-template-columns:.73fr 1.27fr; }.city-beat-opening figure { height:455px; }.city-beat-together { display:grid; grid-template-columns:1fr .86fr .8fr; }.city-beat-together figure:first-child { height:440px; transform:rotate(-2deg); }.city-beat-together figure:nth-child(2) { height:315px; align-self:end; transform:rotate(3deg); }.city-beat-together > p { margin:0; color:#6c675e; font:italic clamp(25px,3vw,40px)/.95 "EB Garamond",serif; }.city-beat-pause { display:grid; grid-template-columns:.85fr 1fr .85fr; }.city-beat-pause figure { height:290px; }.city-beat-pause .beat-copy { padding:18px 3px; text-align:center; }.city-beat-yuyuan { display:grid; grid-template-columns:.9fr .95fr .85fr; }.city-beat-yuyuan figure:first-child { height:450px; }.city-beat-yuyuan figure:nth-child(2) { height:290px; align-self:end; transform:rotate(2deg); }
.journey-story { max-width:1080px; }.journey-beat { display:grid; }.journey-beat figure { min-height:280px; }.journey-arrival { grid-template-columns:.84fr 1fr .85fr; }.journey-arrival figure:first-of-type { height:300px; }.journey-arrival figure:last-child { height:430px; transform:rotate(2deg); }.journey-daylight { grid-template-columns:1fr .8fr 1fr; }.journey-daylight figure:first-child { height:430px; transform:rotate(-2deg); }.journey-daylight figure:nth-child(2) { height:285px; align-self:end; }.journey-details { grid-template-columns:.94fr .8fr .8fr .9fr; }.journey-details figure { height:250px; }.journey-details figure:nth-child(3) { transform:translateY(38px) rotate(-2deg); }.journey-evening { grid-template-columns:1.1fr .83fr .9fr; }.journey-evening figure:first-child { height:415px; }.journey-evening figure:last-child { height:330px; align-self:end; transform:rotate(2deg); }
.atlas-sunrise { padding-bottom:155px; }.sunrise-beat { display:grid; }.sunrise-beat .beat-copy span { color:#f4c996; }.sunrise-beat .beat-copy p { color:#f9f0e3; }.sunrise-beat .beat-copy em { color:#f2bc7a; }.sunrise-before { grid-template-columns:.9fr 1.1fr; }.sunrise-before figure { height:430px; }.sunrise-waiting { grid-template-columns:.9fr .9fr .9fr; }.sunrise-waiting figure { height:315px; }.sunrise-waiting .beat-copy { text-align:center; }.sunrise-firstlight { grid-template-columns:1fr .9fr .8fr; }.sunrise-firstlight figure:first-child { height:420px; }.sunrise-firstlight figure:last-child { height:310px; align-self:end; transform:rotate(2deg); }.sunrise-after { grid-template-columns:.84fr 1.16fr; align-items:end; }.sunrise-after > p { margin:0; color:#f2bc7a; font:400 clamp(30px,4vw,53px)/.95 "EB Garamond",serif; letter-spacing:-.03em; }.sunrise-after figure { height:370px; transform:rotate(-2deg); }
@media (max-width:720px) { .city-beat,.journey-beat,.sunrise-beat { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:76px; }.beat-copy { grid-column:1/-1; }.beat-copy p { font-size:30px; }.city-beat figure,.city-beat-opening figure,.city-beat-together figure:first-child,.city-beat-together figure:nth-child(2),.city-beat-pause figure,.city-beat-yuyuan figure:first-child,.city-beat-yuyuan figure:nth-child(2),.journey-beat figure,.journey-arrival figure:first-of-type,.journey-arrival figure:last-child,.journey-daylight figure:first-child,.journey-daylight figure:nth-child(2),.journey-details figure,.journey-evening figure:first-child,.journey-evening figure:last-child,.sunrise-before figure,.sunrise-waiting figure,.sunrise-firstlight figure:first-child,.sunrise-firstlight figure:last-child,.sunrise-after figure { height:235px; min-height:0; transform:none; }.city-beat-together>p,.sunrise-after>p { grid-column:1/-1; font-size:31px; }.city-beat-pause .beat-copy,.sunrise-waiting .beat-copy { text-align:left; }.journey-details figure:nth-child(3) { transform:none; }.journey-details .beat-copy { order:-1; }.sunrise-before figure { grid-column:1/-1; }.sunrise-before .beat-copy { order:2; }.sunrise-after { grid-template-columns:1fr; }.sunrise-after figure { height:280px; } }