/* ==========================================================================
   IIECDA · 印尼国际教育和文化发展协会
   设计方向：夜航 · Night passage  (cinematic / dark editorial)
   细体大字 · 发丝结构 · 满幅letterbox影像 · 右侧章节导航
   配色沿用原站：深海蓝 / 协会红
   ========================================================================== */

/* 拉丁展示字：Instrument Serif（SIL OFL 1.1，见 CREDITS.md）
   只承担英文小标；unicode-range 限定拉丁子集，中文一律走 --display，
   兜底也回退到 --display，避免中文被拉去系统 serif。 */
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/instrument-serif-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme:dark;
  --bg:#07131f;
  --cover-bg:#0a1a29;
  --red:#c23140;
  --red-d:#8f1c29;
  /* 小字专用红：同色相提亮一档，深底上过 AA(4.5:1)；线条/色块仍用 --red */
  --red-t:#e0586a;
  --on:#e9eff5;
  --on-2:#9db1c4;
  --on-3:#7b8fa3;
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.2);
  --bar-bg:rgba(6,16,27,.86);
  --grain-o:.05;
  --veil-1:rgba(5,15,25,.86);
  --veil-2:rgba(5,15,25,.94);
  --avatar-bg:rgba(255,255,255,.06);
  /* 卡片底色：比页面底再亮一档，克制到几乎只是一层薄面（院校卡片用） */
  --card-bg:rgba(255,255,255,.03);
  --display:"PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC","Source Han Sans SC","Microsoft YaHei UI","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  --latin:'Instrument Serif',var(--display);
  --ease:cubic-bezier(.2,.7,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 浅色模式：明暗跟随系统 */
@media (prefers-color-scheme: light){
  :root{
    color-scheme:light;
    --bg:#f5f7fa;
    --red-t:#b72535;
    --on:#0e2131;
    --on-2:#455a6b;
    --on-3:#66798c;
    --line:rgba(16,43,70,.14);
    --line-2:rgba(16,43,70,.26);
    --bar-bg:rgba(245,247,250,.9);
    --grain-o:.028;
    --veil-1:rgba(245,247,250,.94);
    --veil-2:rgba(245,247,250,.9);
    --avatar-bg:rgba(16,43,70,.05);
    --card-bg:rgba(16,43,70,.022);
  }
}

/* 深色封面区不受主题影响：首屏 / 内页页头 / 行动号召 */
.hero,.pagehead,.cta{
  --on:#e9eff5;
  --on-2:#9db1c4;
  --on-3:#7b8fa3;
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.2);
  --red-t:#e0586a;
}

/* 白色 logo 在浅色底上转为黑 */
@media (prefers-color-scheme: light){
  .bar.is-solid .brand-logo,.foot .brand-logo{filter:brightness(0)}
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:0;scroll-snap-type:y proximity;overflow-x:clip}

body{
  margin:0;background:var(--bg);color:var(--on-2);
  font-family:var(--display);font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;-webkit-tap-highlight-color:transparent;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;touch-action:manipulation}
button{font:inherit;color:inherit;touch-action:manipulation}
h1,h2,h3,h4,p,figure,ul{margin:0}
ul{padding:0;list-style:none}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;color:var(--on);line-height:1.2;letter-spacing:.004em;text-wrap:balance}
p{text-wrap:pretty}

::selection{background:var(--red);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* 聚焦时避开固定顶栏（72/64px）；只加在元素上，不影响 .sec 的滚动吸附 */
a,button,summary{scroll-margin-top:96px}

.shell{width:min(1120px,100% - clamp(32px,6vw,120px));margin-inline:auto;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:var(--grain-o);background-image:var(--grain);background-size:180px 180px}
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:120}

.skip{position:fixed;left:20px;top:-90px;z-index:200;background:var(--red);color:#fff;padding:12px 20px;font-size:13px;letter-spacing:.08em}
.skip:focus{top:14px}

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */

.bar{--bar-1:#e9eff5;--bar-2:#9db1c4;--bar-3:#7b8fa3;position:fixed;top:0;left:0;right:0;z-index:80;border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease),-webkit-backdrop-filter .4s;transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s}
.bar.is-solid{--bar-1:var(--on);--bar-2:var(--on-2);--bar-3:var(--on-3);background:var(--bar-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.bar-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}

.logo{display:flex;align-items:center}
.brand-logo{display:block;width:auto;height:clamp(34px,3.4vw,48px)}
.brand-logo--foot{height:clamp(34px,3vw,48px)}

.nav{display:flex;align-items:center;gap:2px}
.nav a{padding:9px 15px;font-size:13.5px;letter-spacing:.06em;color:var(--bar-2);border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.nav a:hover{color:var(--bar-1)}
.nav a[aria-current=page]{color:var(--bar-1);border-bottom-color:var(--red)}

.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--bar-2);cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger:hover{background:var(--avatar-bg);border-color:var(--bar-1)}
.burger span{display:block;width:18px;height:1px;background:var(--bar-1);transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── 右侧章节导航 ─────────────────────────────────────────────────────── */

.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:16px;align-items:flex-end}
.rail-item{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;color:var(--on-3);transition:color .3s var(--ease)}
.rail-item i{width:20px;height:1px;background:currentColor;transition:width .35s var(--ease),background .3s}
.rail-item:hover{color:var(--on-2)}
.rail-item.is-active{color:var(--on)}
.rail-item.is-active i{width:44px;background:var(--red)}

/* ── 母题 ─────────────────────────────────────────────────────────────── */

.pair{display:inline-flex;align-items:center;gap:14px;color:var(--on-3)}
.pair span{font-size:11.5px;letter-spacing:.3em}
.pair i{display:block;width:54px;height:1px;background:var(--red);opacity:.85}

/* ── 首屏 ─────────────────────────────────────────────────────────────── */

.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:stretch;overflow:hidden}
.hero-media{position:absolute;inset:0;margin:0}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(.3) contrast(1.04);opacity:0;transition:opacity .9s var(--ease);animation:kb 26s var(--ease) both}
.hero-bg.is-on{opacity:1}
.hero-frame{position:relative;z-index:1;align-self:start;justify-self:end;width:100%;margin:0;padding:clamp(6px,.85vw,14px);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);box-shadow:0 44px 84px -30px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-frame img{width:100%;height:clamp(150px,34vh,344px);object-fit:cover;object-position:center 28%}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,21,.9) 0%,rgba(4,12,21,.5) 11%,rgba(4,12,21,.22) 32%,rgba(4,12,21,.74) 72%,rgba(4,12,21,.97) 100%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,26vw,400px);align-items:stretch;column-gap:clamp(24px,3.4vw,56px);padding:150px 0 clamp(34px,5vh,64px)}
.hero-copy{display:flex;flex-direction:column;align-self:end}
.kicker{font-size:12px;letter-spacing:.34em;color:var(--on-2);margin-bottom:26px}
/* 上限 92px：两段各 7 字，须在最宽栏（1120 − 画框 400 − 间隙 56 = 664）内单行放下，
   否则每句 6+1 断行、句尾单字成孤行（104px 时实测 4 行 474px）。 */
.hero-title{font-size:clamp(38px,6.6vw,92px);font-weight:700;line-height:1.14;letter-spacing:.004em;color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.45)}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;margin-top:clamp(32px,5vh,64px);padding-top:28px;border-top:1px solid var(--line-2)}
.hero-foot p{font-size:15.5px;line-height:1.9;color:var(--on-2);max-width:46em}

/* ── 按钮 / 链接 ──────────────────────────────────────────────────────── */

.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 30px;border:1px solid var(--line-2);background:transparent;color:var(--on);font-size:14.5px;letter-spacing:.06em;transition:background .3s var(--ease),border-color .3s var(--ease)}
.btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.42)}
.btn--solid{background:var(--red);border-color:var(--red);color:#fff}
.btn--solid:hover{background:var(--red-d);border-color:var(--red-d)}
.btn--ghost{background:transparent}

.link{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;letter-spacing:.08em;color:var(--on);border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color .3s var(--ease),color .3s}
.link:hover{border-color:var(--red);color:#fff}

.actions{display:flex;gap:14px;flex-wrap:wrap}

/* ── 章节 ─────────────────────────────────────────────────────────────── */

/* 内边距取 9vw 与 14vh 的较小值：宽而矮的窗口（如 1920×840）上纯按宽度算的
   168px 上下留白会把内容顶出视口一屏，滑屏就变成屏内两次滚动。 */
.sec{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding:clamp(64px,min(9vw,14vh),168px) 0;border-top:1px solid var(--line);scroll-snap-align:start}
.sec--long{min-height:0;display:block}
.pagehead + .sec{border-top:0}
.hero,.pagehead,.cta,.foot{scroll-snap-align:start}
.hero,.cta{scroll-snap-stop:always}

/* 全文字分屏：商务照片做底，按主题压暗/提亮，正文始终清晰 */
.sec--bg{position:relative;overflow:hidden;isolation:isolate}
.sec-bg{position:absolute;inset:0;margin:0;z-index:0}
.sec-bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(.38) contrast(1.06);transform:scale(1.05)}
.sec-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--veil-1),var(--veil-2))}
.sec--bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(72% 56% at 14% 6%,rgba(194,49,64,.18),transparent 62%)}
.sec--bg > .shell{position:relative;z-index:2}

.hd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(28px,4vw,64px);align-items:end;margin-bottom:clamp(34px,4.6vw,76px)}
.hd-meta{grid-column:1/-1;display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.hd-label{font-size:12px;letter-spacing:.3em;color:var(--on-3)}
.hd-title{grid-column:1;font-size:clamp(30px,4.6vw,66px);font-weight:600;line-height:1.18;letter-spacing:.002em;color:var(--on)}
/* 英文小标：本作唯一的拉丁字面。衬线在小字号上需要更大的字身与更松的字距 */
.hd-en{grid-column:1;margin-top:18px;font-family:var(--latin);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-3)}
.hd-side{grid-column:2;grid-row:2 / 4;align-self:end;text-align:right;max-width:30ch;padding-bottom:4px}
.hd-side p{font-size:14px;color:var(--on-2);line-height:1.9}
/* 视觉隐藏：不占版面，但保留在无障碍树与标题层级中 */

/* ── 首页简介 ─────────────────────────────────────────────────────────── */

.statement-cols{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:start}
.statement{font-size:clamp(24px,3.2vw,50px);font-weight:300;line-height:1.34;letter-spacing:.004em;color:var(--on)}
.prose p + p{margin-top:20px}
.prose .link{margin-top:28px}

/* ── 支柱 ─────────────────────────────────────────────────────────────── */

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,60px)}
.pillars article{border-top:1px solid var(--line);padding-top:28px}
.p-num{display:block;font-size:13px;letter-spacing:.3em;color:var(--red-t);margin-bottom:18px}
.pillars h3{font-size:clamp(19px,2vw,27px);font-weight:400;margin-bottom:14px}
.pillars p{font-size:14.5px;line-height:1.95}

/* ── 交流实践 ─────────────────────────────────────────────────────────── */

.plates-wrap{margin-top:clamp(30px,4vw,64px)}
.plates{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:clamp(18px,2.4vw,38px);align-items:start}
.plate figure{margin:0;overflow:hidden}
.plate img{width:100%;height:clamp(220px,22vw,340px);object-fit:cover;transition:transform 1s var(--ease)}
.plate--wide img{height:clamp(280px,32vw,500px)}
.plate:hover img{transform:scale(1.05)}
.plate-body h3{font-size:clamp(19px,1.9vw,25px);font-weight:400;margin:22px 0 10px}
.plate-body p{font-size:14.5px;line-height:1.9}
.plate-body .link{margin-top:14px}

/* ── 一屏装下的横向带（首页「交流实践」） ───────────────────────────────
   该屏要整屏可见：内边距、图高、标题节奏一律改按 vh 换算——图版原本按宽度缩放，
   「宽而矮」的窗口上会被撑成两屏。图版保持三栏一行（窄于 1000px 时原本会折成两行），
   窄屏才回到单列。三条都限定 min-width:721px，手机端仍走自己的规则。 */
@media (min-width:721px){
  .sec.sec--band{padding:clamp(34px,5.5vh,80px) 0}
  .sec--band .hd{margin-bottom:clamp(18px,3vh,36px);grid-template-columns:minmax(0,1fr) auto}
  .sec--band .hd-en{margin-top:10px}
  /* 窄于 1000px 时通用断点会把侧链接挤成第四行（多出约 70px）；
     本屏标题短，保持双列即可让侧链接回到右侧原位。 */
  .sec--band .hd-side{grid-column:2;grid-row:2 / 4;text-align:right;max-width:30ch;margin-top:0}
  .sec--band .plates-wrap{margin-top:clamp(18px,2.6vh,44px)}
  .sec--band .plates{grid-template-columns:1.55fr 1fr 1fr}
  .sec--band .plate--wide{grid-column:auto}
  .sec--band .plate img{height:clamp(150px,24vh,280px)}
  .sec--band .plate--wide img{height:clamp(170px,28vh,320px)}
  /* 关于协会三屏：图文分栏与三栏卡片在 721–1000px 同样不折行——折行多出的是一整行高度；
     图高改按视口高度封顶，宽度驱动的 38vw 图在矮窗上顶到 540px 是溢出主因。 */
  .sec--band .split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3vw,64px)}
  .sec--band .statements{grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,56px)}
  .sec--band .shot img{height:clamp(220px,min(38vw,38vh),540px)}
  /* 其余各页的内容屏（工作方向 / 四个合作方向 / 联系两屏）：窄断点默认把栅格堆成一列，
     再叠加矮屏的 160px 内边距就会撑到两屏高；这里保留成对/三栏排布，让每屏回到一个视口。 */
  .sec--band .pillars{grid-template-columns:repeat(3,1fr)}
  .sec--band .program{grid-template-columns:minmax(0,1.5fr) minmax(0,.78fr)}
  .sec--band .contact-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .sec--band .steps{grid-template-columns:repeat(3,1fr)}
  /* 成对排布下恢复 aside 的左侧竖线——窄断点改上边框是给堆叠用的 */
  .sec--band .aside{border-left:1px solid var(--line-2);border-top:0;padding-left:28px;padding-top:0;max-width:none}
  /* 地址块是联系首屏最高的元素（含两处 28px 上下留白），矮窗下只收留白，分隔线与行距不动 */
  .sec--band .address{padding:18px 0}
  .sec--band .fine{margin-top:16px}
  /* 两个地址本是并列关系：并排后地址块 407px → 约 310px，
     805×606 这类矮窗也能整屏放下（联系首屏实测 644px → 约 546px） */
  .sec--band .addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,2vw,36px)}
  .sec--band .fine{grid-column:1/-1}
}

/* ── 价值 ─────────────────────────────────────────────────────────────── */

.statements{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,60px)}
.statements article{border-top:1px solid var(--line);padding-top:28px}
.s-tag{display:block;font-size:12.5px;letter-spacing:.32em;color:var(--red-t);margin-bottom:16px}
.statements h3{font-size:clamp(19px,2vw,27px);font-weight:400;margin-bottom:12px}
.statements p{font-size:14.5px;line-height:1.95}

/* ── 工作方向 ─────────────────────────────────────────────────────────── */

.program{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.78fr);gap:clamp(30px,5vw,96px);align-items:start}
.program .prose p{font-size:15.5px}
.ticks{margin-top:28px;display:flex;flex-direction:column;gap:13px}
.ticks li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.85}
.ticks li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:1px;background:var(--red)}
.aside{border-left:1px solid var(--line-2);padding-left:28px}
.aside h3{font-size:15px;font-weight:500;margin-bottom:12px}
.aside p{font-size:14px;line-height:1.9}
.aside .link{margin-top:16px}

/* ── 项目 ─────────────────────────────────────────────────────────────── */

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,96px);align-items:center}
.split .prose h3{font-size:clamp(22px,2.8vw,40px);font-weight:300;margin-bottom:20px}
.shot{margin:0;overflow:hidden}
.shot img{width:100%;height:clamp(320px,38vw,540px);object-fit:cover;object-position:center 16%;filter:grayscale(.16) contrast(1.02)}

/* ── 联系 ─────────────────────────────────────────────────────────────── */

.contact-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,96px);align-items:start}
.contact-person{font-size:14px;letter-spacing:.06em;color:var(--on-3)}
.phone{display:block;font-size:clamp(30px,4.2vw,58px);font-weight:300;letter-spacing:.01em;color:var(--on);margin:16px 0 4px;transition:color .25s}
.phone:hover{color:var(--red)}
.contact-main > p{margin-top:14px;font-size:14.5px;line-height:1.9}
.contact-main .btn{margin-top:28px}

.addresses{display:flex;flex-direction:column}
.address{border-top:1px solid var(--line);padding:28px 0}
.address .place{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--on-3)}
.address h3{font-size:clamp(19px,1.9vw,26px);font-weight:400;margin:12px 0}
.address p{font-size:15px;color:var(--on-2);line-height:1.85;overflow-wrap:anywhere}
.fine{font-size:12.5px;color:var(--on-3);line-height:1.9;margin-top:26px;max-width:84ch}

/* ── 步骤 ─────────────────────────────────────────────────────────────── */

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,60px)}
.steps article{border-top:1px solid var(--line);padding-top:28px}
.step-n{display:block;font-size:13px;letter-spacing:.3em;color:var(--red-t);margin-bottom:18px}
.steps h3{font-size:clamp(18px,1.9vw,24px);font-weight:400;margin-bottom:10px}
.steps p{font-size:14.5px;line-height:1.9}

/* ── 校友 ─────────────────────────────────────────────────────────────── */

.alumni-list{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,4vw,84px)}
.alum{display:grid;grid-template-columns:116px minmax(0,1fr);gap:22px;padding:30px 0;border-top:1px solid var(--line);align-items:start}
.alum-photo{margin:0;height:150px}

/* 虚拟头像：不展示个人照片，用图标占位 */
.avatar{display:grid;place-items:center;overflow:hidden;background:var(--avatar-bg);border:1px solid var(--line)}
.avatar-icon{height:44%;width:auto;fill:var(--on-3);opacity:.72}
.alum-tag{font-size:11px;letter-spacing:.26em;color:var(--red-t)}
.alum h3{font-size:clamp(19px,1.9vw,25px);font-weight:400;margin:7px 0 3px}
.alum-role{font-size:14px;color:var(--on)}
.alum-edu{font-size:12.5px;color:var(--on-3);margin-top:6px}
.alum-note{font-size:14px;margin-top:10px;line-height:1.85}
.alum details{margin-top:10px}
.alum summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;color:var(--on);border-bottom:1px solid var(--line-2);padding-bottom:3px}
.alum summary::-webkit-details-marker{display:none}
.alum summary::before{content:"+";font-size:15px;line-height:1}
.alum summary:hover{border-bottom-color:var(--red)}
.alum summary:hover::before{color:var(--red-t)}
.alum details[open] summary::before{content:"–"}
.alum details ul{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.alum details li{position:relative;padding-left:16px;font-size:13px;color:var(--on-2);line-height:1.85}
.alum details li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--red)}

/* ── 合作院校 ─────────────────────────────────────────────────────────── */

/* 分屏：一屏两校（左右各一），版式与切屏动效沿用「协会工作」的
   .sec--band.sec--bg（整屏背景 + 纱 + 章节头）。整屏背景取「左一」院校的校园图；
   两张卡片各自带校徽（4:3）与校园缩略图（16:9）。圆角与投影是本页唯一的
   非直角元素（按需求执行）。 */
.school-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px)}
.school{display:grid;grid-template-columns:clamp(104px,11vw,144px) minmax(0,1fr);gap:clamp(14px,1.6vw,20px);align-items:start;padding:clamp(14px,1.5vw,20px);border:1px solid var(--line);border-radius:2px;background:var(--card-bg)}
.school-media{display:flex;flex-direction:column;gap:10px;margin:0}
.school-logo{margin:0;aspect-ratio:4/3;background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 10px 22px -14px rgba(0,0,0,.5)}
.school-logo img{width:100%;height:100%;object-fit:contain;padding:clamp(6px,.8vw,10px)}
.school-photo{margin:0;aspect-ratio:16/9;border-radius:3px;overflow:hidden;box-shadow:0 10px 22px -14px rgba(0,0,0,.5)}
/* 校园图即灯箱入口：整块可点，放大镜光标 + 轻微推近 */
.school-shot{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}
.school-shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.school-shot:hover img{transform:scale(1.05)}
.school-body{display:flex;flex-direction:column;gap:9px;min-width:0}
.school h3{font-size:clamp(17px,1.6vw,21px);font-weight:400}
.school-en{font-family:var(--latin);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-3);margin-top:-4px}
/* 章节头右侧：副描述已按需求取消，英文小标移到那个位置（右列、与标题底对齐） */
.sec--schools .hd-en{grid-column:2;grid-row:2/4;align-self:end;text-align:right;max-width:34ch;margin-top:0;padding-bottom:4px}

/* 事实行两行：第 1 行「特色 / 排名」+ 值（值占满右三列，长文案可换行），
   第 2 行「成立」+ 年份，右端是「查看学校详情」（即卡片右下角）。 */
.school-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;column-gap:0;row-gap:6px}
.school-meta{display:contents}
.school-meta div{display:contents}
.school-meta div:first-child dt{grid-area:1/1}
.school-meta div:first-child dd{grid-area:1/2/1/5}
.school-meta div:last-child dt{grid-area:2/1}
.school-meta div:last-child dd{grid-area:2/2}
.school-meta dt{font-size:11px;letter-spacing:.14em;color:var(--on-3);white-space:nowrap;margin-right:8px}
.school-meta dd{margin:0 clamp(14px,1.6vw,26px) 0 0;font-size:13px;color:var(--on)}
.school-note{font-size:13px;line-height:1.8}
.school-more{grid-area:2/4;justify-self:end;align-self:baseline}

/* 院校卡片的信息量比其它页大，窄或矮的窗口再收一档，保证「一屏一组」。
   用页面专属的 .sec--schools 限定，不影响同样挂 .sec--bg 的「协会工作」。 */
@media (min-width:721px) and (max-height:800px){
  .sec--schools .hd-title{font-size:clamp(24px,3.4vw,40px)}
  .sec--schools .hd-en{margin-top:12px;font-size:12px}
  .sec--schools .school{padding:12px;gap:12px}
  .sec--schools .school h3{font-size:16px}
  .sec--schools .school-note{font-size:12.5px;line-height:1.7}
  .sec--schools .school-top{gap:5px 12px}
  .sec--schools .school-meta{gap:5px 12px}
}

/* ── 图片灯箱（合作院校校园图） ─────────────────────────────────────────
   点击任一校园缩略图进入；只收合作院校的校园图，可左右翻看、Esc 关闭。
   挂在 body 下（fixed），因此不受 .shell 上的换屏 transform 影响。 */
.lightbox{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:clamp(16px,4vw,64px);background:rgba(4,12,21,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox.is-open{display:grid}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%}
.lightbox img{max-width:min(1180px,100%);max-height:calc(100vh - 220px);object-fit:contain;border-radius:3px;box-shadow:0 40px 80px -36px rgba(0,0,0,.85)}
.lightbox figcaption{font-size:13.5px;letter-spacing:.06em;color:#e9eff5;text-align:center}
.lightbox figcaption b{font-weight:400;color:#9db1c4;margin-left:10px}
.lightbox-btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(255,255,255,.28);border-radius:3px;background:rgba(4,12,21,.55);color:#e9eff5;font-size:22px;line-height:1;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease)}
.lightbox-btn:hover{background:var(--red);border-color:transparent}
.lightbox-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%)}
.lightbox-prev{left:clamp(10px,2.6vw,36px)}
.lightbox-next{right:clamp(10px,2.6vw,36px)}
.lightbox-close{top:clamp(10px,2.4vw,28px);right:clamp(10px,2.4vw,28px);font-size:20px}
@media (max-width:720px){
  .lightbox{padding:12px}
  .lightbox-btn{width:44px;height:44px;font-size:19px}
  .lightbox img{max-height:calc(100vh - 200px)}
}

/* ── 出站确认层（查看学校详情） ──────────────────────────────────────── */
.confirm{position:fixed;inset:0;z-index:210;display:none;place-items:center;padding:24px;background:rgba(4,12,21,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.confirm.is-open{display:grid}
.confirm-box{width:min(420px,100%);padding:clamp(22px,3vw,34px);background:var(--bg);border:1px solid var(--line);border-radius:2px;box-shadow:0 44px 84px -38px rgba(0,0,0,.85)}
.confirm-box h2{font-size:clamp(18px,1.6vw,21px);font-weight:400;color:var(--on)}
.confirm-box p{margin-top:12px;font-size:14px;line-height:1.85;color:var(--on-2)}
.confirm-box b{font-weight:400;color:var(--on);word-break:break-all}
.confirm-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.confirm-actions .btn{flex:1 1 auto;justify-content:center;padding-inline:18px}

/* ── 内页首屏 ─────────────────────────────────────────────────────────── */

.pagehead{position:relative;overflow:hidden;background:var(--cover-bg);padding:clamp(120px,17vh,190px) 0 clamp(48px,7vw,90px);border-bottom:1px solid var(--line)}
.pagehead-media{position:absolute;inset:0;margin:0;z-index:0}
.pagehead-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:grayscale(.3) contrast(1.04)}
.pagehead-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,12,21,.86),rgba(4,12,21,.7)),radial-gradient(72% 82% at 86% -10%,rgba(194,49,64,.28),transparent 62%)}
.pagehead > .shell{position:relative;z-index:2;display:flex;flex-direction:column}
.crumbs{display:flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.22em;color:var(--on-3);margin-bottom:clamp(28px,4vw,52px)}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--on)}
.crumbs span::before{content:"";display:inline-block;width:28px;height:1px;background:var(--red);vertical-align:middle;margin-right:14px}
.pagehead h1{font-size:clamp(38px,6.4vw,100px);font-weight:700;line-height:1.1;letter-spacing:.004em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4)}
.pagehead-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:clamp(30px,4vw,56px);padding-top:28px;border-top:1px solid var(--line)}
.pagehead-foot p{font-size:15.5px;line-height:1.9;color:var(--on-2);max-width:52em}

/* ── 行动号召 ─────────────────────────────────────────────────────────── */

.cta{position:relative;overflow:hidden;min-height:clamp(380px,54vh,580px);display:flex;align-items:center;border-top:1px solid var(--line)}
.cta-media{position:absolute;inset:0;margin:0}
.cta-media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.cta-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,21,.82),rgba(4,12,21,.88)),radial-gradient(60% 90% at 82% 50%,rgba(194,49,64,.3),transparent 62%)}
.cta-inner{position:relative;z-index:2;padding:clamp(56px,8vw,120px) 0}
.cta h2{font-size:clamp(28px,4.4vw,70px);font-weight:700;line-height:1.16;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4)}
.cta p{margin-top:18px;font-size:15.5px;color:var(--on-2);max-width:46em}
.cta .actions{margin-top:32px}

/* ── 整屏节奏：内页页头 / 行动号召也占满一屏 ─────────────────────────────
   分屏翻页的前提是「一次滚动 = 一整屏」。首页首屏本就整屏，页头与行动号召
   原先按内容高度（约半屏）——翻到它们时下一屏会从底部露出来，节奏被切断。
   桌面端补成整屏；手机端不分屏，仍走各自的紧凑版式（721/720 断点）。
   放在此处可让下面「矮屏只收留白」的规则继续覆盖顶部内边距。 */
@media (min-width:721px){
  .pagehead{
    min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(104px,15vh,176px) 0 clamp(56px,8vh,104px);
  }
  .cta{min-height:100vh;min-height:100svh}
}

/* ── 页脚 ─────────────────────────────────────────────────────────────── */

.foot{background:var(--bg);border-top:1px solid var(--line);padding:clamp(56px,7vw,110px) 0 30px}
/* 顶部：左「标志 + 中文」，右「协会联系地址」 */
.foot-head{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(28px,4vw,72px)}
.foot-brand{display:flex;align-items:center;gap:clamp(18px,2vw,28px);min-width:0}
.foot-intro{font-size:14px;line-height:1.95;color:var(--on-2);max-width:34ch}
.foot-addr{font-style:normal;flex:none;text-align:right}
.foot-addr span{display:block;font-size:13px;line-height:1.85;color:var(--on-2)}
/* 底部只留一行：左导航，右「Indonesia / China ＋ 版权」 */
.foot-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px clamp(24px,3vw,56px);margin-top:clamp(34px,4.4vw,64px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(20px,2.6vw,42px)}
.foot-nav a{font-size:14px;color:var(--on-2);transition:color .2s}
.foot-nav a:hover{color:var(--on)}
.foot-nav a[aria-current=page]{color:var(--red-t)}
.foot-legal{display:flex;align-items:center;flex-wrap:wrap;gap:10px clamp(18px,3vw,44px);font-size:12px;color:var(--on-3)}

/* ── 开场动效 ─────────────────────────────────────────────────────────── */

/* 首屏一次性编排：文案上升、相框随后推入；内页首屏整块淡入一次。
   正文各屏直接可见，不再逐屏入场（原先「每屏 slide + 4 级错峰 + 背景推近」属于通用做法）。
   由纯 CSS 触发：首帧即为动画起点，不会出现先可见再动画的闪烁；
   只用 opacity / transform；reduced-motion 下整体关闭；无 JS 时内容照常可见。 */
@media (prefers-reduced-motion:no-preference){
  @keyframes screenSlide{from{opacity:0;transform:translate3d(0,48px,0)}to{opacity:1;transform:none}}
  @keyframes frameIn{from{opacity:0;transform:translate3d(28px,0,0) scale(.97)}to{opacity:1;transform:none}}

  .js .hero .hero-copy{animation:screenSlide .88s var(--ease) both}
  .js .hero .hero-frame{animation:frameIn .98s var(--ease) .16s both}
  .js .pagehead > .shell{animation:screenSlide .72s var(--ease) both}
}

/* ── 换屏特效：进入的屏做一次「落位」───────────────────────────────────
   只动 .shell 这一层：内容自下方 26px 收拢归位并淡入，背景图按兵不动，
   不错峰、不推近背景（错峰 + 背景推近是通用做法，这里不要）。
   与整屏滑动叠在一起，读起来就是「滑过去 → 稳稳落位」。
   仅桌面分屏区间生效（手机端是长文档，不做），reduced-motion 下整体关闭。 */
@media (min-width:721px) and (prefers-reduced-motion:no-preference){
  /* .fx-on 由 site.js 装上观察器后才加：脚本没跑到就绝不隐藏内容
     （head 里的内联脚本会先加 .js，若只认 .js，脚本一旦出错整屏内容会永久消失）。 */
  .js.fx-on .sec > .shell,.js.fx-on .cta > .shell{
    transition:opacity .58s var(--ease),transform .72s var(--ease);
  }
  .js.fx-on .sec:not(.is-live) > .shell,.js.fx-on .cta:not(.is-live) > .shell{
    opacity:0;transform:translate3d(0,26px,0);
  }
}

/* ── 响应式 ───────────────────────────────────────────────────────────── */

@media (max-width:1299px){
  .rail{display:none}
}

/* 矮屏 / 横屏机型：只收紧内边距，整屏高度保留——分屏必须一屏一屏地走。
   min-height 只是下限，内容高于视口时照常长高，不存在"被挤"的问题。 */
@media (max-height:700px){
  .sec{padding:96px 0 64px}
  .hero{padding-bottom:56px}
  .pagehead{padding-top:104px}
}

/* 极矮窗（≤660px）：首页首屏与首节也收回整屏。
   只收留白，不动字号与图高；顶距留 88px 是为了不让固定顶栏（72px）压住标题。
   放在上一段之后，才能在 700px 档的基础上再收一档。 */
@media (max-height:660px){
  .sec{padding:88px 0 34px}
  .hero{padding-bottom:20px}
  .hero-inner{padding-top:120px}
  .sec:not(.sec--band) .hd{margin-bottom:clamp(18px,3vh,36px)}
}

@media (max-width:1000px){
  .burger{display:flex}

  /* 移动端导航：右上角下拉面板，不做全屏覆盖——页面照常可读、可滚。
     面板挂在 .bar-in 下（absolute + top:100%），因此自动贴着顶栏下沿、
     右缘与汉堡按钮对齐，顶栏高度在 720px 断点变化时也无需另算。
     开合用 opacity/visibility/transform 过渡（原先切 display 是无过渡的硬切）。 */
  .nav{
    position:absolute;top:calc(100% + 10px);right:0;left:auto;bottom:auto;
    z-index:2;display:flex;flex-direction:column;gap:0;
    width:min(304px,calc(100vw - 44px));
    max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg);border:1px solid var(--line);
    box-shadow:0 26px 52px -24px rgba(0,0,0,.62),0 2px 10px -6px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translate3d(0,-10px,0) scale(.98);transform-origin:100% 0;
    transition:opacity .2s var(--ease),transform .3s var(--ease),visibility .3s;
  }
  .nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}

  .nav a{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    width:100%;font-size:15px;letter-spacing:.04em;padding:14px 18px;
    color:var(--on);border-bottom:0;border-top:1px solid var(--line);
    opacity:0;transform:translate3d(0,-6px,0);
    transition:opacity .2s var(--ease),transform .26s var(--ease),background .2s,color .2s;
  }
  .nav a:first-child{border-top:0}
  /* 右端短横线：与右侧章节导航同一母题，悬停/当前项转红并拉长 */
  .nav a::after{content:"";flex:none;width:16px;height:1px;background:currentColor;opacity:.3;transition:width .25s var(--ease),background .25s,opacity .25s}
  .nav a:hover,.nav a:focus-visible{background:var(--avatar-bg)}
  .nav a:hover::after{width:26px;opacity:.9;background:var(--red)}
  .nav a[aria-current=page]{color:var(--red-t)}
  .nav a[aria-current=page]::after{width:26px;opacity:1;background:var(--red)}

  /* 逐项错开 30ms 落位，跟着面板一起"弹"出来 */
  .nav.is-open a{opacity:1;transform:none}
  .nav.is-open a:nth-child(1){transition-delay:.03s}
  .nav.is-open a:nth-child(2){transition-delay:.06s}
  .nav.is-open a:nth-child(3){transition-delay:.09s}
  .nav.is-open a:nth-child(4){transition-delay:.12s}
  .nav.is-open a:nth-child(5){transition-delay:.15s}

  .hero-foot{grid-template-columns:1fr;gap:24px;align-items:start}
  .statement-cols{grid-template-columns:1fr;gap:24px}
  .pillars,.statements{grid-template-columns:1fr;gap:30px}
  .plates{grid-template-columns:1fr 1fr}
  .plate--wide{grid-column:1/-1}
  .plate--wide img{height:clamp(260px,44vw,420px)}
  .program{grid-template-columns:1fr;gap:34px}
  .aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:22px;max-width:560px}
  .split{grid-template-columns:1fr;gap:34px}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .steps{grid-template-columns:1fr;gap:30px}
  .alumni-list{grid-template-columns:1fr}
  /* 窄卡片放不下四列：事实行收成三列 —— 排名占满右两列（长文案不折），
     第 2 行是「成立 · 年份 · 查看学校详情（右端）」。 */
  .school-top{grid-template-columns:auto minmax(0,1fr) auto}
  .school-meta div:first-child dd{grid-area:1/2/1/4}
  .school-meta div:last-child dd{grid-area:2/2}
  .school-more{grid-area:2/3;justify-self:end}
  .sec--schools .hd-en{grid-column:1;grid-row:auto;text-align:left;max-width:none;margin-top:18px;padding-bottom:0}
  /* 窄屏卡片改单列：校徽与文字同行，缩略图让位给文字宽度
     （整屏背景仍是「左一」院校的校园图，视觉上不缺） */
  .school{display:flex;gap:14px;align-items:flex-start}
  .school-media{flex:none;flex-direction:row;align-items:center;gap:12px}
  .school-logo{width:68px}
  .school-photo{display:none}
  .school-body{flex:1 1 auto}
  .hd{grid-template-columns:1fr}
  .hd-side{grid-column:1;grid-row:auto;text-align:left;max-width:none;margin-top:22px}
  .foot-head{flex-direction:column;align-items:flex-start;gap:26px}
  .foot-addr{text-align:left}
}

@media (max-width:720px){
  /* 手机端不分屏：两校改为上下堆叠，卡片内部也收窄 */
  .school-pair{grid-template-columns:1fr;gap:18px}
  .school{grid-template-columns:104px minmax(0,1fr)}
  .shell{width:calc(100% - 32px)}
  html{scroll-snap-type:none}
  .sec{min-height:0;display:block;padding:84px 0 56px}
  .bar-in{min-height:64px}
  .brand-logo{height:30px}
  .brand-logo--foot{height:32px}
  .hero-frame{order:-1;position:static;align-self:flex-end;justify-self:auto;width:clamp(150px,46vw,240px);margin:0 0 26px}
  .hero-frame img{height:clamp(104px,30vw,172px)}
  .hd{margin-bottom:30px}
  .hd-title{font-size:27px}
  .hd-en{font-size:11px;letter-spacing:.2em}

  .hero-inner{display:flex;flex-direction:column;padding:104px 0 46px}
  .hero-copy{align-self:stretch}
  .hero-title{font-size:32px;line-height:1.2}
  .kicker{font-size:11px;letter-spacing:.24em;margin-bottom:20px}
  .hero-foot p{font-size:14.5px}
  .actions{gap:10px}
  .btn{padding:13px 22px;font-size:14px}

  .pagehead{padding:104px 0 52px}
  .pagehead h1{font-size:34px;line-height:1.16}
  .pagehead-foot p{font-size:14.5px}

  .statement{font-size:23px}
  .pillars h3,.statements h3{font-size:20px}
  .shot img{height:auto;max-height:520px;object-fit:contain;object-position:center}
  .plates{grid-template-columns:1fr;gap:32px}
  .plate--wide{grid-column:auto}
  .plate img,.plate--wide img{height:clamp(200px,54vw,320px)}
  .split .prose h3{font-size:24px}
  .phone{font-size:32px}

  .alum{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:24px 0}
  .alum-photo{height:124px}

  .foot-intro{max-width:none}
  .foot-nav{gap:10px 22px}
  .foot-bar{gap:16px}
  .foot-legal{gap:12px 18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .plate:hover img{transform:none}
}