/* ============================================================
   custom-film「夏日場記」｜style.css（2026-10-02 v1）
   視覺系統：
   - 底色是曝光過度的暖白、墨色近黑；唯一強調色＝麥克筆黃（只給手寫註記）；
     影片黑只用在場記板、片尾、RSVP 選角單。
   - 四種字：辰宇落雁體（中文手寫）、Homemade Apple（海報上的細筆英文）、
     Permanent Marker（粗麥克筆）、Space Mono（通告單／片尾／頂欄）；內文 Noto Serif TC。
   - 所有手寫註記（圈、箭頭、勾）都是自繪 SVG path，pathLength="1"，
     用 stroke-dashoffset 做「正在畫」的描繪動畫。
   規則：
   - 動畫的前置隱藏態一律寫在 html.wc（CSS 進場）或 html.fx（GSAP 層）底下，
     預設 CSS 永遠是完成態——preview／爬蟲／降級永遠看得到內容。
   - 賓客頁不因減少動態降級：RM 區塊全部包 :where(html:not(.wk-keep-motion))。
   ============================================================ */

:root {
  --paper: #f3eee3;
  --paper-raise: #faf7f0;
  --ink: #1e1c18;
  --ink-soft: #57534a;          /* 米色底上 ≥ 7:1，長輩看通告單的小字不吃力 */
  --accent: #1e1c18;            /* 標準 token 的 accent 給按鈕用（墨色） */
  --accent-ink: #f3eee3;
  --hairline: rgba(30, 28, 24, .16);
  --marker: #f2c53d;            /* 麥克筆黃：唯一彩色 */
  --marker-deep: #d9a92a;
  --film: #0d0c0b;              /* 影片黑 */
  --film-soft: #1a1917;
  --scratch-a: #2a2724;
  --scratch-b: #4a443d;
  --scrim: linear-gradient(180deg, rgba(13,12,11,0) 40%, rgba(13,12,11,.62) 100%);

  --font-serif-tc: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-hw-tc: "ChenYuluoyan 2.0", "Noto Serif TC", serif;
  --font-hw-en: "Homemade Apple", "Brush Script MT", cursive;
  --font-mk: "Permanent Marker", "Impact", sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  --wide-max: 72rem;
  --radius: .35rem;             /* 片場的東西都是方的 */
  --shadow-soft: 0 18px 50px -20px rgba(30, 28, 24, .35);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.2, 1.4, .4, 1);
  --dur: .9s;
}

/* 橫向溢出用 clip 不用 hidden：hidden 會讓 body 變成捲動容器，ScrollTrigger 量到的捲動位置就錯了（2026-10-02 踩到：pin 的 start 隨捲動漂移） */
html { background: var(--paper); overflow-x: clip; scroll-behavior: auto; }
/* scroll-behavior 一律 auto（蓋掉 base.css 的 smooth）：ScrollTrigger.refresh() 會先捲到 0 量尺寸再捲回來，
   smooth 會讓那兩下變成動畫、量到的 start 少掉當下的捲動量，pin 就整個錯位（2026-10-02 實測）。
   需要平滑的地方（preview 的 scrollIntoView）各自明寫 behavior:"smooth"。 */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif-tc);
  font-size: var(--text-body);
}
/* 辰宇落雁體與 Homemade Apple 筆畫都很細：用同色描邊把筆畫撐粗（2026-10-02 Jacob：很多字看不清楚） */
.hw-tc { font-family: var(--font-hw-tc); font-weight: 400; -webkit-text-stroke: .6px currentColor; }
.hw-en { font-family: var(--font-hw-en); font-weight: 400; -webkit-text-stroke: .7px currentColor; }
.mk    { font-family: var(--font-mk); font-weight: 400; }
.mono  { font-family: var(--font-mono); }

/* 膠片顆粒：全頁固定一層 feTurbulence 雜訊（獨立 fixed div，不用負 z 的偽元素——body 有底色會把它蓋掉） */
.grain {
  position: fixed; inset: -10%;
  z-index: 60;
  pointer-events: none;
  opacity: .11;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* 共用小標：等寬、字距大，電影片頭的字幕語言 */
.label-en {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .55rem;
}
.section-title {
  font-family: var(--font-hw-tc);
  font-weight: 400;
  -webkit-text-stroke: .7px currentColor;
  font-size: clamp(2.3rem, 7.5vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: .02em;
}
.sec-head { margin-bottom: clamp(1.6rem, 5vw, 2.6rem); }
.section { position: relative; }

/* 手繪線（所有 SVG 註記）：pathLength=1，完成態＝畫完；wc 旗標下等觸發再描 */
.an { overflow: visible; }
.an path { fill: none; stroke: var(--marker); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.wc .an path { stroke-dashoffset: 1; }
html.wc .is-drawn .an path, html.wc .an.is-drawn path, html.wc .reveal.is-in .an path {
  animation: fm-draw .9s var(--ease-out) forwards;
}
html.wc .an path:nth-child(2) { animation-delay: .55s; }
@keyframes fm-draw { to { stroke-dashoffset: 0; } }

/* ============ 開場：場記板 ============ */
.intro {
  position: fixed; inset: 0; z-index: 80;
  background: var(--film);
  display: grid; place-items: center;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
  color: #f6f2e8;
}
.intro-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.clap {
  --wk-open: 0;
  position: relative;
  width: min(86vw, 440px);
  aspect-ratio: 4 / 3.5;
  margin-top: -6vh;
  font-family: var(--font-mono);
  user-select: none;
  -webkit-user-select: none;
}
.clap-board {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: 16%;
  background: #141311;
  border: 2px solid #2b2926;
  border-top: 0;
  padding: 7% 7% 6%;
  display: grid; gap: .6rem;
  align-content: start;
}
.clap-hinge {
  position: absolute; left: 0; right: 0; top: 16%;
  height: 10px;
  background: repeating-linear-gradient(90deg, #f6f2e8 0 22px, #141311 22px 44px);
  border: 2px solid #2b2926;
  border-top: 0; border-bottom: 0;
  z-index: 2;
}
/* 拍板條：鉸鏈在左端，打開＝往上翹 26°，--wk-open 1＝合上 */
.clap-stick {
  position: absolute; left: 0; right: 0; top: 0;
  height: 16.5%;
  transform-origin: 4% 100%;
  transform: rotate(calc(-26deg * (1 - var(--wk-open))));
  background: #141311;
  border: 2px solid #2b2926;
  border-bottom: 0;
  overflow: hidden;
  will-change: transform;
  z-index: 3;
}
.clap-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, #f6f2e8 0 18px, #141311 18px 36px);
}
.cb-prod, .cb-names, .cb-roll {
  display: grid; grid-template-columns: 3.6em 1fr; align-items: baseline; gap: .6rem;
  font-size: .72rem; letter-spacing: .14em;
  border-bottom: 1px solid #332f2a;
  padding-bottom: .45rem;
}
.cb-prod span, .cb-names span, .cb-roll span, .cb-cell small { color: #b4ada0; font-size: .8rem; letter-spacing: .2em; }
.cb-prod b { font-family: var(--font-hw-tc); font-weight: 400; -webkit-text-stroke: .7px currentColor; font-size: clamp(1.8rem, 7.5vw, 2.5rem); letter-spacing: .08em; line-height: 1.1; }
.cb-names b { font-family: var(--font-hw-tc); font-weight: 400; -webkit-text-stroke: .6px currentColor; font-size: 1.4rem; letter-spacing: .06em; }
.cb-roll b { font-family: var(--font-mk); font-size: 1rem; color: var(--marker); letter-spacing: .08em; }
.cb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; border-bottom: 1px solid #332f2a; padding-bottom: .5rem; }
.cb-cell { display: grid; gap: .15rem; }
.cb-cell b { font-size: 1.15rem; letter-spacing: .06em; }
/* 提示：緊貼場記板下方、16px 以上、附一個上下彈的箭頭（長輩看得到「要往下拉」） */
.intro-guide {
  position: absolute; left: 50%; top: calc(50% + min(43vw, 220px) - 3vh + 1.6rem);
  transform: translateX(-50%);
  color: #f3eee3;
  font-family: var(--font-hw-tc); font-size: 1.2rem; letter-spacing: .08em;
  padding: .6rem 1.2rem;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  display: grid; justify-items: center; gap: .1rem;
}
.intro-guide small { display: block; font-family: var(--font-mono); font-size: .84rem; letter-spacing: .18em; color: #cfc8b9; }
.intro-guide::after { content: "↓"; font-family: var(--font-mono); font-size: 1.2rem; color: var(--marker); animation: fm-nudge 1.4s ease-in-out infinite; }
@keyframes fm-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.intro-wait .intro-guide { animation: fm-guide 1.2s .6s ease forwards; }
@keyframes fm-guide { to { opacity: 1; } }
.intro-skip {
  position: absolute; right: max(.8rem, env(safe-area-inset-right, 0px)); top: max(.8rem, env(safe-area-inset-top, 0px));
  color: #cfc8b9; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .24em;
  padding: .9rem 1rem; min-height: 44px;
  border: 1px solid #3a3733; border-radius: 3px;
}
/* 手指鬆開沒過閾值：拍板彈回打開（is-dragging 時跟手不加 transition） */
.clap-stick { transition: transform .5s linear(0, .6 10%, 1.1 20%, .95 30%, 1.02 40%, 1); }
.intro.is-dragging .clap-stick { transition: none; }
/* 合板：從當下角度啪一聲合上（短、硬）→ 拍板微震 → 白閃 */
.intro-commit .clap-stick { animation: fm-clap .22s cubic-bezier(.6, 0, 1, .4) forwards; transition: none; }
@keyframes fm-clap {
  from { transform: rotate(calc(-26deg * (1 - var(--wk-from, 0)))); }
  to   { transform: rotate(0deg); }
}
.intro-commit .clap { animation: fm-shake .32s .2s ease-out; }
@keyframes fm-shake {
  0% { transform: translateY(0); } 30% { transform: translateY(5px) rotate(.4deg); } 60% { transform: translateY(-2px); } 100% { transform: translateY(0); }
}
.intro-commit .intro-flash { animation: fm-flash .7s .26s ease-out forwards; }
@keyframes fm-flash {
  0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; }
}
.intro-commit .clap-board, .intro-commit .intro-guide, .intro-commit .intro-skip { animation: fm-fade .4s .3s ease forwards; }
@keyframes fm-fade { to { opacity: 0; } }
.intro-play .clap-stick { transition: transform .9s var(--ease-out); }

/* ============ 頂欄 ============ */
.fm-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: max(.7rem, env(safe-area-inset-top, 0px)) 1rem .7rem;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;    /* 壓在淺底變黑、壓在照片變白 */
  pointer-events: none;
  transition: opacity .6s ease, transform .6s var(--ease-out);
}
html.has-intro .fm-bar { opacity: 0; transform: translateY(-6px); }
.fm-bar-name:last-child { text-align: right; }
.fm-bar-name { transition: opacity .4s ease; }
/* 捲過海報之後：兩側名字收掉（不再壓在內容上）、計數器換成實底小牌（render.js 用 IO 掛 .is-past） */
.fm-bar.is-past .fm-bar-name { opacity: 0; }
.fm-bar.is-past { mix-blend-mode: normal; }
.fm-bar.is-past .fm-counter { background: var(--film); color: #f3eee3; border-color: var(--film); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.fm-counter {
  display: inline-flex; align-items: baseline; gap: .25em;
  padding: .35em .7em;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: .72rem; letter-spacing: .12em;
}
.fm-counter b { font-weight: 700; }
.fm-counter i { font-style: normal; opacity: .6; }

/* ============ 海報 ============ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden;
  color: #fff;
  background: var(--film);
  isolation: isolate;
}
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  filter: contrast(.96) saturate(.92);
}
.hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%),
    var(--scrim);
}
/* 黃色手寫片名：三個字各自用 clip-path 從左到右「寫出來」 */
.film-title {
  position: absolute; left: 4%; top: 9%;
  width: 92%;
  font-family: var(--font-hw-en);
  font-weight: 400;
  font-size: clamp(3.8rem, 17vw, 10.5rem);
  line-height: .86;
  color: var(--marker);
  text-shadow: 0 2px 0 rgba(0,0,0,.08);
  display: grid; gap: 0;
  transform: rotate(-4deg);
  pointer-events: none;
  z-index: 2;
}
.film-title .ft-w { display: block; }
.film-title .ft-w:nth-child(2) { margin-left: 8%; }
.film-title .ft-w:nth-child(3) { margin-left: 22%; }
html.wc .film-title .ft-w { clip-path: inset(-20% 100% -20% -5%); }
html.wc .hero.is-on .film-title .ft-w { animation: fm-write 1.1s cubic-bezier(.45, .05, .55, .95) forwards; }
html.wc .hero.is-on .film-title .ft-w:nth-child(2) { animation-delay: .75s; }
html.wc .hero.is-on .film-title .ft-w:nth-child(3) { animation-delay: 1.6s; }
@keyframes fm-write { to { clip-path: inset(-20% -5% -20% -5%); } }

/* 手繪圈：座標在「照片本身」的百分比空間（bespoke.heroCircle），render.js 依 object-fit cover
   的實際顯示矩形換算成 px 寫進 --ax/--ay/--aw/--ah——手機直式裁切與桌機橫式裁切都圈在同一個位置 */
.hero-annot {
  position: absolute;
  left: var(--ax, 20%); top: var(--ay, 30%);
  width: var(--aw, 60%); height: var(--ah, 30%);
  z-index: 2; pointer-events: none;
}
.an-circle { width: 100%; height: 100%; }
.an-circle path { stroke-width: 2.6; opacity: .95; }
.an-us {
  position: absolute; right: 1%; top: -16%;
  font-family: var(--font-hw-en); font-size: clamp(1.6rem, 6vw, 2.6rem);
  color: var(--marker); transform: rotate(8deg);
}
html.wc .an-us { opacity: 0; }
html.wc .hero.is-on .hero-annot .an path { animation: fm-draw 1s 2.3s var(--ease-out) forwards; }
html.wc .hero.is-on .an-us { animation: fm-pop .5s 3.1s var(--ease-snap) forwards; }
@keyframes fm-pop { from { opacity: 0; transform: rotate(8deg) scale(.6); } to { opacity: 1; transform: rotate(8deg) scale(1); } }

.hero-content {
  position: relative; z-index: 3;
  grid-row: 2; align-self: end;   /* 絕對定位的照片／片名不佔格，這塊才是 row 2 */
  /* 底部多留一截：右下角有背景音樂浮鈕（bgm.js，44px＋16px 邊），別壓到時間碼 */
  padding: 0 var(--gutter) calc(4.6rem + env(safe-area-inset-bottom, 0px));
  display: grid; gap: .5rem; align-content: end;
}
/* 賓客名字：手寫箭頭指著一行手寫稱呼，直接註記在照片上 */
.hero-greeting {
  font-family: var(--font-hw-tc);
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  line-height: 1.3;
  color: var(--marker);
  transform: rotate(-2.5deg);
  transform-origin: left bottom;
  margin-left: 2.2rem;
  margin-bottom: .2rem;
  /* 黃色細手寫壓在白頭紗／亮天空上會讀不到：描一圈深色邊（paint-order 讓描邊落在字後面） */
  paint-order: stroke fill;
  -webkit-text-stroke: 5px rgba(13, 12, 11, .62);
  text-shadow: 0 2px 10px rgba(13, 12, 11, .35);
}
.hero-day, .hero-note { paint-order: stroke fill; -webkit-text-stroke: 3.5px rgba(13, 12, 11, .55); }
.an-arrow { width: 3.4rem; height: 1.7rem; margin: -1.1rem 0 .4rem .2rem; }
.hero-greeting[hidden] + .an-arrow { display: none; }
html.wc .hero-greeting { opacity: 0; transform: rotate(-2.5deg) translateY(6px); }
html.wc .hero.is-on .hero-greeting { animation: fm-rise .7s 2.9s var(--ease-out) forwards; }
html.wc .hero.is-on .an-arrow path { animation: fm-draw .6s 3.2s var(--ease-out) forwards; }
html.wc .hero.is-on .an-arrow path:nth-child(2) { animation-delay: 3.6s; }
@keyframes fm-rise { to { opacity: 1; transform: rotate(-2.5deg) translateY(0); } }
.hero-names {
  font-family: var(--font-serif-tc);
  font-weight: 600;
  font-size: clamp(1.7rem, 7vw, 3rem);
  letter-spacing: .12em;
  line-height: 1.2;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em;
}
.hero-names .amp { font-family: var(--font-hw-en); font-size: .7em; color: var(--marker); letter-spacing: 0; }
.hero-names-en {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.hero-date {
  margin-top: .6rem;
  font-family: var(--font-mk);
  font-size: clamp(1.35rem, 5.4vw, 2rem);
  letter-spacing: .08em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .7em;
  color: #fff;
}
.hero-date .circled { position: relative; display: inline-block; padding: 0 .12em; }
.hero-date .circled svg { position: absolute; left: -22%; top: -28%; width: 144%; height: 156%; overflow: visible; }
.hero-date .circled svg path { stroke-width: 2.4; }
html.wc .hero.is-on .hero-date .circled svg path { animation: fm-draw .8s 3.6s var(--ease-out) forwards; }
.hero-day { font-family: var(--font-hw-tc); font-size: .86em; letter-spacing: .1em; color: var(--marker); }
.hero-note { font-family: var(--font-hw-tc); font-size: .82em; letter-spacing: .08em; }
.hero-note:empty { display: none; }
/* 倒數＝時間碼 */
.countdown {
  margin-top: .5rem;
  display: inline-flex; align-items: baseline; gap: .08em;
  font-family: var(--font-mono); font-size: 1rem; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.countdown strong { font-weight: 700; min-width: 2ch; text-align: center; }
.countdown strong[data-cd="days"] { color: var(--marker); min-width: auto; }
.countdown i { font-style: normal; opacity: .5; }
.tc-label { font-size: .8rem; letter-spacing: .3em; opacity: .9; margin-right: .5em; }
.tc-unit { font-size: .8rem; letter-spacing: .2em; opacity: .85; margin-left: .7em; }
html.wc .hero-content > :not(.hero-greeting):not(.an-arrow) { opacity: 0; transform: translateY(10px); }
html.wc .hero.is-on .hero-content > :not(.hero-greeting):not(.an-arrow) { animation: fm-rise-s .8s 1.2s var(--ease-out) forwards; }
html.wc .hero.is-on .hero-content > .hero-date { animation-delay: 1.5s; }
html.wc .hero.is-on .hero-content > .countdown { animation-delay: 1.75s; }
@keyframes fm-rise-s { to { opacity: 1; transform: none; } }
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: max(1.6rem, env(safe-area-inset-bottom, 0px));
  z-index: 3;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .3em; writing-mode: vertical-rl;
  display: flex; gap: .6rem; align-items: center; opacity: .75;
}
.hero-scroll i { width: 1px; height: 2.6rem; background: currentColor; transform-origin: top; animation: fm-scrollline 1.8s ease-in-out infinite; }
@keyframes fm-scrollline { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 599px) { .hero-scroll { display: none; } }
/* 手寫層對照片的微視差（fx.js 寫 --px/--py，桌機滑鼠、手機陀螺儀；幅度 ≤ 8px） */
.film-title, .hero-annot { transform: translate(var(--px, 0px), var(--py, 0px)) rotate(-4deg); }
.hero-annot { transform: translate(calc(var(--px, 0px) * .6), calc(var(--py, 0px) * .6)); }

/* 點照片在點擊處描一顆黃筆愛心（fx.js 生成） */
.fm-heart {
  position: fixed; z-index: 70; width: 46px; height: 42px; margin: -21px 0 0 -23px;
  pointer-events: none; overflow: visible;
  transform: rotate(var(--r, 0deg));
  animation: fm-heart-out 1.5s ease forwards;
}
.fm-heart path { fill: none; stroke: var(--marker); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fm-draw .45s ease-out forwards; }
@keyframes fm-heart-out { 0%, 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--r, 0deg)) translateY(-14px); } }

/* ============ ② 分鏡表 ============ */
.story { padding-top: clamp(4rem, 12vw, 7rem); overflow-x: clip; }
.sb-list {
  display: grid; gap: clamp(1.6rem, 5vw, 2.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .sb-list { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.sb-card {
  position: relative;
  background: var(--paper-raise);
  border: 1.5px solid var(--ink);
  padding: 1.1rem 1.2rem 1.3rem;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 4px 4px 0 var(--ink);
}
.sb-card:nth-child(3n+1) { --rot: -1.2deg; }
.sb-card:nth-child(3n+2) { --rot: .8deg; margin-top: clamp(0rem, 3vw, 2.2rem); }
.sb-card:nth-child(3n+3) { --rot: -.5deg; }
.sb-no { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .24em; color: var(--ink); }
.sb-frame {
  margin: .7rem 0 .9rem;
  aspect-ratio: 4 / 3;
  border: 1.5px dashed rgba(30,28,24,.45);
  display: grid; place-items: center;
  overflow: hidden;
  background: #efe9dc;
}
.sb-frame { position: relative; }
/* 分鏡裡的照片＝黑白劇照（跟毛片的彩色膠卷分開，一看就是「分鏡」不是「相簿」） */
.sb-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(1.02); }
.sb-frame .sb-date { font-family: var(--font-mk); font-size: clamp(1.5rem, 6vw, 2.2rem); color: var(--marker-deep); transform: rotate(-6deg); }
.sb-frame .sb-date.is-over { position: absolute; left: .6rem; bottom: .4rem; color: var(--marker); font-size: clamp(1.3rem, 5vw, 1.8rem); text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.sb-title { font-family: var(--font-hw-tc); font-weight: 400; -webkit-text-stroke: .6px currentColor; font-size: 1.75rem; line-height: 1.2; }
.sb-text { margin-top: .4rem; color: var(--ink); font-size: 1rem; line-height: 1.9; white-space: pre-line; }
.sb-stamp {
  position: absolute; right: .5rem; top: -.9rem;
  font-family: var(--font-mk); font-size: .95rem; letter-spacing: .06em;
  color: var(--marker-deep);
  border: 2px solid var(--marker-deep); border-radius: 2px;
  padding: .1rem .45rem;
  transform: rotate(8deg);
  background: var(--paper-raise);
}
html.wc .sb-stamp { opacity: 0; transform: rotate(8deg) scale(1.8); }
html.wc .sb-card.is-in .sb-stamp { animation: fm-stamp .5s .35s var(--ease-snap) forwards; }
@keyframes fm-stamp { 70% { opacity: 1; transform: rotate(8deg) scale(.94); } 100% { opacity: 1; transform: rotate(8deg) scale(1); } }
.sb-card.reveal { transform: rotate(var(--rot, 0deg)) translateY(28px); }
.sb-card.reveal.is-in { transform: rotate(var(--rot, 0deg)); }

/* ============ ③ 毛片：垂直膠卷 ============ */
.gallery { padding-block: clamp(3rem, 9vw, 5rem) 0; overflow: visible; }
.gal-head { text-align: center; padding-inline: var(--gutter); margin-bottom: 1.2rem; }
.gal-hint { font-family: var(--font-hw-tc); -webkit-text-stroke: .5px currentColor; font-size: 1.3rem; color: var(--ink); }
html.fx .gal-hint::after { content: " ↓"; }
.strip-stage {
  position: relative;
  display: flex; justify-content: center;
  padding-block: 1rem 3rem;
}
html.fx .strip-stage { height: 100dvh; padding: 0; overflow: hidden; align-items: flex-start; }
/* fx：膠卷前後各接一段片頭／片尾空白片（黑底齒孔），第一格停在畫面中央時上面不是一片米色 */
html.fx .strip { padding-top: calc(50dvh + 1.2rem); padding-bottom: calc(50dvh + 1.2rem); }
.strip {
  --sw: min(72vw, 420px);
  position: relative;
  width: var(--sw);
  padding: 1.2rem calc(var(--sw) * .085);
  background: #141311;
  display: grid; gap: 1.2rem;
  will-change: transform;
}
/* 齒孔：兩側各一排 */
.strip::before, .strip::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: calc(var(--sw) * .052);
  background: repeating-linear-gradient(180deg, transparent 0 .55rem, var(--paper) .55rem 1.25rem, transparent 1.25rem 1.9rem);
  opacity: .9;
}
.strip::before { left: calc(var(--sw) * .017); }
.strip::after  { right: calc(var(--sw) * .017); }
.frm { position: relative; margin: 0; }
.frm-pic { position: relative; background: #000; aspect-ratio: 3 / 4; overflow: hidden; }
.frm-pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(.94); cursor: zoom-in; }
.frm-no { position: absolute; left: .2rem; bottom: -1rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .2em; color: #d9d3c6; }
/* 旁邊的手寫註記：手機壓在膠卷邊上，桌機放到膠卷外側 */
.frm-note {
  position: absolute; z-index: 2;
  top: 12%;
  right: -14%;
  max-width: 48%;
  display: grid; gap: .1rem;
  pointer-events: none;
  text-align: left;
}
.frm:nth-child(even) .frm-note { right: auto; left: -14%; top: auto; bottom: 14%; }
.frm-note span {
  font-family: var(--font-hw-tc); font-size: clamp(1.5rem, 6vw, 2.1rem);
  color: var(--marker); line-height: 1.25;
  paint-order: stroke fill; -webkit-text-stroke: 4.5px rgba(13, 12, 11, .62);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  transform: rotate(-4deg);
}
/* 箭頭要指向照片：右側註記（奇數格）把箭頭左右翻、指向左邊的照片；左側註記（偶數格）原樣指右 */
.frm-note .an { width: 3.2rem; height: 1.6rem; }
.frm:nth-child(odd) .frm-note .an { transform: scaleX(-1); }
.frm:nth-child(odd) .frm-note { justify-items: start; }
.frm:nth-child(even) .frm-note { justify-items: end; }
/* 桌機：膠卷居中，左右兩側是固定欄位——左欄大幀號＋卷次資訊、右欄當前那格的手寫註記放大（fx.js 同步）；
   壓在格子上的小註記只給手機（桌機有欄位，不必再壓在照片上） */
.strip-side { display: none; }
@media (min-width: 900px) {
  .frm-note { display: none; }
  html.fx .strip-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; justify-items: center; }
  html.fx .strip-side { display: grid; position: sticky; top: 0; height: 100dvh; align-content: center; gap: .6rem; padding: 0 clamp(1.5rem, 5vw, 4rem); }
  .strip-side-l { justify-items: start; text-align: left; }
  .strip-side-r { justify-items: end; text-align: right; }
  .ss-no { font-family: var(--font-mono); font-size: clamp(3rem, 7vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
  .ss-no small { display: block; font-size: .78rem; font-weight: 400; letter-spacing: .32em; color: var(--ink-soft); margin-bottom: .4rem; }
  .ss-meta { font-family: var(--font-mono); font-size: .86rem; letter-spacing: .18em; color: var(--ink); display: grid; gap: .25rem; margin-top: 1rem; }
  .ss-note { font-family: var(--font-hw-tc); -webkit-text-stroke: .7px currentColor; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1.25; color: var(--marker-deep); transform: rotate(-3deg); max-width: 9em; transition: opacity .35s ease, transform .35s var(--ease-out); }
  .ss-note .an { width: 4.6rem; height: 2.3rem; transform: scaleX(-1); justify-self: end; }
  html.wc .strip-side .an path { stroke-dashoffset: 0; }
  .ss-note.is-swap { opacity: 0; transform: rotate(-3deg) translateY(8px); }
  .ss-alt { font-family: var(--font-mono); font-size: .86rem; letter-spacing: .1em; color: var(--ink); max-width: 18em; }
}
/* fx：註記等該格走到中央才描 */
html.fx .frm-note { opacity: 0; transition: opacity .35s ease; }
html.fx .frm.is-active .frm-note { opacity: 1; }
html.fx .frm-note .an path { stroke-dashoffset: 1; }
html.fx .frm.is-active .frm-note .an path { animation: fm-draw .6s var(--ease-out) forwards; }
html.fx .frm-note span { opacity: 0; transform: rotate(-4deg) translateY(6px); transition: opacity .4s .3s ease, transform .4s .3s var(--ease-out); }
html.fx .frm.is-active .frm-note span { opacity: 1; transform: rotate(-4deg) translateY(0); }
/* 最後一格：倒轉海報（fx 寫 --flip 0→1） */
.frm--flip .frm-pic { transform: rotate(calc(180deg * var(--flip, 1))); transition: none; }
.frm-flipword {
  position: absolute; left: 50%; top: 50%;
  paint-order: stroke fill; -webkit-text-stroke: 5px rgba(13, 12, 11, .55);
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: var(--font-mk); font-size: clamp(2.2rem, 10vw, 4rem);
  color: var(--marker); letter-spacing: .02em; line-height: .95; text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  pointer-events: none; z-index: 2;
  opacity: var(--flip, 1);
}
.frm--flip .frm-pic::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); opacity: var(--flip, 1); }

/* ============ ③b 預告片 ============ */
.video-frame { position: relative; background: #000; aspect-ratio: 16 / 9; overflow: hidden; border: 10px solid #141311; }
.video-frame[data-ratio="portrait"] { aspect-ratio: 9 / 16; max-width: 24rem; margin-inline: auto; }
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.video-poster { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.is-noposter .video-poster { display: none; }
.video-play-ico {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; color: var(--marker);
}
.video-play-ico b { font-size: 2.6rem; line-height: 1; }
.video-play-ico em { font-family: var(--font-hw-en); font-size: 1.2rem; font-style: normal; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============ ④ 通告單 ============ */
.sheet {
  background: var(--paper-raise);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(1.4rem, 5vw, 2.4rem);
  font-family: var(--font-mono);
  position: relative;
}
.sheet::before {
  content: "";
  position: absolute; left: 1.2rem; top: -.55rem;
  width: 3.2rem; height: 1.1rem;
  background: rgba(242, 197, 61, .75);
  transform: rotate(-3deg);
}
.sheet-head { border-bottom: 1.5px solid var(--ink); padding-bottom: .9rem; margin-bottom: 1rem; }
.sheet .section-title { font-size: clamp(2rem, 7vw, 3rem); }
.sheet-day { display: flex; flex-wrap: wrap; gap: .3em .9em; font-size: .88rem; letter-spacing: .1em; margin-top: .4rem; }
.details-note:empty { display: none; }
.details-note::before { content: "// "; opacity: .5; }
.event-list { display: grid; gap: 0; margin-top: .6rem; }
.event-row { display: grid; grid-template-columns: 4.4rem 1fr; gap: .8rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px dashed var(--hairline); }
.event-row dt { font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; }
.event-row dd strong { display: block; font-family: var(--font-serif-tc); font-weight: 600; font-size: 1.05rem; letter-spacing: .06em; }
.event-row dd span { display: block; font-family: var(--font-hw-tc); -webkit-text-stroke: .5px currentColor; font-size: 1.35rem; color: var(--ink); margin-top: .15rem; }
/* 通告單表頭：真的通告單那種色塊分欄（PROD／DAY／CALL／LOC），render.js 填值 */
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 0 1rem; background: var(--ink); border: 1.5px solid var(--ink); }
.sheet-grid > div { background: var(--paper-raise); padding: .55rem .7rem; display: grid; gap: .1rem; min-width: 0; }
.sheet-grid small { font-size: .78rem; letter-spacing: .2em; color: var(--ink); }
.sheet-grid b { font-weight: 700; font-size: .95rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.sheet-grid b.hw { font-family: var(--font-hw-tc); font-weight: 400; -webkit-text-stroke: .5px currentColor; font-size: 1.3rem; }
.sheet-grid > div.is-call { background: var(--marker); }
.sheet-grid > div.is-call small { color: #5a4a10; }
@media (min-width: 560px) { .sheet-grid { grid-template-columns: repeat(4, 1fr); } }
.calendar-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.parents { margin-top: 1.5rem; font-family: var(--font-serif-tc); font-size: 1rem; letter-spacing: .08em; color: var(--ink); line-height: 2; }
/* 通告月曆：方格、婚期用黃筆圈起（絕不對 .wk-cal 宣告 display） */
.wk-cal { margin: 1.1rem 0 .4rem; }
.wk-cal-title { font-family: var(--font-mk); font-size: 1.4rem; color: var(--marker-deep); letter-spacing: .06em; margin-bottom: .4rem; }
.wk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: .86rem; }
.wk-cal-wd { text-align: center; font-size: .8rem; letter-spacing: .1em; color: var(--ink); padding-bottom: .3rem; }
.wk-cal-d, .wk-cal-pad { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--hairline); }
.wk-cal-pad { border-color: transparent; }
.wk-cal-d.is-day { position: relative; font-weight: 700; background: var(--marker); border-color: var(--marker); }
.wk-cal-heart { display: none; }
.wk-cal-n { position: relative; z-index: 1; }
.wk-cal-count { display: inline-block; margin-top: .6rem; font-family: var(--font-hw-tc); -webkit-text-stroke: .5px currentColor; font-size: 1.35rem; }

/* ============ ④b 服裝指示 ============ */
.dc-note { max-width: 30em; color: var(--ink); font-size: 1rem; line-height: 1.9; }
.dc-swatches { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.4rem; }
.dc-swatch {
  width: 4.2rem; height: 4.2rem;
  border: 1.5px solid var(--ink);
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  transform: rotate(var(--r, 0deg));
  box-shadow: 3px 3px 0 rgba(30,28,24,.18);
}
.dc-swatch:nth-child(2n) { border-radius: 58% 42% 45% 55% / 48% 56% 44% 52%; --r: 6deg; }
.dc-swatch:nth-child(3n) { --r: -5deg; }

/* ============ ⑤ 外景 ============ */
.venue-hall { font-family: var(--font-hw-tc); -webkit-text-stroke: .5px currentColor; font-size: 1.5rem; color: var(--ink); }
.venue-address { font-family: var(--font-mono); font-size: .9rem; letter-spacing: .04em; margin-top: .2rem; }
.venue-tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .3em; color: var(--marker-deep); margin-bottom: .3rem; }
.loc { position: relative; margin-top: clamp(1.6rem, 5vw, 2.4rem); display: grid; justify-items: start; }
.loc-polaroid {
  background: #fff;
  padding: .9rem .9rem 2.6rem;
  box-shadow: var(--shadow-soft);
  transform: rotate(-2deg);
  width: min(100%, 36rem);
  position: relative;
}
.map-frame { aspect-ratio: 4 / 3; overflow: hidden; background: #e7e1d4; }
@media (min-width: 700px) { .map-frame { aspect-ratio: 16 / 10; } }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(.95); }
.loc-caption { position: absolute; left: 1.2rem; bottom: .55rem; font-size: 1.5rem; color: var(--ink); }
/* 「這裡」：寫在拍立得的白邊上（不壓 Google 的控制鈕），箭頭從白邊往上指進地圖中央的圖釘 */
.loc-polaroid { padding-bottom: 3.4rem; }
.loc-here {
  position: absolute; right: 1rem; bottom: .15rem;
  display: flex; align-items: flex-end; gap: .3rem;
  font-size: clamp(1.5rem, 6vw, 2rem); color: var(--marker-deep);
  z-index: 2;
}
.loc-here .an { width: 2.4rem; height: 3rem; margin-bottom: .5rem; }
.loc-here .an path { stroke-width: 3.4; }
.loc-here span { transform: rotate(-5deg); line-height: 1; }
@media (min-width: 700px) { .loc { justify-items: center; } }
.venue-bottom { margin-top: clamp(2.2rem, 6vw, 3rem); display: grid; gap: 1.4rem; }
.transport { display: grid; gap: .8rem; font-family: var(--font-mono); }
.transport li { display: grid; grid-template-columns: 3.8rem 1fr; gap: .9rem; align-items: baseline; font-size: .9rem; }
.transport strong { font-weight: 700; letter-spacing: .16em; }
.transport span { font-family: var(--font-serif-tc); color: var(--ink); white-space: pre-line; font-size: 1rem; }
@media (min-width: 700px) { .venue-bottom { grid-template-columns: 1fr auto; align-items: start; } }
.venue-card2 { margin-top: clamp(3rem, 8vw, 4.5rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1.5px dashed var(--hairline); }
.venue2-name { font-family: var(--font-hw-tc); font-weight: 400; font-size: clamp(1.9rem, 6vw, 2.8rem); }
.venue-card2 .transport:empty { display: none; }

/* ============ ⑤b 幕後花絮（便條紙） ============ */
#custom-blocks { display: grid; gap: 1.4rem; }
.custom-block {
  position: relative;
  background: #fbf3cf;
  padding: 1.5rem 1.4rem 1.4rem;
  transform: rotate(-1deg);
  box-shadow: var(--shadow-soft);
}
.custom-block:nth-child(even) { transform: rotate(1.2deg); background: #f6efdc; }
.custom-block::before {
  content: ""; position: absolute; left: 50%; top: -.6rem; width: 4.2rem; height: 1.2rem;
  background: rgba(255,255,255,.55); transform: translateX(-50%) rotate(-2deg);
  border: 1px solid rgba(30,28,24,.1);
}
.custom-block-title { font-family: var(--font-hw-tc); font-weight: 400; -webkit-text-stroke: .6px currentColor; font-size: 1.75rem; margin-bottom: .3rem; }
.custom-text { white-space: pre-line; font-size: 1rem; line-height: 1.9; color: var(--ink); }
.custom-block.reveal { transform: rotate(-1deg) translateY(24px); }
.custom-block.reveal.is-in { transform: rotate(-1deg); }
.custom-block:nth-child(even).reveal { transform: rotate(1.2deg) translateY(24px); }
.custom-block:nth-child(even).reveal.is-in { transform: rotate(1.2deg); }

/* ============ ⑥ 刪減片段（顯影） ============ */
.scratch-card {
  background: #0f0e0d; color: #f3eee3;
  border-radius: 2px;
  border-left: 14px solid #141311; border-right: 14px solid #141311;
  background-image: repeating-linear-gradient(180deg, transparent 0 .55rem, rgba(243,238,227,.9) .55rem 1.2rem, transparent 1.2rem 1.85rem), repeating-linear-gradient(180deg, transparent 0 .55rem, rgba(243,238,227,.9) .55rem 1.2rem, transparent 1.2rem 1.85rem);
  background-size: 7px 100%, 7px 100%;
  background-position: -12px 0, calc(100% + 12px) 0;
  background-repeat: repeat-y, repeat-y;
}
.scratch-text { font-family: var(--font-hw-tc); -webkit-text-stroke: .5px currentColor; font-size: 1.5rem; line-height: 1.9; }
.scratch-hint { font-family: var(--font-hw-tc); font-size: 1.25rem; color: #f3eee3; }
.scratch-open { font-family: var(--font-mono); color: var(--ink-soft); }

/* ============ ⑦ 選角回函（深色選角單） ============ */
.rsvp { background: var(--film); color: #f3eee3; }
.rsvp .label-en { color: #cfc8b9; }
.cast-sheet { position: relative; }
.cast-star { display: grid; gap: .1rem; margin: -.6rem 0 1.2rem; }
.cast-star small { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .26em; color: #cfc8b9; }
.cast-star span { font-size: clamp(2rem, 8vw, 3rem); color: var(--marker); line-height: 1.15; transform: rotate(-2deg); transform-origin: left; display: inline-block; }
/* 選角單表頭：ROLE／CHARACTER／CALLBACK 三格，跟通告單同一套色塊語言 */
.cast-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #3a3733; border: 1px solid #3a3733; margin: 0 0 1.4rem; }
.cast-meta > div { background: #141311; padding: .5rem .6rem; display: grid; gap: .1rem; min-width: 0; }
.cast-meta small { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .18em; color: #cfc8b9; }
.cast-meta b { font-family: var(--font-mono); font-size: .9rem; letter-spacing: .04em; color: #f3eee3; overflow-wrap: anywhere; }
.cast-meta b.hw { font-family: var(--font-hw-tc); font-size: 1.15rem; color: var(--marker); }
.rsvp-intro { max-width: 30em; white-space: pre-line; color: #d9d3c6; }
.rsvp-deadline { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .12em; color: #cfc8b9; margin-top: .5rem; }
.rsvp-form { margin-top: clamp(2rem, 6vw, 3rem); display: grid; gap: 1.5rem; }
.rsvp .field label, .rsvp .field legend { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .14em; color: #e4ded2; }
.rsvp .field input, .rsvp .field textarea, .rsvp .field select { background: #1b1a18; border: 1px solid #3a3733; color: #f3eee3; border-radius: 3px; }
.rsvp .field input:focus-visible, .rsvp .field textarea:focus-visible, .rsvp .field select:focus-visible { border-color: var(--marker); box-shadow: 0 0 0 3px rgba(242,197,61,.22); }
.rsvp .field ::placeholder { color: #6f6a61; }
.rsvp .field .error-text { color: #f0b7a3; }
.rsvp .field.has-error input { border-color: #f0b7a3; }
.attend-field { border: 0; }
.attend-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .5rem; }
.attend-pill input { position: absolute; opacity: 0; pointer-events: none; }
.attend-pill span {
  display: flex; align-items: center; justify-content: center;
  padding: .85rem 1rem; min-height: 44px;
  border: 1px solid #4a463f; border-radius: 3px;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em;
  transition: background .3s, color .3s, border-color .3s, scale .2s;
  user-select: none;
}
.attend-pill:active span { scale: .97; }
.attend-pill input:checked + span { background: var(--marker); color: var(--film); border-color: var(--marker); font-weight: 700; }
.attend-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(242,197,61,.35); }
.rsvp-details { display: grid; gap: 1.5rem; }
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(3, 1fr); } }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: stretch; border: 1px solid #3a3733; border-radius: 3px; overflow: hidden; }
.stepper button { min-height: 44px; font-size: 1.2rem; color: var(--marker); background: #1b1a18; }
.stepper button:active { background: #2a2825; }
.rsvp .stepper input { border: 0; border-radius: 0; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cap-note { font-family: var(--font-mono); font-size: .8rem; color: #cfc8b9; letter-spacing: .04em; }
.companion-list { display: grid; gap: .5rem; }
[data-rsvp-custom] { display: grid; gap: 1.5rem; }
.cq-checks { display: grid; gap: .5rem; }
.rsvp .cq-checks label { display: flex; align-items: center; gap: .5rem; font-size: 1rem; cursor: pointer; font-family: var(--font-serif-tc); letter-spacing: 0; color: #f3eee3; }
.rsvp .cq-checks input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--marker); }
.rsvp-error { color: #f0b7a3; font-size: var(--text-small); }
/* 送出鈕＝小場記板（選擇器帶 .rsvp 才贏得過下面 .rsvp .btn 的黃底） */
.rsvp .rsvp-submit {
  position: relative;
  display: grid; justify-items: start; gap: 0;
  padding: 1.1rem 1.6rem .9rem;
  background: #141311; color: #f3eee3;
  border: 1.5px solid #f3eee3; border-radius: 3px;
  overflow: hidden; min-height: 64px; min-width: 11rem;
  justify-self: start;
  letter-spacing: 0;
  transition: transform .35s var(--ease-out), background .3s;
}
.rs-stripes { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: repeating-linear-gradient(-45deg, #f3eee3 0 10px, #141311 10px 20px); }
.rs-text { font-family: var(--font-mk); font-size: 1.5rem; color: var(--marker); line-height: 1.1; margin-top: .35rem; }
.rs-sub { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .24em; color: #e4ded2; }
.rsvp .rsvp-submit:hover { opacity: 1; background: #1f1d1a; }
.rsvp .rsvp-submit:active { transform: scale(.98); }
.rsvp .rsvp-submit[disabled] .rs-text { color: #8d877c; }
.rsvp-success { position: relative; padding-top: 1rem; }
.rsvp-success h3 { font-family: var(--font-hw-tc); font-weight: 400; font-size: 2rem; }
.rsvp-success p { color: #d9d3c6; margin-top: .5rem; }
.success-summary { font-family: var(--font-mono); font-size: .76rem; white-space: pre-line; }
.success-note { font-size: 1rem; color: #cfc8b9; }
.rsvp-success .btn-ghost { margin-top: 1.2rem; color: #f3eee3; box-shadow: inset 0 0 0 1px #4a463f; }
.rsvp-stamp {
  --stamp-rot: -10deg;
  position: absolute; right: 0; top: -1.2rem;
  width: 8.2rem; height: 4.6rem;
  display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: .2rem;
  font-family: var(--font-mk); font-size: 1.6rem; color: var(--marker);
}
.rsvp-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rsvp-stamp svg path { fill: none; stroke: var(--marker); stroke-width: 2.6; stroke-dasharray: 1; stroke-linecap: round; }
.rsvp-stamp.is-stamped svg path { animation: fm-draw .7s .2s ease-out forwards; stroke-dashoffset: 1; }
.rsvp-stamp i { font-style: normal; }
.rsvp-stamp em { font-style: normal; font-size: 1.3em; }
.rsvp-closed h3 { font-family: var(--font-hw-tc); font-weight: 400; font-size: 2rem; }
.rsvp .btn:not(.rsvp-submit) { background: var(--marker); color: var(--film); border-radius: 3px; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; }

/* ============ ⑧ 片尾字幕 ============ */
.footer { background: var(--film); color: #f3eee3; padding: 0 0 max(2rem, env(safe-area-inset-bottom, 0px)); position: relative; }
.credits-roll {
  position: relative;
  height: min(62dvh, 560px);
  margin-bottom: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.credits-track {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; justify-items: center; gap: 1.4rem;
  padding-inline: var(--gutter);
  text-align: center;
  font-family: var(--font-mono);
  will-change: transform;
}
.credits-roll.is-rolling .credits-track { animation: fm-roll var(--roll-dur, 42s) linear forwards; }
.credits-roll.is-paused .credits-track { animation-play-state: paused; }
@keyframes fm-roll { to { transform: translateY(calc(-100% - 62dvh)); } }
.cr-head { font-size: clamp(2.6rem, 10vw, 4.4rem); color: var(--marker); margin-bottom: .6rem; }
.cr-list { display: grid; gap: 1.1rem; }
.cr-row { display: grid; gap: .15rem; }
.cr-role { font-size: .8rem; letter-spacing: .28em; color: #cfc8b9; text-transform: uppercase; }
.cr-name { font-family: var(--font-serif-tc); font-size: 1.2rem; letter-spacing: .12em; }
.cr-name.is-guest { font-family: var(--font-hw-tc); font-size: 1.9rem; color: var(--marker); letter-spacing: .04em; }
.cr-msg { font-family: var(--font-hw-tc); -webkit-text-stroke: .5px currentColor; font-size: 1.45rem; line-height: 1.8; max-width: 22em; color: #f3eee3; margin-top: 1rem; white-space: pre-line; }
.cr-names { font-family: var(--font-serif-tc); letter-spacing: .2em; }
.cr-prod { font-size: .8rem; letter-spacing: .28em; color: #cfc8b9; margin-top: 2rem; padding-bottom: 2rem; }
/* 暫停鈕放在字幕區之外（.credits-roll 有 overflow:hidden，放裡面會被切掉） */
.cr-tools { display: flex; justify-content: flex-end; padding: 0 var(--gutter); margin-top: .2rem; position: relative; z-index: 2; }
.cr-pause {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 .9rem;
  border: 1px solid #3a3733; border-radius: 3px; background: var(--film);
  color: #e4ded2; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .18em;
}
.cr-pause::after { content: "暫停"; }
.is-paused .cr-pause::after { content: "繼續"; }
.cr-pause-ico { width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.is-paused .cr-pause-ico { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }

/* 終章：長按快門 → 拍立得顯影 */
.blessing { text-align: center; padding: clamp(2.5rem, 7vw, 4rem) var(--gutter) 1.5rem; display: grid; justify-items: center; gap: .9rem; border-top: 1px solid #2a2825; }
.blessing .label-en { margin-bottom: 0; color: #8d877c; }
.blessing-lead { font-family: var(--font-hw-tc); -webkit-text-stroke: .6px currentColor; font-size: 1.75rem; color: #f3eee3; }
.dev-wrap { perspective: 800px; }
.dev-polaroid {
  width: min(66vw, 240px);
  background: #fff; padding: .6rem .6rem 2.2rem;
  transform: rotate(-3deg) translateY(8px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.8);
  position: relative;
  opacity: .22;
  transition: opacity .6s ease, transform .8s var(--ease-snap);
}
.dev-pic { aspect-ratio: 1 / 1; background: #e9e4d8; overflow: hidden; position: relative; }
.dev-pic img { width: 100%; height: 100%; object-fit: cover; filter: brightness(2.2) contrast(.2) saturate(.3); transition: filter 2.4s ease-in; }
.dev-caption { position: absolute; left: .6rem; right: .6rem; bottom: .35rem; color: var(--ink); font-size: 1.1rem; line-height: 1.2; display: flex; justify-content: space-between; align-items: baseline; opacity: 0; transition: opacity .8s 1.4s ease; }
.dev-caption i { font-family: var(--font-mono); font-style: normal; font-size: .8rem; letter-spacing: .1em; color: var(--ink); }
.blessing.is-stamped .dev-polaroid { opacity: 1; transform: rotate(-3deg) translateY(0); }
.blessing.is-stamped .dev-pic img { filter: brightness(1) contrast(.98) saturate(.9); }
.blessing.is-stamped .dev-caption { opacity: 1; }
.blessing-flash { position: fixed; inset: 0; z-index: 75; background: #fff; pointer-events: none; opacity: 0; }
.blessing-flash.is-on { animation: fm-flash .6s ease-out forwards; }
.shutter {
  --wk-press: 0;
  position: relative; width: 72px; height: 72px;
  touch-action: none; margin-top: .6rem;
  display: grid; place-items: center;
}
.sh-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--marker) calc(var(--wk-press) * 360deg), #3a3733 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
  mask: radial-gradient(circle, transparent 60%, #000 62%);
  transition: --wk-press .2s;
}
.sh-btn { width: 44px; height: 44px; border-radius: 50%; background: #f3eee3; border: 4px solid #141311; box-shadow: 0 0 0 1px #4a463f; transition: transform .15s; }
.shutter.is-pressing .sh-btn { transform: scale(.9); }
.shutter.is-committed .sh-btn { background: var(--marker); }
.shutter.wants-hold + .blessing-hint { color: var(--marker); }
.blessing-hint { font-family: var(--font-hw-tc); -webkit-text-stroke: .5px currentColor; font-size: 1.25rem; letter-spacing: .08em; color: #f3eee3; transition: color .3s; }
/* 長輩備援：按不住就點這個，一樣拍一張（同 secret 的「直接打開」） */
.blessing-skip { font-family: var(--font-mono); font-size: .86rem; letter-spacing: .14em; color: #cfc8b9; text-decoration: underline; text-underline-offset: .35em; padding: .6rem 1rem; min-height: 44px; }
.blessing.is-stamped .blessing-hint, .blessing.is-stamped .shutter, .blessing.is-stamped .blessing-skip { display: none; }
.blessing-done { font-family: var(--font-hw-tc); -webkit-text-stroke: .6px currentColor; font-size: 1.55rem; color: var(--marker); }
.blessing-done:empty { display: none; }
.blessing:not(.is-stamped) .blessing-done { display: none; }

.footer-contacts { display: grid; gap: .8rem; justify-items: center; padding: 1.6rem var(--gutter) 0; }
.contact-row { display: flex; align-items: center; gap: .6rem; }
.contact-who { font-family: var(--font-serif-tc); letter-spacing: .12em; font-size: 1.05rem; color: #f3eee3; }
.contact-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #3a3733; color: #f3eee3; }
.contact-ico svg { width: 18px; height: 18px; fill: currentColor; }
.footer-brand { display: block; text-align: center; padding: 1.6rem var(--gutter) 0; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .2em; color: #cfc8b9; text-decoration: none; }

/* ============ 燈箱（引擎 shared/utils.js） ============ */
.wk-lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: rgba(13, 12, 11, .94);
  padding: max(4vh, env(safe-area-inset-top, 0px)) max(4vw, env(safe-area-inset-right, 0px)) max(4vh, env(safe-area-inset-bottom, 0px)) max(4vw, env(safe-area-inset-left, 0px));
  overscroll-behavior: contain;
}
.wk-lightbox.is-open { display: flex; }
.wk-lightbox img { max-width: 100%; max-height: 88dvh; margin-inline: auto; border: 8px solid #141311; }
.wk-lightbox button { position: absolute; color: #f3eee3; font-size: 2rem; line-height: 1; padding: .75rem 1rem; min-width: 44px; min-height: 44px; opacity: .85; }
.wk-lightbox button:hover { opacity: 1; }
.wk-lb-close { top: max(.5rem, env(safe-area-inset-top, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); font-size: 2.4rem; }
.wk-lb-prev { left: max(.25rem, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.wk-lb-next { right: max(.25rem, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }

/* ============ 共用按鈕皮 ============ */
.btn { border-radius: 3px; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; padding: .9rem 1.4rem; min-height: 44px; }
.btn-ghost { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ============ 減少動態（旗標掛著時整段讓位） ============ */
@media (prefers-reduced-motion: reduce) {
  :where(html:not(.wk-keep-motion)) .film-title .ft-w,
  :where(html:not(.wk-keep-motion)) .an path,
  :where(html:not(.wk-keep-motion)) .hero-content > *,
  :where(html:not(.wk-keep-motion)) .sb-stamp,
  :where(html:not(.wk-keep-motion)) .an-us,
  :where(html:not(.wk-keep-motion)) .hero-greeting { animation: none !important; opacity: 1 !important; clip-path: none !important; stroke-dashoffset: 0 !important; transform: none !important; }
  :where(html:not(.wk-keep-motion)) .credits-track { animation: none !important; position: static; }
  :where(html:not(.wk-keep-motion)) .credits-roll { height: auto; mask-image: none; -webkit-mask-image: none; }
}

/* ============ 字型庫 bridge（P2-26）：custom-* 是鎖定帖，不接字型庫角色；留空 ============ */