/* 总结页＋【地标长廊】（2026-10-14 用户方案）
   整段钉住。开场是满屏的清华二校门照片，总结文字写在右上方的天空里（排法照「主张」那一页：大号黑体＋一行小字）；
   往下滚，镜头拉远：照片的取景框收窄、缩小，落成长廊里「教育」那张卡，其余卡片跟着同一个镜头从大到小围上来，
   文字缩到上方当标题；拉远结束后长廊开始从右往左流动，光标停在卡片上就暂停、浮出说明（【地标长廊】组件的原有行为）。
   镜头、取景框、文字的位置都由 assets/js/summary.js 按滚动进度写进来。 */
.sm{position:relative;height:340vh;background:#F4F2EE;--display:var(--sys)}
.sm-pin{position:sticky;top:0;height:100vh;overflow:hidden}

/* 长廊所在的「世界」：跟着镜头整体缩放（JS 写 transform，原点在左上角） */
.sm-layer{position:absolute;inset:0;transform-origin:0 0;will-change:transform,opacity}
.sm-strip{position:absolute;left:0;right:0;bottom:clamp(28px,5vh,56px);
  --lm-h:clamp(300px,calc(100vh - 380px),540px);--lm-w:calc(var(--lm-h) * .5)}
.sm-strip.sm-hold .lm-track{animation-play-state:paused}   /* 拉远过程中长廊不动，落点才稳 */

/* 取景框：一张盖满视口的照片，用 clip-path 裁出取景框，图片本身按镜头缩放 */
.sm-shot{position:absolute;inset:0;overflow:hidden;pointer-events:none;will-change:clip-path,opacity}
.sm-img{position:absolute;left:0;top:0;width:3840px;height:2560px;max-width:none;transform-origin:0 0;will-change:transform}
/* 开场时把右上方的天空提亮一点，深色文字压得住 */
.sm-wash{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 62% at 76% 30%,rgba(250,250,247,.72) 0%,rgba(250,250,247,.45) 45%,rgba(250,250,247,0) 75%)}

/* 文字：CSS 里写的是拉远之后（标题）的字号，左右位置由 JS 算成居中；开场时由 JS 放大、移到右上方的天空里 */
.sm-copy{position:absolute;left:52vw;width:max-content;max-width:calc(100vw - 2 * var(--gutter));top:calc(69px + clamp(28px,5vh,56px));transform-origin:0 0;will-change:transform,opacity}
.sm-h{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(32px,3.4vw,56px);line-height:1.16;letter-spacing:.02em;color:#142235}
/* 两句错位：上一句偏左、下一句偏右，左右有一段重叠（用户 10-14） */
.sm-h .l1,.sm-h .l2{display:block}
.sm-h .l2{padding-left:3.4em}
.sm-sub{margin-left:calc(3.4 * clamp(32px,3.4vw,56px));margin-top:clamp(10px,1.4vh,16px);font-size:clamp(16px,1.25vw,20px);line-height:1.7;color:#4A5468}

/* 窄屏和「减少动态效果」：不钉住、不拉远——照片＋文字一屏，下面接可以横向拖动的长廊 */
.sm.static{height:auto}
.sm.static .sm-pin{position:relative;height:auto;overflow:visible}
.sm.static .sm-shot{position:relative;height:min(78vh,640px)}
.sm.static .sm-img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;transform:none}
.sm.static .sm-wash{height:min(78vh,640px)}
.sm.static .sm-copy{left:var(--gutter);top:clamp(80px,14vh,140px)}
.sm.static .sm-layer{position:relative;inset:auto;padding:24px 0 40px}
.sm.static .sm-strip{position:relative;bottom:auto;--lm-h:420px;--lm-w:220px}

/* 首页的觅才一节也有 .mc（白底、大内边距），长廊卡片说明里的 .mc 在这里改回组件原样 */
.sm .lm-ins .mc{background:none;padding:10px 0 0}
.sm .lm-ins .q,.sm .lm-ins .fu,.sm .lm-ins .mc{text-wrap:balance}