/* =========================================================================
   關於基金會 · ABOUT US · css/about.css
   IRON Figma 10769:16387（2026-09-13 改版）：暗底＋背景兩層遮罩、兩欄 grid 540.66／756.95、欄距 86.4
   2026-09-14 背景換成苔原地平線（assets/img/about/about_bg_moss_horizon.webp，1:1），底部漸層放寬
   2026-09-14 R2：對標 Hero 開花後暖色，換成暖色分區塊聚落背景（about_bg_moss_cluster_warm.webp）
     淺底＋深字（原暗底＋白字全面反轉，token 對照 base.css 的淺底組：--ink／--ink-2／--ink-body）
   左欄 About US＋56px 標題＋兩段內文＋瞭解更多；右欄兩欄工整瀑布牆（間距 16、radius 12）
   所有 selector 以 #about 開頭
   Lexend Exa 500 已由 index.html head 載入（About US 只用 500），不需另外 @import
   ========================================================================= */
#about{
  --wall-gap:16px;
  --wall-offset:8px;           /* 第二欄只下移半個間距（spec），上下緣維持工整 */
  --about-ink:var(--ink);
  --about-accent:var(--accent);
  /* R3 B10：overflow:hidden 會讓 #about 變成捲動容器，左欄 sticky 黏不住；clip 只裁切（hidden 留作 fallback） */
  overflow:hidden;
  overflow:clip;
  padding-block:var(--section);   /* 手冊 standard 120／80／64（原 Figma 183／140） */
  padding-inline:var(--margin);   /* 左右固定 40／24／18、內容隨視窗延展（2026-09-14） */
  background:var(--white);        /* R2：暖白底（原 --forest 深墨綠） */
  color:var(--ink);                /* R2：深字（原繼承 base.css #about,#footer 的 on-dark 白字） */
  isolation:isolate;
}

/* ---------- 背景 ---------- */
#about .about__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#about .about__bg-img{
  position:absolute;left:0;top:-10%;width:100%;height:120%;
  object-fit:cover;object-position:50% 80%;   /* 1:1 圖在寬螢幕會被上下裁，往下對齊保住底部苔蘚帶 */
  will-change:transform;
}
#about .about__bg-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(251,249,245,.94) 0%,rgba(251,249,245,.68) 42%,rgba(251,249,245,.22) 100%),
    linear-gradient(180deg,rgba(251,249,245,.92) 0%,rgba(251,249,245,0) 18%,rgba(251,249,245,0) 88%,rgba(251,249,245,.58) 100%);   /* R2：暖白遮罩，左深右淺給文案對比，底部不壓到純色讓苔石聚落看得到 */
}
#about .about__fx{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- 版面：540.66fr ＋ 756.95fr、欄距用手冊 5/7 樣板 wide 96 ---------- */
#about .about__inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,540.66fr) minmax(0,756.95fr);
  column-gap:var(--split-gap-wide);   /* 兩欄依 Figma 540.66：756.95 等比放大；不設最大寬 */
}
#about .about__text,#about .about__wall{min-width:0}
/* sticky 欄垂直置中；--sticky-h 由 about.js 量測，欄高於視窗時 max() 退回貼 nav 下方 */
/* min(--section,…)：起點與區塊上留白一致，矮視窗仍退回貼 nav 下方 */
#about .about__sticky{position:sticky;top:max(calc(var(--nav-h) + 40px),min(var(--section),calc(50vh - var(--sticky-h,480px) / 2)));max-width:560px}

#about .about__eyebrow{
  margin:0;font-family:var(--font-en);font-size:14px;line-height:32px;font-weight:500;letter-spacing:0;
  color:var(--ink-2);   /* R2：淺底次要文字（原 on-dark-3） */
}
#about .about__title{
  margin:0;font-family:var(--font-tc);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:500;   /* H2 48／44／40 */
  letter-spacing:var(--ls-h2);color:var(--ink);   /* R2：深字（原 on-dark-strong 白字） */
}
#about .about__body{
  max-width:541px;padding-top:40px;
  font-family:var(--font-tc);font-size:var(--fs-body-l);line-height:var(--lh-body-l);font-weight:400;color:var(--ink-body);   /* R2：深字內文（原 on-dark-body） */
}
#about .about__body p{margin:0}
#about .about__body p + p{margin-top:calc(var(--lh-body-l) * 1em)}   /* 兩段中間空一行 */
#about .about__cta{margin-top:24px}

/* ---------- 瞭解更多（base.css .btn 的 #about 範圍覆寫；之後主 agent 統一到 base.css） ---------- */
#about .about__more{
  --btn-fg:var(--about-ink);--btn-bd:rgba(21,37,26,.32);--btn-ico-bg:var(--about-accent);--btn-ico-fg:var(--about-ink);--btn-hover-bg:rgba(21,37,26,.05);   /* R2：淺底深字（原白字暗底） */
  gap:14px;padding:16px 18px;border-radius:12px;
  font-family:var(--font-tc);font-size:15px;line-height:18px;font-weight:700;text-transform:none;letter-spacing:0;
}
#about .about__more .btn__ico{width:24px;height:24px;flex:0 0 24px;border-radius:50%}
#about .about__more .btn__ico svg{width:14px;height:14px}
#about .btn:focus-visible{outline:var(--focus-ring);outline-offset:3px}   /* R2：深色 focus ring（原 on-dark 淺環） */

/* ---------- 瀑布牆：兩欄等寬、間距一致 ---------- */
#about .about__wall{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--wall-gap);
  align-items:start;
}
#about .about__col{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--wall-gap);
  will-change:transform;
}
#about .about__col--b{margin-top:var(--wall-offset)}
#about figure{margin:0}
#about .about__frame{
  position:relative;border-radius:12px;overflow:hidden;
  background:rgba(244,239,230,.06);
}
/* 兩欄都是 8:9＋16:9＋4:3，欄總高相同、接縫錯開；1440 下牆高約 1021（Figma 容器 1017） */
#about .about__frame--portrait{aspect-ratio:8 / 9}
#about .about__frame--wide{aspect-ratio:16 / 9}
#about .about__frame--square{aspect-ratio:4 / 3}
#about .about__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) brightness(1.02)}   /* R2：淺底不用壓暗（原 .84／.92） */
/* 內框細光邊＋底部沉色，讓活動照融進淺底（不加單邊色條） */
#about .about__frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(21,37,26,.08);
  background:linear-gradient(180deg,rgba(251,249,245,0) 62%,rgba(251,249,245,.24));   /* R2：暖白沉色（原深墨綠） */
}
/* 自動相機畫面：底部有 CAMNAME／溫度浮水印，拉高由頂部對齊裁掉 */
#about .about__frame--crop img{height:118%;bottom:auto}
#about figcaption{
  margin-top:8px;font-family:var(--font-tc);font-size:12px;line-height:18px;font-weight:400;letter-spacing:0;
  color:var(--ink-2);   /* R2：深字（原 on-dark-2） */
}

/* ---------- ≤1100：單欄、瀑布牆在內文下方兩欄、無視差 ---------- */
@media (max-width:1100px){
  #about{--wall-offset:8px}
  #about .about__inner{grid-template-columns:minmax(0,1fr);row-gap:64px}
  #about .about__sticky{position:static;max-width:680px}
  #about .about__bg-img{top:0;height:100%}
  #about .about__bg-shade{background:linear-gradient(180deg,rgba(251,249,245,.96) 0%,rgba(251,249,245,.76) 30%,rgba(251,249,245,.66) 75%,rgba(251,249,245,.5) 100%)}   /* R2：暖白（原深墨綠） */
  #about .about__col{transform:none!important}
  #about .about__wall{max-width:760px}   /* 元件內部上限（照片牆，非區塊容器），避免 ≤1100 時整段過長 */
}
/* ---------- ≤640：瀑布牆兩欄小圖 ---------- */
@media (max-width:640px){
  #about{--wall-gap:12px;--wall-offset:6px}
  #about .about__body{padding-top:28px}
  #about .about__inner{row-gap:48px}
}