/* =========================================================
   內頁範本（搭配 home.css 使用）
   .phero    頁首：麵包屑、英文大字、中文標題、關鍵字
   .psec     內容段落：左欄小標（sticky）＋右欄內容
   .lead     段落導言（襯線大字）
   .records  依年份分組的條列
   .pnext    頁末導引
   ========================================================= */
body.page { --aura: .75; }
.page .atmos .grid i { background: var(--line); opacity: .45; }  /* 內頁文字多，背景格線再淡一點 */

/* ---------- 頁首 ---------- */
.phero { position: relative; min-height: 88svh; padding: 18vh var(--gutter) 10vh; display: flex; flex-direction: column; justify-content: flex-end; }
.crumb { position: absolute; top: 15vh; left: var(--gutter); display: flex; gap: 12px; font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.crumb li + li::before { content: "/"; margin-right: 12px; opacity: .5; }
.crumb a { transition: color .3s; }
.crumb a:hover { color: var(--fg); }
.phero__en { font-family: var(--f-en); font-weight: 200; font-size: clamp(56px, 13vw, 240px); line-height: .9; letter-spacing: -.03em; margin-left: -.06em; }
.phero__en > span { display: block; }
.phero__en > span:last-child { padding-left: 1.1em; }
.phero__title { margin-top: 6vh; display: flex; flex-direction: column; gap: 1.4vh; font-weight: 200; }
.phero__org { font-size: 13px; font-weight: 400; letter-spacing: .3em; color: var(--muted); }
.phero__zh { font-size: clamp(30px, 4.2vw, 64px); line-height: 1.25; letter-spacing: .14em; }
.phero__zh .c { display: inline-block; }
.phero__keys { position: absolute; right: calc(var(--gutter) + 9vw); bottom: 10vh; display: flex; gap: clamp(14px, 1.6vw, 26px); }
.phero__keys li { writing-mode: vertical-rl; font-family: var(--f-serif); font-size: clamp(13px, 1vw, 16px); letter-spacing: .6em; color: var(--muted); opacity: .75; }

/* ---------- 內容段落 ---------- */
.psec { position: relative; display: grid; grid-template-columns: minmax(220px, 4fr) 8fr; gap: 4vw; padding: 16vh var(--gutter) 6vh; }
.psec + .psec { border-top: 0; }
.psec__head { position: sticky; top: 16vh; align-self: start; }
.psec__title { margin-top: 3vh; font-family: var(--f-en); font-weight: 300; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.05; letter-spacing: -.01em; }
.yidx { margin-top: 5vh; display: flex; flex-direction: column; gap: 4px; }
.yidx a { display: flex; align-items: center; gap: 14px; padding: 6px 0; font-family: var(--f-en); font-weight: 500; font-size: 13px; letter-spacing: .14em; color: var(--muted); transition: color .4s var(--ease); width: max-content; }
.yidx a::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .5; transition: width .5s var(--ease), opacity .4s; }
.yidx a:hover, .yidx a.is-on { color: var(--fg); }
.yidx a.is-on::before { width: 40px; opacity: 1; }
.psec__body { min-width: 0; }

.lead {
  font-family: var(--f-serif); font-weight: 400; font-size: clamp(17px, 1.42vw, 23px); line-height: 2.1; letter-spacing: .08em; text-align: justify;
  padding: 5vh 3.4vw; max-width: 36em;
  background: color-mix(in srgb, var(--bg) 30%, transparent);
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
}

/* ---------- 年份條列 ---------- */
.records__year { display: grid; grid-template-columns: clamp(90px, 9vw, 150px) 1fr; gap: 2vw; padding: 4.4vh 0; border-top: 1px solid var(--line); }
.records__year:last-child { border-bottom: 1px solid var(--line); }
.records__y { font-family: var(--f-en); font-weight: 900; font-size: clamp(28px, 3vw, 50px); line-height: 1; letter-spacing: -.02em; }
.records__year ol { display: flex; flex-direction: column; }
.records__year li { position: relative; display: flex; flex-direction: column; gap: .5vh; padding: 2.2vh 0; max-width: 40em; transition: transform .5s var(--ease); }
.records__year li + li { border-top: 1px dashed var(--line); }
.records__year li::before { content: ""; position: absolute; left: -1.4vw; top: calc(2.2vh + .8em); width: 5px; height: 5px; border-radius: 50%; background: var(--fg); transform: scale(0); transition: transform .4s var(--ease); }
.records__year li:hover { transform: translateX(.6vw); }
.records__year li:hover::before { transform: scale(1); }
.records__org { font-size: 12.5px; font-weight: 400; letter-spacing: .16em; line-height: 1.8; color: var(--muted); }
.records__t { font-family: var(--f-serif); font-size: clamp(16px, 1.3vw, 21px); line-height: 1.9; letter-spacing: .06em; }

/* ---------- 頁末導引 ---------- */
.pnext { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 2vw; margin: 14vh var(--gutter) 16vh; padding: 5vh 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); }
.pnext__k { font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.pnext__t { font-size: clamp(26px, 3.4vw, 54px); font-weight: 200; letter-spacing: .14em; }
.pnext i { margin-left: auto; font-style: normal; font-size: clamp(24px, 3vw, 46px); transition: transform .6s var(--ease); }
.pnext:hover i { transform: translateX(1.2vw); }

.nav__menu a[aria-current="page"]::after { transform: scaleX(1); }
.foot__orgs a span { border-bottom: 1px solid var(--line); transition: border-color .3s; }
.foot__orgs a:hover span { border-color: currentColor; }

/* ---------- 進場 ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
.js .records__year.reveal li { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(.15s + var(--i, 0) * .1s); }
.js .records__year.reveal.is-in li { opacity: 1; transform: none; }
.js .records__year.reveal.is-in li:hover { transform: translateX(.6vw); transition-delay: 0s; }
.js .phero__en > span, .js .crumb, .js .phero__org, .js .phero__keys li { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .phero__zh .c { opacity: 0; transform: translateY(.5em); filter: blur(8px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(.5s + var(--i) * .06s); }
.is-ready .phero__en > span, .is-ready .crumb, .is-ready .phero__org, .is-ready .phero__keys li, .is-ready .phero__zh .c { opacity: 1; transform: none; filter: none; }
.is-ready .phero__en > span:last-child { transition-delay: .12s; }
.is-ready .phero__org { transition-delay: .4s; }
.is-ready .phero__keys li:nth-child(1) { transition-delay: 1s; }
.is-ready .phero__keys li:nth-child(2) { transition-delay: 1.1s; }
.is-ready .phero__keys li:nth-child(3) { transition-delay: 1.2s; }
.is-ready .phero__keys li:nth-child(4) { transition-delay: 1.3s; }

@media (max-width: 860px) {
  .phero { min-height: 80svh; padding-top: 22vh; }
  .crumb { top: 12vh; }
  .phero__keys { position: static; margin-top: 5vh; }
  .phero__keys li { writing-mode: horizontal-tb; letter-spacing: .3em; }
  .psec { grid-template-columns: 1fr; padding-top: 10vh; gap: 5vh; }
  .psec__head { position: static; }
  .lead { padding: 4vh 6vw; margin: 0 -2vw; }
  .records__year { grid-template-columns: 1fr; gap: 2vh; }
  .pnext { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .records__year.reveal li, .js .phero__en > span, .js .crumb, .js .phero__org, .js .phero__keys li, .js .phero__zh .c { opacity: 1; transform: none; filter: none; transition: none; }
}

@media (max-width: 860px) { .yidx { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; } .yidx a::before { width: 8px; } .yidx a.is-on::before { width: 18px; } }

/* 過往成果列表：整塊放在霧面卡片上，背景格線不干擾閱讀 */
.records {
  align-self: start; padding: 1vh 3.4vw 2vh;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
}
.records__year:first-child { border-top: 0; }
.records__year:last-child { border-bottom: 0; }
@media (max-width: 860px) { .records { padding: 1vh 5vw 2vh; margin: 0 -2vw; } }

/* 內頁頁尾：英文大字縮小，緊接在「Back to 前進亞洲新腹地」下方 */
.page .pnext { margin-bottom: 5vh; }
.page .foot__big { font-size: clamp(30px, 4.4vw, 80px); margin-top: 0; }
@media (max-width: 860px) { .page .foot__big { font-size: 8.6vw; } }

/* 英文大標進場：字母由遮罩細縫升起，字重 100→200、字距由寬收攏 */
.phero__en > span { letter-spacing: .02em; transition: letter-spacing 2.2s cubic-bezier(.16,1,.3,1) .2s; }
.is-ready .phero__en > span { letter-spacing: -.03em; }
.rl { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .12em; margin: -.08em 0 -.12em; }
.rl__c { display: inline-block; transform: translateY(105%); font-weight: 100;
  transition: transform 1.4s cubic-bezier(.16,1,.3,1), font-weight 1.8s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--d, 0ms) + var(--i) * 55ms); }
.is-ready .rl__c { transform: none; font-weight: 200; }
.js .phero__en > span { transform: none !important; }