.poster-b{padding:30px 0 0;overflow:clip;background:linear-gradient(135deg,rgba(220,208,246,0.65) 0%,rgba(250,249,254,1) 45%,rgba(250,249,254,1) 55%,rgba(206,243,223,0.6) 100%)!important;position:relative}.poster-b::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 900px at 18% 25%,rgba(220,208,246,0.7) 0%,transparent 65%),radial-gradient(circle 800px at 85% 45%,rgba(206,243,223,0.65) 0%,transparent 65%),radial-gradient(circle 700px at 50% 90%,rgba(238,235,250,0.5) 0%,transparent 65%);pointer-events:none;z-index:0}.poster-b::after{content:'';position:absolute;inset:0;opacity:0.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' /%3E%3CfeColorMatrix values='0 0 0 0 0.6, 0 0 0 0 0.55, 0 0 0 0 0.7, 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;z-index:0}.b-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;position:relative;z-index:2}.b-intro h1{font-family:var(--display);font-size:clamp(30px,3.4vw,47px);font-weight:900;line-height:1.4;letter-spacing:-.025em}.b-intro h1>span{color:#4944a1}.b-intro>p{font-size:14px;line-height:1.9;text-align:right;padding-bottom:9px}.b-wall{height:336px;max-width:1150px;margin:35px auto 8px;display:grid;grid-template-columns:1fr 1fr 215px;gap:0;align-items:center;position:relative}.b-sheet{height:326px;padding:25px 27px;position:relative}.b-sheet-lilac{background:#dcd0f6;transform:rotate(-4deg);z-index:2;box-shadow:0 14px 20px -13px #27243140;color:#292763}.b-sheet-top{display:flex;justify-content:space-between;font-size:12px}.b-sheet-top>span:last-child{font-family:var(--latin);font-weight:700;font-size:14px}.b-print{font-family:var(--latin);font-weight:800;font-size:clamp(64px,6.1vw,88px);line-height:.9;letter-spacing:-.035em;margin-top:25px}.b-sheet-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px;font-family:var(--latin);font-size:20px;line-height:1.05}/* 薄荷那张：版式与淡紫那张完全同构（.b-sheet-top / .b-print / .b-sheet-bottom），
   只是底色和旋转方向不同。原来的圆形 logo 换成了同一套 .b-print 大字，
   所以 IDEA. / SPARK. 和 MEET. / BUILD. 的字号、字重、字距自动一致。
   底部那行是中文，必须走 var(--display)（带 CJK 字体回退），var(--latin) 只有拉丁字形。 */
.b-sheet-mint{background:#cef3df;transform:rotate(4deg);height:318px;margin-left:-8px;margin-top:-14px;z-index:1;padding:25px 27px;color:#16554b}
.b-sheet-mint .b-sheet-bottom{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.5}/* 黄色那张：原来是一块平铺的色块，只靠一行 20px 标题撑着，是三张里最弱的一张。
   现在按站内既有的"黄纸"来重做（对照 collage.css 的 .join-paper：同一个 --orange、
   同样是深黄描边 + 薄荷硬阴影），让它是同一批纸里的一张。
   内部拉出三级层次：等宽 kicker → Latin 大字（站里 .b-print 的缩水版）→ 细线上方的说明。
   大字是唯一的视觉锚点，kicker 与底注都压到 11px，三张纸的阅读节奏才一致。 */
.b-note{align-self:center;margin-left:-5px;z-index:3;transform:rotate(-3deg);background:var(--orange);border:1px solid #b2913f;box-shadow:7px 7px 0 #b7d8c4;padding:22px 18px;min-height:238px;display:flex;flex-direction:column;color:#4a3714}
.b-note-label{font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.02em;color:#8a6a1f}
.b-note-print{font-family:var(--latin);font-weight:800;font-size:clamp(27px,2.35vw,32px);line-height:.95;letter-spacing:-.03em;margin-top:auto}
.b-note-foot{margin-top:auto;padding-top:10px;border-top:1px solid #d9b455;font-size:11px;line-height:1.8;color:#6f5a24}.b-lower{margin:32px 0 22px;display:flex;justify-content:center;gap:48px;align-items:center}.b-actions{display:flex;align-items:center;gap:18px}/* CTA 旁边那两行注记：原来是块没有着落的浅灰正文，现在和薄荷那张卡的底注同一路数
   （var(--display) + 700），上面压一条薄荷短线做引子——短线取自首页社区行的 .row-label::before，
   两处用的是同一个 #5da98a。加了 padding-top 让短线不贴字。 */
.b-lower>p{position:relative;padding-top:15px;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.72;color:#39415a}
.b-lower>p::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:#5da98a}.b-controls{display:flex;flex-wrap:wrap;gap:5px;max-width:170px}.b-controls button{display:flex;align-items:center;gap:6px;padding:8px 6px;min-height:44px;border:0;background:transparent;font-size:12px;color:#4c506b}.b-controls button:hover{background:#e9e4f5;color:#292763}.b-controls button:disabled{opacity:.65}.b-controls svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5}.b-event{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #d4cfdf;padding:22px 0;min-height:88px;font-size:13px}.b-event-name{display:flex;align-items:center;gap:18px;font:800 28px/1.2 var(--latin);letter-spacing:-.025em}.b-event-name>span{font:400 13px var(--font);letter-spacing:0}.b-event-open{display:flex;align-items:center;gap:10px}.b-event svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;transition:transform .3s var(--ease)}.b-event:hover svg{transform:translate(2px,-2px)}
.poster-b.is-intro .b-sheet-lilac{animation:sheet-one 1s var(--ease) both,float-soft 4.6s ease-in-out 1s infinite}.poster-b.is-intro .b-sheet-mint{animation:sheet-two 1.1s .1s var(--ease) both,float-soft 4.6s ease-in-out 1.2s infinite}.poster-b.is-intro .b-note{animation:note-in .85s .2s var(--ease) both,float-soft 4.6s ease-in-out 1.05s infinite}.poster-b.is-intro .b-sheet-lilac{--float-rot:-4deg}.poster-b.is-intro .b-sheet-mint{--float-rot:4deg}.poster-b.is-intro .b-note{--float-rot:-3deg}
/* 形状沿用纸片落座之后，薄荷那行大字再从左往右"印"出来——
   原来这里是 logo 的圆形揭开（mark-in），换成大字后改用同一支笔迹的横向擦除。 */
.poster-b.is-intro .b-sheet-mint .b-print{animation:wordmark-in .9s .38s var(--ease) both}
.site-header .brand-asset{animation:wordmark-in .8s .2s var(--ease) both}
/* 入场落座后转入极小幅浮沉：起点与 sheet-one/two 的终态旋转一致，衔接不会跳变。 */
@keyframes float-soft{0%,100%{transform:translateY(0) rotate(var(--float-rot,0deg))}50%{transform:translateY(-7px) rotate(calc(var(--float-rot,0deg) + 1.1deg))}}
@keyframes sheet-one{from{transform:translate(-28px,28px) rotate(-9deg);opacity:.3}to{transform:rotate(-4deg);opacity:1}}@keyframes sheet-two{from{transform:translate(30px,15px) rotate(10deg);opacity:.3}to{transform:rotate(4deg);opacity:1}}@keyframes note-in{from{transform:translateY(22px) rotate(3deg);opacity:.3}to{transform:rotate(-3deg);opacity:1}}@keyframes wordmark-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media(max-width:1000px){.b-wall{grid-template-columns:1fr 1fr 170px}.b-sheet{padding:22px}.b-print{font-size:67px}.b-note{padding:18px 14px;min-height:224px}.b-note-print{font-size:26px}.b-sheet-mint .b-sheet-bottom{font-size:15px}.b-lower{gap:24px}}
@media(max-width:700px){.b-intro{display:block}.b-intro h1{font-size:clamp(27px,5.4vw,38px)}.b-intro>p{margin-top:14px;text-align:left;font-size:14px;line-height:1.65}.b-intro>p br{display:none}.b-wall{grid-template-columns:1fr 1fr;height:290px;margin-top:27px;margin-bottom:0}.b-sheet{height:265px;padding:18px}.b-sheet-lilac{margin-right:-17px}.b-print{font-size:clamp(39px,8.8vw,64px);margin-top:23px}.b-sheet-top>span:first-child{display:none}.b-sheet-top>span:last-child{font-size:12px}.b-sheet-bottom{font-size:16px;line-height:1.15;margin-top:30px}.b-sheet-mint{height:250px;margin-top:10px;margin-left:-2px;padding:16px}.b-sheet-mint .b-sheet-bottom{font-size:15px}.b-note{display:none}.b-lower{margin:22px 0 18px;display:block}.b-lower>p{font-size:14px;line-height:1.72;margin-top:22px}.b-lower>p br{display:none}.b-event{flex-wrap:wrap;gap:12px;font-size:12px;padding:20px 0}.b-event-name{width:100%;font-size:27px}.b-event-name>span{font-size:12px}.b-event-open{margin-left:auto;gap:5px}.b-event svg{width:14px;height:14px}}
@media(max-width:370px){.b-intro h1{font-size:25px}.b-sheet{padding:16px}.b-print{font-size:40px}.b-sheet-mint .b-sheet-bottom{font-size:13px}.b-sheet-bottom{font-size:14px}.b-lower>p{text-wrap:balance}}
@media(prefers-reduced-motion:reduce){.poster-b *,.site-header .brand-asset{animation:none!important;transition:none!important}}
/* 首页首屏：海报移到 /intro/ 独立文档后由 iframe 嵌入。
   iframe 高度 = 一屏 − 顶部栏高度，所以打开首页时顶部栏 + 海报正好占满首屏，不露出下面的内容。
   顶部栏高度见 collage.css（88px；≤860px 时 72px），min-height 保证矮窗口里海报不会被裁。

   下限取 720 而不是原来的 700：/intro/ 里海报的实际内容高度在宽屏下是 711px
   （.b-main 623 + .b-event 88，实测 1280px 以上都顶到 711）。矮窗口里 100svh − 88
   会小于 700，此时 iframe 被 min-height 撑到 700，反而比内容矮 11px——iframe 就在
   右侧自己长出一条滚动条，首屏看起来像一个可以单独上下滚的小窗口。抬到 720 以后，
   无论窗口多矮，iframe 都 ≥ 海报内容，那一小截滚动就没有了。 */
.home-hero{--header-h:88px;height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:720px;background:#faf9fe;overflow:hidden}
.home-hero-frame{display:block;width:100%;height:100%;border:0;background:#faf9fe}
/* /intro/ 同样不开滚动：它是给 iframe 嵌的，内部一旦能滚，嵌它的首屏就会多出一条
   不属于主文档的滚动条。上面 .home-hero 的 min-height 已经保证 iframe 不会比海报矮，
   这里再兜一层，确保这条滚动条任何情况下都长不出来。
   （写在 body 上即可：HTML 根元素的 overflow 是 visible 时，视口的滚动由 body 传递决定。） */
.intro-page{overflow:hidden}
/* /intro/ 是海报的独立文档：海报撑满 iframe 视口并垂直居中，<main> 只是语义容器，不参与高度。
   顶部栏不在文档里，30px 的上边距由居中留白接管，省下的高度刚好让海报在常见窗口里不被裁。 */
/* /intro/ 海报页脚条：分隔线与 hover 底色都通到视口两边（与站内页脚 border-top 通铺同一种做法），
   文字仍与正文对齐。否则 hover 时会出现一块左右留空的浅色方块，跟通铺的背景很违和。
   底色画在 ::before 上，元素自身盒宽不变，padding-inline 的滑动反馈也不受影响。 */
.intro-page .b-event{position:relative;isolation:isolate;border-top-color:transparent}
.intro-page .b-event::before{
  content:"";position:absolute;z-index:-1;inset:0;
  margin-inline:calc(50% - 50vw);
  border-top:1px solid #d4cfdf;
  background:transparent;
  transition:background .3s var(--ease)}
.intro-page .poster-b{padding-top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;align-items:center}
/* b-event 当作海报的页脚：多出来的空间交给它在 b-lower 之上的空白，
   主内容用 margin-block:auto 在剩余区域居中（保持普通块，内部外边距照旧折叠，
   换成 flex 容器会让 .b-wall/.b-lower 的相邻外边距不再合并、内容凭空高 8px）。
   这样外层页面需要滚动时，滚出去的那一段正是页脚条，首屏不会被切一半的横条截断。 */
.intro-page .poster-b>.container{display:flex;flex-direction:column;min-height:100vh}
.intro-page .b-main{margin-block:auto;min-height:0}
@media(max-width:860px){.home-hero{--header-h:72px}}
/* 极窄手机（≤400px）下面海报内容约 723px 高，把下限抬到 730，免得 iframe 里还要再滚一次 */
@media(max-width:400px){.home-hero{min-height:730px}}

/* ---------------------------------------------------------------------------
   首屏两个 CTA：改成和上面三张纸同一套材料——方角、墨线描边、硬阴影。
   阴影色分别取自那面墙上的薄荷（实心那块）与淡紫（描边那块）：静止态 5px，
   悬停时整块往左上抬起、阴影同步推到 9px，手感与 .b-note / .join-paper 一致。
   interactions.css 加载在 hero.css 之后，且给 .button 挂了斜扫高光、柔光投影与
   回弹曲线；所以下面每条都带 body[data-page="home"] 前缀，把特异性抬到它上面。

   只带前缀还不够——interactions.css 的 .button 规则里有个 :not(.header-actions *)，
   这个 :not() 自身也算一个类，把它的特异性一路抬到 (0,3,2) / (0,4,1)，正好与
   「前缀 + .b-actions + .b-cta」齐平；同特异性下后加载的 interactions.css 取胜，
   于是悬停那一下仍是它的 translateY(-2px) + 柔光蓝环，斜扫高光也照样扫过纸片。
   所以下面凡是与它撞车的几条一律再带一个 .button（.button.b-cta = (0,4,2)），
   靠多一个类而不是靠顺序取胜，两边的值都留在自己文件里。
   --------------------------------------------------------------------------- */
body[data-page="home"] .b-actions .b-cta{border-radius:0;border:1px solid;min-height:50px;padding:12px 22px;gap:16px;font-size:14px;font-weight:700;letter-spacing:.01em;box-shadow:5px 5px 0 var(--cta-shadow,#b7d8c4);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
body[data-page="home"] .b-actions .b-cta-solid{background:#3b3f96;border-color:#2b2f6b;color:#fff;--cta-shadow:#b7d8c4}
body[data-page="home"] .b-actions .b-cta-ghost{background:transparent;border-color:#2b2f6b;color:#2b2f6b;--cta-shadow:#ddd2ef}
/* 悬停单独放进 (hover:hover) 里：触摸设备上 :hover 会粘住，
   点一下实心那块就再也退不回静止态了（interactions.css 也是这么做的）。
   :focus-visible 留在外面，键盘用户在任何设备上都能看到抬起反馈。 */
body[data-page="home"] .b-actions .button.b-cta-solid:focus-visible{background:#2b2f6b;transform:translate(-2px,-2px);box-shadow:9px 9px 0 #a9cdb9}
body[data-page="home"] .b-actions .button.b-cta-ghost:focus-visible{background:#f0ecfb;transform:translate(-2px,-2px);box-shadow:9px 9px 0 #c9bdea}
@media (hover:hover) and (pointer:fine){
  body[data-page="home"] .b-actions .button.b-cta-solid:hover{background:#2b2f6b;transform:translate(-2px,-2px);box-shadow:9px 9px 0 #a9cdb9}
  body[data-page="home"] .b-actions .button.b-cta-ghost:hover{background:#f0ecfb;transform:translate(-2px,-2px);box-shadow:9px 9px 0 #c9bdea}
}
/* 斜扫高光是圆角按钮的路数，扫过方纸片只会糊掉边缘；内描边留着，正好当第二道纸边。 */
body[data-page="home"] .b-actions .button.b-cta::after{display:none}
@media(max-width:700px){
  /* 两个带描边和投影的块并排会超出窄屏，放不下就换行 */
  .b-actions{flex-wrap:wrap;gap:12px 14px}
  body[data-page="home"] .b-actions .b-cta{padding:11px 15px;min-height:48px;gap:12px;font-size:14px;box-shadow:4px 4px 0 var(--cta-shadow,#b7d8c4)}
}
@media(max-width:370px){
  .b-actions{gap:10px 12px}
  body[data-page="home"] .b-actions .b-cta{padding:10px 12px;min-height:46px;gap:10px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .b-actions .button.b-cta:is(:hover,:focus-visible){transform:none}
}