/* 故事內容.html 的頁面樣式（自切版抽出，僅改素材路徑） */
/* ============ 基本設定（沿用首頁 design token） ============ */
:root{
  /* 舊變數名 → 新 token 的對照（避免大量改寫既有規則） */
  --gray:var(--slate);
  --gray-2:var(--ink-38);
  --brown:var(--slate);
  --beige-2:var(--beige);
  --cream-2:var(--cream);
  --line:var(--beige);
  --red-acc:var(--red);
  --body-size:var(--fs-body);
  --body-weight:500;
  --body-line:1.75;
  --body-track:.03em;
}
/* 本頁底色：純白（Gathering 與 Stories 系列統一白底，首頁維持米白） */
body{background:var(--white)}
:root{--veil:var(--white)}   /* 轉場幕跟著頁面底色，避免進場閃一下 */

/* ============ 閱讀進度條 ============ */
.progress{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:60;
  background:var(--red);transition:width .12s linear;
}

/* ============ 文章（Figma：單欄 1160，1920 畫布下左右各 380） ============ */
.article{padding:0 0 clamp(80px,8vw,120px)}
/* 內容欄：max-width 1160 + 左右頁面留白 */


/* ---- 封面（置於標題之上） ---- */
.st-cover{margin-top:64px}
.st-cover .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink-08)}
.st-cover .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.st-cover figcaption{
  margin-top:12px;font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1.8;color:var(--gray-2);
}

/* ---- 標題與資訊列 ---- */
.st-head{margin-top:44px}
.st-meta{
  margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.st-meta .left{display:flex;align-items:center;gap:32px;flex-wrap:wrap;font-size:14px;letter-spacing:.06em}
.st-rule{height:1px;background:var(--ink-16);margin-top:28px}

/* ---- 標籤 ---- */
.st-tags{margin-top:56px;padding-top:33px;border-top:1px solid var(--ink-16)}
.st-tags .lb{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--ink)}
.st-tags .items{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}


/* ---- 延伸閱讀（3 欄，卡片與列表頁同一套） ---- */
.rel{margin-top:60px}
.rel h2{font-size:21px;font-weight:700;letter-spacing:.12em;color:var(--ink)}
.rel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(24px,4.4vw,85px);row-gap:44px;margin-top:24px;
}
.rc{display:block}
.rc .img{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-08)}
.rc .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.33,.1,.25,1)}
.rc:hover .img img{transform:scale(1.05)}
.rc .cat-badge{margin-top:16px}
.rc .tt{
  display:-webkit-box;margin-top:4px;
  font-size:17px;font-weight:600;line-height:1.6;letter-spacing:.03em;color:var(--ink);
  transition:color .25s;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rc:hover .tt{color:var(--red)}
.rc .ld{
  display:-webkit-box;margin-top:8px;
  font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.03em;color:var(--ink-52);
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ============ RWD ============ */
@media (max-width:1200px){
  .nav-links a{font-size:16px}
  .f-col{width:200px}
}
@media (max-width:1024px){
  :root{--header-h:72px}
  .nav-links,.main-nav .nav-divider{display:none}
  .menu-toggle{display:flex}
  .main-nav{gap:12px}
  .mobile-nav{
    position:fixed;top:72px;left:0;right:0;background:var(--white);z-index:49;
    flex-direction:column;padding:12px 24px 24px;box-shadow:0 12px 24px rgba(0,0,0,.08);
  }
  .mobile-nav.open{display:flex}
  .mobile-nav a{padding:14px 0;font-size:17px;font-weight:600;color:var(--gray);border-bottom:1px solid var(--ink-08);text-transform:uppercase}
  .st-cover{margin-top:40px}
  .st-head{margin-top:32px}
}
@media (max-width:820px){
  .footer-main{flex-direction:column}
  .f-links{gap:32px}
  .pn{grid-template-columns:1fr}
  .pn::after{left:0;right:0;top:auto;bottom:auto;width:auto;height:1px;top:50%}
  .pn a{min-height:100px}
  .rel-grid{grid-template-columns:repeat(2,1fr);row-gap:36px}
}
@media (max-width:600px){
  .site-header{padding:0 16px}
  .logo img.logo-full{width:103px;height:34px}
  .icon-btns{display:none}
  .btn-giving{min-width:auto;height:32px;font-size:15px;padding:4px 14px}
  .crumb-band{height:52px}
  .crumb a,.crumb span{font-size:12px;letter-spacing:.04em}
  .crumb .mid{display:none}
  .band-glyph{display:none}
  .st-cover .ph{aspect-ratio:4/3}
  .st-head h1{font-size:22px;line-height:1.6}
  .st-meta{align-items:flex-start;flex-direction:column;gap:16px}
  .rel-grid{grid-template-columns:1fr;row-gap:32px}
  .f-col{width:100%}
}

/* 本頁專屬：文章區塊外距 */
.st-body{margin-top:40px}
.pn{margin-top:46px}