/* Shared editorial opening system: controlled titles and short readable notes. */
.intro-notes{display:grid;gap:0;border-top:1px solid var(--line);width:100%;max-width:430px;align-self:end}
.intro-notes p{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:center;margin:0;padding:13px 0;border-bottom:1px solid var(--line);font:12px/1.55 "PingFang SC","Microsoft YaHei",sans-serif}
.intro-notes i{font:italic 10px/1 Georgia,serif;color:var(--rust)}
.intro-notes span{text-wrap:pretty}

.story-hero,.journal-hero,.public-hero{grid-template-columns:minmax(420px,.95fr) minmax(300px,.55fr);gap:90px;align-items:end}
.story-hero .kicker,.journal-hero .kicker,.public-hero .kicker{grid-column:1/-1}
.story-hero h1,.journal-hero h1,.public-hero h1{font-size:clamp(42px,4.8vw,66px);line-height:1.03;letter-spacing:-.04em;max-width:680px}
.story-hero>.intro-notes,.journal-hero>.intro-notes,.public-hero>.intro-notes{grid-column:2}

.prompt-intro-layout{display:grid!important;grid-template-columns:minmax(420px,.95fr) minmax(300px,.55fr);gap:90px;align-items:end;width:100%}
.prompts-hero h1{font-size:clamp(42px,4.8vw,66px)!important;line-height:1.03!important;letter-spacing:-.04em!important;margin:0!important;max-width:680px}
.prompts-hero .intro-notes{margin:0}

.category-hero{grid-template-columns:.28fr minmax(330px,.9fr) minmax(290px,.6fr);gap:45px}
.category-hero h1{line-height:1.02;letter-spacing:-.035em}.category-hero h1 em{font-weight:400;color:var(--rust)}
.category-hero .intro-notes{max-width:360px}

.library-hero{gap:80px!important}.library-hero h1{font-size:clamp(42px,4.8vw,66px)!important;line-height:1.04!important;letter-spacing:-.04em!important}
.library-summary .intro-notes{max-width:none;margin-bottom:27px}.library-summary .intro-notes p{font-size:11px;padding:11px 0}

@media(max-width:850px){
  .story-hero,.journal-hero,.public-hero,.prompt-intro-layout,.category-hero{grid-template-columns:1fr;gap:34px}
  .story-hero>.intro-notes,.journal-hero>.intro-notes,.public-hero>.intro-notes{grid-column:1}
  .intro-notes{max-width:560px}
  .category-hero .intro-notes{max-width:560px}
}
@media(max-width:560px){
  .story-hero h1,.journal-hero h1,.public-hero h1,.prompts-hero h1,.library-hero h1{font-size:38px!important}
  .intro-notes p{font-size:11px;padding:11px 0}
}

/* Final letter: the page ends by carefully sealing the letter away. */
.letter-page{
  padding-bottom:120px;
  background:
    radial-gradient(circle at 50% 83%,rgba(188,137,74,.17),transparent 31%),
    var(--cream);
}
.reader-letter{
  box-shadow:14px 18px 0 rgba(93,70,35,.07),0 22px 60px rgba(73,52,25,.08);
}
.letter-body{position:relative;z-index:2}
.signature{
  min-height:318px;
  margin:72px -86px 0;
  padding:38px 86px 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#ddc79f;
  border-top:1px solid rgba(42,34,22,.23);
  transition:none;
}
.signature:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:74%;
  z-index:1;
  background:#cdb58a;
  clip-path:polygon(0 0,100% 0,50% 78%);
  filter:drop-shadow(0 2px 0 rgba(71,50,22,.12));
  pointer-events:none;
}
.signature:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:69%;
  z-index:0;
  background:#ead7b3;
  clip-path:polygon(0 100%,0 31%,50% 74%,100% 31%,100% 100%);
  border-top:1px solid rgba(80,58,28,.08);
  pointer-events:none;
}
.signature span,.signature strong,.signature small{position:absolute;z-index:3}
.signature span{
  top:28px;
  left:50%;
  width:100%;
  transform:translateX(-50%);
  font:400 15px/1.75 Georgia,"Songti SC",serif;
  letter-spacing:.02em;
}
.signature span:before{
  content:"THE LETTER IS SAFELY KEPT";
  display:block;
  margin-bottom:14px;
  font:700 7px/1 Arial,sans-serif;
  letter-spacing:.24em;
  color:rgba(30,26,20,.62);
}
.signature span:after{content:none;display:none}
.signature strong{
  top:55%;
  left:50%;
  width:70px;
  height:70px;
  margin:0;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--rust);
  color:#f8edd5;
  box-shadow:0 3px 0 #9f3c24,0 12px 24px rgba(68,39,15,.2);
  font-size:0;
  transition:none;
}
.signature strong:before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,244,218,.24);
  border-radius:50%;
}
.signature strong:after{content:"N";font:italic 700 25px Georgia,serif}
.signature small{
  left:50%;
  bottom:25px;
  width:100%;
  transform:translateX(-50%);
  font:700 7px/1 Arial,"PingFang SC",sans-serif;
  letter-spacing:.18em;
  color:rgba(30,26,20,.7);
}
.signature:hover{background:#ddc79f}
.signature:hover strong{transform:translate(-50%,-50%)}
.reader-letter:after{
  content:"故事没有结束。我们下一页见。";
  display:block;
  margin:0 -86px;
  padding:35px 40px 39px;
  background:
    linear-gradient(90deg,transparent 0 15%,var(--rust) 15% 85%,transparent 85%) top/100% 2px no-repeat,
    #ead8b7;
  color:var(--ink);
  text-align:center;
  font:italic 400 clamp(21px,2.4vw,30px)/1.45 Georgia,"Songti SC",serif;
  letter-spacing:.015em;
}
.letter-page+footer{
  min-height:78px;
  padding:0 5.5vw;
  background:#ead8b7!important;
  color:rgba(30,26,20,.68)!important;
  border-top:1px solid rgba(72,52,24,.14);
}
.letter-page+footer a,.letter-page+footer span{color:inherit!important}

@media(max-width:700px){
  .letter-page{padding-bottom:72px}
  .signature{min-height:270px;margin:58px -26px 0;padding:32px 26px 28px}
  .signature span{top:24px;font-size:14px}
  .signature strong{top:56%;width:61px;height:61px}
  .signature strong:after{font-size:22px}
  .signature small{bottom:20px}
  .reader-letter:after{margin:0 -26px;padding:27px 18px 31px;font-size:21px}
}