/* 关于观澜以信件呈现；系列介绍独立展开，可随内容增长。 */
.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}
/* 信封与开信 */
.letter-shell{background:#EFEDE4}
.letter-shell [hidden]{display:none!important}
.letter-shell .intro-top{background:#F7F5ED}
.letter-envelope-stage{flex:1;min-height:580px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 40px 44px;overflow:hidden}
.envelope-heading{text-align:center;margin:0 0 44px;position:relative;z-index:1;transition:opacity .2s}
.envelope-heading p{font-family:var(--serif);font-size:13px;letter-spacing:4px;color:#687563;margin-bottom:10px}
.envelope-heading h2{font-family:var(--serif);font-size:32px;font-weight:500;letter-spacing:3px;color:#334B3B}
.envelope{position:relative;flex:none;width:min(580px,100%);aspect-ratio:1.76;perspective:1400px;filter:drop-shadow(0 15px 20px rgba(71,59,32,.13))}
.envelope-back{position:absolute;inset:0;background:#E7DFCA;border:1px solid #D7CDB6;border-radius:4px}
.envelope-note{position:absolute;inset:8% 8% 5%;z-index:1;background:#FFFCF2;border:1px solid #E6DFCE;display:flex;flex-direction:column;align-items:center;padding:24px 12px;gap:20px;text-align:center;color:#446049;font-family:var(--serif);transition:transform .5s .2s ease}
.envelope-note span:first-child{font-size:13px;letter-spacing:3px}
.envelope-note span:last-child{font-size:20px;line-height:1.8}
.envelope-front{position:absolute;inset:0;z-index:3;background:linear-gradient(150deg,#EEE5D1,#F7F0E0 60%);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);border:1px solid #D7CDB6;border-radius:3px}
.envelope-front::after{content:"";position:absolute;inset:0;background:#F8F0DE;clip-path:polygon(0 100%,50% 48%,100% 100%);border-bottom:1px solid #D4C7AE}
.envelope-flap{position:absolute;inset:0 0 auto;height:59%;z-index:4;background:linear-gradient(#F9F3E4,#EEE4CF);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:center top;backface-visibility:hidden;transition:transform .52s ease-in-out}
.envelope-address{position:absolute;left:16px;right:16px;bottom:12%;z-index:4;text-align:center;color:#5B604E;transition:opacity .2s}
.envelope-address p{font-family:var(--serif);font-size:18px;letter-spacing:2px;margin:0 0 9px}
.envelope-address span{font-family:var(--serif);font-size:12px;letter-spacing:3px;color:#89816F}
.envelope-open{position:absolute;z-index:6;left:50%;top:52%;transform:translate(-50%,-50%);width:70px;height:70px;border:1px solid #66836B;border-radius:50%;background:#155B3E;box-shadow:0 0 0 5px rgba(255,250,233,.8),0 5px 14px rgba(36,69,41,.16);color:#FFF9E9;font:21px var(--serif);letter-spacing:3px;text-indent:3px;cursor:pointer;transition:background .15s,opacity .18s,box-shadow .15s}
.envelope-open:hover{background:#0B492F;box-shadow:0 0 0 7px rgba(255,250,233,.9),0 7px 18px rgba(36,69,41,.2)}
.envelope-hint{font-family:var(--serif);font-size:13px;letter-spacing:2px;color:#848674;margin:32px 0 0;transition:opacity .2s}
.letter-shell[data-letter-state="opening"] .envelope-flap{transform:rotateX(180deg)}
.letter-shell[data-letter-state="opening"] .envelope-note{transform:translateY(-38%)}
.letter-shell[data-letter-state="opening"] .envelope-open,.letter-shell[data-letter-state="opening"] .envelope-address,.letter-shell[data-letter-state="opening"] .envelope-heading,.letter-shell[data-letter-state="opening"] .envelope-hint{opacity:0}
.letter-shell[data-letter-state="opening"] .envelope{animation:envelope-away .24s .52s ease forwards}
@keyframes envelope-away{to{opacity:0;transform:translateY(22px) scale(.98)}}
/* 整个打开的窗口就是信纸；正文装不下时按页阅读，不缩成小字。
   纸感：暖纸底 + feTurbulence 细纤维噪点 + 信笺细框 + 抬头文武线。 */
.letter-shell[data-letter-state="open"]{overflow:hidden;border:0;border-radius:5px;background-color:#FBF6E9;background-image:radial-gradient(130% 100% at 50% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 62%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.37 0 0 0 0 0.26 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 信纸打开后不再有「窗口」：顶栏收起，整张卡片就是一页纸，关闭按钮浮在纸外 */
.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}
.letter-paragraph{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}
.intro-parting p{font:15px/1.9 var(--serif);color:#5A6254;text-indent:2em}
.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-seal.png，透明底朱砂红），斜盖在日期右下 */
.letter-seal{display:inline-block;width:64px;height:64px;margin:2px 2px 0 14px;vertical-align:top;
  font-size:0;background:url("letter-seal.png?v=20260920c") center/contain no-repeat;
  transform:rotate(-4deg)}
.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){
  .letter-envelope-stage{min-height:520px;padding:26px 40px 32px}
  .envelope-heading{margin-bottom:28px}
  .envelope{width:min(520px,100%)}
  .envelope-hint{margin-top:24px}
  .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{font-size:15px;line-height:1.8;margin-bottom:12px}
  .intro-parting p{font-size:14px;line-height:1.8}
  .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}
  .letter-envelope-stage{min-height:420px;padding:28px 22px 44px}
  .envelope-heading{margin-bottom:46px}
  .envelope-heading h2{font-size:24px;letter-spacing:2px}
  .envelope-heading p{font-size:12px}
  .envelope-open{width:48px;height:48px;font-size:16px;top:46%;box-shadow:0 0 0 4px rgba(255,250,233,.8),0 4px 10px rgba(36,69,41,.13)}
  .envelope-address{bottom:9%;left:6px;right:6px}
  .envelope-address p{font-size:13px;letter-spacing:1px;margin-bottom:5px}
  .envelope-address span{font-size:9px;letter-spacing:2px}
  .envelope-note{padding:14px 8px;gap:12px}
  .envelope-note span:first-child{font-size:10px}
  .envelope-note span:last-child{font-size:14px}
  .envelope-hint{font-size:11px;letter-spacing:1px;margin-top:28px}
  #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{font-size:15px;line-height:1.8;margin-bottom:12px}
  .intro-parting p{font-size:14px;line-height:1.8}
  .letter-signoff p{font-size:15px;letter-spacing:1px}
  .letter-seal{width:52px;height:52px;margin-left:10px}
  .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{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,.letter-shell[data-letter-state="opening"] .envelope{animation:none}
  .envelope-flap,.envelope-note{transition:none}
}