/* ============================================================================
   cat.css — /category/<key>/ 系列分類頁(2026-08-24 新建)
   ----------------------------------------------------------------------------
   五個分類各一頁(color / wrap / print / safe / tools;craft=DIY 只有一個系列,
   主選單直接連 /series/diy/,不設分類頁)。三語 shell 由
   tools/www/gen_category_pages.py 產生;內容渲染在 cat.js(讀 /data.js 的
   CLS+SERIES,SKU 數/系列清單永遠與全站同一份資料)。
   設計:碳黑底(與 /features/、/series-guide/ 深色一致)+ 分類色 --band 當頁面
   強調色;--band-ink 是同色的提亮版(深底上的文字用,對比 ≥4.5 程式驗證過)。
   ============================================================================ */
:root{
  --carbon:#0A0A0C;--panel:#101014;--white:#FFFFFF;--red:#E32027;--red-td:#FF5A60;
  --ink:#F4F2EE;--mut:#C9C6CE;--mut2:#A8A49B;--line:rgba(255,255,255,.14);
  --band:#E32027;--band-ink:#FF5A60;   /* cat.js 依分類覆寫 */
  --disp:'Archivo','Noto Sans TC',sans-serif;--body:'IBM Plex Sans','Noto Sans TC',sans-serif;--mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--carbon);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--band-ink);outline-offset:-3px}
.disp{font-family:var(--disp);font-stretch:118%;font-weight:900}
html[lang^="zh"] .disp{font-family:'Noto Sans TC',var(--disp);font-stretch:100%}
.eb{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--band-ink);display:flex;align-items:center;gap:10px}
.eb i{width:22px;height:2px;background:var(--band);flex:none}
.wrapx{max-width:1240px;margin:0 auto;padding:0 clamp(18px,3.4vw,44px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ───────── hero ───────── */
.hero{position:relative;min-height:min(74svh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--carbon)}
.hero .imgwrap{position:absolute;inset:-14% 0 0;will-change:transform}   /* 上緣多留 14% 給視差下沉 */
.hero .imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.66)}
.mx-anim .hero .imgwrap img{animation:kb 7.5s var(--ease) both}          /* Ken Burns 慢速收攏 */
@keyframes kb{from{transform:scale(1.1)}to{transform:scale(1.02)}}
.hero .shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,10,12,.55) 0%,rgba(10,10,12,.12) 34%,rgba(10,10,12,.62) 66%,rgba(10,10,12,.97) 100%)}
.hero .grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 16px)}
.hero .bandbar{position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--band);z-index:2}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(26px,4.5vh,52px)}
.hero-in .eb{animation:rise .7s var(--ease) both}
.hero h1{font-size:clamp(38px,6vw,84px);line-height:1.04;letter-spacing:-.01em;margin:14px 0 4px;text-transform:uppercase;
  text-shadow:0 2px 18px rgba(0,0,0,.65);animation:rise .7s var(--ease) .06s both}
html[lang^="zh"] .hero h1{letter-spacing:.02em;line-height:1.14}
.hero .hl{font-family:var(--disp);font-weight:900;font-style:italic;font-size:clamp(19px,2.2vw,30px);line-height:1.25;color:var(--band-ink);
  text-shadow:0 1px 12px rgba(0,0,0,.7);margin-bottom:14px;animation:rise .7s var(--ease) .12s both}
html[lang^="zh"] .hero .hl{font-style:normal}
.hero .desc{max-width:62ch;color:#EDEBEF;font-size:clamp(15px,1.15vw,17px);text-shadow:0 1px 10px rgba(0,0,0,.7);animation:rise .7s var(--ease) .18s both}
.hero .stats{display:flex;gap:clamp(18px,3vw,44px);margin-top:clamp(18px,3vh,30px);flex-wrap:wrap;animation:rise .7s var(--ease) .24s both}
.hero .stat b{display:block;font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:clamp(28px,3vw,44px);line-height:1;color:#fff}
.hero .stat small{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.hero .num{position:absolute;right:clamp(18px,3.4vw,44px);top:clamp(14px,3vh,34px);z-index:2;pointer-events:none;
  font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:clamp(54px,8vw,120px);line-height:1;color:#fff;opacity:.14}
.hero .num em{font-style:normal;font-size:.4em;color:var(--band-ink);opacity:1}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* 系列代碼帶(hero 下緣)— 2026-08-24 第四輪:改分類色實色帶(使用者:「一片黑,沒有隔離的感覺」),
   同系列頁「黑 hero → 色帶」的節奏;文字一律 --band-fg(琥珀底自動深字,對比全部 ≥4.5) */
.codes{background:var(--band);position:relative;overflow:hidden}
.codes::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(0,0,0,.06) 0 1px,transparent 1px 14px)}
.codes .mq{position:relative;z-index:1;display:flex}
.codes .grp{display:flex;flex-wrap:wrap;column-gap:28px;row-gap:6px;padding:14px clamp(18px,3.4vw,44px)}
.codes span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--band-fg,#fff);white-space:nowrap}
.codes span b{color:var(--band-fg,#fff);font-weight:700}
/* 2026-08-24 第五輪:無縫跑馬燈(cat.js 依容器寬複製內容 + 複製整組 → -50% 循環;hover/focus 暫停) */
.codes.is-mq .mq{width:max-content;animation:mq var(--mqd,26s) linear infinite}
.codes.is-mq .grp{flex-wrap:nowrap;padding:14px 14px}
.codes.is-mq:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ───────── 系列索引列 ───────── */
.idx{padding:clamp(44px,7vh,84px) 0 clamp(30px,5vh,60px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:clamp(20px,3.4vh,34px)}
.sec-head h2{font-size:clamp(24px,2.8vw,38px);line-height:1.2;margin-top:10px;max-width:24ch}
.sec-head .all{font-family:var(--mono);font-size:12.5px;color:var(--mut);text-align:right;line-height:1.7}
.sec-head .all b{color:var(--ink)}
/* 2026-08-24 第二輪(使用者:「整頁都黑,series 那邊要讓人明顯知道可以按」):
   列表改成卡片式按鈕 — 面板底色+邊框+常駐分類色左條+右側有字的「進入系列頁」斜切鈕。 */
.rows{display:flex;flex-direction:column;gap:12px}
/* 2026-08-24 第三輪:每張卡的底色/邊框帶一點自己的系列色(使用者:「系列底色或許可以稍微不一樣色」) */
.row{position:relative;display:grid;grid-template-columns:48px minmax(240px,.9fr) 1.3fr auto auto;gap:clamp(14px,2vw,28px);align-items:center;
  padding:clamp(18px,2.6vh,26px) clamp(16px,1.8vw,26px);
  background:color-mix(in srgb,var(--tint,var(--band)) 7%,var(--panel));
  border:1px solid color-mix(in srgb,var(--tint,var(--band)) 26%,var(--line));
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.row::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:5px;background:var(--tint,var(--band));transition:width .25s var(--ease)}
.row:hover{background:color-mix(in srgb,var(--tint,var(--band)) 14%,var(--panel));
  border-color:color-mix(in srgb,var(--tint,var(--band)) 60%,var(--line));
  transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.45)}
.row:hover::before{width:9px}
.row .no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--mut2)}
.row .who{min-width:0}
.row .code{display:block;font-family:var(--disp);font-stretch:118%;font-weight:900;font-size:clamp(26px,2.6vw,40px);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:#fff}
.row .code i{font-style:normal;display:inline-block;width:11px;height:11px;background:var(--tint,var(--band));margin-right:12px;transform:skewX(-14deg) translateY(-2px)}
.row .nm{display:block;margin-top:7px;font-weight:600;font-size:14.5px;color:var(--mut)}
.row .mark{display:inline-block;margin-top:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--mut2);
  border:1px solid var(--line);padding:2px 7px}
.row .what{min-width:0}
.row .pos{font-size:14.5px;line-height:1.6;color:#DDDAE2;max-width:60ch}
.row .ticks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.row .ticks i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:3px 8px;border:1px solid var(--line);color:var(--mut)}
.row .cnt{text-align:right}
.row .cnt b{display:block;font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:clamp(24px,2.4vw,36px);line-height:1;color:#fff}
.row .cnt small{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--mut2)}
.row .go{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;background:var(--band);color:var(--band-fg,#fff);
  font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background .18s,color .18s}
.row .go::after{content:"→";font-size:15px;transition:transform .2s}
.row:hover .go{background:#fff;color:#111114}
.row:hover .go::after{transform:translateX(4px)}

/* ───────── 動態與互動(2026-08-24 第五輪;全 transform/opacity)───────── */
/* 捲動進場 reveal:只在 .mx-anim(JS 有跑且未要求減少動態)下先藏,避免無 JS 白畫面 */
.mx-anim .rv{opacity:0;transform:translateY(24px);
  transition:opacity .65s var(--ease) var(--d,0s),transform .75s var(--ease) var(--d,0s)}
.mx-anim .rv.in{opacity:1;transform:none}
.mx-anim .row.rv.in{transition:opacity .65s var(--ease) var(--d,0s),transform .75s var(--ease) var(--d,0s),
  background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.mx-anim .row.rv.in:hover{transform:translateY(-2px);transition-delay:0s}
/* 系列卡滑鼠跟隨光暈(--mx/--my 由 JS 寫入;pointer-events none 不擋點擊) */
.row::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  background:radial-gradient(440px circle at var(--mx,70%) var(--my,50%),color-mix(in srgb,var(--tint,var(--band)) 13%,transparent),transparent 68%)}
.row:hover::after{opacity:1}
/* hover 微互動:代碼右移、規格籤點亮、SKU 數放大 */
.row .code,.row .cnt b{transition:transform .3s var(--ease)}
.row .ticks i{transition:border-color .25s,color .25s}
.row:hover .code{transform:translateX(4px)}
.row:hover .cnt b{transform:scale(1.07);transform-origin:right center}
.row:hover .ticks i{border-color:color-mix(in srgb,var(--tint,var(--band)) 45%,var(--line));color:#E9E6DF}
.xt{transition:background .22s var(--ease),transform .22s var(--ease)}
.xt:hover{transform:translateY(-2px)}

/* ───────── 其他分類 ───────── */
.xnav{padding:clamp(36px,6vh,72px) 0;border-top:1px solid var(--line);background:var(--panel)}
.xnav h2{font-size:clamp(20px,2.2vw,28px);margin:10px 0 22px}
/* 六格用固定欄數(6 → 3 → 2,都整除 6)— auto-fit 在寬桌機排成 5+1,第二列的灰底空格很醜(2026-08-24 第三輪) */
.xgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:1180px){.xgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.xgrid{grid-template-columns:repeat(2,1fr)}}
.xt{position:relative;background:var(--carbon);padding:18px 16px 16px;min-height:118px;display:flex;flex-direction:column;gap:6px;
  transition:background .22s var(--ease)}
.xt::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tint,var(--band));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.xt:hover::before,.xt.is-cur::before{transform:scaleX(1)}
.xt:hover{background:color-mix(in srgb,var(--tint,var(--band)) 9%,var(--carbon))}
.xt .xno{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mut2)}
.xt .xn{font-weight:700;font-size:15.5px;line-height:1.35;color:var(--ink)}
.xt .xc{font-family:var(--mono);font-size:11.5px;color:var(--mut);margin-top:auto}
.xt .xtag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--band-ink)}
.xt.is-cur{background:color-mix(in srgb,var(--tint,var(--band)) 13%,var(--carbon))}
.xt.is-cur .xn{color:#fff}

/* ───────── CTA ───────── */
.cta{background:var(--red);color:#fff;padding:clamp(40px,7vh,76px) 0}
.cta .wrapx{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta h2{font-size:clamp(24px,3vw,40px);line-height:1.15;text-transform:uppercase}
html[lang^="zh"] .cta h2{line-height:1.25}
.cta p{margin-top:8px;max-width:52ch;font-size:15px;color:#FFFFFF}   /* 白壓 #E32027 = 4.68(#FFE3E4 只有 3.86,程式驗過) */
.cta .acts{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);transition:background .18s,color .18s}
.btn::after{content:"→";transition:transform .2s}
.btn:hover::after{transform:translateX(4px)}
.btn-w{background:#fff;color:#111114}
.btn-w:hover{background:var(--carbon);color:#fff}
.btn-o{border:2px solid rgba(255,255,255,.85);clip-path:none;color:#fff}
.btn-o:hover{background:#fff;color:#111114}

/* ───────── 手機(獨立設計,不是縮小)───────── */
@media (max-width:860px){
  .hero{min-height:min(66svh,620px)}
  .hero h1{font-size:clamp(32px,9vw,44px)}
  .hero .num{font-size:52px;opacity:.2}
  .hero .stats{gap:22px}
  .hero .stat b{font-size:26px}
  .hero .desc{font-size:15px}
  .row{grid-template-columns:1fr auto;grid-template-rows:auto auto auto;row-gap:12px;padding:16px 14px 14px 18px}
  .row .no{display:none}
  .row .who{grid-column:1;grid-row:1}
  .row .code{font-size:26px}
  .row .code i{width:9px;height:9px;margin-right:9px}
  .row .what{grid-column:1 / -1;grid-row:2}
  .row .pos{font-size:15px}
  .row .cnt{grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:6px}
  .row .cnt b{font-size:24px}
  /* 手機沒有 hover — 「進入系列頁」鈕改成整寬常駐(觸控目標 46px) */
  .row .go{grid-column:1 / -1;grid-row:3;justify-content:center;width:100%}
  .row::before{width:5px}
  .row:hover{transform:none}
  .sec-head .all{text-align:left}
  .cta .wrapx{flex-direction:column;align-items:flex-start}
  .btn{min-height:46px;width:100%;justify-content:center}
  .cta .acts{width:100%;flex-direction:column}
}