.public-page{padding:0 7vw 10vw}
.public-hero{padding:9vw 0 7vw;display:grid;grid-template-columns:1.25fr .75fr;gap:7vw;align-items:end;border-bottom:1px solid var(--line)}
.public-hero .kicker{grid-column:1/-1}
.public-hero h1{font:400 clamp(52px,7vw,102px)/.96 Georgia,"Songti SC",serif;letter-spacing:-.055em;margin:20px 0 0}
.public-hero h1 em,.coming em,.reader-letter h1 em{color:var(--rust);font-weight:400}
.public-hero>p:last-child{font:14px/1.9 Georgia,"Songti SC",serif}
.case-feature{display:grid;grid-template-columns:1fr 40px 1fr .8fr;gap:16px;align-items:center;padding:7vw 0}
.case-placeholder{aspect-ratio:.8;border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,250,236,.35)}
.case-placeholder.after{background:linear-gradient(145deg,var(--rust),#a82bdc);color:white}
.case-placeholder span{font-size:9px;letter-spacing:.15em}
.case-placeholder b{font:34px Georgia,"Songti SC",serif}
.case-arrow{text-align:center;font-size:25px}
.case-feature aside{padding-left:20px}
.case-feature aside h2,.coming h2{font:400 36px/1.15 Georgia,"Songti SC",serif}
.locked-prompt{padding:17px;background:var(--ink);color:var(--paper);font:11px/1.8 monospace;filter:blur(.25px)}
.case-feature aside>p{font-size:11px;line-height:1.7}
.case-grid,.article-intro{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:35px}
.case-grid article,.article-intro>div{background:var(--paper);padding:30px}
.case-grid span,.article-intro span{font:italic 18px Georgia,serif;color:var(--rust)}
.case-grid h3,.article-intro h2{font:400 28px Georgia,"Songti SC",serif;margin:28px 0 12px}
.case-grid p,.article-intro p{font-size:12px;line-height:1.8}
.coming{text-align:center;padding:10vw 0}
.article-intro{margin:6vw 0}
.article-archive{padding:3vw 0}
.empty-article{display:grid;grid-template-columns:.25fr 1.75fr;gap:30px;padding:5vw 0;border-bottom:1px solid var(--line)}
.empty-article>span{font:italic 45px Georgia,serif;color:var(--rust)}
.empty-article h2{font:400 35px Georgia,"Songti SC",serif}
.empty-article p{font-size:13px;line-height:1.8}
.letter-page{padding:7vw}
.reader-letter{width:min(820px,100%);margin:0 auto;background:#f5ecd8;border:1px solid var(--line);box-shadow:18px 20px 0 rgba(32,27,20,.08);padding:7vw}
.letter-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;border-bottom:1px solid var(--line);padding-bottom:17px}
.salutation{margin-top:55px;font:italic 17px Georgia,"Songti SC",serif}
.reader-letter h1{font:400 clamp(45px,6vw,75px)/1 Georgia,"Songti SC",serif;letter-spacing:-.04em;margin:25px 0 55px}
.letter-body p{font:17px/2.1 Georgia,"Songti SC",serif;margin:0 0 25px}
.signature{display:flex;flex-direction:column;align-items:flex-end;margin-top:70px}
.signature span{font-size:12px}
.signature strong{font:italic 45px Georgia,serif;color:var(--rust);margin:18px 0 5px}
.signature small{font-size:9px;letter-spacing:.15em}
@media(max-width:800px){.public-page,.letter-page{padding:0 5vw 16vw}
.public-hero{grid-template-columns:1fr;padding:18vw 0 14vw}
.case-feature{grid-template-columns:1fr 25px 1fr}
.case-feature aside{grid-column:1/-1;padding:30px 0 0}
.case-grid,.article-intro{grid-template-columns:1fr}
.reader-letter{padding:12vw 7vw}
.letter-body p{font-size:16px}
}

/* Letter ending: the final page folds the reading experience back into an envelope. */
.letter-page{padding-top:72px;padding-bottom:110px;background:radial-gradient(circle at 50% 90%,rgba(210,185,139,.22),transparent 28%)}
.reader-letter{width:min(860px,100%);padding:72px 86px 0;overflow:hidden;position:relative;background:linear-gradient(rgba(42,34,22,.025) 1px,transparent 1px),#f6ecd5;background-size:100% 34px}
.reader-letter:before{content:"";position:absolute;inset:15px;border:1px solid rgba(30,26,20,.08);pointer-events:none}
.reader-letter h1{font-size:clamp(44px,5.2vw,67px);line-height:1.03;margin-bottom:48px}
.letter-body{max-width:650px;margin:0 auto}.letter-body p{font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;font-size:15px;line-height:2.05;margin-bottom:26px;color:rgba(30,26,20,.88)}
.letter-body p:last-child{margin:62px 0 5px;padding:34px 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 22px/1.75 Georgia,"Songti SC",serif;text-align:center;color:var(--rust);letter-spacing:.015em}
.signature{min-height:365px;margin:85px -86px 0;padding:48px 86px 45px;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background:#ddc89f;border-top:1px solid rgba(30,26,20,.25);transition:background .35s}
.signature:before,.signature:after{content:"";position:absolute;left:0;right:0;bottom:0;height:68%;pointer-events:none}.signature:before{background:#e4d1aa;clip-path:polygon(0 100%,0 0,50% 70%,100% 0,100% 100%)}.signature:after{background:#e9d7b5;clip-path:polygon(0 100%,50% 24%,100% 100%)}
.signature span,.signature strong,.signature small{position:relative;z-index:2}.signature span{font:400 15px/1.8 Georgia,"Songti SC",serif}.signature span:before{content:"THE LETTER REMAINS OPEN";display:block;margin-bottom:18px;font:700 7px/1 Arial,sans-serif;letter-spacing:.23em;color:rgba(30,26,20,.65)}.signature span:after{content:"\A 如果其中一句话留在了你心里，\A 那么这封信就不必真正结束。";white-space:pre-line;display:block;margin-top:18px;font:12px/1.9 "Microsoft YaHei","PingFang SC",sans-serif;color:rgba(30,26,20,.72)}
.signature strong{width:72px;height:72px;margin:28px 0 13px;border-radius:50%;display:grid;place-items:center;background:var(--rust);color:#f8edd5;box-shadow:0 3px 0 #9f3c24,0 12px 24px rgba(68,39,15,.2);font-size:0;transform:none;transition:transform .35s}.signature strong:after{content:"N";font:italic 700 26px Georgia,serif}.signature small{font-family:Arial,"PingFang SC",sans-serif;font-size:7px;letter-spacing:.17em}.signature:hover{background:#d7c093}.signature:hover strong{transform:translateY(-5px) rotate(-5deg)}
.reader-letter:after{content:"故事没有结束。我们下一页见。";display:block;margin:0 -86px;padding:68px 40px 74px;background:var(--rust);color:#f7edd6;text-align:center;font:400 clamp(31px,4vw,48px)/1.2 Georgia,"Songti SC",serif;letter-spacing:-.02em}
.letter-page+footer{padding-top:24px;padding-bottom:24px;background:#1f1b16;color:#f1e5cc;border-color:#1f1b16;font-size:8px;letter-spacing:.08em}
@media(max-width:700px){.letter-page{padding-top:38px}.reader-letter{padding:48px 26px 0}.letter-body p{font-size:14px;line-height:1.95}.letter-body p:last-child{margin-top:45px;padding:28px 15px;font-size:19px}.signature{margin:65px -26px 0;padding:42px 25px;min-height:340px}.reader-letter:after{margin:0 -26px;padding:52px 20px 58px;font-size:30px}.letter-top{font-size:7px}.salutation{margin-top:40px}}

/* Long-form reading rhythm used for NANA's letters and essays. */
.longform-letter .letter-body{max-width:680px}
.longform-letter .letter-body p{margin-bottom:31px;line-height:2.08;letter-spacing:.01em}
.longform-letter .letter-body .section-break{margin:42px 0 38px;padding:0;border:0;text-align:left;font:italic 400 18px/1 Georgia,serif;color:var(--rust)}
.longform-letter .letter-body .thought-list{line-height:2.15}
.longform-letter .letter-body .letter-conclusion{margin:48px 0 8px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 20px/1.9 Georgia,"Songti SC",serif;text-align:left;color:var(--rust)}
@media(max-width:700px){.longform-letter .letter-body p{margin-bottom:25px}.longform-letter .letter-body .section-break{margin:34px 0 31px}.longform-letter .letter-body .letter-conclusion{margin-top:40px;padding:25px 0;font-size:18px}}