/* ============================================================
   wedding-kit 共用婚紗照版式｜gallery-layouts.css
   ------------------------------------------------------------
   契約（2026-08-20 立）：
   - `config.gallery.layout` 由 render.js 經 WK.galleryLayout() 解析後，把
     `data-wk-gallery="<id>"` 掛在 <section id="gallery"> 上。
   - **屬性只在「非原生 shared 版式」時存在**：缺 key／""／髒值／等於本模板原生 id
     一律不掛 ⇒ 本檔一條規則都選不到 ⇒ 四模板原生 CSS/JS 一字不動。
     這是「已發布舊帖零視覺改變」的機械保證，任何新規則都必須落在
     `#gallery[data-wk-gallery…]` 之內，絕不可寫裸選擇器。
   - 特異度：`#gallery[data-wk-gallery] .photo-item` ＝ (1,2,0)，天然壓過四模板
     原生的 `.photo-item…` class 規則（含 `html.fx .photo-item.reveal` 的 (0,3,1)）。
     本檔在各模板 style.css **之後**載入（四份 index.html head）。

   結構：①token 掛鉤 → ②中和層 → ③grid → ④polaroid → ⑤hscroll → ⑥hanging
        → ⑦filmstrip → ⑧framed → ⑨RM／fx 相容
   ============================================================ */


/* ============ ① token 掛鉤層 ============
   只用四模板都有或有 fallback 的 token（--accent／--ink／--paper-raise／--hairline／
   --radius／--shadow-soft／--ease-out／--dur 全在 shared/base.css :root，editorial 直接
   吃預設、其餘三套各自覆寫）。
   ⚠ 預設值一律寫在 `:root` (0,1,0)，模板微調寫在自己 style.css 的
     `#gallery[data-wk-gallery]` (1,1,0)——特異度高才蓋得過，**不能靠載入順序**
     （本檔比模板 style.css 晚載，同特異度會反過來蓋掉模板的覆寫）。 */
:root {
  --gl-line-color:   var(--accent, #3f4d3a);                    /* 吊線／掛節點 */
  --gl-frame-line:   var(--hairline, rgba(34, 39, 31, .14));    /* 裱框細邊 */
  --gl-frame-bg:     var(--paper-raise, #fdfcfa);               /* 相框底 */
  --gl-frame-shadow: var(--shadow-soft, 0 18px 44px -20px rgba(0, 0, 0, .3));
  --gl-tape-rgb:     236, 226, 206;                             /* 拍立得膠帶 */
  /* 膠卷齒孔：淺底用紙白（深底模板在自己的 style.css 覆寫成夜色，白孔會刺眼） */
  --gl-sprocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='2' width='10' height='6' rx='2' fill='%23f6f5f1'/%3E%3C/svg%3E");
}


/* ============ ② 中和層（本檔的靈魂） ============
   四模板原生 gallery CSS 設定過的屬性**聯集**逐條重置，讓每個版式塊從同一張白紙起跑。
   少中和一條＝某個模板切到某版式時漏出原生殘留（例如星空的星塵中線、雜誌的 Fig. 圖說）。 */

/* 100vw breakout 的收尾：editorial／chinese 靠 body{overflow-x:clip}，
   korean／starlit 的 body 沒有那條——所以由本區塊自己收，且只在有屬性時生效。 */
#gallery[data-wk-gallery] { overflow-x: clip; }

#gallery[data-wk-gallery] .photo-grid {
  position: static;
  display: block;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  grid-template-columns: none;
  gap: 0;
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding: 0;
  overflow-x: visible;
  scroll-snap-type: none;
  overscroll-behavior-x: auto;
  mask-image: none;
  -webkit-mask-image: none;
  counter-reset: none;
  cursor: auto;
  transform: none;
  filter: none;
}
/* 星空的中央星塵虛線（starlit .photo-grid::before）＝模板專屬聲腔，不跟著版式走 */
#gallery[data-wk-gallery] .photo-grid::before,
#gallery[data-wk-gallery] .photo-grid::after {
  content: none;
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  background: none;
}
#gallery[data-wk-gallery] .photo-grid img { -webkit-user-drag: none; user-select: none; }

#gallery[data-wk-gallery] .photo-item {
  position: relative;
  overflow: visible;
  counter-increment: none;
  margin: 0;
  width: auto;
  flex: 0 1 auto;
  grid-column: auto;
  aspect-ratio: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  touch-action: auto;
  cursor: auto;
  scroll-snap-align: none;
  filter: none;
}
/* 雜誌 Fig. 圖說（editorial ::after）、中式掛畫吊線（chinese ::before/::after）、
   星空掛繩星節點（starlit ::before/::after）：全部歸零，要的版式自己長回來。
   ⚠ 只寫 `content: none` 不夠——版式塊把 content 開回來的那一刻，原生的
     top／translate／width／height／background 會整包跟著復活（實測：starlit × filmstrip
     的邊印被原生星節點的 `top:-1.35rem; width:6px` 拉到片頭上方、擠成三行）。
     幾何與皮相一起中和，版式塊才是從白紙開始畫。 */
#gallery[data-wk-gallery] .photo-item::before,
#gallery[data-wk-gallery] .photo-item::after {
  content: none;
  position: static;
  inset: auto;
  translate: none;
  transform: none;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
}

#gallery[data-wk-gallery] .photo-item img {
  display: block;
  width: 100%;
  height: auto;                /* editorial 的 `html.fx .photo-item img{height:114%}` 視差鉤讓位 */
  aspect-ratio: auto;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  filter: none;
  cursor: pointer;             /* 五版式都可點開燈箱 */
  /* ⚠ padding／background 是 2026-08-22（P2-24 簡約策展）補的：那一套的原生 framed
     把「細墨框＋寬卡紙」做在 <img> 本身而不是 .photo-item 上（展籤必須落在框「外面」
     的牆上，做在 figure 上 figcaption 會被關進卡紙裡）。少這兩條＝exhibit 切到別的
     版式時每張照片都還帶著一圈白卡紙與墨框。 */
  padding: 0;
  background: none;
  box-shadow: none;
  transition: none;
}

/* 模板專屬的相簿附屬節點：預設收起，要的版式自己開回來 */
#gallery[data-wk-gallery] .pol-caption,
#gallery[data-wk-gallery] .pol-note,
#gallery[data-wk-gallery] .scroll-hint,
#gallery[data-wk-gallery] .scroll-seal,
#gallery[data-wk-gallery] .frame-caption { display: none; }

/* .reveal 進場：恢復 base.css 的 CSS 過場語意。
   korean 的 `.photo-item{transition:box-shadow}` 與 chinese 的 hover transition
   都會蓋掉 base 的 .reveal transition，這裡明確寫回來。 */
#gallery[data-wk-gallery] .photo-item.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur, .9s) var(--ease-out, ease),
              transform var(--dur, .9s) var(--ease-out, ease);
  filter: none;
}
#gallery[data-wk-gallery] .photo-item.reveal.is-in { opacity: 1; transform: none; }

/* ⚠ 白屏地雷的成對讓位（本檔最重要的一段）：
   korean style.css 與 starlit style.css 都有 `html.fx .photo-item.reveal{opacity:0}`
   ——那是「等 GSAP 點燈／飄落把它顯影」的前置隱藏態。切到 shared 版式後 fx.js 的
   相簿段被 gate 掉（沒有人來顯影），若不成對讓位＝賓客頁相簿整區永遠隱形。
   這裡把 opacity 交回 .reveal/.is-in 機制（transform 不碰——碰了會蓋掉 polaroid 的
   rotate，那條的特異度比這裡低）。 */
html.fx #gallery[data-wk-gallery] .photo-item.reveal { opacity: 0; }
html.fx #gallery[data-wk-gallery] .photo-item.reveal.is-in { opacity: 1; }

/* 原生 hover 效果（chinese 的 translateY(-4px)、korean/starlit 的光暈、editorial 的
   saturate）全部讓位，各版式自己決定。polaroid 的 `.reveal.is-in` (1,4,0) 比這裡的
   (1,3,0) 高，所以傾斜角在 hover 時不會被 transform:none 打平。 */
@media (hover: hover) {
  #gallery[data-wk-gallery] .photo-item:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
  }
  #gallery[data-wk-gallery] .photo-item:hover img { filter: none; }
}


/* ============ ③ grid — 編輯網格（雜誌 12 欄交錯＋滿版跨頁） ============
   通用化：不帶 Fig. 圖說（雜誌聲腔）、不帶 fx 視差鉤。 */
#gallery[data-wk-gallery="grid"] .photo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: start;
}
#gallery[data-wk-gallery="grid"] .photo-item {
  overflow: hidden;
  border-radius: calc(var(--radius, 1rem) * .5);
}
#gallery[data-wk-gallery="grid"] .photo-item img { height: 100%; }

/* 手機（單欄基準）：寬窄交錯，每第 4 張滿版跨頁 */
#gallery[data-wk-gallery="grid"] .photo-item:nth-child(4n+1) { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
#gallery[data-wk-gallery="grid"] .photo-item:nth-child(4n+2) { grid-column: 1 / 9;  aspect-ratio: 3 / 4; }
#gallery[data-wk-gallery="grid"] .photo-item:nth-child(4n+3) { grid-column: 5 / -1; aspect-ratio: 3 / 4; margin-top: -14%; }
#gallery[data-wk-gallery="grid"] .photo-item:nth-child(4n) {
  grid-column: 1 / -1;
  width: 100vw;
  margin-inline: calc(50% - 50vw);  /* 滿版跨頁（水平溢出由 ② 的 overflow-x: clip 收尾） */
  aspect-ratio: 16 / 10;
  border-radius: 0;
}
@media (min-width: 900px) {
  #gallery[data-wk-gallery="grid"] .photo-item:nth-child(4n+1) { grid-column: 1 / 8;  aspect-ratio: 4 / 5; }
  #gallery[data-wk-gallery="grid"] .photo-item:nth-child(4n+2) { grid-column: 8 / 13; aspect-ratio: 3 / 4; margin-top: clamp(3rem, 9vw, 6rem); }
  #gallery[data-wk-gallery="grid"] .photo-item:nth-child(4n+3) { grid-column: 3 / 11; aspect-ratio: 16 / 9; margin-top: 0; }
  #gallery[data-wk-gallery="grid"] .photo-item:nth-child(4n)   { aspect-ratio: 21 / 10; }
}


/* ============ ④ polaroid — 拍立得散落桌面 ============
   白框是**物件本色**（實體拍立得就是白的），不吃模板 token；註記字色同理寫死，
   否則星空的淺色 --ink-soft 落在白框上會看不見。 */
#gallery[data-wk-gallery="polaroid"] .photo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.25rem 1.4rem;
  padding-top: .75rem;
}
#gallery[data-wk-gallery="polaroid"] .photo-item {
  --tilt: -2.4deg;
  width: min(44%, 15rem);
  background: #fff;
  padding: .55rem .55rem 2.5rem;
  border-radius: 2px;
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .42);
  touch-action: pan-y;              /* 垂直滑＝原生捲頁；水平起手才進拖曳 */
  cursor: grab;
  transform: rotate(var(--tilt));
}
/* 拖曳中：抬升＋陰影加深（WK.initPolaroidDrag 掛 class） */
#gallery[data-wk-gallery="polaroid"] .photo-item.is-lifted {
  z-index: 5;
  box-shadow: 0 28px 54px -22px rgba(0, 0, 0, .55);
  cursor: grabbing;
}
#gallery[data-wk-gallery="polaroid"] .photo-item:nth-child(even) { --tilt: 2.3deg; margin-top: 1.6rem; }
#gallery[data-wk-gallery="polaroid"] .photo-item:nth-child(3n)   { --tilt: -1.2deg; }
#gallery[data-wk-gallery="polaroid"] .photo-item:nth-child(4n)   { --tilt: 3deg; }
/* .reveal 與傾斜共存：位移完落回自己的角度 */
#gallery[data-wk-gallery="polaroid"] .photo-item.reveal { transform: translateY(28px) rotate(var(--tilt)); }
#gallery[data-wk-gallery="polaroid"] .photo-item.reveal.is-in { transform: rotate(var(--tilt)); }
#gallery[data-wk-gallery="polaroid"] .photo-item img {
  aspect-ratio: 1 / 1.08;
  border-radius: 1px;
}
/* 膠帶貼角 */
#gallery[data-wk-gallery="polaroid"] .photo-item::before {
  content: "";
  position: absolute;
  top: -.7rem; left: 50%;
  width: 4.2rem; height: 1.35rem;
  background: rgba(var(--gl-tape-rgb, 236, 226, 206), .85);
  transform: translateX(-50%) rotate(-4deg);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .18);
}
#gallery[data-wk-gallery="polaroid"] .photo-item:nth-child(even)::before { transform: translateX(-50%) rotate(3deg); }
/* 手寫註記（render.js 在 resolved === "polaroid" 時才注入 figcaption） */
#gallery[data-wk-gallery="polaroid"] .pol-caption {
  display: block;
  position: absolute;
  left: .6rem; right: .6rem; bottom: .45rem;
  text-align: center;
  font-family: var(--font-script, var(--font-serif-latin, Georgia, serif));
  font-size: 1.12rem;
  line-height: 1.4;
  color: #6b625a;                   /* 白框上的字：寫死暖灰（對比 5.6:1） */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  #gallery[data-wk-gallery="polaroid"] .photo-item:hover { box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .5); }
}
@media (min-width: 900px) {
  #gallery[data-wk-gallery="polaroid"] .photo-item { width: min(28%, 15rem); }
}


/* ============ ⑤ hscroll — 橫向卷軸（裱框如掛畫） ============
   通用化：不帶「橫移賞卷」提示與觀卷印（中式聲腔）。
   桌機滾輪轉橫向＋滑鼠拖曳由 WK.initHscroll 掛（render.js 在 resolved 命中時呼叫）。 */
#gallery[data-wk-gallery="hscroll"] .photo-grid {
  display: flex;
  gap: clamp(1.1rem, 3vw, 2rem);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 2.4rem clamp(1.5rem, 12vw, 10rem) 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* 兩端漸隱：卷軸未展開的部分 */
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
#gallery[data-wk-gallery="hscroll"] .photo-grid::-webkit-scrollbar { display: none; }
#gallery[data-wk-gallery="hscroll"] .photo-grid.is-dragging { scroll-snap-type: none; }
#gallery[data-wk-gallery="hscroll"] .photo-item {
  flex: 0 0 min(74%, 22rem);
  scroll-snap-align: center;
  padding: .55rem;                  /* 裱框的卡紙留白 */
  background: var(--gl-frame-bg, #fff);
  border: 1px solid var(--gl-frame-line, rgba(0, 0, 0, .14));
  /* 圓角刻意收到原生的一半：--radius 在 editorial 是 1.25rem，照抄會變成 app 卡片
     不是掛畫。乘 .5 之後四套模板落在 5–10px，框感才出得來。 */
  border-radius: calc(var(--radius, .8rem) * .5);
  box-shadow: var(--gl-frame-shadow, 0 18px 44px -20px rgba(0, 0, 0, .3));
}
#gallery[data-wk-gallery="hscroll"] .photo-item img {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--gl-frame-line, rgba(0, 0, 0, .14));
  border-radius: calc(var(--radius, .8rem) * .3);
}
@media (hover: hover) and (pointer: fine) {
  #gallery[data-wk-gallery="hscroll"] .photo-grid { cursor: grab; }
  #gallery[data-wk-gallery="hscroll"] .photo-grid.is-dragging { cursor: grabbing; }
}
@media (min-width: 900px) {
  #gallery[data-wk-gallery="hscroll"] .photo-item { flex-basis: min(36%, 24rem); }
}


/* ============ ⑥ hanging — 懸掛相串（縱向 zigzag＋吊線） ============
   通用化：不帶中央星塵中線（星空聲腔）。 */
#gallery[data-wk-gallery="hanging"] .photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.2rem, 6vw, 3rem) clamp(1.1rem, 4vw, 2rem);
  padding-top: 1.4rem;
  max-width: 46rem;
  margin-inline: auto;
}
#gallery[data-wk-gallery="hanging"] .photo-item {
  background: var(--gl-frame-bg, #fff);
  padding: .55rem;
  border-radius: calc(var(--radius, 1rem) * .6);
  box-shadow: var(--gl-frame-shadow, 0 18px 44px -20px rgba(0, 0, 0, .3));
}
/* 交錯下沉：zigzag（375px 也成立） */
#gallery[data-wk-gallery="hanging"] .photo-item:nth-child(even) { margin-top: 2.4rem; }
/* 吊繩＋掛節點：每一框從上方垂下 */
#gallery[data-wk-gallery="hanging"] .photo-item::before {
  content: "";
  position: absolute;
  top: -1.05rem; left: 50%;
  width: 1px; height: 1.05rem;
  background: var(--gl-line-color, currentColor);
  opacity: .55;
}
#gallery[data-wk-gallery="hanging"] .photo-item::after {
  content: "";
  position: absolute;
  top: -1.35rem; left: 50%;
  translate: -50% 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gl-line-color, currentColor);
}
#gallery[data-wk-gallery="hanging"] .photo-item img {
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius, 1rem) * .42);
}
@media (min-width: 900px) {
  #gallery[data-wk-gallery="hanging"] .photo-grid { grid-template-columns: repeat(3, 1fr); }
  /* 三欄時 zigzag 改成 中-低-中 的節奏 */
  #gallery[data-wk-gallery="hanging"] .photo-item:nth-child(even) { margin-top: 0; }
  #gallery[data-wk-gallery="hanging"] .photo-item:nth-child(3n + 2) { margin-top: 2.4rem; }
}


/* ============ ⑦ filmstrip — 電影膠卷（兩排自動輪播，v2 2026-08-20） ============
   v1 是「單排 scroll-snap 手動橫捲」，Jacob preview 實測後三點退回：畫面占比太薄、
   只有一個角度、而且沒有人會主動去捲它。v2 改成**兩排角度略不同、自動慢速對開輪播**。

   DOM 由 `WK.initFilmstrip(grid)` 重組（render 迴圈維持 flat）：
     .photo-grid > .gl-reel[data-gl-row] > .gl-track > figure.photo-item（含 [data-gl-dup] 複製品）

   設計決策（改動前先讀）：
   - **膠卷本體外觀掛在 `.gl-track` 而不是逐格**：片基色＋上下齒孔帶畫在軌道上，帶子才是
     連續不斷的一條；掛在 .photo-item 上會隨每格重畫、齒孔在格與格之間對不齊。
   - **`gap: 0`**：膠卷是連續的帶，格與格之間只有一條 hairline 分隔。
   - **兩排角度不同**（上 -1.6deg／下 1.1deg）＋輕微負 margin ⇒ 交疊的拼貼感。
     `.gl-reel` 寬 112%、左移 6%：旋轉會讓矩形四角內縮，不出血就會在畫面左右緣露出
     背景色的細楔形；溢出由 ② 的 `overflow-x: clip` 收掉。
   - **輪播**：`translateX(0 → var(--gl-shift))`，`--gl-shift` ＝ −100/份數 %，剛好推走
     「一份」的寬度 ⇒ 接回起點時畫面完全一致。上排正向、下排 reverse（對開走）。
     速度＝一份寬 ÷ (張數 × --gl-step)，實測約 30–35px/s（下排慢 15%，避免同步感）。
   - **片基色 `#17130f`／邊印橘 `#d98e2b` 寫死**：那是底片本身的顏色（物件本色），與拍立得
     白框同一個例外原則，不吃模板 token。齒孔色走 `--gl-sprocket`（深底模板自己覆寫成夜色）。
   - **邊印用 `attr(data-gl-frame)` 不用 CSS counter**：counter 會讓複製品接著往下編號，
     循環接回的那一幀同一個位置數字從 12 跳回 01＝穿幫。理由詳見 utils.js initFilmstrip。 */
#gallery[data-wk-gallery="filmstrip"] .photo-grid {
  display: block;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(1.4rem, 5vw, 2.4rem);
  overflow: visible;
  --gl-step: 8s;          /* 每張照片滑過去要幾秒（手機格寬約 278px ⇒ 約 35px/s） */
}
#gallery[data-wk-gallery="filmstrip"] .gl-reel {
  position: relative;
  overflow: hidden;
  width: 112%;
  margin-inline-start: -6%;
  transform: rotate(-1.6deg);
  z-index: 2;             /* ⚠ 上排壓在下排之上：交疊處吃掉的是下排的「齒孔帶」（重複圖樣，
                             少半排看不出來），反過來就會切掉上排的邊印文字＝破圖感 */
}
#gallery[data-wk-gallery="filmstrip"] .gl-reel[data-gl-row="bottom"] {
  transform: rotate(1.1deg);
  margin-top: -.7rem;     /* 兩條帶輕微交疊（別疊到齒孔整條看不見） */
  z-index: 1;
}
#gallery[data-wk-gallery="filmstrip"] .gl-track {
  display: flex;
  gap: 0;
  width: max-content;
  background-color: #17130f;                     /* 片基＝物件本色 */
  background-image: var(--gl-sprocket), var(--gl-sprocket);
  background-repeat: repeat-x, repeat-x;
  background-position: 0 .4rem, 0 calc(100% - 1.6rem);
  will-change: transform;
  animation: gl-roll calc(var(--gl-n, 3) * var(--gl-step, 8s)) linear infinite;
}
#gallery[data-wk-gallery="filmstrip"] .gl-reel[data-gl-row="bottom"] .gl-track {
  animation-direction: reverse;                  /* 下排反向對開 */
  animation-duration: calc(var(--gl-n, 3) * var(--gl-step, 8s) * 1.15);
}
@keyframes gl-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--gl-shift, -50%)); }
}
#gallery[data-wk-gallery="filmstrip"] .photo-item {
  flex: 0 0 auto;
  padding: 1.7rem .45rem;                        /* 上下留齒孔帶與邊印 */
  border-inline: 1px solid rgba(255, 255, 255, .06);  /* 格與格之間的分隔 */
}
#gallery[data-wk-gallery="filmstrip"] .photo-item img {
  height: 11rem;                                 /* 高度定寬（3/2 由 aspect-ratio 推） */
  width: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: sepia(.14) contrast(1.05) saturate(.92);
}
#gallery[data-wk-gallery="filmstrip"] .photo-item::after {
  content: "XT-400  \25B8 " attr(data-gl-frame);
  position: absolute;
  left: .75rem; bottom: .2rem;                   /* 落在下齒孔帶「之下」的那條片基上 */
  font: italic 600 .58rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .18em;
  color: #d98e2b;
  opacity: .85;
  pointer-events: none;
}
/* 桌機停下來看／點燈箱時暫停這一條 */
@media (hover: hover) and (pointer: fine) {
  #gallery[data-wk-gallery="filmstrip"] .gl-reel:hover .gl-track { animation-play-state: paused; }
}
@media (min-width: 900px) {
  #gallery[data-wk-gallery="filmstrip"] .photo-grid { --gl-step: 11s; }  /* 格寬變大 ⇒ 秒數同步拉長，維持約 34px/s */
  #gallery[data-wk-gallery="filmstrip"] .photo-item img { height: 15rem; }
}


/* ============ ⑧ framed — 展牆掛畫（細框＋寬卡紙，2026-08-22 P2-24） ============
   通用化：**不帶展籤**（編號 No.0N 與策展圖說是簡約策展的聲腔，跟著模板不跟著版式走
   ——同 grid 不帶 Fig. 圖說、hscroll 不帶卷末收藏印的既有慣例）。跟著版式走的只有
   「裱框這件事」本身：細框、寬卡紙、下緣加寬。

   與 hscroll（同樣是裱框）的差別，是這個版式存在的理由：
   - hscroll 是**橫向卷軸**、卡紙只有 .55rem，框是為了讓卷軸上的畫有邊界；
   - framed 是**縱向展牆**、卡紙寬到 4.4vw，下緣再加寬一截——寬卡紙才是「美術館裱框」
     的識別特徵，窄邊框讀起來只是「加了外框的照片」。

   ⚠ 框與卡紙做在 <img> 上不是 .photo-item 上：來源模板（wedding-exhibit）的原生版式
     要把展籤放在框「外面」，figure 必須維持透明。這裡沿用同一個結構，中和層②也已經
     把 img 的 padding／background／box-shadow 一起重置過了。 */
#gallery[data-wk-gallery="framed"] .photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 7vw, 3.6rem) clamp(1.5rem, 5vw, 2.6rem);
  max-width: 44rem;
  margin-inline: auto;
}
#gallery[data-wk-gallery="framed"] .photo-item img {
  aspect-ratio: 4 / 5;
  /* 下緣的卡紙比左右寬——裱框的老規矩，視覺重心才不會往下掉 */
  padding: clamp(.7rem, 2.6vw, 1.1rem) clamp(.7rem, 2.6vw, 1.1rem) clamp(1.15rem, 4.4vw, 1.8rem);
  background: var(--gl-frame-bg, #fff);
  border: 1px solid var(--gl-frame-line, rgba(0, 0, 0, .14));
  /* 圓角幾乎收乾淨：畫框是方的（hscroll 用 .5，這裡更硬） */
  border-radius: calc(var(--radius, .8rem) * .2);
  box-shadow: var(--gl-frame-shadow, 0 18px 44px -20px rgba(0, 0, 0, .3));
}
@media (min-width: 560px) {
  #gallery[data-wk-gallery="framed"] .photo-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  #gallery[data-wk-gallery="framed"] .photo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (hover: hover) {
  /* hover 只加深框線，不位移不縮放——牆上的畫是釘死的 */
  #gallery[data-wk-gallery="framed"] .photo-item:hover img {
    border-color: var(--gl-line-color, currentColor);
  }
}


/* ============ ⑨ RM／fx 相容 ============
   - 版式本身零動畫：傾斜、濾鏡、齒孔都是靜態屬性，reduced-motion 下原樣呈現（正確降級）。
   - 進場一律走 base.css 的 `.reveal`（②已寫回 transition），RM 由 base.css 通殺成瞬現。
   - fx 前置隱藏態的讓位在 ② 的 `html.fx …` 兩條，別搬到這裡——那是白屏防護，
     必須跟中和層放在一起，否則後面的版式塊會把它推到不該有的層級。 */
@media (prefers-reduced-motion: reduce) {
  #gallery[data-wk-gallery] .photo-grid { scroll-behavior: auto; }
  /* ⚠ 必須成對抄回 base.css RM 區塊的 `.reveal{opacity:1}`（[base.css:210]）：
     那條的特異度只有 (0,1,0)，蓋不過②中和層的 (1,3,0)，少了這段＝開了「減少動態
     效果」的賓客要一路捲到每張照片進畫面才看得見（原生版式是一進相簿就全亮）。
     2026-08-20 實測：24 格裡 15 格中招，Jacob 手機常年開著 RM。 */
  #gallery[data-wk-gallery] .photo-item.reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  /* 拍立得的傾斜是版面不是動態，RM 下要留著 */
  #gallery[data-wk-gallery="polaroid"] .photo-item.reveal { transform: rotate(var(--tilt)); }

  /* 膠卷：RM 下「刻意照動」（Jacob 2026-08-20 裁定，推翻同日稍早的停播版）——
     慢速等速位移（30–36px/s）屬內容呈現、非進場特效，不動的話這個版式的靈魂就沒了。
     豁免機制＝initFilmstrip 給 .gl-track 掛 .rm-keep，閃過 base.css:214 的通殺；
     這裡不需要任何規則。若未來要恢復 RM 停播版，git log 找本段被刪掉的
     「退回兩排可手動橫滑」規則（commit c507aba）。 */
}