/* ==========================================================================
   SoulMatt.e 作品集｜style.css（v14）
   設計稿：00_客戶資料/版面設計與執行方向/（1920×1080）
   規格：02_視覺前端/視覺規格.md
   寫法：行動優先（mobile-first），BEM 命名，tokens 寫成 CSS 變數
   ========================================================================== */

/* ---------- 0. 字體（v7：放進網站，不連 Google Fonts；OFL 開源授權，授權檔在 fonts/） ----------
   可變字體：一個檔就有全部粗細。字檔只收網站上用到的字，改了中文文字要重跑 _工具/build_fonts.py */
@font-face {
  font-family: "Georama"; src: url("../fonts/georama.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;   /* v14：到 900（名片的名字） */
}
@font-face {
  font-family: "Chiron GoRound TC"; src: url("../fonts/chirongoroundtc.woff2") format("woff2");   /* v10 卡片名稱（粗細固定 400，只收卡片上的字） */
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Chiron GoRound TC"; src: url("../fonts/chirongoroundtc-700.woff2") format("woff2");   /* v12 About 卡片的粗體（技能標題、公司名稱） */
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans TC"; src: url("../fonts/notosanstc.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE10-FE6F, U+FF00-FFEF;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* 顏色（從平面稿取色） */
  --c-bg: #2e2e2e;          /* 頁面底色 */
  --c-line: #434343;        /* 頁首、欄位分隔線、格線 */
  --c-text: #ffffff;        /* 主要文字、選中的選單 */
  --c-muted: #808080;       /* 標籤、未選中的選單、類別大標題 */
  --c-dim: #505050;         /* 類別介紹（桌機）、All View 標題 */
  --c-intro-m: #808080;     /* v16：類別介紹（手機、平板 <1024；QA Q09） */
  --c-dot: #d9d9d9;         /* 左欄裝飾圓點 */
  --c-paper: #fcfaf6;       /* 全站卡片的紙：米白（v14 Matt 2026-10-31 選的，不加紋理；v13 以前 UI/UX 是 #D7D9DC、其他白色） */
  --c-paper-ink: #111111;   /* 卡片作品名 */
  --c-paper-no: #505050;    /* 卡片編號 */
  --c-panel: #f5f5f5;       /* 作品內頁卡片底色 */
  --c-panel-line: #d7d9dc;  /* 作品內頁分隔線 */
  --c-panel-ink: #505050;   /* 作品內頁標題、內文 */
  --c-panel-meta: #808080;  /* 作品內頁 TYPE、日期、Website */

  /* 字體 */
  /* v4：整站英文用 Georama；類別大標題、副標、SoulMatt.e 用 Inter；中文一律 Noto Sans TC（英文字型沒有中文字，會自動接手） */
  --ff-en: "Georama", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --ff-zh: "Georama", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --ff-display: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --ff-card: "Chiron GoRound TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;   /* v10 卡片名稱、編號（老闆指定 Weight 400） */

  /* 字級（1920 設計稿 → 隨視窗縮放，設最小值） */
  --fs-ui: 15px;                                   /* 選單、標籤（1920：16px） */
  --fs-title: clamp(30px, 3.4vw, 66px);            /* 類別大標題 */
  --fs-intro: clamp(18px, 2.08vw, 40px);           /* 類別介紹 */
  --fs-all-title: clamp(22px, 1.88vw, 36px);       /* All View 標題 */
  --fs-all-bg: clamp(36px, 10vw, 162px);           /* All View 背景大字（1920：162px） */
  --fs-panel-title: clamp(24px, 2.08vw, 40px);     /* 內頁標題 */
  --fs-panel-body: clamp(13px, 0.78vw, 15px);      /* 內頁內文（v4 縮小兩級：1920 18→15px） */
  --fs-panel-meta: clamp(12px, 0.7vw, 13px);       /* 內頁 TYPE 列 */
  --fs-small: 13px;                                /* v11：內頁外框 Prev／Next、附件按鈕 */
  --fs-card: 4.4cqw;                               /* v11：卡片名稱（卡片寬的 4.4%，1920 時 14px） */
  --fs-k: 1;                                       /* v11：About 卡片的字（照設計稿的大小 × 這個倍數） */
  --fs-toast: 14px;
  --fs-boot: 12px;

  /* 版面 */
  --header-h: 56px;
  --gutter: 16px;
  --col-left: 100%;
  --grid-size: 64px;
  --panel-w: 100vw;
  --panel-pad: 20px;
  --panel-top: 56px;
  /* v4 卡片陰影：照老闆的參考圖（光從左上來，影子往右下）。數值以卡片寬 320px 為基準，
     用 --cw（卡片寬）等比例縮放；離桌面越高 → 影子越遠、邊緣越柔、越淡 */
  --cw: 320px;
  --sh-contact: drop-shadow(calc(var(--cw) * .002) calc(var(--cw) * .004) calc(var(--cw) * .004) rgba(0, 0, 0, .4));
  --sh-none: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  /* 作品列表：平放在桌面上（貼得很近） */
  --card-shadow: var(--sh-contact) drop-shadow(calc(var(--cw) * .006) calc(var(--cw) * .019) calc(var(--cw) * .022) rgba(0, 0, 0, .32));
  --card-shadow-hover: var(--sh-contact) drop-shadow(calc(var(--cw) * .03) calc(var(--cw) * .05) calc(var(--cw) * .028) rgba(0, 0, 0, .36));
  /* 作品列表：拿起來（離桌面最高） */
  --card-shadow-grab: var(--sh-none) drop-shadow(calc(var(--cw) * .12) calc(var(--cw) * .19) calc(var(--cw) * .038) rgba(0, 0, 0, .5));
  /* All View：卡片浮得比列表高一點 */
  --card-shadow-all: var(--sh-contact) drop-shadow(calc(var(--cw) * .037) calc(var(--cw) * .053) calc(var(--cw) * .022) rgba(0, 0, 0, .3));
  --card-shadow-all-hover: var(--sh-none) drop-shadow(calc(var(--cw) * .056) calc(var(--cw) * .094) calc(var(--cw) * .031) rgba(0, 0, 0, .36));

  /* 舊螢幕效果：彩色噪點、像素格、光暈（色散只在毛刺時出現，v3） */
  --crt-noise: none;                               /* main.js 產生彩色噪點圖後填入 */
  --crt-noise-opacity: .0425;                      /* v3：減少 50% */
  --crt-noise-px: 1px;                             /* v3：噪點顆粒 1px */
  --crt-pixel: 3px;                                /* LCD 像素格（掃描線間距） */
  --glow: rgba(255, 255, 255, .16);
  /* v5：切頁的電視雪花（參考範例 05）與橫條遮罩 */
  --snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.7 -.6'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)'/%3E%3C/svg%3E");
  --bands: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 19px, #000 19px 47px, transparent 47px 49px, #000 49px 83px, transparent 83px 90px);
  --bands-inv: repeating-linear-gradient(to bottom, transparent 0 14px, #000 14px 19px, transparent 19px 47px, #000 47px 49px, transparent 49px 83px, #000 83px 90px);

  /* 動態 */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .2s;
  --dur: .35s;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --fs-ui: 15px;
    --panel-w: calc(100vw - 2 * 72px);
    --panel-pad: 48px;
    --panel-top: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-h: 60px;
    --gutter: 40px;
    --fs-ui: 16px;
    --col-left: clamp(300px, 27.08vw, 520px);   /* 1920：520 */
    --grid-size: calc(100vw / 19.2);              /* 1920：100px */
    --panel-w: min(66.67vw, 1280px);              /* 1920：1280 */
    --panel-pad: 6.67vw;                          /* 1920：128 */
    --panel-top: clamp(72px, 9.26vh, 100px);      /* 1920×1080：100 */
    --fs-all-bg: clamp(64px, 8.4vw, 162px);
  }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  :root { --fs-ui: 14px; }
}

/* ---------- 1-1 v11 桌機的字小一級（老闆 2026-10-28：大標、副標、說明、左上角 SoulMatt.e 以外都小一級）----------
   網址加 ?fs=0（html 加上 .fs-v10）就是 v10 原本的字級，方便比較 */
@media (min-width: 1024px) {
  :root {
    --fs-ui: 14px;                                   /* 15 → 14：選單、標籤、左欄、件數、VIEW ALL、All View 頁籤 */
    --fs-all-title: clamp(20px, 1.67vw, 32px);       /* 36 → 32：All View 標題（背景大字不變） */
    --fs-panel-title: clamp(22px, 1.875vw, 36px);    /* 40 → 36：內頁標題 */
    --fs-panel-body: clamp(12px, 0.73vw, 14px);      /* 15 → 14：內頁內文 */
    --fs-panel-meta: clamp(11px, 0.625vw, 12px);     /* 13 → 12：內頁 TYPE 列、小標 */
    --fs-small: 12px;                                /* 13 → 12 */
    --fs-card: 4cqw;                                 /* 14 → 約 13：卡片名稱 */
    --fs-k: .93;                                     /* About 卡片：16／15 → 15／14 */
    --fs-toast: 13px;
    --fs-boot: 11px;
  }
  :root.fs-v10 {
    --fs-ui: 15px; --fs-all-title: clamp(22px, 1.88vw, 36px); --fs-panel-title: clamp(24px, 2.08vw, 40px);
    --fs-panel-body: clamp(13px, 0.78vw, 15px); --fs-panel-meta: clamp(12px, 0.7vw, 13px);
    --fs-small: 13px; --fs-card: 4.4cqw; --fs-k: 1; --fs-toast: 14px; --fs-boot: 12px;
  }
}

/* ---------- 1-2 紙質（v14）：全站卡片統一米白 #FCFAF6（Matt 2026-10-31 選 C、改色、不加紋理）----------
   About 技能插圖的底是白色：用「色彩增值」，白底變成紙的顏色（插圖像印在紙上） */
.about-card__img { mix-blend-mode: multiply; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-en);
  font-size: var(--fs-ui);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.detail :focus-visible { outline-color: #fff; }
.panel :focus-visible { outline-color: #505050; }

.skip-link {
  position: fixed; left: 8px; top: -60px; z-index: 100;
  padding: 8px 14px; background: #fff; color: #000; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 8px; }

.link-u {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -8px; color: var(--c-text); }

/* 標籤＋值（Services: / CASE: / Date.） */
.meta__label { color: var(--c-muted); font-weight: 600; }
.meta__value { color: var(--c-text); font-weight: 600; font-family: var(--ff-en); }
.meta__group + .meta__group { margin-top: 1.4em; }

/* ---------- 3. 共用-S02 頁首 ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30;   /* 桌機改成 2（在舊螢幕效果底下） */
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.site-header__logo { font-family: var(--ff-display); font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: .01em; }   /* v11：SoulMatt.e 不跟著縮小 */
.site-header__contact { display: none; margin-left: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.site-header__menu { margin-left: auto; font-weight: 600; padding: 8px 0; }

.site-nav {
  position: fixed; inset: var(--header-h) 0 0 0;
  background: var(--c-bg);
  padding: 32px var(--gutter);
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.site-nav.is-open { visibility: visible; opacity: 1; transition: opacity var(--dur) var(--ease-out); }
.site-nav__list { display: grid; gap: 20px; }
.site-header__menu[aria-expanded="true"] .site-header__menu-label::after { content: " ×"; }
.site-nav__link { color: var(--c-muted); font-weight: 600; text-decoration: none; font-size: 28px; transition: color var(--dur-fast); }
html:not(.is-bent) .site-nav__link:hover, .site-nav__link.is-bhover, .site-nav__link.is-active { color: var(--c-text); }

@media (min-width: 1024px) {
  .site-header { z-index: 2; }
  .site-header__menu, .site-nav__contact-m { display: none; }
  .site-header__contact { display: block; }
  .site-nav {
    position: absolute; inset: 0 auto 0 var(--col-left);
    padding: 0; background: none;
    visibility: visible; opacity: 1;
    display: flex; align-items: center;
  }
  .site-nav__list { display: flex; gap: 2.5em; }
  .site-nav__link { font-size: var(--fs-ui); }
}

/* ---------- 4. 作品列表 ---------- */
.listing {
  padding-top: var(--header-h);
  min-height: 100vh;
}

/* 共用-S03 左欄 */
.profile { padding: 24px var(--gutter) 0; }
.profile__top { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: end; }
.profile__photo { width: 88px; height: 88px; object-fit: cover; }   /* 照片2.png 已由老闆調成灰階＋80% 透明度 */
.profile__dot { position: absolute; right: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--c-dot); }
/* v4：重新洗牌的骰子（取代裝飾圓點） */
.dice { position: absolute; right: -4px; top: -4px; width: 30px; height: 30px; color: #8a8a8a; display: grid; place-items: center; transform-origin: 50% 60%; -webkit-tap-highlight-color: transparent; }
.dice svg { width: 100%; height: 100%; overflow: visible; }
.dice__top { fill: #a3a3a3; } .dice__left { fill: #8c8c8c; } .dice__right { fill: #767676; }
.dice__face { stroke: #2e2e2e; stroke-width: 2.2; stroke-linejoin: round; }
.dice__pip { fill: #2e2e2e; }
html:not(.is-bent) .dice:hover .dice__top, .dice.is-bhover .dice__top { fill: #b8b8b8; }
html:not(.is-bent) .dice:hover .dice__left, .dice.is-bhover .dice__left { fill: #9c9c9c; }
html:not(.is-bent) .dice:hover .dice__right, .dice.is-bhover .dice__right { fill: #848484; }
.dice:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
/* v13：音效開關（骰子下面的空格；sound.js）。v14：圖示改成懷舊風格（Matt 2026-10-31：喇叭太普通）。
   v15：預設卡帶（Matt 選 B）——開＝兩個捲軸在轉，關＝停下、整個變暗；和骰子同一組灰。?icon=record 是 v14 的黑膠唱盤 */
.sound-toggle { position: absolute; right: -4px; top: 36px; width: 30px; height: 30px; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.sound-toggle svg { width: 100%; height: 100%; overflow: visible; }
/* v15：變暗／滑鼠移入改成直接換顏色（v14 用 CSS filter；換顏色不用多一個圖層，數值等於原本的 brightness .66／1.12／.82） */
.sound-toggle { --snd-a: #a3a3a3; --snd-b: #8c8c8c; --snd-c: #767676; --snd-d: #d9d9d9; --snd-e: #e4e4e4; --snd-k: #2e2e2e; --snd-g: #5c5c5c; }
html:not(.is-bent) .sound-toggle:hover, .sound-toggle.is-bhover { --snd-a: #b7b7b7; --snd-b: #9d9d9d; --snd-c: #848484; --snd-d: #f3f3f3; --snd-e: #fff; --snd-k: #343434; --snd-g: #676767; }
.sound-toggle.is-off { --snd-a: #6c6c6c; --snd-b: #5c5c5c; --snd-c: #4e4e4e; --snd-d: #8f8f8f; --snd-e: #969696; --snd-k: #1e1e1e; --snd-g: #3d3d3d; }
html:not(.is-bent) .sound-toggle.is-off:hover, .sound-toggle.is-off.is-bhover { --snd-a: #868686; --snd-b: #737373; --snd-c: #616161; --snd-d: #b2b2b2; --snd-e: #bbbbbb; --snd-k: #262626; --snd-g: #4b4b4b; }
.sound-toggle svg * { transition: fill var(--dur-fast), stroke var(--dur-fast); }
.snd__top { fill: var(--snd-a); } .snd__left { fill: var(--snd-b); } .snd__right { fill: var(--snd-c); }
.snd__top, .snd__left, .snd__right { stroke: var(--snd-k); stroke-width: 2.2; stroke-linejoin: round; }
.snd__disc { fill: var(--snd-k); }
.snd__groove { fill: none; stroke: var(--snd-g); stroke-width: .6px; vector-effect: non-scaling-stroke; }
.snd__label { fill: var(--snd-d); }
.snd__mark { fill: var(--snd-b); }
.snd__pin { fill: var(--snd-k); }
.snd__arm-o { fill: none; stroke: var(--snd-k); stroke-width: 6; stroke-linecap: round; }
.snd__arm { fill: none; stroke: var(--snd-e); stroke-width: 2.6; stroke-linecap: round; }
.snd__head { fill: var(--snd-e); stroke: var(--snd-k); stroke-width: 1.8; }
.snd__base { fill: var(--snd-b); stroke: var(--snd-k); stroke-width: 2; }
.snd--tape .snd__label { stroke: var(--snd-k); stroke-width: 1.8; }
.snd__win { fill: var(--snd-k); }
.snd__reel { fill: var(--snd-a); }
.snd__hub { fill: none; stroke: var(--snd-k); stroke-width: 1.8; stroke-linecap: round; }
.snd__hole { fill: var(--snd-k); }
.sound-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.profile__bottom { display: none; }

@media (min-width: 1024px) {
  .listing {
    display: grid;
    grid-template-columns: var(--col-left) 1fr;
    height: 100vh; min-height: 560px;
    overflow: hidden;
  }
  .profile {
    position: relative; z-index: 2;
    display: grid; grid-template-rows: 1fr 1fr;
    padding: 0;
    border-right: 1px solid var(--c-line);
    background: var(--c-bg);
  }
  .profile__top {
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
    padding: 20px var(--gutter) 20px;
    border-bottom: 1px solid var(--c-line);
  }
  .profile__photo { width: clamp(120px, 10.42vw, 200px); height: auto; aspect-ratio: 1; }
  .profile__dot { width: 18px; height: 18px; right: 21px; top: 20px; }
  .dice { width: clamp(28px, 1.8vw, 35px); height: clamp(28px, 1.8vw, 35px); right: 18px; top: 33px; }
  .sound-toggle { width: clamp(28px, 1.8vw, 35px); height: clamp(28px, 1.8vw, 35px); right: 18px; top: calc(33px + clamp(28px, 1.8vw, 35px) + 14px); }
  .profile__bottom {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 23px var(--gutter) 28px;
  }
  /* logo.svg 四周有留白：寬 299（1920）時，圖形本身剛好 280 寬、貼齊左邊 40 */
  .profile__logo { width: clamp(190px, 15.57vw, 299px); height: auto; margin-left: -.52vw; filter: invert(1); }
  .current .meta__value { min-height: 1.45em; }
}

/* 列表-S01～S04 */
.stage { position: relative; padding: 28px var(--gutter) 40px; }
.cat-title { font-family: var(--ff-display); font-weight: 800; color: var(--c-muted); font-size: var(--fs-title); line-height: 1.05; letter-spacing: -.01em; }
.cat-title__main, .cat-title__sub { display: inline-block; }
.cat-title__main { margin-right: .26em; }
/* v9：標題規則「主標 ,副標」（主標後面空一格，逗號接在副標前面；老闆 2026-10-27）
   v16（QA Q06，Matt 2026-11-02）：手機、平板（<1024）副標會換到第二行，拿掉逗號；桌機維持「主標 ,副標」 */
@media (min-width: 1024px) { .cat-title__sub::before { content: ","; } }
/* v16（QA Q09，Matt 2026-11-02）：手機、平板的類別介紹沒有卡片蓋著，提亮到 --c-intro-m（#808080，對比 3.4:1）；桌機維持 #505050。
   網址加 ?intro=999999 這類 6 位色碼可以試別的顏色（比較用） */
.cat-intro {
  margin-top: .3em;
  font-family: var(--ff-zh); font-weight: 500;
  color: var(--c-intro-m);
  font-size: var(--fs-intro); line-height: 1.5;
  max-width: 33em;
}
.stage__bar { display: flex; align-items: flex-end; justify-content: space-between; margin: 24px 0 20px; }
/* v5：» 23 Projects（老闆 v4 意見圖 1） */
.stage__count { display: inline-flex; align-items: center; gap: .3em; color: var(--c-text); font-weight: 600; }
.stage__count-icon { width: .95em; height: .95em; flex: none; }
.stage__hint { display: none; }
.stage__grid { display: none; }

@media (min-width: 1024px) {
  .stage {
    display: grid; grid-template-rows: 1fr 1fr;
    padding: 0;
    min-width: 0;
    /* v3：不裁切卡片。卡片拖不出桌面範圍，但永遠疊在左欄和線條上面 */
  }
  .stage__top { display: flex; flex-direction: column; padding: 18px var(--gutter) 20px 20px; border-bottom: 1px solid var(--c-line); }
  .stage__bar { margin: auto 0 0; }
  .stage__bottom { position: relative; overflow: hidden; }
  /* v5：互動提示，放在原本件數的位置 */
  .stage__hint { display: block; position: relative; z-index: 1; margin: 0; padding: 22px 20px; color: var(--c-muted); font-weight: 600; letter-spacing: .02em; }
  .stage__grid {
    display: block; position: absolute; inset: -20px;
    background-image:
      linear-gradient(to right, var(--c-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
    background-size: var(--grid-size) calc(var(--grid-size) * 1.02);
    background-position: 19px 19px;
    opacity: .9;
  }
  .cat-intro { max-width: none; padding-right: 20px; color: var(--c-dim); }
}

/* ---------- 5. 桌面（卡片散落區） ---------- */
.desk { position: relative; z-index: 6; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
.desk__plane { display: contents; }

@media (min-width: 640px) { .desk { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 1024px) {
  .desk {
    display: block;
    position: absolute; inset: 0; z-index: 6;   /* 在舊螢幕效果（z 5）上面：卡片是放在螢幕上的紙 */
    container-type: size;
    perspective: 1600px;
    pointer-events: none;
  }
  .desk__plane { display: block; position: absolute; inset: 0; transform-style: flat; will-change: transform; }
  .desk .work-card { position: absolute; width: 22.86cqw; --cw: 22.86cqw; pointer-events: auto; touch-action: none; }
}

/* ---------- 6. 作品卡片（相紙） ---------- */
.work-card {
  display: block; width: 100%;
  --cw: 44vw;
  text-align: left;
  filter: var(--card-shadow);
  transition: filter .35s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.work-card.is-hover { filter: var(--card-shadow-hover); }
.work-card.is-grabbed { filter: var(--card-shadow-grab); }
.allview .work-card { filter: var(--card-shadow-all); }
.allview .work-card.is-hover { filter: var(--card-shadow-all-hover); }
@media (min-width: 640px) { .work-card { --cw: 29vw; } }
@media (min-width: 1024px) { .allview .work-card { --cw: 16.67vw; } }
.work-card:focus-visible { outline: none; }
.work-card:focus-visible .work-card__paper { outline: 2px solid #fff; outline-offset: 4px; }

.work-card__paper {
  position: relative; display: block;
  padding: 5% 5% 0;
  background-color: var(--c-paper);
  border: 1px solid #eaeaea;   /* v5：底色 #D7D9DC、邊框 #EAEAEA（老闆指定） */
  transform-origin: 50% 50%;
  will-change: transform;
  overflow: hidden;
  container-type: inline-size;
}
.work-card__img {
  width: 100%; aspect-ratio: 800 / 478; object-fit: cover;
  background: #bfc1c4;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.work-card__caption {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  height: 13.5cqw;
  font-size: var(--fs-card); line-height: 1;
}
/* v10：卡片上的字改成 Chiron GoRound TC，Weight 400（老闆 2026-10-27；v9 的 LXGW WenKai Mono TC 不用了） */
.work-card__name { font-family: var(--ff-card); font-weight: 400; color: var(--c-paper-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-card__no { font-family: var(--ff-card); font-weight: 400; color: var(--c-paper-no); flex: none; }
/* v14 拿起卡片的反光（Matt 2026-10-31，參考圖 v13意見_圖2_拿起卡牌反光.png）：
   光源在畫面上方偏左，卡片拿起來時面向光源的那一邊亮、往另一邊淡掉（稿上量到：最亮的地方蓋 55% 白、大約 60% 的地方淡完）。
   --sh-ang＝亮的方向（main.js 依光源位置和卡片角度算），::after 是拖動時滑過的一道細反光（--sh-x／--sh-y／--sh-g 跟著速度） */
.work-card__shine {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0;
  background: linear-gradient(var(--sh-ang, 165deg), rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .38) 16%, rgba(255, 255, 255, .13) 38%, rgba(255, 255, 255, 0) 60%);
}
.work-card__shine::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(calc(var(--sh-ang, 165deg) + 75deg), rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 57%);
  background-size: 300% 300%;
  background-position: var(--sh-x, 50%) var(--sh-y, 50%);
  opacity: var(--sh-g, 0);
}
@media (hover: hover) and (min-width: 1024px) {
  .desk .work-card { cursor: grab; }
  .desk .work-card.is-grabbed { cursor: grabbing; }
}

/* ---------- 7. All View ---------- */
.allview {
  position: fixed; inset: 0; z-index: 40;
  background: var(--c-bg);
  overflow: hidden;
  --all-pad: 32px;
}
/* v3：捲動的是 .allview__scroll；外層 .allview 只負責模糊與晃動 */
.allview__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.allview__scroll:focus { outline: none; }
/* 疊放順序：Logo、標題（z 1）→ 舊螢幕效果（z 2）→ 卡片（z 3）→ 頁籤列（z 4） */
.allview > .crt { position: absolute; z-index: 2; }
.allview > .vignette { position: absolute; z-index: 5; }
.allview__head {
  position: sticky; top: 0; z-index: 4;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: var(--header-h) auto; align-items: center;
  padding: 0 var(--gutter);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.allview__tabs {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; gap: 20px; overflow-x: auto;
  padding: 12px 0; scrollbar-width: none;
}
.allview__tab { color: var(--c-muted); font-weight: 600; white-space: nowrap; transition: color var(--dur-fast); }
html:not(.is-bent) .allview__tab:hover, .allview__tab.is-bhover, .allview__tab[aria-selected="true"] { color: var(--c-text); }
.allview__close { justify-self: end; }
.allview__body { position: relative; padding: var(--all-pad) var(--gutter) 120px; }
/* 全部-S01 標題：往下捲時固定在原位，卡片從上面滑過（v2） */
.allview__heading {
  position: sticky; top: calc(var(--all-head-h, 60px) + var(--all-pad)); z-index: 1;
  text-align: center; margin-bottom: 8px;
}
.allview__title { font-family: var(--ff-display); color: var(--c-dim); font-weight: 800; font-size: var(--fs-all-title); line-height: 1.2; }
.allview__title .dot { margin: 0 .5em; }
.allview__bg {
  font-family: var(--ff-display); color: var(--c-dim); font-weight: 800; font-size: var(--fs-all-bg);
  line-height: 1; letter-spacing: -.01em; white-space: nowrap;
  margin-top: .12em;
  overflow: hidden; text-overflow: clip;
}
.allview__grid {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px;
  margin: -.5em auto 0; max-width: 1400px;
}
.allview__empty { grid-column: 1 / -1; padding: calc(var(--fs-all-bg) * .9) 0 60px; text-align: center; color: var(--c-muted); font-family: var(--ff-zh); }
.allview__logo { display: none; }

@media (min-width: 640px) { .allview__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .allview { --all-pad: clamp(60px, 11vh, 120px); }
  .allview__head { grid-template-columns: 1fr auto 1fr; grid-template-rows: var(--header-h); height: var(--header-h); }
  .allview__tabs { grid-column: 2; grid-row: 1; gap: 2.5em; padding: 0; overflow: visible; }
  .allview__body { padding: var(--all-pad) 0 160px; }
  .allview__bg { margin-top: .18em; }
  .allview__grid {
    grid-template-columns: repeat(4, 16.67vw);
    gap: clamp(28px, 4.2vh, 46px) 2.08vw;
    justify-content: center;
    max-width: none;
    margin-top: calc(var(--fs-all-bg) * -.55);
  }
  /* Logo 在卡片底下（v2） */
  .allview__logo { display: block; position: absolute; left: var(--gutter); bottom: 40px; z-index: 1; width: clamp(180px, 14.6vw, 280px); height: auto; pointer-events: none; opacity: .5; }   /* v4：透明度 50% */
}

/* ---------- 8. 作品內頁（風格 2：一張紙放在桌面上） ---------- */
.detail { position: fixed; inset: 0; z-index: 50; }
.detail:focus { outline: none; }
/* 疊放順序：遮罩 → 舊螢幕效果 → 翻頁時的舊紙張 → 內頁 → 外框按鈕 */
.detail__backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(46, 46, 46, .94); }
.detail > .crt { position: absolute; z-index: 1; }
.detail > .vignette { position: absolute; z-index: 1; }
.detail__stack { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.detail__scroll {
  position: absolute; inset: 0; z-index: 3;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--panel-top) 0 0;
  scrollbar-width: none;   /* v4：晃動時捲軸會露出來，隱藏（滑鼠滾輪、觸控板照常捲動） */
}
.detail__scroll::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  /* 桌機：後面的桌面本身變模糊、變暗（main.js），這裡只加一點點暗色 */
  .detail__backdrop { background: rgba(20, 20, 20, .25); }
}
.panel {
  position: relative; isolation: isolate;
  width: var(--panel-w); margin: 0 auto;
  color: var(--c-panel-ink);
  min-height: calc(100vh - var(--panel-top));
  margin-bottom: var(--panel-top);
}
/* v5：白紙先出現。白底獨立成一層（瀏覽器不用等圖片解碼就畫得出來），快速往下捲也不會看到截斷；
   圖片載入完成後再淡入 */
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-panel); will-change: transform; }
/* 紙張放在桌面上的陰影（v2） */
.panel::after { content: ""; position: absolute; inset: 0; z-index: -2; box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 18px 36px rgba(0, 0, 0, .3), 0 50px 110px rgba(0, 0, 0, .45); }
.panel__media img { opacity: 0; transition: opacity .45s ease; }
.panel__media img.is-in { opacity: 1; }
.panel--clone { position: absolute; margin: 0; }
.panel__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  padding: clamp(14px, 2.2vh, 23px) clamp(20px, 2.08vw, 40px);
  font-size: var(--fs-panel-meta); color: var(--c-panel-meta); font-weight: 600;
  border-bottom: 1px solid var(--c-panel-line);
  font-family: var(--ff-zh);
}
.panel__bar--bottom { border-bottom: 0; border-top: 1px solid var(--c-panel-line); }
.panel__bar b { font-family: var(--ff-en); font-weight: 700; margin-right: .4em; }
.panel__tags { display: inline; }
.panel__tags span + span::before { content: "•"; margin: 0 .7em; }
.panel__tags span { white-space: nowrap; }   /* v15：一個類型不從中間斷行（手機上「印刷」曾斷成兩行） */
.panel__facts span + span::before { content: "•"; margin: 0 .7em; }
.panel__body { padding: clamp(36px, 7.2vh, 78px) var(--panel-pad) clamp(40px, 7vh, 80px); }
.panel__title {
  font-family: var(--ff-zh); font-weight: 700;
  font-size: var(--fs-panel-title); line-height: 1.3; letter-spacing: .01em;
  color: var(--c-panel-ink);
}
.panel__media { margin-top: clamp(16px, 2vh, 22px); }
.panel__media > img { width: 100%; background: #e6e6e6; }
.panel__row { display: grid; gap: 16px; justify-content: center; margin: 24px 0; }
.panel__row img { width: 100%; height: auto; }
.panel__text { margin-top: clamp(32px, 5vh, 48px); font-family: var(--ff-zh); font-size: var(--fs-panel-body); line-height: 1.6; }
.panel__text .panel__title { margin-bottom: .8em; }
.panel__lead { font-weight: 500; }
.panel__section { margin-top: 2.2em; }
.panel__heading { font-family: var(--ff-en); font-size: var(--fs-panel-meta); letter-spacing: .12em; color: var(--c-panel-meta); font-weight: 700; margin-bottom: .8em; }
.panel__section p + p { margin-top: 1em; }
.panel__list { display: grid; gap: .7em; }
.panel__list li { position: relative; padding-left: 1.1em; }
.panel__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: .38em; height: .38em; border-radius: 50%; background: currentColor; opacity: .55; }
.panel__list b { font-weight: 700; }
.panel__website {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: clamp(40px, 6.5vh, 70px);
  color: var(--c-panel-meta); font-weight: 600; font-family: var(--ff-zh); font-size: var(--fs-panel-body);
  text-decoration: none;
}
/* v16（QA Q07）：真的連結滑鼠移入時字變深、加底線（純文字不變） */
a.panel__website { transition: color var(--dur-fast) ease; }
a.panel__website:hover, a.panel__website:focus-visible { color: var(--c-panel-ink); }
a.panel__website:hover span, a.panel__website:focus-visible span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.panel__website svg { flex: none; }
.panel__credits-m { margin-top: 32px; display: grid; gap: 4px; font-size: 14px; color: var(--c-panel-meta); font-weight: 600; }
.panel__credits-m b { color: var(--c-panel-ink); }

/* 外框：關閉、上一件／下一件、Designer、VIEW ALL */
.detail__chrome { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.detail__chrome > * { pointer-events: auto; position: absolute; }
.detail__logo { display: none; }
.detail__close { margin: 0; top: calc(var(--header-h) / 2 - 20px); right: calc(var(--gutter) - 8px); z-index: 3; }   /* v4：和左邊 SoulMatt.e 對齊 */
.detail__nav {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: var(--fs-small); color: var(--c-text);
  bottom: 18px;
  padding: 10px 14px; border-radius: 999px; background: rgba(30,30,30,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.detail__nav--prev { left: var(--gutter); }
.detail__nav--next { right: var(--gutter); }
.detail__nav svg { transition: transform var(--dur) var(--ease-out); }
html:not(.is-bent) .detail__nav--prev:hover svg, .detail__nav--prev.is-bhover svg { transform: translateX(-4px); }
html:not(.is-bent) .detail__nav--next:hover svg, .detail__nav--next.is-bhover svg { transform: translateX(4px); }
.detail__credits, .detail__viewall { display: none; }

@media (min-width: 1024px) {
  .detail__logo { display: block; top: 0; left: var(--gutter); height: var(--header-h); line-height: var(--header-h); }
  .detail__close { top: calc(var(--header-h) / 2 - 20px); right: calc(var(--gutter) - 8px); }
  .detail__nav { top: 50%; bottom: auto; transform: translateY(-50%); background: none; padding: 8px 0; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: var(--fs-small); }
  .detail__credits { display: block; left: var(--gutter); bottom: 40px; }
  /* v16（QA Q05）：左下專案資訊不超過白色內頁的左緣（再留 20px，內頁跟著滑鼠晃也碰不到），太長就換行。
     1024～1279 寬時 UI/UX 01 的 Team. 會換成兩行 */
  .detail__credits { max-width: calc((100vw - var(--panel-w)) / 2 - var(--gutter) - 20px); }
  .detail:has(.panel--bundle) .detail__credits { max-width: calc((100vw - min(75vw, 1440px)) / 2 - var(--gutter) - 20px); }
  .detail__credits .meta__group + .meta__group { margin-top: .9em; }
  .detail__viewall { display: inline-flex; align-items: center; gap: .55em; right: var(--gutter); bottom: 36px; }
  .panel__credits-m { display: none; }
}
/* 側邊不夠放 Prev／Next 文字時，只留箭頭 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .detail__nav span { display: none; }
}

/* ---------- 9. 轉場用的卡片分身（從桌面抽出來的紙條） ---------- */
.ghost {
  position: fixed; left: 0; top: 0; z-index: 60;
  background-color: var(--c-paper);
  border: 1px solid #eaeaea;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
  filter: var(--card-shadow-grab);
}
/* v4：丟回桌面時，快落地的那一刻影子收回成桌面上的樣子 */
.ghost.is-landed { filter: var(--card-shadow); transition: filter .4s cubic-bezier(.3, .7, .4, 1); }
/* v6：丟回桌面時從暗角底下飛進來（落地後和真的卡片一樣被暗角蓋到，才不會一落地就變暗） */
.ghost.is-back { z-index: 19; }
.ghost.is-back-all { z-index: 45; }
.ghost.is-landed-all { filter: var(--card-shadow-all); transition: filter .4s cubic-bezier(.3, .7, .4, 1); }
.ghost__img { position: absolute; object-fit: cover; }
.ghost__cap { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; line-height: 1; }
.ghost__cap .work-card__name, .ghost__cap .work-card__no { font-size: inherit; }

/* ---------- 10. 舊螢幕效果（v2）：老舊 LCD 的彩色噪點、像素格、光暈、色散、偶爾的毛刺 ---------- */
.scene { position: relative; }
@media (min-width: 1024px) {
  /* 整個畫面當成一塊螢幕一起晃動（main.js 控制角度） */
  .scene { transform-origin: 50% 50%; will-change: transform, filter; }
}
.crt { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.crt__noise {
  position: absolute; inset: -50%;
  background-image: var(--crt-noise);
  background-size: calc(var(--crt-noise-px) * 128) calc(var(--crt-noise-px) * 128);
  image-rendering: pixelated;
  opacity: var(--crt-noise-opacity);
  mix-blend-mode: screen;
  animation: crt-noise .55s steps(1) infinite;
  will-change: transform;
}
@keyframes crt-noise {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-7.3%, 4.1%); }
  25%  { transform: translate(5.2%, -9.4%); }
  37%  { transform: translate(-11.6%, -3.3%); }
  50%  { transform: translate(9.1%, 6.7%); }
  62%  { transform: translate(-4.4%, 10.2%); }
  75%  { transform: translate(12.3%, -6.1%); }
  87%  { transform: translate(-9.7%, 8.8%); }
}
/* LCD 像素格：橫向掃描線＋直向像素間隙（v3：改成中性灰，避免整體偏洋紅） */
.crt__mask {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px),
    linear-gradient(to right, rgba(0, 0, 0, .07) 0 1px, transparent 1px);
  background-size: 100% var(--crt-pixel), var(--crt-pixel) 100%;
}
/* 光暈：中間微亮 */
.crt__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 255, 255, .05), transparent 70%);
  mix-blend-mode: screen;
}
/* 慢慢往下滾的亮帶（舊螢幕的更新線） */
.crt__roll {
  position: absolute; left: 0; right: 0; top: 0; height: 22vh;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .022) 55%, rgba(255, 255, 255, .045) 92%, transparent);
  transform: translateY(-25vh);
  animation: crt-roll 8s linear infinite;
}
@keyframes crt-roll { to { transform: translateY(125vh); } }
/* v5：切頁的電視雪花（在舊螢幕效果最底下、卡片底下）＋藍畫面 */
.crt__snow { position: absolute; inset: 0; background: #000 var(--snow) 0 0 / 180px 180px; visibility: hidden; }
.crt__snow.is-on { visibility: visible; animation: snow-jump .15s steps(1, end) infinite; }
.crt__snow.is-blue { background-image: none; background-color: rgb(34, 41, 166); animation: none; }
.crt__snow.is-bands { -webkit-mask-image: var(--bands-inv); mask-image: var(--bands-inv); -webkit-mask-position: 0 var(--mask-y, 0); mask-position: 0 var(--mask-y, 0); }
@keyframes snow-jump {
  0%   { background-position: 0 0; }
  17%  { background-position: -61px 43px; }
  33%  { background-position: 37px -89px; }
  50%  { background-position: -113px -17px; }
  67%  { background-position: 71px 101px; }
  83%  { background-position: -29px 59px; }
}
/* 毛刺：偶爾閃一條彩色撕裂線 */
.crt__tear {
  position: absolute; left: 0; right: 0; top: var(--tear-y, 40%); height: var(--tear-h, 3px);
  background: linear-gradient(90deg, transparent 0, rgba(255, 50, 100, .4) 18%, rgba(255, 255, 255, .25) 45%, rgba(50, 220, 255, .4) 70%, transparent 100%);
  box-shadow: 0 0 14px rgba(255, 255, 255, .12);
  opacity: 0;
}
.is-glitch .crt__tear { opacity: 1; }
.is-glitch .crt__noise { opacity: calc(var(--crt-noise-opacity) * 2.2); }

/* 光暈：螢幕上的文字（紙張上的文字不加）。v3：平常沒有色散，只在毛刺閃一下時出現 */
.fx-ca { text-shadow: 0 0 8px var(--glow); }
.fx-ca--md { text-shadow: 0 0 18px rgba(255, 255, 255, .07); }
.fx-ca--lg { text-shadow: 0 0 26px rgba(255, 255, 255, .1); }
.fx-ca-img { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .1)); }
.profile__logo.fx-ca-img, .allview__logo.fx-ca-img { filter: invert(1) drop-shadow(0 0 6px rgba(255, 255, 255, .1)); }
.is-glitch .fx-ca { text-shadow: -3px 0 rgba(255, 40, 90, .75), 3px 0 rgba(40, 210, 255, .75), 0 0 8px var(--glow); }
.is-glitch .fx-ca--md, .is-glitch .fx-ca--lg { text-shadow: -6px 0 rgba(255, 40, 90, .55), 6px 0 rgba(40, 210, 255, .55), 0 0 26px rgba(255, 255, 255, .12); }
.is-glitch .fx-ca-img { filter: drop-shadow(-3px 0 rgba(255, 40, 90, .6)) drop-shadow(3px 0 rgba(40, 210, 255, .6)); }
.is-glitch .profile__logo.fx-ca-img, .is-glitch .allview__logo.fx-ca-img { filter: invert(1) drop-shadow(-3px 0 rgba(255, 40, 90, .6)) drop-shadow(3px 0 rgba(40, 210, 255, .6)); }
.is-glitch .stage__top, .is-glitch .allview__heading { translate: 3px 0; }

/* 螢幕邊緣暗角（v5：照老闆的參考圖 v4意見_圖2、圖3）：比較橢圓的圓角矩形，#101010 的 60%，
   邊緣柔和。圖由 main.js 依視窗大小畫好（--vignette-img），沒有的時候用簡單的內陰影代替 */
.vignette {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  background: var(--vignette-img, none) 0 0 / 100% 100% no-repeat;
}
html:not(.has-vimg) .vignette { box-shadow: inset 0 0 40px 10px rgba(16, 16, 16, .6); }

/* ---------- 10-2. 桶狀變形（v5，參考範例 05，強度 50%） ----------
   main.js 替每一塊「螢幕上的東西」（頁首、左欄、標題、格線、All View 標題、內頁外框）產生 SVG 變形濾鏡，
   卡片和白色內頁是放在螢幕上的紙，不變形。Safari、觸控裝置不變形（和範例 05 一樣） */
html.is-bent .bend { filter: var(--bend, none); }
html.is-bent .allview__logo.fx-ca-img { filter: var(--bend,) invert(1) drop-shadow(0 0 6px rgba(255, 255, 255, .1)); }
html.is-bent.is-glitch .allview__logo.fx-ca-img { filter: var(--bend,) invert(1) drop-shadow(-3px 0 rgba(255, 40, 90, .6)) drop-shadow(3px 0 rgba(40, 210, 255, .6)); }
/* 變形後，按鈕看起來的位置和實際位置不一樣：游標形狀、滑鼠移入效果改由 main.js 依「看起來的位置」判斷 */
html.is-bent .bend :is(a, button) { cursor: inherit; }
html.is-bpointer body { cursor: pointer; }

/* ---------- 11. Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 80;
  transform: translate(-50%, 16px);
  padding: 10px 18px; border-radius: 999px;
  background: #f5f5f5; color: #2e2e2e; font-weight: 600; font-size: var(--fs-toast); font-family: var(--ff-zh);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 12. 狀態 ---------- */
html.is-locked, html.is-locked body { overflow: hidden; }
/* v16（QA Q01）：桌機整個畫面跟著滑鼠 3D 晃動時，晃出去的部分裁在 body 裡，不撐大網頁（不會冒出捲軸、觸控板推不動）。
   html 設 auto，body 的設定才不會變成整個視窗的設定：視窗矮於列表（560）時一樣可以上下捲。
   手機版（<1024）不鎖；內頁、All View、Contact 是固定在畫面上的另一層，有自己的捲動，不受影響。
   不支援 clip 的舊瀏覽器用 hidden */
@media (min-width: 1024px) {
  html { overflow: auto; }
  body { overflow: hidden; overflow: clip; }
}
.js .is-intro .desk .work-card { visibility: hidden; }

/* 使用者關閉動態：直接顯示、不移動；噪點固定不閃 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .crt__noise, .crt__roll { animation: none !important; }
  .crt__roll { display: none; }
}

/* ---------- 13. 開機畫面（v4，參考範例 05 的載入效果） ---------- */
.boot {
  position: fixed; inset: 0; z-index: 95;
  background: #181818;
  display: grid; place-items: center;
  overflow: hidden;
  cursor: progress;
}
.boot > .crt { position: absolute; z-index: 1; }
.boot > .vignette { position: absolute; z-index: 2; }
.boot__logo { position: relative; z-index: 3; width: clamp(150px, 13vw, 250px); height: auto; filter: invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, .25)); opacity: 0; }
.boot__bar {
  position: absolute; z-index: 3;
  left: var(--gutter); right: var(--gutter); bottom: clamp(30px, 6vh, 56px);
  font-family: var(--ff-en); font-size: var(--fs-boot); font-weight: 500; letter-spacing: .14em;
  color: #8f8f8f;
  text-shadow: 0 0 6px rgba(255, 255, 255, .15);
}
.boot__meta { display: flex; justify-content: space-between; margin-bottom: 12px; }
.boot__num { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.boot__ticks { display: flex; justify-content: space-between; align-items: center; height: 12px; }
.boot__ticks i { display: block; flex: none; width: 5px; height: 1px; background: #5e5e5e; }
.boot__ticks i.is-on { width: 1.5px; height: 12px; background: #b5b5b5; box-shadow: 0 0 4px rgba(255, 255, 255, .25); }
/* 亮帶：跑完後由上往下掃過，掃過的地方就出現網站 */
.boot-sweep {
  position: fixed; left: 0; right: 0; top: 0; z-index: 96; pointer-events: none;
  height: 34vh;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .16) 92%, rgba(255, 255, 255, .42) 99%, rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  transform: translateY(-40vh);
}
.is-booting { overflow: hidden; }
html:not(.js) .boot { display: none; }
/* 保險：萬一程式出錯，12 秒後開機畫面自己消失，網站還是看得到 */
.boot { animation: boot-failsafe .4s 12s forwards; }
@keyframes boot-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- 14. 骰子彩蛋（v5，方案 B：訊號崩壞 → 關機 → 重新開機） ---------- */
html.is-crash, html.is-crash body { background: #000; }
.crash { position: fixed; inset: 0; z-index: 90; cursor: none; }
.crash__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, .85), 0 0 46px 12px rgba(190, 205, 255, .3);
  opacity: 0;
}
.crash__dot {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 18px 6px rgba(255, 255, 255, .75);
  opacity: 0;
}

/* ---------- 15. 商品攝影（v7） ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 卡片：白色拍立得框（照 Matt-作品列表-商品攝影.png），照片比例照原圖，四周留白、下面多一點 */
.work-card--photo .work-card__paper { background-color: var(--c-paper); border: 0; padding: 5.3% 5.3% 10.3%; container-type: normal; }
.work-card--photo .work-card__img { aspect-ratio: var(--ar); height: auto; object-fit: cover; }
/* 手機、平板：兩欄（三欄）瀑布流，照片撐滿欄寬 */
.desk.desk--photo { display: block; columns: 2; column-gap: 14px; }
.desk.desk--photo .work-card { break-inside: avoid; margin-bottom: 20px; }
.desk .work-card--photo .work-card__img { width: 100%; }
@media (min-width: 640px) { .desk.desk--photo { columns: 3; } }
/* 桌面：照片最長邊 = 桌面寬的 20%（1920 時 280px），框 1.2%／底 2.4% */
@media (min-width: 1024px) {
  .desk.desk--photo { columns: auto; }
  .desk .work-card.work-card--photo { width: auto; --cw: 22.4cqw; }
  .desk .work-card--photo .work-card__paper { padding: 1.214cqw 1.214cqw 2.357cqw; }
  .desk .work-card--photo .work-card__img { width: min(20cqw, calc(20cqw * var(--ar))); max-width: none; }
  /* v8 街拍：一次只放 6 張，照片放大到 25%（白框跟著等比例） */
  .desk--street .work-card.work-card--photo { --cw: 28cqw; }
  .desk--street .work-card--photo .work-card__paper { padding: 1.518cqw 1.518cqw 2.946cqw; }
  .desk--street .work-card--photo .work-card__img { width: min(25cqw, calc(25cqw * var(--ar))); }
}
/* 轉場分身 */
.ghost.ghost--photo { background-color: var(--c-paper); border: 0; }
/* v10：平面卡片的分身跟真的卡片一樣：白框（.ghost__face）、後面疊的紙、圖釘，丟回桌面落地時不會「閃一下才冒出後面的紙」 */
.ghost.ghost--graphic { background: none; border: 0; overflow: visible; }
.ghost__face { position: absolute; inset: 0; background-color: var(--c-paper); box-shadow: inset 0 0 0 1px #eaeaea; }
.ghost--graphic.is-bundle .ghost__face { box-shadow: inset 0 0 0 1px #eaeaea, 0 calc(var(--cw) * .002) calc(var(--cw) * .012) rgba(0, 0, 0, .16); }
.ghost--graphic.is-bundle .work-card__sheet, .ghost--graphic.is-bundle .work-card__pin { display: block; }

/* All View 瀑布流：main.js 算位置（依編號放進最短的那一欄） */
.allview__grid--masonry { display: block; position: relative; }
.allview__grid--masonry .work-card { position: absolute; left: 0; top: 0; }

/* 內頁：白色照片框（老闆指定 #FFFFFF），照片最大 1200×750（1920×1080 時），四周 40px，下方資訊列 100px */
.detail.is-photo .detail__scroll { display: flex; padding: 0; }
.panel.panel--photo { width: auto; min-height: 0; margin: auto; --pad: clamp(16px, 2.08vw, 40px); }
.panel--photo::before { background: #fff; }
.photo { margin: 0; padding: var(--pad) var(--pad) 0; }
.photo__img {
  display: block; height: auto; aspect-ratio: var(--ar); object-fit: cover;
  width: min(calc(100vw - 2 * var(--gutter) - 2 * var(--pad)), calc(64vh * var(--ar)));
}
.photo__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  height: calc(var(--pad) * 2.5);
  font-family: var(--ff-en); font-size: var(--fs-panel-meta); font-weight: 600; color: var(--c-panel-meta);
}
.photo__by { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; }
.photo__logo { width: clamp(72px, 5.2vw, 100px); height: auto; opacity: .62; }
@media (min-width: 1024px) {
  .photo__img { width: min(62.5vw, calc(69.44vh * var(--ar))); }
}

/* ---------- 16. v8：照片還沒載入好時是「還沒顯影的底片」（老闆的參考圖 v7意見_圖1） ----------
   白框先出現，照片的位置是深灰底＋細顆粒（main.js 產生 --film-grain）；
   照片載入、解碼完成後才「顯影」：從暗、灰、微微模糊慢慢變成正常的顏色（參考拍立得顯影）。
   已經載好的照片（例如第二次打開）直接顯示，不再顯影一次 */
.work-card__film, .photo__film {
  display: block; line-height: 0;
  background-color: #161616;
  background-image: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, .05), rgba(0, 0, 0, .28) 78%), var(--film-grain, none);
  background-size: 100% 100%, 160px 160px;
}
.photo__film { width: fit-content; }
.film {
  opacity: 0;
  filter: brightness(.3) contrast(.7) saturate(0) blur(1.5px);
  transition: opacity .9s ease-out, filter 2.2s cubic-bezier(.3, .6, .35, 1);
}
.film.is-in { opacity: 1; filter: none; }
.film.no-dev { transition: none; }
@media (prefers-reduced-motion: reduce) { .film { transition: none; } }

/* ---------- 17. v8：只有網頁截圖的作品內頁（works.js layout:"grid"） ----------
   第一張（首頁）單張；其他兩張一排，APP 畫面（寬度不到 800 的圖）四張一排，排不滿的置中；
   圖和圖之間 40px（1920 時，跟著畫面寬度縮小） */
.panel__media--grid { --media-gap: clamp(12px, 2.08vw, 40px); display: flex; flex-direction: column; gap: var(--media-gap); }
.panel__grid-row { display: flex; justify-content: center; align-items: flex-start; gap: var(--media-gap); }
.panel__grid-row > img { width: calc((100% - var(--media-gap)) / 2); height: auto; background: #e6e6e6; }
.panel__grid-row--app > img { width: calc((100% - 3 * var(--media-gap)) / 4); }
@media (max-width: 767px) {
  /* 手機畫面太窄：網頁截圖一張一排，APP 畫面兩張一排 */
  .panel__grid-row { flex-wrap: wrap; }
  .panel__grid-row > img { width: 100%; }
  .panel__grid-row--app > img { width: calc((100% - var(--media-gap)) / 2); }
}
/* v8：內頁跟著滑鼠微微晃動時，固定畫面的清晰度，捲動時瀏覽器才不會一直重畫整頁 */
@media (min-width: 1024px) { .detail__scroll { will-change: transform; } }

/* ---------- 18. v9 All View：卡片很多時，不要每張卡片各自佔一層顯示記憶體 ----------
   v8 以前每張卡片都有「濾鏡陰影」＋「預先分層」，商品攝影 83 張時顯示記憶體不夠，往上捲時已經畫過的卡片被丟掉、
   要重畫才出現（看起來像圖片消失）。All View 改用一般的 box-shadow（數值和原本的陰影相同），也不預先分層 */
.allview .work-card, .allview .work-card.is-hover { filter: none; }
.allview .work-card__paper {
  will-change: auto;
  box-shadow: calc(var(--cw) * .002) calc(var(--cw) * .004) calc(var(--cw) * .004) rgba(0, 0, 0, .4), calc(var(--cw) * .037) calc(var(--cw) * .053) calc(var(--cw) * .022) rgba(0, 0, 0, .3);
  transition: box-shadow .35s var(--ease-out);
}
.allview .work-card.is-hover .work-card__paper { box-shadow: calc(var(--cw) * .056) calc(var(--cw) * .094) calc(var(--cw) * .031) rgba(0, 0, 0, .36); }
.allview .work-card--graphic .work-card__paper, .allview .work-card--graphic.is-hover .work-card__paper { box-shadow: none; }
.allview .work-card--graphic .work-card__face {
  box-shadow: calc(var(--cw) * .002) calc(var(--cw) * .004) calc(var(--cw) * .004) rgba(0, 0, 0, .4), calc(var(--cw) * .037) calc(var(--cw) * .053) calc(var(--cw) * .022) rgba(0, 0, 0, .3);
  transition: box-shadow .35s var(--ease-out);
}
.allview .work-card--graphic.is-hover .work-card__face { box-shadow: calc(var(--cw) * .056) calc(var(--cw) * .094) calc(var(--cw) * .031) rgba(0, 0, 0, .36); }

/* ---------- 19. v9 平面設計卡片（照 02.Matt-作品列表-平面設計.png）----------
   白色相框，圖片比例照縮圖，下面是卡片名稱＋編號；
   睿亮 01～03「夾著很多附件」：後面疊兩張紙、右上角一顆圖釘
   v10（照老闆的參考圖 v9意見_圖1_卡片疊紙樣式）：每張紙都有 #EAEAEA 細線框＋一點點陰影，後面兩張往右下錯開、
   往左轉一點（中間那張 -1.8°、最底下那張 -4.6°）；圖釘在右上角，壓在照片的右上角 */
.work-card--graphic .work-card__paper { background: none; border: 0; padding: 0; overflow: visible; }
.work-card__face { position: relative; display: block; padding: 5% 5% 0; background-color: var(--c-paper); box-shadow: inset 0 0 0 1px #eaeaea; }
.work-card--graphic .work-card__img { aspect-ratio: var(--ar); height: auto; object-fit: cover; }
.work-card__sheet {
  display: none; position: absolute; inset: 0; background-color: var(--c-paper);
  box-shadow: inset 0 0 0 1px #eaeaea, 0 calc(var(--cw) * .002) calc(var(--cw) * .012) rgba(0, 0, 0, .16);
}
.work-card--graphic.is-bundle .work-card__sheet { display: block; }
.work-card__sheet--1 { transform: translate(6.5%, 3.1%) rotate(-4.6deg); }   /* 最底下那張 */
.work-card__sheet--2 { transform: translate(2.4%, 1.4%) rotate(-1.8deg); }   /* 中間那張 */
.work-card--graphic.is-bundle .work-card__face { box-shadow: inset 0 0 0 1px #eaeaea, 0 calc(var(--cw) * .002) calc(var(--cw) * .012) rgba(0, 0, 0, .16); }
.work-card__pin {
  /* 直徑＝卡片寬 6.3%；中心離上緣、右緣各約 4.9%（margin-top 的 % 是照寬度算，上下左右才會一樣） */
  display: none; position: absolute; top: 0; right: 1.7%; margin-top: 1.7%; width: 6.3%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 18%, #f6dea8 0, #e4c482 24%, #cba65e 48%, #b88f44 70%, #b48b3e 100%);
  box-shadow: inset 0 0 0 calc(var(--cw) * .0035) rgba(246, 222, 168, .5),
              calc(var(--cw) * .004) calc(var(--cw) * .006) calc(var(--cw) * .005) rgba(0, 0, 0, .38);
}
.work-card--graphic.is-bundle .work-card__pin { display: block; }
/* All View：白框也要有細線框；夾著附件的卡片（只有 3 張）用整組的濾鏡陰影，後面疊的紙才會一起投影 */
.allview .work-card--graphic .work-card__face {
  box-shadow: inset 0 0 0 1px #eaeaea, calc(var(--cw) * .002) calc(var(--cw) * .004) calc(var(--cw) * .004) rgba(0, 0, 0, .4), calc(var(--cw) * .037) calc(var(--cw) * .053) calc(var(--cw) * .022) rgba(0, 0, 0, .3);
}
.allview .work-card--graphic.is-hover .work-card__face { box-shadow: inset 0 0 0 1px #eaeaea, calc(var(--cw) * .056) calc(var(--cw) * .094) calc(var(--cw) * .031) rgba(0, 0, 0, .36); }
.allview .work-card--graphic.is-bundle { filter: var(--card-shadow-all); }
.allview .work-card--graphic.is-bundle.is-hover { filter: var(--card-shadow-all-hover); }
.allview .work-card--graphic.is-bundle .work-card__face,
.allview .work-card--graphic.is-bundle.is-hover .work-card__face { box-shadow: inset 0 0 0 1px #eaeaea, 0 calc(var(--cw) * .002) calc(var(--cw) * .012) rgba(0, 0, 0, .16); }
/* All View：平面設計 3 欄（main.js 算位置） */
.allview__grid--graphic .work-card { --cw: 17.7vw; }

/* ---------- 20. v9 附件總覽（睿亮 01～03 的內頁，照 02.Matt-作品內頁-平面設計-top／bot.png）----------
   紙比 UI/UX 寬（1920 時 1440），四邊 40px；圖片每排高度一樣、寬度照比例，間距 40px；標題和說明在圖片下面 */
@media (min-width: 1024px) {
  .panel.panel--bundle { --panel-w: min(75vw, 1440px); --panel-pad: clamp(24px, 2.08vw, 40px); }
}
.panel--bundle .panel__body { padding-top: var(--panel-pad); }
.panel--bundle .panel__media { margin-top: 0; }
.panel--bundle .panel__text { margin-top: clamp(40px, 5.8vh, 64px); }
.bundle { --bgap: clamp(10px, 2.08vw, 40px); display: flex; flex-direction: column; gap: var(--bgap); }
.bundle__row { display: flex; gap: var(--bgap); width: calc(var(--fill, 1) * 100%); margin: 0 auto; }
.bundle__item {
  flex: var(--a) 1 0; min-width: 0; aspect-ratio: var(--a);
  position: relative; display: block; padding: 0; border: 0; overflow: hidden;
  background: #e6e6e6; cursor: zoom-in;
}
.bundle__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .5s var(--ease-out); }
.bundle__item:hover img { transform: scale(1.03); }
.bundle__item:focus-visible { outline: 3px solid #505050; outline-offset: 3px; }

/* ---------- 21. v9 附件大圖（第二層，照 02.Matt-作品內頁-平面設計-第二層-橫式／直式圖片.png）----------
   大紙（1920×1080 時 1455×900）微微斜放，下面還疊著一張；照片放在紙的上半部（照比例完整顯示），
   下方左邊是副標，右邊「上一張／下一張／X」；底下的內頁變暗
   v10：不再做 3D 翻頁（拿掉 preserve-3d）；.is-air＝紙還在空中（剛要蓋上來、或正被拿起來），影子比較遠比較淡 */
.sheets { position: absolute; inset: 0; z-index: 3; }
.sheets[hidden] { display: none; }
.sheets:focus { outline: none; }
.sheets__dim { position: absolute; inset: 0; background: rgba(14, 14, 14, .55); }
.sheets__stage { position: absolute; inset: 0; pointer-events: none; touch-action: pan-y; }   /* v16（QA Q04）：左右滑交給網頁換張，瀏覽器只管上下捲（不然會取消觸控、收不到 pointerup） */
.sheet {
  --sheet-w: min(75.8vw, 1455px); --sheet-h: min(83.3vh, 900px); --sp: clamp(16px, 2.08vw, 40px);
  position: absolute; left: 50%; top: 50%; margin: calc(var(--sheet-h) / -2) 0 0 calc(var(--sheet-w) / -2);
  width: var(--sheet-w); height: var(--sheet-h);
  display: flex; flex-direction: column; padding: var(--sp);   /* v11：按鈕列移到上面，四邊都留 --sp */
  background: var(--c-panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 16px 40px rgba(0, 0, 0, .35), 0 40px 90px rgba(0, 0, 0, .3);
  transition: box-shadow .5s cubic-bezier(.3, .7, .4, 1);
  pointer-events: auto;
}
.sheet.is-air { box-shadow: 0 6px 14px rgba(0, 0, 0, .14), 0 44px 80px rgba(0, 0, 0, .3), 0 90px 150px rgba(0, 0, 0, .22); }
.sheet.is-under { pointer-events: none; }
.sheet__media { position: relative; flex: 1; min-height: 0; }
.sheet__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease; }
.sheet__img.is-in { opacity: 1; }
/* v11：副標＋上一張／下一張／X 移到大紙上方（老闆 2026-10-28 圖 1），照片在下面 */
.sheet__bar {
  order: -1;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  height: calc(var(--sp) * 1.75); margin-bottom: calc(var(--sp) * .25);
}
.sheet__sub { font-family: var(--ff-en); font-size: var(--fs-panel-meta); font-weight: 600; color: var(--c-panel-meta); }
.sheet__btns { display: flex; gap: 12px; }
.sheet__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 40px; padding: 0 18px; border: 1px solid #c2c2c2; border-radius: 999px;
  background: transparent; color: #505050; font-family: var(--ff-zh); font-size: var(--fs-small); font-weight: 600;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.sheet__btn:hover { background: #fff; border-color: #8c8c8c; color: #2e2e2e; }
.sheet__btn:focus-visible { outline: 2px solid #505050; outline-offset: 2px; }
.sheet__btn--x { width: 40px; padding: 0; }
@media (max-width: 1023px) {
  .sheet { --sheet-w: calc(100vw - 24px); --sheet-h: min(74vh, calc((100vw - 24px) * 1.3)); }
  .sheet__bar { flex-wrap: wrap; height: auto; padding: 0 0 12px; margin-bottom: 0; }
  .sheet__btn { height: 38px; padding: 0 14px; }
}
/* v11：附件大圖打開時，外框的 Prev／Next Design 藏起來（不會誤按到換作品；← → 鍵換的是附件） */
.detail__nav { transition: opacity .3s ease; }
.detail.has-sheet .detail__nav { opacity: 0; pointer-events: none; }
@media (max-width: 420px) { .sheet__sub { display: none; } .sheet__btns { width: 100%; justify-content: space-between; } }


/* ---------- 22. v11 About（照 03.Matt-關於我.png，1920×1080）----------
   和作品列表同一個畫面：左欄換成彩色照片（v13：大小和其他頁一樣）＋Education.／Work.；標題 Visual Communication Designer、兩段簡介、
   件數的位置是「» The website design was done by Matt in collaboration with Claude AI.」；
   桌面上方左邊 SKILL、右邊 WORK EXPERIENCE；沒有骰子、沒有 VIEW ALL、沒有 PRESS & HOLD */
.cat-title__sub:empty { display: none; }
.stage__hint--2:empty { display: none; }
[data-category="about"] .cat-intro { color: var(--c-muted); }
[data-category="about"] .dice,
[data-category="about"] .stage__viewall { display: none; }
[data-category="about"] .sound-toggle { top: -4px; }   /* v13：About 沒有骰子，音效開關移到骰子的位置 */
@media (min-width: 1024px) { [data-category="about"] .sound-toggle { top: 33px; } }
@media (min-width: 1024px) {
  /* 簡介比作品列表的介紹小（1920 時 29.5px、行高 48px），寬度到右邊 */
  /* 設計稿是左右對齊、寫到右邊界（1920 時 x＝1880） */
  [data-category="about"] .cat-intro { font-size: clamp(15px, 1.5vw, 28.8px); line-height: 1.66; text-align: justify; padding-right: 0; }
  .stage__hint--2 { position: absolute; top: 0; left: calc(51.36% - 20px); }   /* WORK EXPERIENCE：字在 1920 時 x＝1239 */
}
/* 手機：左欄的 Education.／Work. 也要看得到 */
@media (max-width: 1023px) {
  [data-category="about"] .profile__bottom { display: block; padding-top: 18px; }
  [data-category="about"] .profile__logo { display: none; }
}

/* About 卡片：寬度照稿（技能 499、經歷 279，1920 時），影子和其他卡片一樣（--cw 不變）
   桌機的字和間距用卡片寬的比例（cqw，卡片內容寬的 %），手機、平板用固定的 px */
.about-card { cursor: default; }
.about-card .work-card__paper { font-family: var(--ff-card); color: var(--c-paper-ink); }   /* v12：Chiron GoRound TC（老闆 2026-10-28），大小不變 */
.about-card--skill .work-card__paper { display: flex; align-items: center; padding: 0; background-color: var(--c-paper); }
.about-card__img { width: 40.1%; height: auto; aspect-ratio: 200 / 180; flex: none; object-fit: contain; }
.about-card__body { display: block; padding: 10px 4% 10px 5%; min-width: 0; }
.about-card__title { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
.about-card__list { display: block; }
.about-card__item { display: block; position: relative; padding-left: .8em; font-weight: 500; color: #7a7a7a; font-size: 13px; line-height: 1.7; }
.about-card__item::before {
  content: ""; position: absolute; left: .05em; top: 50%; margin-top: -.28em;
  border-left: .45em solid #505050; border-top: .28em solid transparent; border-bottom: .28em solid transparent;
}
.about-card--work .work-card__paper { padding: 4.66%; }
.about-card__logo { width: 100%; height: auto; aspect-ratio: 254 / 90; }
.about-card__name { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; line-height: 1.35; }
.about-card__role { display: flex; align-items: center; gap: .45em; margin-top: 6px; font-weight: 500; color: #7a7a7a; font-size: 13px; line-height: 1.3; }
.about-card__icon { width: .85em; height: .85em; flex: none; fill: #8c8c8c; }
@media (min-width: 1024px) {
  .desk .about-card--skill { width: 35.64cqw; }
  .desk .about-card--work { width: 19.93cqw; }
  /* 1920 時：技能卡內容寬 497 → 標題、重點 16px（行距 27px）；經歷卡內容寬 251 → 名稱、職稱 16px（照設計稿量） */
  .about-card__body { padding: 0 4% 0 5%; }
  .about-card__title { font-size: calc(3.22cqw * var(--fs-k)); margin-bottom: 1.6cqw; }
  .about-card__item { font-size: calc(3.22cqw * var(--fs-k)); line-height: 1.69; }
  .about-card__name { margin-top: 4.8cqw; font-size: calc(6.37cqw * var(--fs-k)); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .about-card__role { margin-top: 3.8cqw; font-size: calc(6.37cqw * var(--fs-k)); white-space: nowrap; }
}
/* 「卡槽」（v12 定案的玩法）：抓起來時原位留下的虛線空位，固定 0°（卡片放回去時角度每次稍微不同） */
.about-slot {
  position: absolute; z-index: 0; pointer-events: none;
  border: 1.5px dashed rgba(255, 255, 255, .42); border-radius: 2px;
  background: rgba(0, 0, 0, .16);
}
/* 手機、平板：照順序排（手機：技能一張一排、經歷兩張一排；平板：都兩張一排） */
.about-label { grid-column: 1 / -1; margin: 6px 0 -6px; color: var(--c-muted); font-weight: 600; letter-spacing: .02em; }
.about-label:not(:first-child) { margin-top: 18px; }
@media (max-width: 1023px) {
  .desk.desk--about { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .desk--about .about-card--skill { grid-column: 1 / -1; }   /* 手機：技能一張一排，經歷兩張一排 */
}


/* ---------- 23. Contact（v13 彈出視窗：交換名片；v14 名片照 Matt 的稿）----------
   文字照文案定稿「聯絡-S01」；不放超連結（2026-10-22），聯絡資料旁邊是「複製」按鈕。
   桌機：背景（作品列表）變模糊、變暗，標題在上面，兩張名片並排、斜斜地放著（可以抓起來，放開回原位）
   手機、平板：整頁深色，名片一張一排 */
.contact { position: fixed; inset: 0; z-index: 52; outline: none; }
.contact[hidden] { display: none; }
.contact__backdrop { position: absolute; inset: 0; z-index: 0; background: var(--c-bg); }
.contact > .crt, .contact > .vignette { position: absolute; z-index: 1; }
.contact__scroll { position: absolute; inset: 0; z-index: 3; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.contact__inner {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--header-h) + 20px) var(--gutter) 56px;
}
.contact__head { text-align: center; }
.contact__title { margin: 0; font-family: var(--ff-display); font-weight: 800; font-size: var(--fs-title); line-height: 1.05; letter-spacing: -.01em; color: var(--c-text); }
.contact__sub { margin: .7em 0 0; font-family: var(--ff-en); font-weight: 600; font-size: var(--fs-ui); color: rgba(255, 255, 255, .6); letter-spacing: .02em; }
.contact__cards { display: grid; gap: 26px; width: 100%; max-width: 420px; margin-top: 34px; }
.contact__services { margin: 30px 0 0; color: rgba(255, 255, 255, .6); font-weight: 600; font-size: var(--fs-ui); letter-spacing: .02em; text-align: center; }   /* v14：取代 PRESS & HOLD（Matt 2026-10-31） */
.contact__logo { position: absolute; z-index: 4; display: none; }
.contact__close { position: absolute; z-index: 4; margin: 0; top: calc(var(--header-h) / 2 - 20px); right: calc(var(--gutter) - 8px); }
@media (min-width: 1024px) {
  .contact__backdrop { background: rgba(20, 20, 20, .42); }   /* 後面模糊的桌面要看得到 */
  .contact__logo { display: block; top: 0; left: var(--gutter); height: var(--header-h); line-height: var(--header-h); }
  .contact__inner { padding: calc(var(--header-h) + 2vh) var(--gutter) 5vh; }
  .contact__cards { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 3.2vw, 64px); max-width: none; margin-top: clamp(36px, 6.5vh, 80px); }
  .contact__services { margin: clamp(30px, 5.5vh, 60px) 0 0; }
}

/* 名片（v14 照 Matt 的名片稿 v13意見_圖1_名片排版.png：稿上 637×404，下面的 cqw 都是照稿量的「名片寬的 %」）
   左上名字＋職稱、右上圓形標誌；聯絡資料貼齊底部（標籤和內容一樣黑、一樣粗），每一筆右邊一個灰色的複製圖示；沒有分隔線 */
.name-card { position: relative; width: 100%; container-type: inline-size; -webkit-tap-highlight-color: transparent; }
@media (min-width: 1024px) {
  .name-card { width: clamp(360px, 28vw, 560px); flex: none; cursor: grab; }
  .name-card.is-grabbed { cursor: grabbing; }
}
.name-card__paper {
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 637 / 404;
  padding: 4.9cqw 5cqw 4cqw 5.2cqw;
  background-color: var(--c-paper);
  color: #000;
  border: 1px solid #eaeaea;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 22px rgba(0, 0, 0, .26), 0 26px 56px rgba(0, 0, 0, .28);
  transition: box-shadow .35s var(--ease-out);
  transform-origin: 50% 50%;
  overflow: hidden;
}
.name-card.is-grabbed .name-card__paper { box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 28px 46px rgba(0, 0, 0, .36), 0 60px 110px rgba(0, 0, 0, .42); }
.name-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqw; }
.name-card__id { min-width: 0; padding-top: .9cqw; }
.name-card__name { margin: 0; font-family: var(--ff-display); font-weight: 900; font-size: max(26px, 8cqw); line-height: 1; letter-spacing: -.02em; color: #000; }
.name-card__title { margin: .55cqw 0 0; font-family: var(--ff-display); font-weight: 600; font-size: max(12px, 2.9cqw); line-height: 1.2; color: #808080; }
.name-card__logo { flex: none; width: 13.2cqw; height: auto; -webkit-user-drag: none; pointer-events: none; }
.name-card__rows { margin: auto 0 0; display: grid; }
.name-card__row { display: grid; grid-template-columns: 20.6cqw minmax(0, 1fr); align-items: center; min-height: max(22px, 5.35cqw); }
.name-card__row dt, .name-card__val { font-family: var(--ff-en); font-weight: 600; font-size: max(12px, 2.85cqw); line-height: 1.2; color: #000; white-space: nowrap; }
.name-card__val { font-size: max(12px, 2.92cqw); }
.name-card__row dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; min-width: 0; }
.name-card__val {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  -webkit-user-select: text; user-select: text; cursor: text;
}
.name-card__val::selection { background: #2e2e2e; color: #fff; }
/* 複製：稿上是 20px 的灰色實心圖示（兩張紙疊在一起），按的範圍比圖示大一點 */
.name-card__copy {
  flex: none; display: inline-grid; place-items: center;
  width: max(28px, 5.4cqw); height: max(28px, 5.4cqw); margin: -2cqw -1.1cqw -2cqw 0;
  border-radius: 4px; color: #808080;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.name-card__copy svg { width: max(20px, 3.9cqw); height: max(20px, 3.9cqw); overflow: visible; }
.name-card__copy .i-ok { display: none; }
.name-card__copy.is-done .i-copy { display: none; }
.name-card__copy.is-done .i-ok { display: inline; }
.name-card__copy.is-done { color: #2e2e2e; }
@media (hover: hover) { .name-card__copy:hover { color: #2e2e2e; background: rgba(0, 0, 0, .05); } }
.name-card__copy:focus-visible { outline: 2px solid #2e2e2e; outline-offset: 1px; }
/* 名片是霧面的紙：反光比作品卡片淡一點，名字才不會被洗白 */
.name-card__paper > .work-card__shine { filter: opacity(.6); }