/* ============================================================
   Main Layout — 蔚禾身心診所
   Mobile-first → tablet → desktop
   Reference design width: 1920px
   ============================================================ */

/* ============================================================
   Parallax — GPU 加速基底
   JS 控制 transform/background-position，CSS 只做容器保護與禁用
   ============================================================ */

[data-parallax-speed] {
  /* 視差元素：CLS 防護，transform 變動不影響 layout
     will-change 由 JS 在 observe 時加上，避免閒置時佔 GPU layer */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Photo Strip 視差時可能突破 track 邊界，需 overflow 包容
   注意：photo-strip 本來就有 overflow:hidden，這裡保險再寫一次 */
.photo-strip {
  overflow: hidden;
}

/* 文章卡片內圖視差：image-wrap 已 overflow:hidden，img 位移時不會溢出 */

/* Reduced motion + mobile：JS 已禁用視差邏輯
   這裡 CSS 兜底，確保即使 JS 失效也不出現殘留 transform/will-change */
@media (prefers-reduced-motion: reduce) {
  [data-parallax-speed] {
    transform: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 768px) {
  [data-parallax-speed] {
    transform: none !important;
    will-change: auto !important;
  }
}

/* ============================================================
   Section 0: Header / Nav
   Figma node 222:520 — padding 30/40/20/40, transparent over hero
   ============================================================ */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  width: 100%;
  pointer-events: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 30px var(--sp-xl) var(--sp-md);
  pointer-events: auto;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  flex-shrink: 0;
}

.site-logo__img {
  width: 180px;
  height: auto;
  /* logo.svg uses CSS var(--fill-0, white) — keeps white over hero; aspect 4.17:1 (250x60) */
}

.site-nav__list {
  display: none;
  flex: 1 0 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-xl);
}

.site-nav__link {
  font-family: var(--font-serif);
  font-size: var(--fs-h6);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  letter-spacing: var(--ls-medium);
  white-space: nowrap;
  padding: 5px;
  display: inline-block;
  position: relative;
  transition: opacity 0.2s ease;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 1px;
  background: var(--color-white);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
}

/* ----- Hamburger toggle — Figma node 21:441「Menu」8 variants（兩頁共用）-----
   default = 2 條平行線（16px gap, 置中），closed = 兩線旋轉成 X。
   - Device：desktop 視覺 40px / mobile 28px，皆以 44px 觸控區包覆（WCAG 2.5.5）。
   - Inverted：用 currentColor 一套切色 — 預設白（home hero 深底=Inverted true），
     splash 白底覆寫為深綠（Inverted false）。不做兩份 markup。
   - 線寬 1px（Figma h-0 + inset -1px），X 端點掃到 box 邊角（desktop scaleX 1.068）。 */
.site-nav__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;                 /* Figma default 兩線間距 */
  width: 44px;               /* 觸控區 ≥44px（視覺線寬另控） */
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  color: var(--color-white); /* Inverted=true（home hero 深底）；currentColor 驅動 bar */
  z-index: calc(var(--z-nav) + 10);
}

/* splash 白底 header → Inverted=false：深綠線 */
.splash__header .site-nav__toggle {
  color: var(--color-brand-green);
}

/* focus-visible — home hero（深底）toggle 用白 outline，對比足夠；
   splash（白底）由 base.css :focus-visible 的綠 outline 接手，不覆寫。
   用 .site-header 限定範圍，splash 的 .splash__header 不受波及。 */
.site-header .site-nav__toggle:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

.site-nav__bar {
  display: block;
  width: 40px;               /* Figma desktop box 寬 */
  height: 1px;               /* Figma h-0 + 1px stroke */
  background: currentColor;
  transform-origin: center;
  transition: transform 0.25s ease-in-out;
}

/* closed（X）— Desktop：兩線回到中心（gap 由 16px 收為 0）並旋轉 ±20.56°；
   scaleX 1.068 讓 40px 線伸長到 42.72px，端點掃到 box 邊角（與 Figma 一致）。 */
.site-nav__toggle[aria-expanded="true"] .site-nav__bar--1 {
  transform: translateY(8.5px) rotate(20.56deg) scaleX(1.068);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__bar--2 {
  transform: translateY(-8.5px) rotate(-20.56deg) scaleX(1.068);
}

/* Drawer Backdrop — 深綠 0.6 半透明 */
.site-nav__menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(53, 85, 59, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: calc(var(--z-nav) + 1);
}

.site-nav__menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer 本體 — 從右滑入 400px / mobile 100vw */
.site-nav__menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: calc(var(--z-nav) + 5);
  padding: 80px 40px 40px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.site-nav__menu.is-open {
  transform: translateX(0);
}

.site-nav__menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: none;
  color: var(--color-brand-green);
  cursor: pointer;
  padding: 8px;
  line-height: 0;
}

.site-nav__menu-close:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 2px;
}

.site-nav__menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.site-nav__menu-item {
  border-bottom: 1px solid rgba(53, 85, 59, 0.15);
}

.site-nav__menu-item:last-child {
  border-bottom: none;
}

.site-nav__menu-link {
  display: block;
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--color-brand-green);
  text-decoration: none;
  padding: 20px;
  letter-spacing: 1.2px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease,
              transform 0.5s ease,
              color 0.3s ease,
              background 0.3s ease;
}

.site-nav__menu.is-open .site-nav__menu-link {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger fade-in：80ms 間距，起跳延遲 200ms（drawer 滑入過半） */
.site-nav__menu.is-open .site-nav__menu-item:nth-child(1) .site-nav__menu-link { transition-delay: 200ms; }
.site-nav__menu.is-open .site-nav__menu-item:nth-child(2) .site-nav__menu-link { transition-delay: 280ms; }
.site-nav__menu.is-open .site-nav__menu-item:nth-child(3) .site-nav__menu-link { transition-delay: 360ms; }
.site-nav__menu.is-open .site-nav__menu-item:nth-child(4) .site-nav__menu-link { transition-delay: 440ms; }
.site-nav__menu.is-open .site-nav__menu-item:nth-child(5) .site-nav__menu-link { transition-delay: 520ms; }

.site-nav__menu-link:hover,
.site-nav__menu-link:focus-visible {
  color: var(--color-spring-green);
  background: var(--color-bg-light);
  outline: none;
}

/* Drawer social icons — footer outline 風格（白底 drawer 反色：深綠邊 + 深綠 svg）；兩頁共用 */
.site-nav__menu-social {
  margin-top: 40px;
  padding: 24px 20px 0;
  border-top: 1px solid rgba(53, 85, 59, 0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.site-nav__menu.is-open .site-nav__menu-social {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 600ms;
}

.site-nav__menu-social-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12px;
  color: var(--color-spring-green);
}

.site-nav__menu-social-icons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.site-nav__menu-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-brand-green);
  background: transparent;
  color: var(--color-brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.site-nav__menu-social-icon:hover,
.site-nav__menu-social-icon:focus-visible {
  opacity: 0.7;
  transform: translateY(-2px);
  outline: none;
}

/* ============================================================
   Section 1: HERO
   Figma node 222:521 — 1920×897px, bg image, vertical title bottom-right
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;  /* iOS Safari 17+ small viewport height（避 URL bar 抽屜效應） */
  overflow: hidden;
  background-color: var(--color-brand-green);  /* fallback while img loads */
  background-image: url("../images/hero-bg.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* 視差：JS 動態調整 background-position（見 js/main.js data-parallax-bg） */
}

.hero__title-group {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  top: 52%;             /* Figma 897px 設計中 464/897 ≈ 51.7%，改百分比相對 viewport 維持比例 */
  right: 89px;
  z-index: 3;           /* 文字在雲 (z:2) 之上 */
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.08));
}

/* ----- Hero clouds — 緩緩飄入 + 浮動 loop + scroll parallax (r37) -----
   分層：wrapper 接 JS parallax (translate3d Y) / img 接 CSS animation (translateX + float)
   兩層 transform 各自獨立，瀏覽器合成時 wrapper transform 影響子座標系，img 在子座標系內疊加 */
.hero__cloud-wrap {
  position: absolute;
  width: 640px;
  pointer-events: none;
  z-index: 2;           /* 在 hero 背景之上、hero__title-group (z:3) 與 site-header (z-nav:100) 之下 */
  will-change: transform;
}

.hero__cloud-wrap--1 {
  left: calc(-5vw - 40px);  /* r26: 再左移 40px（原 -5vw / r11.1 註解保留脈絡） */
  top: 14%;
}

.hero__cloud-wrap--2 {
  right: -5vw;          /* r11.1: 部分溢出右緣，視覺更靠邊（原 10vw） */
  top: 6%;
}

.hero__cloud {
  width: 100%;          /* 跟著 wrapper size 走 */
  height: auto;
  display: block;
  opacity: 0;
  will-change: transform, opacity;
}

.hero__cloud--1 {
  transform: translateX(-120%);
  animation:
    cloud-drift-in-left 10s 0.5s ease-out forwards,
    cloud-float 24s 10.5s ease-in-out infinite alternate;
}

.hero__cloud--2 {
  transform: translateX(120%);
  filter: blur(0.5px);  /* r11.2: 柔化跟 cloude1.svg 走（左右對調後 cloude1 在右） */
  animation:
    cloud-drift-in-right-soft 12s 1s ease-out forwards,
    cloud-float-reverse 28s 13s ease-in-out infinite alternate;
}

@keyframes cloud-drift-in-left {
  to {
    transform: translateX(0);
    opacity: 1;  /* SVG 內建已有 opacity 0.4 + 漸層 → CSS 不再疊加透明 */
  }
}

@keyframes cloud-drift-in-right {
  to {
    transform: translateX(0);
    opacity: 1;  /* SVG 內建已有 fill-opacity 0.4 + 漸層 → CSS 不再疊加透明 */
  }
}

/* r11.2: cloude1 獨立 keyframe（額外疊 35% 透明降低雜訊感）；左右對調後 cloude1 在右側 */
@keyframes cloud-drift-in-right-soft {
  to {
    transform: translateX(0);
    opacity: 0.65;
  }
}

@keyframes cloud-float {
  from { transform: translateX(0); }
  to   { transform: translateX(15px); }
}

@keyframes cloud-float-reverse {
  from { transform: translateX(0); }
  to   { transform: translateX(-15px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cloud {
    animation: none !important;
    transform: translateX(0) !important;
    opacity: 1;  /* SVG 內建透明度為準 */
  }
}

/* 主標：直排 (vertical-rl)，H4 token responsive 20/22/26/32
   width: 1em → 自動 = 當前 font-size（單字元寬），height auto = 字數自然撐開
   letter-spacing/line-height 用相對單位，跨斷點自動跟隨字級 */
.hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--color-white);
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: 1em;
  height: auto;
  flex-shrink: 0;
  margin: 0;
}

/* 副標 wrapper：56×122 撐出旋轉後文字所佔空間 */
.hero__subtitle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 122px;
  flex-shrink: 0;
}

/* 副標：橫排英文 + transform: rotate(90deg) 順時鐘旋轉 90 度
   r15.3 用戶拍板：橫著打字再旋轉，不是 vertical-rl upright */
.hero__subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 350;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-white);
  white-space: nowrap;
  transform: rotate(90deg);
  transform-origin: center center;
  margin: 0;
}

.hero__subtitle-spacer,
.hero__subtitle-text {
  display: block;
}

/* ============================================================
   Section 2: About — 在這裡，你可以只是存在
   Figma node 239:751 — 1920×1144px
   r15 deep-figma rewrite: 完整對齊 Figma Frame 3485 結構
   5 直行（由右至左閱讀）：
     #1 heading + eyebrow（Frame 3489 並排）/ #2-4 body 1-3 / #5 CTA
   ============================================================ */

.about {
  position: relative;
  width: 100%;
  padding: var(--sp-section) 0;
  background: var(--color-white);
  overflow: hidden;
}

.about__decoration {
  position: absolute;
  left: -331px;
  top: 814px;
  width: 1489px;
  height: 349px;
  pointer-events: none;
  z-index: 0;
}

/* Frame 3484 — outer container, flex items-start, padding 0 40 */
.about__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--sp-xl);            /* 40px */
}

/* Frame 18 (.about__left) — flex-col items-end, py 40 px 100, gap 40, max-w 1240 */
.about__left {
  flex: 1 0 0;
  max-width: var(--max-w-content);    /* 1240px */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-xl);                  /* 40px */
  padding: var(--sp-xl) var(--sp-3xl); /* 40 100 */
  align-self: stretch;
}

/* Frame 3485 — 主水平 row：左 Frame 3487 / 右 Frame 3489, gap 80 */
/* 但 Figma 中 Frame 3485 與 heading-group 並列在 about__left 內部，
   實際上 about__left flex-col 子層是 [text-block(含 CTA+3body), heading-group]
   不對！重看 Figma：Frame 3485 內含 Frame 3487 + Frame 3489，所以 about__left 只有「一個 row 子層 = Frame 3485」+ 加 layout 撐起 max-w 與 align-end。
   調整：about__left 子層 = .about__main-row（內含 text-block + heading-group）
   但為了少包一層，將 about__left 直接當 Frame 3485（gap 80, row）。
*/

/* 直接讓 about__left 對應 Frame 3485 角色：水平 row, gap 與 text-block 同 → 5 直行均勻 */
.about__left {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--sp-md);                  /* r15.2: 80px→20px，與 text-block 同 gap，5 直行均勻緊湊 */
}

/* Frame 3487 — 左大區塊：CTA + 三段 body, row, gap 20, h-full, items-start */
.about__text-block {
  display: flex;
  flex-direction: row;
  gap: var(--sp-md);                  /* 20px */
  align-items: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  margin-right: auto;                 /* r15-7: text-block(含 CTA) 推到 about__left 容器最左，heading-group 留右 */
}

/* Frame 3490 — CTA wrapper, flex-col gap 10, h-full items-start justify-end */
.about__cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-end;          /* CTA 推到底部 */
  align-self: stretch;
  flex-shrink: 0;
}

/* Component 2 — CTA pill button */
.about__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 190px;
  border: 1px solid var(--color-spring-green);
  border-radius: var(--r-pill);       /* 16px */
  background: linear-gradient(to bottom, var(--color-white) 83.663%, var(--color-divider-gray));
  overflow: hidden;
  padding: 32px 0;                    /* 縮 15% from --sp-xl (40 0) */
  flex-shrink: 0;
}

.about__cta-text-wrap {
  display: flex;
  width: 26px;
  height: 142px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about__cta-text {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: 16px;                    /* Figma H6 但 CTA 內標 16 */
  line-height: 22px;                  /* Figma h:22 */
  letter-spacing: 0.96px;             /* Figma tracking 0.96 */
  color: var(--color-brand-green);
  white-space: nowrap;
  transform: rotate(90deg);
}

/* body 1/2/3 — vertical-rl + upright，font 17, lh 19, ls 0 */
.about__body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-v-body);        /* token 1441+ = 17 */
  color: var(--color-brand-green);
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: 20px;
  line-height: 1.12;                  /* Figma 19/17 ≈ 1.118 */
  letter-spacing: 0.1em;              /* Figma r15-6 = 10% */
  margin: 0;
  flex-shrink: 0;
}

/* Frame 3489 — heading + eyebrow 並排, items-start, h-full */
.about__heading-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;                             /* Figma heading w:38 + eyebrow x:64 → gap ≈ 26 但兩者邊界相鄰，視覺上無 gap */
  align-self: stretch;
  flex-shrink: 0;
  margin-left: 100px;                 /* r15.4: heading 左邊空間 +100px，拉開與 body1 距離 */
}

/* heading 「在這裡，你可以」「只是存在」— vertical-rl upright, font 32, lh 1.2
   兩行 span 在 vertical-rl 模式下 block-axis 為水平 → 兩行水平並排
   不設 width，讓內容自然撐開（Figma w:38 是單行寬，雙行並排需 ~76px） */
.about__heading {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);            /* token 1441+ = 32 */
  color: var(--color-brand-green);
  letter-spacing: 1px;                /* Figma H4 ls 1 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.2;                   /* Figma 120% */
  margin: 0;
  flex-shrink: 0;
}

/* r15.2: .about__heading-line 結構已移除（heading 改回單一文字節點，vertical-rl 自然單列直排 9 字） */

/* eyebrow wrapper — 26×146 含 rotate(90) 的橫排文字 */
.about__eyebrow-wrap {
  display: flex;
  width: 26px;
  height: 146px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about__eyebrow {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: 16px;                    /* Figma 內標 16 */
  line-height: 22px;                  /* Figma 120% */
  letter-spacing: 0.02em;             /* r15.3: rotate(90) 模式下橫向字距，輕微疏化 */
  color: var(--color-brand-green);    /* Figma color #35553B（不是 spring green） */
  white-space: nowrap;
  margin: 0;
  transform: rotate(90deg);
  transform-origin: center center;
  /* r15.3 用戶拍板：橫著打字再旋轉 90 度，不是 vertical-rl upright */
}

/* Frame 3488 — about__right, 904×904 fixed at 1920 */
.about__right {
  position: relative;
  flex-shrink: 0;
  width: 904px;
  height: 904px;
}

.about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* r21.1 kaneyama mimic: 載入後緩慢 zoom-in fade-in 進場
     從 scale(1.12) opacity 0 → scale(1) opacity 1，2.4s ease-out
     非 scroll 觸發，純載入動畫，質感為「逐漸顯現」不是視差 */
  animation: about-zoom-in 2.4s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes about-zoom-in {
  from {
    transform: scale(1.12);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about__image {
    animation: none;
  }
}

/* r15.2: .about__image-overlay 漸層底色已移除（用戶 r4.1 明確要求） */

/* ============================================================
   Section 3: Photo Strip — 5 張水平輪播
   Figma node 251:488 — 1920×675px, gap 80, alternating offset 50px top
   Desktop: 左右箭頭控制水平 scroll；Mobile: 觸控滑動（箭頭隱藏）
   ============================================================ */

.photo-strip {
  width: 100%;
  padding: var(--sp-section) 0;
  background: var(--color-white);
  overflow: hidden;
}

.photo-strip__wrapper {
  position: relative;
  width: 100%;
}

.photo-strip__track {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2xl);
  padding: 0 var(--sp-xl);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--sp-xl);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.photo-strip__track::-webkit-scrollbar {
  display: none;
}

.photo-strip__track:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: -2px;
}

.photo-strip__item {
  flex-shrink: 0;
  width: 480px;
  aspect-ratio: 793 / 636;
  overflow: hidden;
  scroll-snap-align: start;
  /* margin-top 隨 .is-flipped toggle 平滑變化（高低位互換動畫） */
  transition: margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.photo-strip__item--offset {
  margin-top: 50px;
}

/* 翻轉狀態：奇數（--offset）變高位、偶數變低位
   每次點 carousel 箭頭 toggle .is-flipped，CSS transition 處理平滑動畫 */
.photo-strip__track.is-flipped .photo-strip__item--offset {
  margin-top: 0;
}

.photo-strip__track.is-flipped .photo-strip__item:not(.photo-strip__item--offset) {
  margin-top: 50px;
}

/* prefers-reduced-motion：禁用高低位 transition，瞬間切換 */
@media (prefers-reduced-motion: reduce) {
  .photo-strip__item {
    transition: none;
  }
}

.photo-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 左右箭頭按鈕 */
.photo-strip__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--r-circle);
  background: var(--color-white);
  color: var(--color-brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  z-index: 2;
}

.photo-strip__nav:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.photo-strip__nav:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 2px;
}

.photo-strip__nav[disabled] {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

.photo-strip__nav--prev {
  left: 24px;
}

.photo-strip__nav--next {
  right: 24px;
}

/* ============================================================
   Section 4: 最新動態
   Figma node 222:524 — 1920×875px, bg-light, 3 cards
   ============================================================ */

.news {
  width: 100%;
  padding: var(--sp-section) var(--sp-xl);  /* r22.2: 加回左右 40px padding，卡片不再貼邊 */
  background: var(--color-bg-light);
}

.news__heading-group {
  text-align: center;
  margin-bottom: var(--sp-xl);
  max-width: 1280px;                       /* r22.2: heading 與 list 同寬，居中對齊 */
  margin-left: auto;
  margin-right: auto;
}

.news__eyebrow {
  font-family: var(--font-serif);
  font-size: var(--fs-h6);
  font-weight: var(--fw-regular);
  color: var(--color-spring-green);
  letter-spacing: var(--ls-medium);
  margin-bottom: var(--sp-sm);
}

.news__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  font-weight: var(--fw-regular);
  color: var(--color-spring-green);
  letter-spacing: var(--ls-loose);
}

.news__list {
  /* r22.2: 取消滿版，恢復居中 max-width 1280，左右由 .news padding 40px 留白 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: var(--sp-xl);                       /* r22.2: 卡間 40px，視覺更寬鬆 */
  padding: var(--sp-xl) 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  list-style: none;
}

.news__list > li {
  display: flex;
  min-width: 0;                            /* r22: grid 子層防 1fr 被內容撐爆 */
}

/* r39: 三張卡片下方 CTA「所有消息 →」
   風格參照 .access__cta，但需 inline-flex + 容器內居中（margin auto + width fit-content）
   .news 為 padding section、非 flex，故走「block 容器 + width fit-content + margin auto」居中 */
.news__more {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 60px auto 0;
  padding-block: 12px;                     /* 觸控區補足 */
  font-family: var(--font-serif);
  font-size: var(--fs-h6);
  font-weight: var(--fw-regular);
  color: var(--color-brand-green);
  letter-spacing: var(--ls-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--color-brand-green);
  transition: gap var(--motion-duration-fast) var(--motion-ease),
              opacity var(--motion-duration-fast) var(--motion-ease);
}

.news__more-arrow {
  flex-shrink: 0;
  transition: transform var(--motion-duration-fast) var(--motion-ease);
}

.news__more:hover {
  opacity: 0.75;
  gap: 16px;
}

.news__more:hover .news__more-arrow {
  transform: translateX(4px);
}

.news__more:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 4px;
}

.article-card {
  position: relative;
  width: 100%;                             /* r22: 填滿 grid cell（原 450px fixed） */
  max-width: none;
  /* r38.1: 移除 min-height: 600px — 改由 image aspect 3:2 + body 內容自然撐高，避免卡底大片空白 */
  background: var(--color-white);
  border: 1px solid var(--color-brand-green);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.article-card:hover {
  box-shadow: 0 8px 24px rgba(53, 85, 59, 0.12);
  transform: translateY(-2px);
}

.article-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-card__image-wrap {
  position: relative;
  width: 100%;
  flex: 0 0 auto;                          /* r38: 不再吃剩餘空間，改由 aspect-ratio 決高 */
  aspect-ratio: 3 / 2;                     /* r38: 橫向 3:2，寬 3 高 2 */
  overflow: hidden;
  background: var(--color-bg-light);
}

/* r38.2: 視差防露邊偏移 — img data-parallax-speed=35，IntersectionObserver rootMargin 100px
   讓 progress 實測可達 ±1.14 → translateY 上限約 ±40px。
   → 圖高度 +100px、top -50px 預留上下各 50px 緩衝，避免 wrap 米色背景露出。 */
.article-card__image-wrap img {
  width: 100%;
  height: calc(100% + 100px);
  top: -50px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.article-card:hover .article-card__image-wrap img {
  transform: scale(1.03);
}

.article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-lg);
}

.article-card__date {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-brand-green);
  letter-spacing: var(--ls-tiny);
  filter: drop-shadow(var(--shadow-meta-soft));
}

.article-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  font-weight: var(--fw-regular);
  color: var(--color-brand-green);
  letter-spacing: var(--ls-loose);
  line-height: 1.4;
  /* r38.1: 1 行 clamp → 2 行 clamp，避免「關於身心科的第一次：你…」截斷 */
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-card__corner {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

/* ============================================================
   Section 5: Divider
   Figma node 278:1149 — 1920×67px, two triangles下沉
   ============================================================ */

.divider {
  width: 100%;
  background: var(--color-bg-light);
  line-height: 0;
}

.divider__img {
  display: block;
  width: 100%;
  height: 67px;
  /* svg fill is grey-light; sits between bg-light news section and white access section */
}

/* ============================================================
   Section 6: 找到我們
   Figma node 275:787 — 1920×720px, image-left + info-right
   ============================================================ */

.access {
  width: 100%;
  padding: var(--sp-section-lg) var(--sp-xl);
  background: var(--color-white);
}

.access__container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--sp-3xl);
  max-width: 1240px;
  margin: 0 auto;
}

.access__image-wrap {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.access__image {
  width: 100%;
  max-width: 595px;
  aspect-ratio: 595 / 420;
  object-fit: cover;
  display: block;
}

.access__info {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-md);
  padding: var(--sp-xl) 0;
}

.access__eyebrow {
  font-family: var(--font-serif);
  font-size: var(--fs-h6);
  font-weight: var(--fw-regular);
  color: var(--color-spring-green);
  letter-spacing: var(--ls-medium);
  white-space: nowrap;
}

.access__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  font-weight: var(--fw-regular);
  color: var(--color-spring-green);
  letter-spacing: var(--ls-loose);
  white-space: nowrap;
}

.access__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  width: 100%;
}

.access__item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-family: var(--font-serif);
  font-size: var(--fs-h6);
  font-weight: var(--fw-regular);
  color: var(--color-spring-green);
  letter-spacing: var(--ls-medium);
  line-height: 1.6;
}

.access__item:last-of-type {
  gap: var(--sp-xs);
}

.access__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.access__link-plain {
  color: inherit;
  transition: opacity 0.2s ease;
}

.access__link-plain:hover {
  opacity: 0.7;
}

.access__cta {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  color: var(--color-spring-green);
  letter-spacing: var(--ls-medium);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding-block: 15px;       /* 補足 44px 觸控 */
  margin-top: var(--sp-md);
  transition: opacity 0.2s ease;
}

.access__cta:hover {
  opacity: 0.7;
}

/* ============================================================
   Section 7: Footer
   Figma node 222:536 — 1920×604px, brand-green bg
   ============================================================ */

.site-footer {
  width: 100%;
  /* v3: 上方大留白 120px、無 padding-bottom（由 deco Section C pb-6 撐）
     左右 padding 改由內部 Section 各自處理（Section A/B = 0 80px、Section C 全寬鋪滿） */
  padding: var(--sp-section) 0 0;
  background: var(--color-brand-green);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  min-height: 500px;
}

.site-footer__top {
  display: flex;
  align-items: stretch;        /* 讓右欄 column flex 能 100% 拉到容器底，配合 justify-between */
  gap: var(--sp-xl);
  width: 100%;
  min-height: 296px;
  padding: 0 var(--sp-2xl);    /* v3: Section A 左右 80px */
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* v3: items-start，logo 與 social 列左對齊 */
  justify-content: flex-start; /* logo 在上、social 在下，固定間距 40px */
  gap: var(--sp-xl);
  flex-shrink: 0;              /* v3: 左欄固定寬不膨脹 */
}

.site-footer__logo {
  display: flex;
  align-items: center;
  height: 60px;
}

.site-footer__logo-img {
  width: 250px;
  height: auto;
  aspect-ratio: 250 / 60;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.site-footer__follow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  letter-spacing: var(--ls-tiny);
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-circle);
  border: 1px solid var(--color-white);
  background: transparent;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.site-footer__social-link:hover {
  opacity: 0.7;
}

.site-footer__social-link svg {
  display: block;
}

/* v3: 右欄 column flex + justify-between
   Nav 列靠頂 / 回頂按鈕靠底，上下分離（不是 row 並排） */
.site-footer__nav-group {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  gap: var(--sp-md);
}

.site-footer__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
}

/* Nav link: 左→右滑入底線 hover 動畫
   - position: relative 容器 + ::after 絕對定位線條
   - left: -60px → 0 滑入（width 60px、高 1px、白色） */
.site-footer__nav-link {
  font-family: var(--font-serif);
  font-size: var(--fs-h6);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  letter-spacing: var(--ls-medium);
  padding: 5px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.site-footer__nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -60px;
  width: 60px;
  height: 1px;
  background: var(--color-white);
  transition: left 0.3s var(--motion-ease);
}

.site-footer__nav-link:hover::after,
.site-footer__nav-link:focus-visible::after {
  left: 0;
}

.back-to-top {
  width: 48px;
  height: 48px;
  border-radius: var(--r-circle);
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.back-to-top img {
  width: 16px;
  height: 16px;
}

.site-footer__bottom {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-xl);
  width: 100%;
  padding: 0 var(--sp-2xl);    /* v3: Section B 左右 80px */
  color: var(--color-white);
}

.site-footer__copyright {
  flex: 1 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-footer-copy);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caption);
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
}

.site-footer__legal a {
  font-family: var(--font-sans);
  font-size: var(--fs-footer-link);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.site-footer__legal a:hover {
  opacity: 0.7;
}

/* ----- Footer decoration: 3 條純白實心橫線（r25-2 — 漸縮間距 26/18 中心距）----- */
.site-footer__decoration {
  padding: 24px 0 6px;
  width: 100%;
}

.site-footer__deco-line {
  display: block;
  width: 100%;
  height: 7px;
  background: #FFFFFF;
  margin-bottom: 0;
}

.site-footer__deco-line:nth-child(1) {
  margin-bottom: 23px;
}

.site-footer__deco-line:nth-child(2) {
  margin-bottom: 15px;
}

.site-footer__deco-line:nth-child(3) {
  margin-bottom: 3px;
}

/* ============================================================
   RWD breakpoints — mobile-first not applicable here
   Source design 1920px → scale down at each breakpoint
   ============================================================ */

/* ----- Large desktop ≤ 1440px ----- */
@media (max-width: 1440px) {
  .site-nav {
    padding: 30px var(--sp-xl) 20px;  /* 左右 40px 對稱，避免 logo 緊貼左緣 */
  }

  .about__container {
    padding: 0 32px;
  }

  .about__left {
    padding: var(--sp-xl) var(--sp-2xl);
    gap: 16px;                          /* r15.2: 60→16，與 text-block 同 gap，5 直行均勻 */
  }

  .about__text-block {
    gap: 16px;                          /* 1440 縮 20→16 */
  }

  .about__heading {
    width: 32px;
    font-size: 26px;                    /* token h4 1025-1440 = 26 */
  }

  .about__right {
    width: 700px;
    height: 700px;
  }

  .photo-strip__track {
    gap: 48px;
    padding: 0 32px;
  }

  .photo-strip__item {
    width: 360px;
  }

  /* News cards — r22.2: base max-width 1280 + 左右 padding，此區縮 gap 避免 1280-1024 過擠 */
  .news__list {
    gap: var(--sp-md);
  }

  .article-card {
    min-width: 0;
    max-width: none;
  }

  .access__container {
    max-width: 1280px;
    gap: 60px;
  }
}

/* ----- Tablet ≤ 1024px ----- */
@media (max-width: 1024px) {
  .hero {
    min-height: 720px;
    background-position: center;
  }

  .hero__title-group {
    top: 56%;             /* 漸進規律 52→56→60→65：1024 段承接 base 52%，下移 4% 對應 min-height 720 (≈403px) */
    right: 5%;
  }

  .hero__cloud-wrap {
    width: 480px;
  }

  .about__container {
    padding: 0 24px;
  }

  .about__left {
    padding: var(--sp-md) var(--sp-xl);
    gap: 14px;                          /* r15.2: 40→14，與 text-block 同 gap，5 直行均勻 */
  }

  .about__text-block {
    gap: 14px;
  }

  .about__heading {
    width: 28px;
    font-size: 22px;                    /* token h4 769-1024 = 22 */
  }

  .about__right {
    width: 480px;
    height: 480px;
  }

  .photo-strip__track {
    gap: 32px;
  }

  .photo-strip__item {
    width: 360px;
  }

  /* r22.2: tablet ≤1024 維持 3 欄，gap 再縮一級避免擠卡 */
  .news__list {
    gap: var(--sp-sm);
  }

  .article-card {
    min-width: 0;
    max-width: none;
  }

  .access__container {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xl);
  }

  .access__image-wrap {
    width: 100%;
  }

  .access__info {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .access__list {
    align-items: center;
  }

  .access__item {
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
  }
}

/* ----- Tablet ≤ 768px ----- */
@media (max-width: 768px) {
  :root {
    --sp-section: 80px;
    --sp-section-lg: 100px;
  }

  .site-nav {
    padding: 20px var(--sp-md) var(--sp-md);
  }

  .site-logo__img {
    width: 180px;
    height: 26px;
  }

  .site-nav__list {
    gap: var(--sp-md);
  }

  .hero {
    min-height: 600px;
    background-position: center;
    /* mobile 視差由 JS 自行 skip（isMobile / isTabletOrSmaller 守門） */
  }

  .hero__title-group {
    top: 60%;             /* 漸進規律 52→56→60→65：768 段承接 1024 56%，下移 4% 對應 min-height 600 (≈360px)，避開縮窄後雲層擠壓 */
    right: 24px;
  }

  .hero__cloud-wrap {
    width: 320px;
  }

  /* mobile 動畫縮短：drift-in 6/8s + float 20/24s
     r11.1: mobile 雲僅 320px，-5vw 過頭會看不到 → 改 left/right: 0 貼邊
     r37: position 屬性遷移到 wrapper，animation 仍在 img */
  .hero__cloud-wrap--1 {
    left: 0;
  }

  .hero__cloud-wrap--2 {
    right: 0;
  }

  .hero__cloud--1 {
    animation:
      cloud-drift-in-left 6s 0.5s ease-out forwards,
      cloud-float 20s 6.5s ease-in-out infinite alternate;
  }

  .hero__cloud--2 {
    animation:
      cloud-drift-in-right-soft 8s 1s ease-out forwards,
      cloud-float-reverse 24s 9s ease-in-out infinite alternate;
  }

  /* About mobile：5 直行 → 改為 column stack（image 在上、heading 與 body 在下、CTA 最下） */
  .about__container {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xl);
  }

  .about__left {
    /* r22.x: column-reverse 讓 heading-group 在 text-block 之上，
       配合內部 heading-group / text-block 各自的 column-reverse，
       視覺序：eyebrow → heading → body1 → body2 → body3 → CTA
       Desktop 用 vertical-rl 直書由右到左閱讀，HTML source 維持反序不動。 */
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--sp-md);
    gap: var(--sp-lg);
  }

  .about__heading-group {
    flex-direction: column-reverse;        /* eyebrow 在上、heading 在下 */
    align-items: center;
    gap: var(--sp-sm);
    align-self: auto;
    margin-left: 0;                        /* r15.4: mobile column stack 取消 desktop 的 100px 推移，保持置中 */
  }

  .about__heading {
    writing-mode: horizontal-tb;
    width: auto;
    text-align: center;
    line-height: 1.4;
    font-size: var(--fs-h4);              /* mobile token 20 */
  }

  .about__eyebrow-wrap {
    width: auto;
    height: auto;
  }

  .about__eyebrow {
    transform: none;                      /* r15.3: mobile 取消 rotate，回橫排 */
    text-align: center;
    color: var(--color-spring-green);     /* mobile 用 spring green 與 about__eyebrow 統一風格 */
  }

  .about__text-block {
    flex-direction: column-reverse;       /* body 由上而下：body1 → body2 → body3 → CTA */
    align-items: center;
    width: 100%;
    gap: var(--sp-md);
    align-self: auto;
  }

  .about__body {
    writing-mode: horizontal-tb;
    width: 100%;
    max-width: 36ch;
    text-align: center;
    line-height: 1.7;
    letter-spacing: 0.1em;
  }

  .about__cta-wrap {
    align-items: center;
    justify-content: center;
    align-self: auto;
  }

  .about__cta {
    width: auto;
    min-width: 150px;
    height: 48px;
    padding: 16px 32px;               /* 縮 15% from --sp-md --sp-xl (20 40) */
    flex-direction: row;
  }

  .about__cta-text-wrap {
    width: auto;
    height: auto;
  }

  .about__cta-text {
    transform: none;
  }

  .about__right {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    height: auto;
  }

  /* Photo Strip → horizontal scroll on mobile，箭頭隱藏改用觸控滑動 */
  .photo-strip {
    padding: var(--sp-section) 0;
  }

  .photo-strip__nav {
    display: none;
  }

  .photo-strip__track {
    scroll-padding-left: var(--sp-md);
    padding: 0 var(--sp-md);
    gap: var(--sp-md);
  }

  .photo-strip__item {
    width: 300px;
    margin-top: 0;
  }

  .photo-strip__item--offset {
    margin-top: 0;
  }

  /* mobile 已 stack 無高低錯落，翻轉狀態也禁用（避免 desktop 翻轉後縮窗殘留位移） */
  .photo-strip__track.is-flipped .photo-strip__item,
  .photo-strip__track.is-flipped .photo-strip__item--offset,
  .photo-strip__track.is-flipped .photo-strip__item:not(.photo-strip__item--offset) {
    margin-top: 0;
  }

  /* News cards → single column (r22: grid 改 1fr，padding 加回左右安全邊) */
  .news {
    padding: var(--sp-section) var(--sp-md);
  }

  .news__heading-group {
    padding: 0 var(--sp-md);
  }

  .news__list {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }

  .news__more {
    margin-top: 40px;
    font-size: 14px;
  }

  .article-card {
    width: 100%;
    min-width: 0;
  }

  /* Access */
  .access {
    padding: var(--sp-section-lg) var(--sp-md);
  }

  .access__container {
    gap: var(--sp-xl);
  }

  /* Footer (mobile)
     desktop: padding: 120px 0 0; Section A/B 各自 0 80px、Section C 全寬
     mobile: 上下大留白縮減、左右 padding 改 var(--sp-md) 避免 375 撐爆 */
  .site-footer {
    padding: var(--sp-2xl) 0 0;
  }

  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-xl);
    min-height: 0;
    padding: 0 var(--sp-md);   /* 左右 20 取代 desktop 80 */
  }

  .site-footer__nav-group {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--sp-md);
  }

  .site-footer__nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-md);
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: var(--sp-md);
    padding: 0 var(--sp-md);   /* 左右 20 取代 desktop 80 */
  }

  .site-footer__legal {
    gap: var(--sp-md);
  }
}

/* ----- Phone ≤ 480px ----- */
@media (max-width: 480px) {
  .hero {
    min-height: 500px;
  }

  .hero__title {
    font-size: var(--fs-h6);
  }

  .hero__title-group {
    top: 65%;             /* 漸進規律 52→56→60→65：480 段最終位置，min-height 500 → 標題 325px，留上方海面/雲層空間，避免標題貼近 76px nav */
    right: 16px;
    gap: 8px;
  }

  /* Mobile nav — row layout 維持單行（logo + toggle）
     桌面連結 .site-nav__list 在 base 已 display:none，由 hamburger drawer 接管，
     原 column stack 為歷史殘留，於 2026-05-25 移除（375 viewport 寬度足夠：
     padding 20 + logo 160 + gap 8 + toggle 44 + padding 20 = 252px）。
     padding 縮為 --sp-sm (8px) 將 nav 總高度從 92px → 76px（logo 60 + padding 8*2）。 */
  .site-nav {
    padding: var(--sp-sm) var(--sp-md);
  }

  .site-logo__img {
    width: 160px;
    height: auto;
  }

  .site-nav__list {
    width: 100%;
    justify-content: flex-start;
    gap: var(--sp-md);
  }

  .site-nav__link {
    font-size: var(--fs-caption);
    padding: 4px 0;
  }

  /* font-size 全交由 :root responsive token：
     ≤480 使用 Mobile 階（H4 20 / H5 20 / H6 16），與 token 表一致
     舊版 hardcode (20/18/18) 已移除 */
}

/* ============================================================
   Micro-motion: 全站微動態
   - Part A: Hero page load 進場（CSS animation 錯時）
   - Part B: scroll-triggered fade-in (data-fade-in + JS IO)
   - Part C: hover 微動態升級（既有 transition 改用 motion tokens）
   - Part D: prefers-reduced-motion fallback
   ============================================================ */

/* ----- Part A: Hero 進場 -----
   logo / nav 用 translateY + opacity；
   hero__title 用 opacity-only（writing-mode: vertical-rl + 已 z-index 疊層，避免 transform 衝突）；
   hero__subtitle-wrapper 用 opacity-only（子元素 .hero__subtitle 已用 transform: rotate(90deg)，wrapper 層只動 opacity 避免衝突） */
@keyframes hero-fade-in-translate {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-fade-in-opacity {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.site-logo {
  animation: hero-fade-in-translate var(--motion-duration-page) 0.2s var(--motion-ease) both;
}

.site-nav__list {
  animation: hero-fade-in-translate var(--motion-duration-page) 0.4s var(--motion-ease) both;
}

.hero__title {
  animation: hero-fade-in-opacity var(--motion-duration-page) 0.7s var(--motion-ease) both;
}

.hero__subtitle-wrapper {
  animation: hero-fade-in-opacity var(--motion-duration-page) 0.9s var(--motion-ease) both;
}

/* ----- Part B: scroll-triggered fade-in ----- */
[data-fade-in] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--motion-duration-slow) var(--motion-ease),
              transform var(--motion-duration-slow) var(--motion-ease);
  will-change: opacity, transform;
}

[data-fade-in].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* fade-in 完成後解除 will-change，避免長期佔 GPU layer
   transitionend 沒辦法用 CSS 偵測，改用 .is-visible 持續 + 動畫播完即視為穩定 */
[data-fade-in].is-visible {
  will-change: auto;
}

/* delay 變體（data attribute 控制起算時點，整齊錯時不雜亂） */
[data-fade-delay="100"].is-visible { transition-delay: 100ms; }
[data-fade-delay="200"].is-visible { transition-delay: 200ms; }
[data-fade-delay="300"].is-visible { transition-delay: 300ms; }
[data-fade-delay="400"].is-visible { transition-delay: 400ms; }
[data-fade-delay="500"].is-visible { transition-delay: 500ms; }
[data-fade-delay="600"].is-visible { transition-delay: 600ms; }

/* 視差元素 fade-in 衝突處理：
   parallax 動 transform.translateY，fade-in 也動 transform.translateY，
   IO 觸發 is-visible 後 transition 結束會 reset 為 translateY(0)，
   parallax JS 之後接管 inline style 覆蓋 — 進場期間視差會被 fade-in transform 蓋過 0.9s，
   結束後正常。為避免進場那一瞬間「跳一下」視差量，
   含 data-parallax-speed 的 fade-in 元素改用 opacity-only（無 transform）。 */
[data-fade-in][data-parallax-speed] {
  transform: none;
}

[data-fade-in][data-parallax-speed].is-visible {
  transform: none;
}

/* ----- Part C: hover 微動態升級（既有 transition 改用 motion tokens） ----- */

/* 文章卡片 — 既有 -2px / scale 1.03 升級為 -4px / scale 1.05，配 spring-green 邊 */
.article-card {
  transition: transform var(--motion-duration-base) var(--motion-ease),
              border-color var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-spring-green);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

.article-card__image-wrap img {
  /* r21.1 kaneyama mimic: 更慢更明顯的 hover zoom，cubic-bezier(0.22, 1, 0.36, 1) 為 kaneyama 風 ease */
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.article-card:hover .article-card__image-wrap img {
  /* r21.1 kaneyama mimic: hover scale 1.08（r22.1 已移除偏移，圖片 100% 滿版） */
  transform: scale(1.08);
}

/* Carousel 按鈕：升級為 motion-duration-fast + motion-ease */
.photo-strip__nav {
  transition: transform var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease),
              opacity var(--motion-duration-fast) var(--motion-ease);
}

.photo-strip__nav:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Nav links — 既有 opacity 升級 timing */
.site-nav__link {
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  opacity: 0.7;
}

/* Logo hover（首頁 + footer） */
.site-logo,
.site-footer__logo {
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.site-logo:hover,
.site-footer__logo:hover {
  opacity: 0.85;
}

/* About CTA — 既有 -2px 升級為 box-shadow only（CTA 已 rotate(90deg) 容器，
   transform 動會疊到內部 about__cta-text rotate(90) 反向，故 hover 只動 shadow 較穩） */
.about__cta {
  transition: box-shadow var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}

.about__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Access CTA「聯繫我們 →」timing 升級 */
.access__cta {
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.access__cta:hover {
  opacity: 0.7;
}

/* Access 純文字連結 timing 升級 */
.access__link-plain {
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

/* Footer social / legal hover timing 升級
   (nav-link 已在自己規則內定義 transition；底線動畫由 ::after 處理) */
.site-footer__social-link,
.site-footer__legal a {
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

/* Back-to-top — 既有 -2px / box-shadow 升級 timing */
.back-to-top {
  transition: transform var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease);
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   Noise-load 底片沖洗顯影特效（r34-1 — natural develop）
   - 目標：about__right / photo-strip__item / article-card__image-wrap / access__image-wrap
   - 機制：圖片本身階段過渡（blur+contrast+brightness+saturate → 清晰）
           + ::after SVG fractalNoise overlay 用 mix-blend-mode: overlay 與圖融合
   - 時長：圖片 filter 1.8s（慢顯影感）/ overlay 1.5s（先消雜訊）
   - reduced-motion：直接顯示，無 overlay / 無 blur
   ============================================================ */
.noise-load {
  position: relative;
  isolation: isolate;  /* 隔離 ::after stacking，避免穿透到外層元素 */
  overflow: hidden;
}

.noise-load img {
  /* 圖片本身：過曝模糊去飽和 → 清晰（底片顯影感） */
  filter: blur(12px) contrast(1.4) brightness(1.2) saturate(0.3);
  transition: filter 1.8s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: filter;
  position: relative;
  z-index: 0;
}

.noise-load.is-loaded img {
  filter: blur(0) contrast(1) brightness(1) saturate(1);
  will-change: auto;
}

.noise-load::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(128, 128, 128, 0.5);
  filter: url(#noise-load-filter);
  mix-blend-mode: overlay;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.5s cubic-bezier(0.2, 0.6, 0.2, 1);
  z-index: 1;
  will-change: opacity;
}

.noise-load.is-loaded::after {
  opacity: 0;
  will-change: auto;
}

/* ----- Part D: prefers-reduced-motion 完整 fallback ----- */
@media (prefers-reduced-motion: reduce) {
  /* noise-load 直接顯示：無 overlay、無 blur */
  .noise-load img {
    filter: none !important;
    transition: none !important;
  }
  .noise-load::after {
    opacity: 0 !important;
    transition: none !important;
  }

  /* fade-in 立刻可見、禁 transition */
  [data-fade-in] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Hero 進場禁用 animation，立刻顯示 */
  .site-logo,
  .site-nav__list,
  .hero__title,
  .hero__subtitle-wrapper {
    animation: none !important;
    opacity: 1 !important;
  }

  /* hover transform 禁用，保留 opacity 變化 */
  .article-card:hover,
  .article-card:hover .article-card__image-wrap img,
  .photo-strip__nav:hover,
  .about__cta:hover,
  .back-to-top:hover {
    transform: none !important;
  }

  /* photo-strip__nav hover 保留 translateY(-50%) 定位（非 hover 動效，是基準位置） */
  .photo-strip__nav:hover {
    transform: translateY(-50%) !important;
  }

  /* Lightbox 動畫 fallback：直接 show/hide */
  .lightbox,
  .lightbox__img,
  .lightbox__close,
  .lightbox__nav {
    transition: none !important;
  }
  .lightbox__nav:hover:not(:disabled) {
    transform: translateY(-50%) !important;
  }
}

/* ============================================================
   Lightbox — Photo Strip 點擊全螢幕檢視
   ============================================================ */

/* photo-strip 圖片可點擊樣式 */
.photo-strip__item img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;  /* r29: 高於 splash(9999)，splash 開啟時也能蓋過 */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s var(--motion-ease);
}

.lightbox__img.is-fading {
  opacity: 0;
}

.lightbox__caption {
  color: #fff;
  text-align: center;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 90vw;
}

.lightbox__counter {
  opacity: 0.7;
  font-size: 12px;
}

.lightbox__alt {
  opacity: 0.85;
  line-height: 1.5;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-brand-green);
  border: none;
  border-radius: 999px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease),
              opacity var(--motion-duration-fast) var(--motion-ease);
  z-index: 2;
}

.lightbox__close {
  top: 32px;
  right: 32px;
}

.lightbox__close:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--prev { left: 32px; }
.lightbox__nav--next { right: 32px; }

.lightbox__nav:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.lightbox__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* body 開啟時鎖捲 */
.body--lightbox-open {
  overflow: hidden;
}

/* RWD */
@media (max-width: 768px) {
  .lightbox__close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
  .lightbox__nav--prev { left: 12px; }
  .lightbox__nav--next { right: 12px; }
  .lightbox__img { max-height: 75vh; }
  .lightbox__caption { font-size: 13px; }
}

/* ============================================================
   BlurText — 標題進場動畫（vanilla 改寫自 React Bits BlurText）
   - 每字/詞包 .blur-text__span，JS 加 .is-in 觸發
   - 三階段 keyframe：blur 10→5→0、opacity 0→.5→1、translateY -50→5→0
   - hero__title (vertical-rl) 加 .blur-text--vertical 變體
   - prefers-reduced-motion 直接顯示
   ============================================================ */
.blur-text__span {
  display: inline-block;
  filter: blur(10px);
  opacity: 0;
  transform: translateY(-50px);
  will-change: filter, opacity, transform;
}

/* vertical-rl 直排（hero__title / about__heading）：
   span 維持 inline-block（繼承基礎規則），writing-mode 自動由上而下排字。
   不可改 display: block — 會破壞 vertical-rl 的字符排列邏輯導致橫排。
   translateY 仍是 viewport-relative，視覺上每字從上方落下。 */

@keyframes blur-text-in {
  0%   { filter: blur(10px); opacity: 0;   transform: translateY(-50px); }
  50%  { filter: blur(5px);  opacity: 0.5; transform: translateY(5px); }
  100% { filter: blur(0);    opacity: 1;   transform: translateY(0); }
}

.blur-text__span.is-in {
  animation: blur-text-in 0.7s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

/* hero__title 套 BlurText 時，停用原本的容器級 hero-fade-in-opacity 動畫
   （否則容器整體 0.7s 後才顯示，BlurText span 被遮住失效） */
.hero__title.blur-text {
  animation: none;
  opacity: 1;
}

/* BlurText 完成後解除 will-change，避免長期佔 GPU layer */
.blur-text__span.is-in {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .blur-text__span {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ============================================================
   SPLASH 進入頁（r29 — dc-kishimoto.jp 風格改版）
   - 全螢幕白底 + 上 logo/hamburger + 中 垂直長條照片
   - 7 條照片直立排列（0° 無旋轉），edge-to-edge 填滿視窗
   - 進場 stagger fade-up（左→右逐條 80ms）
   - hover 微縮放 + 微亮（不做 invert X 光特效，用戶明確不要）
   - 點擊照片 → lightbox（共用 #photoLightbox）
   - 底部「進入網站」膠囊按鈕，點擊後 splash 淡出 + 上滑離場
   ============================================================ */

body.has-splash {
  overflow: hidden;
}

.splash {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 40px;
  transition: opacity 0.8s var(--motion-ease);
  overflow: hidden;
}

.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.splash__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.splash__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.splash__logo-img {
  width: 180px;
  height: auto;
  /* logo.svg 全 fill="white"，splash 白底需反色為深綠 */
  filter: brightness(0) saturate(100%) invert(28%) sepia(15%) saturate(800%) hue-rotate(80deg);
}

/* ============================================================
   r44 (revised) — dc-kishimoto 風格水平輪播
   - edge-to-edge 垂直長條（0° rotation、無 shadow、無 border-radius）
   - 14px gap、padding 14px、寬 182px、高 560px（撐滿視口高度）
   - 進場 stagger fade-up（每張 80ms 錯開）
   - wheel hijack 由 JS rAF lerp 控制位移（spring 回彈）
   ============================================================ */
.splash__photos {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  margin: 24px 0;
  overflow: hidden;       /* 邊緣裁切，輪播進出不外溢 */
}

.splash__strips {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.splash__strips-track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0 14px;
  height: 560px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  /* 不設 CSS transition — 由 JS rAF lerp 控制位移以實現 spring 物理觀感 */
  user-select: none;
}

.splash__strip {
  flex-shrink: 0;
  width: 182px;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--color-bg-light);
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  animation: splash-strip-in 0.7s var(--motion-ease) forwards;
  animation-delay: calc(var(--strip-index, 0) * 80ms + 100ms);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.4s var(--motion-ease);
  will-change: transform, opacity, filter, width;
}

/* r45 — 手風琴展開：點任一條展開放大，其他縮窄推開 */
.splash__strips-track.has-expanded .splash__strip:not(.is-expanded) {
  width: 80px;
  filter: brightness(0.7);
}

.splash__strip.is-expanded {
  width: 700px;
  cursor: zoom-out;
  z-index: 5;
  filter: brightness(1);
}

.splash__strip.is-expanded img {
  transform: scale(1);   /* 取消 hover 縮放疊加 */
}

/* 展開狀態下，未展開的兄弟 hover 不再放大（只暗化） */
.splash__strips-track.has-expanded .splash__strip:not(.is-expanded):hover {
  transform: none;
  filter: brightness(0.85);
}

.splash__strips-track.has-expanded .splash__strip:not(.is-expanded):hover img {
  transform: none;
}

.splash__strip:nth-child(1) { --strip-index: 0; }
.splash__strip:nth-child(2) { --strip-index: 1; }
.splash__strip:nth-child(3) { --strip-index: 2; }
.splash__strip:nth-child(4) { --strip-index: 3; }
.splash__strip:nth-child(5) { --strip-index: 4; }
.splash__strip:nth-child(6) { --strip-index: 5; }
.splash__strip:nth-child(7) { --strip-index: 6; }
.splash__strip:nth-child(8) { --strip-index: 7; }
.splash__strip:nth-child(9) { --strip-index: 8; }
.splash__strip:nth-child(10) { --strip-index: 9; }
.splash__strip:nth-child(11) { --strip-index: 10; }
.splash__strip:nth-child(12) { --strip-index: 11; }
.splash__strip:nth-child(13) { --strip-index: 12; }

.splash__strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;   /* 避免 img 攔截 wheel/drag 事件 */
  transition: transform 0.6s var(--motion-ease);
}

/* Desktop hover affordance — 微亮提示「可點」，touch device 不觸發避免 sticky hover */
@media (hover: hover) {
  .splash__strip:not(.is-expanded):hover {
    filter: brightness(1.08);
  }
}

.splash__strip:hover img {
  transform: scale(1.04);
}

.splash__strip.is-near {
  filter: brightness(1.04);
}

@keyframes splash-strip-in {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 左右切換箭頭 */
.splash__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  color: var(--color-brand-green);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: transform var(--motion-duration-fast, 200ms) var(--motion-ease, ease),
              box-shadow var(--motion-duration-fast, 200ms) var(--motion-ease, ease);
}

.splash__nav:hover,
.splash__nav:focus-visible {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  outline: none;
}

.splash__nav--prev { left: 32px; }
.splash__nav--next { right: 32px; }

.splash__enter {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border: 1.5px solid var(--color-spring-green);
  border-radius: var(--r-circle);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-brand-green);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: var(--fw-regular);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease);
}

.splash__enter:hover,
.splash__enter:focus-visible {
  background: var(--color-bg-light);
  transform: scale(1.05);
  outline: none;
  box-shadow: 0 4px 16px rgba(53, 85, 59, 0.18);
}

/* RWD — dc-kishimoto edge-to-edge：縮 strip 不改 gap 比例 */
@media (max-width: 1024px) {
  .splash__strips-track {
    height: 460px;
    gap: 12px;
    padding: 0 12px;
  }
  .splash__strip {
    width: 150px;
  }
  .splash__strip.is-expanded { width: 560px; }
  .splash__strips-track.has-expanded .splash__strip:not(.is-expanded) { width: 60px; }
}

@media (max-width: 768px) {
  .splash {
    padding: 20px;
  }
  .splash__logo-img { width: 140px; }
  .splash__strips-track {
    height: 360px;
    gap: 10px;
    padding: 0 10px;
  }
  .splash__strip {
    width: 120px;
  }
  .splash__strip.is-expanded { width: 380px; }
  .splash__strips-track.has-expanded .splash__strip:not(.is-expanded) { width: 40px; }
  .splash__nav {
    width: 40px;
    height: 40px;
  }
  .splash__nav--prev { left: 12px; }
  .splash__nav--next { right: 12px; }
  .splash__enter {
    padding: 12px 24px;
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .splash__strips-track {
    height: 320px;
    gap: 8px;
    padding: 0 8px;
  }
  .splash__strip {
    width: 100px;
  }
  .splash__strip.is-expanded { width: 300px; }
  .splash__strips-track.has-expanded .splash__strip:not(.is-expanded) { width: 36px; }
}

@media (max-width: 400px) {
  .splash__strips-track {
    height: 280px;
    gap: 6px;
    padding: 0 6px;
  }
  .splash__strip {
    width: 88px;
  }
  .splash__strip.is-expanded { width: 240px; }
  .splash__strips-track.has-expanded .splash__strip:not(.is-expanded) { width: 32px; }
}

/* prefers-reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .splash__strip {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .splash__strip:hover {
    filter: none;
  }
  .splash__strip:hover img {
    transform: none;
  }
}

/* ============================================================
   r35 — 7 刻度進度條（splash 底部）
   - 7 條垂直細線水平排列 + 中央當前 active 變方框
   - 點任一條 → 切到對應 strip 並進入展開動畫（觸發既有 focusStrip）
   - 框內顯示「N / 7」
   ============================================================ */
.splash__progress {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 20px;
  margin-top: 8px;
}

.splash__progress-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.splash__progress-tick {
  width: 2px;
  height: 18px;
  background: var(--color-brand-green);
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  border-radius: 1px;
  transition: width var(--motion-duration-base) var(--motion-ease),
              height var(--motion-duration-base) var(--motion-ease),
              background var(--motion-duration-fast) var(--motion-ease),
              border-radius var(--motion-duration-base) var(--motion-ease),
              opacity var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--motion-ease);
}

.splash__progress-tick:hover {
  opacity: 1;
  transform: scaleY(1.15);
}

.splash__progress-tick:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 4px;
  opacity: 1;
}

.splash__progress-tick.is-active {
  width: 36px;
  height: 26px;
  background: transparent;
  border: 1.5px solid var(--color-brand-green);
  border-radius: 4px;
  opacity: 1;
  cursor: default;
  transform: none;
}

.splash__progress-tick.is-active:hover {
  transform: none;
}

.splash__progress-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;                                 /* counter ↔ caption 之間留白 */
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--color-brand-green);
  letter-spacing: 1px;
  max-width: 90vw;                           /* 防 caption 過長撐爆容器 */
}

/* counter 群組（5 / 13）— 保留原本 6px gap 與 baseline 對齊 */
.splash__progress-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;                            /* 計數器寬度固定，caption 先讓位 */
}

.splash__progress-current {
  font-weight: var(--fw-medium);
  min-width: 1.2em;
  text-align: right;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.splash__progress-separator {
  opacity: 0.45;
}

.splash__progress-total {
  opacity: 0.7;
}

/* caption「作品名 — 作者」— 跟著 slide 切換 */
.splash__progress-caption {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  opacity: 0.78;
  min-width: 0;                              /* 允許 inline-flex 子層 ellipsis */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

/* JS 切換時短暫淡出 → 換字後解 class 淡回 */
.splash__progress-caption.is-switching {
  opacity: 0;
}

.splash__progress-title {
  font-weight: var(--fw-regular);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.splash__progress-byline {
  opacity: 0.55;
  flex-shrink: 0;
}

.splash__progress-author {
  font-style: italic;
  opacity: 0.9;
  flex-shrink: 0;
}

/* RWD — Tablet & below */
@media (max-width: 768px) {
  .splash__progress {
    gap: 8px;
    padding: 8px 0 12px;
  }
  .splash__progress-track {
    gap: 8px;
  }
  .splash__progress-tick {
    height: 14px;
  }
  .splash__progress-tick.is-active {
    width: 28px;
    height: 20px;
  }
  .splash__progress-meta {
    font-size: 12px;
    gap: 10px;
  }
  .splash__progress-caption {
    max-width: 60vw;
  }
}

/* r44: 13 張全可滑輪播 — Mobile 縮小 tick 間距而非隱藏（避免進度資訊失準） */
@media (max-width: 600px) {
  .splash__progress-track {
    gap: 6px;
  }
  .splash__progress-tick {
    width: 1.5px;
    height: 12px;
  }
  .splash__progress-tick.is-active {
    width: 22px;
    height: 16px;
  }
  .splash__progress-meta {
    font-size: 11px;
    gap: 8px;
    letter-spacing: 0.5px;
  }
  .splash__progress-caption {
    max-width: 55vw;
  }
}

@media (max-width: 400px) {
  .splash__progress-track {
    gap: 4px;
  }
  .splash__progress-tick {
    height: 10px;
  }
  .splash__progress-meta {
    font-size: 10px;
    gap: 6px;
  }
  .splash__progress-caption {
    max-width: 50vw;
  }
  /* 極窄寬度隱藏 byline dash，留下「作品名 作者」緊湊呈現 */
  .splash__progress-byline {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash {
    transition: opacity 0.01s, transform 0.01s;
  }
  .splash__strip {
    transition: transform 0.01s, filter 0.01s, box-shadow 0.01s;
    animation: none;
    opacity: 1;
    transform: rotate(var(--rot, 0deg));
  }
  .splash__strip:hover {
    transform: rotate(var(--rot, 0deg));
  }
  .splash__strips-track {
    /* reduced motion 下 JS rAF 仍跑，但無視覺平滑期望 — 用戶端 OS 設定主導 */
  }
  .splash__nav {
    transition: transform 0.01s, box-shadow 0.01s, opacity 0.01s;
  }
  .splash__progress-tick {
    transition: background 0.01s, opacity 0.01s;
  }
  .splash__progress-caption {
    transition: opacity 0.01s;
  }
}

/* Site nav drawer menu — RWD（兩頁共用） */
@media (max-width: 768px) {
  .site-nav__menu {
    width: 100vw;
    padding: 80px 24px 32px;
  }
  .site-nav__menu-link {
    font-size: 22px;
    padding: 18px 16px;
  }
  .site-nav__menu-social-icon {
    width: 36px;
    height: 36px;
  }

  /* Menu icon Mobile variant（Figma 21:454/21:460）— 視覺 28px，觸控區維持 44px。
     closed：rotate ±28.18° + skewX ±13.47° + scaleY 0.97 + scaleX 1.134（28→31.765px）。 */
  .site-nav__bar {
    width: 28px;
  }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar--1 {
    transform: translateY(8.5px) rotate(28.18deg) skewX(13.47deg) scale(1.134, 0.97);
  }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar--2 {
    transform: translateY(-8.5px) rotate(-28.18deg) skewX(-13.47deg) scale(1.134, 0.97);
  }
}

/* Site nav drawer menu — Reduced motion（兩頁共用） */
@media (prefers-reduced-motion: reduce) {
  .site-nav__menu,
  .site-nav__menu-link,
  .site-nav__bar,
  .site-nav__menu-backdrop,
  .site-nav__menu-social {
    transition: opacity 0.01s !important;
  }
  .site-nav__menu.is-open .site-nav__menu-link,
  .site-nav__menu.is-open .site-nav__menu-social {
    transition-delay: 0ms !important;
    transform: none !important;
  }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar--1,
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar--2 {
    transform: none !important;
  }
}

/* ============================================================
   Desktop nav — 修復回歸（≥1024px）
   base 規則 .site-nav__list{display:none} 在所有寬度藏住桌面 nav，
   全份 CSS 原本無 min-width query 把它顯示回來 → 桌面看不到 3 按鈕。
   此規則放在檔案最末：與 base / hero-fade-in 的 .site-nav__list 規則
   specificity 相同（單一 class），靠源順序在後勝出，不需 !important。
   邊界：既有 mobile nav display 規則落在 max-width 768/480，無 max-width 1024，
   故恰好 1024px 時只有本 min-width:1024 規則生效 = 乾淨桌面態。
   .site-nav__link 顏色為 var(--color-white)，在 hero 深底上對比足夠，無需補色。
   ============================================================ */
@media (min-width: 1024px) {
  .site-nav__list {
    display: flex;          /* 對齊既有 base 定義的 flex 行為（flex-1 + justify-end + gap） */
  }

  .site-nav__toggle {
    display: none;          /* 桌面隱藏漢堡，改用橫向 nav */
  }
}