/* 关于观澜以信件呈现；系列介绍独立展开，可随内容增长。 */
.mask.intro{padding:4vh 20px;background:rgba(31,47,37,.26);backdrop-filter:blur(8px)}
.about-card{width:100%;max-width:1120px;height:92vh;max-height:calc(100dvh - 32px);margin:auto;background:#FCFAF3;border:1px solid #DADFD2;border-radius:8px;box-shadow:0 24px 80px rgba(20,40,28,.22);overflow-y:auto;overscroll-behavior:contain;position:relative;display:flex;flex-direction:column;animation:pop .22s ease}
.intro-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 78px 18px 40px;border-bottom:1px solid var(--line);flex:none;position:sticky;top:0;z-index:10;background:#FCFAF3}
.intro-origin{display:flex;align-items:center;gap:10px;color:var(--green);font-size:12px;letter-spacing:1px;white-space:nowrap}
.intro-origin .intro-mark{display:block;flex:none;width:31px;height:20px;overflow:hidden}
.intro-mark img{display:block;height:100%;width:auto;max-width:none}
.intro-top-note{font-size:12px;color:#73796D;letter-spacing:1px}
.about-card .intro-top .modal-close{top:50%;right:24px;transform:translateY(-50%);height:32px;width:32px;line-height:30px;background:transparent;color:var(--green);border:1px solid #D7DFD2}
.intro-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.intro-actions button{font-family:var(--sans);font-size:13px;cursor:pointer;border-radius:4px;padding:11px 18px;min-height:44px;white-space:nowrap}
.intro-browse{border:1px solid var(--green);background:var(--green);color:#fff}
.intro-browse:hover{background:#064427}
.intro-contact{border:1px solid #CBD5C4;background:transparent;color:var(--green)}
.intro-contact:hover{background:#EDF2E7}
/* 信纸外壳（旧版第二只信封台已随「关于观澜直接展开来信」下线，2026-10-22；拆信仪式样式在 index.html 内联的独立层 z-310） */
.letter-shell{background:#EFEDE4}
.letter-shell [hidden]{display:none!important}
.letter-shell .intro-top{background:#F7F5ED}
/* 整个打开的窗口就是信纸；正文装不下时按页阅读，不缩成小字。
   纸感：干净暖纸底（无噪点） + 信笺细框 + 抬头文武线。 */
.letter-shell[data-letter-state="open"]{overflow:hidden;border:0;border-radius:5px;max-width:820px;background-color:#FCFAF4;background-image:radial-gradient(130% 100% at 50% 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 62%)} /* 干净暖白纸：去掉噪点纤维（显脏）；纸面收窄 1120→820 */
/* 信纸打开后不再有「窗口」：顶栏收起，整张卡片就是一页纸，关闭按钮浮在纸外 */
.letter-shell[data-letter-state="open"] .intro-top{display:none}
#about-mask>.about-close{top:22px;right:26px;background:rgba(252,250,243,.95);border-color:rgba(252,250,243,.45);color:#5A6254;box-shadow:0 4px 16px rgba(0,0,0,.3)}
#about-mask>.about-close:hover{background:#FFFFFF;color:var(--ink)}
.letter-reading{flex:1;min-height:0;display:flex;padding:30px 52px 26px;animation:letter-unfold .42s cubic-bezier(.2,.7,.2,1) both}
.letter-paper{flex:1;min-height:0;min-width:0;max-width:880px;width:100%;margin:0 auto;display:flex;flex-direction:column;position:relative;padding:10px 56px 14px}
.letter-letterhead{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:2px solid #45614A;padding-bottom:7px;color:#45614A;font-family:var(--serif);font-size:15px;letter-spacing:2px;flex:none;position:relative}
.letter-letterhead::after{content:"";position:absolute;left:0;right:0;bottom:-11px;border-bottom:1px solid #45614A}
.letter-letterhead span:last-child{font:11px var(--sans);letter-spacing:2px;color:#81836E}
.letter-subject{font:500 17px/1.7 var(--serif);letter-spacing:4px;color:#334B3B;text-align:center;margin:18px 0 12px;flex:none}
.letter-subject:focus{outline:none}
.letter-subject-break{display:none}
.letter-pages{flex:1;min-height:0;overflow:hidden}
.letter-pages.letter-overflow-fallback{overflow-y:auto}
.letter-page{display:flow-root;outline:none}
.letter-page>:last-child{margin-bottom:0}
.intro-salute{font:16px/1.9 var(--serif);color:#3E463B;margin-bottom:10px;overflow-wrap:anywhere}
/* 2026-10-22 结尾段与正文同款（张烨：红框那段字体不统一）：.intro-parting p 并入 letter-paragraph 规则 */
.letter-paragraph,.intro-parting p{font:16px/1.9 var(--serif);color:#3E463B;margin:0 0 10px;text-indent:2em;text-wrap:pretty;overflow-wrap:anywhere}
.letter-paragraph[data-continuation="true"]{text-indent:0}
.intro-parting{margin-top:12px}
.letter-signoff{text-align:right;margin-top:14px;color:#334B3B}
.letter-signoff p{font:600 16px/1.8 var(--serif);letter-spacing:2px;margin-bottom:4px}
.letter-signoff span{font:13px var(--serif);letter-spacing:2px;color:#7A7E6B}
.letter-pagination{display:flex;align-items:center;justify-content:center;gap:20px;flex:none;min-height:38px;margin-top:8px}
.letter-pagination button{border:0;background:none;padding:8px 10px;min-height:36px;color:var(--green);font:12px var(--sans);cursor:pointer}
.letter-pagination button:disabled{color:#AAA99C;cursor:default}
.letter-pagination span{font:12px var(--sans);color:#787D6B;min-width:44px;text-align:center}
@keyframes letter-unfold{from{opacity:0;transform:translateY(20px) scale(.985);transform-origin:center top}to{opacity:1;transform:none}}
/* 独立系列目录，条目纵向自然增长，不预留空位。 */
.guide-content{padding:32px 52px 12px;flex:1}
.guide-heading{max-width:780px;margin-bottom:24px}
.guide-heading h2{font:700 34px/1.4 var(--serif);letter-spacing:2px;color:var(--ink);margin:0 0 14px}
.guide-heading>p{font:14px/1.9 var(--serif);color:#687563}
.guide-entry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.guide-entry-heading{grid-column:span 4;min-width:0}
.guide-entry-body{grid-column:span 8;min-width:0;padding-top:2px}
.guide-purpose{font:12px/1.8 var(--sans);color:#687563;letter-spacing:2px;margin:0 0 6px}
.guide-entry h3{font:700 26px/1.5 var(--serif);letter-spacing:1px;color:var(--ink);margin:0 0 12px}
.guide-browse{border:0;background:transparent;color:var(--green);font:13px/1.8 var(--sans);padding:4px 0;min-height:32px;cursor:pointer}
.guide-browse:hover{text-decoration:underline;text-underline-offset:4px}
.guide-description{font:15px/1.95 var(--serif);color:#444B40;margin-bottom:14px;text-wrap:pretty}
.guide-when{font:13px/1.85 var(--sans);color:#687563}
.guide-when span{display:block;color:#496740;font-size:11px;letter-spacing:1px;margin-bottom:4px}
.guide-bottom{margin:0 52px;padding:20px 0 24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;flex:none}
.guide-bottom>p{font:13px/1.8 var(--serif);color:#73796D}
@media(min-width:761px) and (max-height:850px){
  .guide-content{padding-top:24px}
  .guide-entry{padding:21px 0}
  .letter-reading{padding-bottom:22px}
  .letter-paper{padding:24px 44px 14px}
  .letter-subject{font-size:16px;margin:18px 0 14px}
  .letter-paragraph,.intro-parting p{font-size:15px;line-height:1.8;margin-bottom:12px}
  .letter-signoff{margin-top:12px}
}
@media(max-width:760px){
  .mask.intro{padding:16px 12px}
  .about-card{max-height:calc(100dvh - 32px);border-radius:6px}
  .intro-top{padding:16px 58px 16px 24px;gap:10px}
  .intro-top-note{display:none}
  .intro-origin{font-size:11px;letter-spacing:.5px;gap:7px}
  .about-card .intro-top .modal-close{right:17px}
  .intro-actions{gap:10px}
  .intro-actions button{padding:11px 10px;font-size:12px}
  .letter-shell .intro-top{padding-left:18px;gap:8px}
  .letter-shell .intro-origin{font-size:10px}
  .letter-shell .intro-origin .intro-mark{width:26px;height:17px}
  #about-mask>.about-close{top:14px;right:14px;width:32px;height:32px}
  .letter-reading{padding:22px 20px 18px}
  .letter-paper{padding:20px 22px 12px}
  .letter-letterhead{gap:8px;padding-bottom:6px;font-size:14px}
  .letter-letterhead span:last-child{font-size:10px}
  .letter-subject{font-size:15px;letter-spacing:2px;margin:18px 0 12px;line-height:1.7}
  .letter-subject-break{display:initial}
  .intro-salute{font-size:14px;line-height:1.9;margin-bottom:12px}
  .letter-paragraph,.intro-parting p{font-size:15px;line-height:1.8;margin-bottom:12px}
  .letter-signoff p{font-size:15px;letter-spacing:1px}
  .letter-pagination{min-height:34px;margin-top:4px}
  .guide-content{padding:25px 24px 10px}
  .guide-heading h2{font-size:28px}
  .guide-heading>p{font-size:14px}
  .guide-entry{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 0}
  .guide-entry-heading,.guide-entry-body{grid-column:auto}
  .guide-entry-heading{position:relative;padding-right:96px}
  .guide-entry h3{font-size:23px;margin-bottom:0}
  .guide-browse{position:absolute;right:0;bottom:0;font-size:12px;min-height:36px}
  .guide-description{font-size:14px;line-height:1.9}
  .guide-when{font-size:12px}
  .guide-bottom{margin:0 24px;padding:20px 0 24px;display:block}
  .guide-bottom>.intro-actions{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-bottom button{min-width:0;white-space:normal}
}
@media(max-height:650px){
  .letter-shell[data-letter-state="open"] .intro-top{padding-top:10px;padding-bottom:8px}
  .letter-letterhead{padding-bottom:6px;font-size:12px}
  .letter-subject{font-size:15px;line-height:1.5;margin:12px 0 8px;letter-spacing:2px}
  .letter-paragraph,.intro-parting p{font-size:14px;line-height:1.75;margin-bottom:10px}
  .intro-salute{font-size:14px;margin-bottom:8px}
  .letter-pagination{margin-top:2px}
}
@media(max-height:380px){
  .letter-letterhead{display:none}
  .letter-subject{font-size:14px;margin:8px 0 4px}
  .letter-subject-break{display:none}
  .letter-reading{padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
  .letter-reading{animation:none}
}