/* VCD 首頁｜Poster × Identity（2026-10-15）
   class 前綴 vh-；色票：紙 / 墨 / 海報紅 / 識別藍 / 指標黃 */
:root{
  --paper:#FAF8F4;
  --paper-2:#F1EEE7;
  --ink:#121212;
  --ink-2:#4A4741;
  --red:#FF3B1F;
  --blue:#2238E0;
  --yellow:#FFC21A;
  --white:#FFFFFF;
  --line:rgba(18,18,18,.14);
  --f-sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --f-disp:"Archivo","Noto Sans TC",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.vh-wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.vh-mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- 頂部列 ---------- */
.vh-top{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.vh-top .vh-wrap{display:flex;align-items:center;gap:24px;height:64px}
.vh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-disp);font-weight:900;font-size:22px;letter-spacing:-.01em}
.vh-mark{display:grid;grid-template-columns:repeat(2,13px);grid-template-rows:repeat(2,13px);gap:2px}
.vh-mark i{display:block}
.vh-mark i:nth-child(1){background:var(--red);border-radius:50%}
.vh-mark i:nth-child(2){background:var(--ink)}
.vh-mark i:nth-child(3){background:var(--yellow);clip-path:polygon(0 0,0 100%,100% 100%)}
.vh-mark i:nth-child(4){background:var(--blue);border-radius:100% 0 0 0}
.vh-brand small{font-family:var(--f-sans);font-weight:500;font-size:13px;color:var(--ink-2);letter-spacing:.05em}
.vh-nav{margin-left:auto;display:flex;gap:4px}
.vh-nav a{text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;white-space:nowrap}
.vh-nav a:hover{background:var(--ink);color:var(--paper)}
.vh-nav a.is-on{background:var(--ink);color:var(--paper)}

/* ---------- Hero ---------- */
.vh-hero{padding:56px 0 72px;transition:background-color .9s var(--ease)}
body[data-mode="identity"] .vh-hero{background:#F0F2F8}
.vh-hero .vh-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.vh-eyebrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.vh-eyebrow span{font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;border:1px solid var(--ink);padding:4px 10px;border-radius:999px}
.vh-eyebrow span:first-child{background:var(--ink);color:var(--paper)}
.vh-h1{margin:0;font-weight:900;font-size:clamp(56px,8.6vw,120px);line-height:1;letter-spacing:-.02em}
.vh-h1 .l1,.vh-h1 .l2{display:block;white-space:nowrap}
.vh-h1 .l2{display:flex;align-items:stretch;gap:.16em;margin-top:.04em}
.vh-h1 .en{display:flex;flex-direction:column;justify-content:space-between;border-left:.06em solid var(--red);padding:.1em 0 .08em .32em;font-family:var(--f-disp);font-weight:800;font-size:.2em;line-height:1;letter-spacing:.04em;text-transform:uppercase;font-stretch:118%;transition:border-color .6s}
.vh-h1 .en span:nth-child(2){font-weight:900}
body[data-mode="identity"] .vh-h1 .en{border-color:var(--blue)}
.vh-h1 em{font-style:normal;display:block;font-family:var(--f-disp);font-weight:800;font-size:.46em;letter-spacing:-.01em;margin-top:.35em;font-stretch:112%}
.vh-h1 em b{font-weight:900;color:var(--red);transition:color .6s}
.vh-h1 em u{text-decoration:none;font-weight:900;color:var(--ink);transition:color .6s}
body[data-mode="identity"] .vh-h1 em b{color:var(--ink)}
body[data-mode="identity"] .vh-h1 em u{color:var(--blue)}
.vh-lead{max-width:34em;font-size:17px;line-height:1.95;color:var(--ink-2);margin:28px 0 32px}
.vh-lead strong{color:var(--ink)}

.vh-switch{display:inline-flex;background:var(--ink);border-radius:999px;padding:4px;position:relative}
.vh-switch button{all:unset;cursor:pointer;position:relative;z-index:1;color:var(--paper);font-family:var(--f-disp);font-weight:800;font-size:14px;letter-spacing:.08em;padding:10px 20px;border-radius:999px;transition:color .4s}
.vh-switch button span{font-family:var(--f-sans);font-weight:500;letter-spacing:.05em;margin-left:6px;opacity:.8}
.vh-switch button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.vh-switch::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:var(--pw,50%);transform:translateX(var(--px,0));background:var(--red);border-radius:999px;transition:transform .6s var(--ease),width .6s var(--ease),background .6s}
body[data-mode="identity"] .vh-switch::before{background:var(--blue)}
.vh-switch-note{display:block;margin-top:12px;font-size:13px;color:var(--ink-2)}
.vh-auto{all:unset;cursor:pointer;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;margin-left:10px;border-bottom:1px solid currentColor}

/* 海報 ⇄ 識別 畫布 */
.vh-stage{justify-self:center;width:min(100%,460px)}
.vh-sheet-wrap{position:relative;padding:22px}
.vh-crop{position:absolute;width:16px;height:16px;border-color:var(--ink);border-style:solid;border-width:0}
.vh-crop.tl{top:0;left:0;border-right-width:1px;border-bottom-width:1px}
.vh-crop.tr{top:0;right:0;border-left-width:1px;border-bottom-width:1px}
.vh-crop.bl{bottom:0;left:0;border-right-width:1px;border-top-width:1px}
.vh-crop.br{bottom:0;right:0;border-left-width:1px;border-top-width:1px}
.vh-sheet{container-type:inline-size;position:relative;aspect-ratio:3/4;background:var(--white);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.vh-sheet .sh{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);transform:rotate(var(--r,0deg));mix-blend-mode:multiply;transition:left 1s var(--ease),top 1s var(--ease),width 1s var(--ease),height 1s var(--ease),transform 1s var(--ease)}
.sh.c{background:var(--red);border-radius:50%}
.sh.q{background:var(--ink)}
.sh.t{background:var(--yellow);clip-path:polygon(0 0,0 100%,100% 100%)}
.sh.b{background:var(--blue);border-radius:100% 0 0 0}
/* 海報構圖 */
[data-mode="poster"] .sh.c{--x:-16cqw;--y:8cqw;--s:82cqw}
[data-mode="poster"] .sh.q{--x:46cqw;--y:50cqw;--s:62cqw;--r:14deg}
[data-mode="poster"] .sh.t{--x:-6cqw;--y:70cqw;--s:58cqw}
[data-mode="poster"] .sh.b{--x:56cqw;--y:-12cqw;--s:54cqw}
/* 識別構圖：2×2 模組＝標誌 */
[data-mode="identity"] .sh.c{--x:31cqw;--y:28cqw;--s:18cqw}
[data-mode="identity"] .sh.q{--x:51cqw;--y:28cqw;--s:18cqw}
[data-mode="identity"] .sh.t{--x:31cqw;--y:48cqw;--s:18cqw}
[data-mode="identity"] .sh.b{--x:51cqw;--y:48cqw;--s:18cqw}

.vh-sheet .lay{position:absolute;inset:0;transition:opacity .6s ease}
.vh-sheet .lay.poster{opacity:1;transition-delay:.45s}
.vh-sheet .lay.identity{opacity:0;transition-delay:0s}
[data-mode="identity"] .vh-sheet .lay.poster{opacity:0;transition-delay:0s}
[data-mode="identity"] .vh-sheet .lay.identity{opacity:1;transition-delay:.55s}
.lay .tx{position:absolute;margin:0}
.lay .k{font-family:var(--f-mono);font-size:2.4cqw;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}
.poster .k1{left:6cqw;top:5cqw;color:var(--ink)}
.poster .k2{right:6cqw;bottom:5cqw;text-align:right}
.poster .big{left:6cqw;bottom:13cqw;font-family:var(--f-sans);font-weight:900;font-size:17cqw;line-height:.98;letter-spacing:-.02em;color:var(--ink)}
.poster .vert{right:4.5cqw;top:34cqw;writing-mode:vertical-rl;font-family:var(--f-disp);font-weight:900;font-size:9cqw;letter-spacing:.06em;color:var(--white);mix-blend-mode:difference}
.identity .k1{left:6cqw;top:5cqw}
.identity .k3{left:6cqw;bottom:5cqw;color:var(--ink-2)}
.identity .gl{position:absolute;background:rgba(34,56,224,.35)}
.identity .gl.v{top:0;bottom:0;width:1px}
.identity .gl.h{left:0;right:0;height:1px}
.identity .cs{position:absolute;left:25cqw;top:22cqw;width:50cqw;height:50cqw;border:1px dashed var(--blue)}
.identity .cs::before,.identity .cs::after{content:"x";position:absolute;font-family:var(--f-mono);font-size:2.4cqw;color:var(--blue)}
.identity .cs::before{left:1.6cqw;top:-.6cqw}
.identity .cs::after{right:-4cqw;top:1.6cqw}
.identity .wm{left:25cqw;top:78cqw;width:50cqw;text-align:center}
.identity .wm b{display:block;font-family:var(--f-disp);font-weight:900;font-size:11cqw;line-height:1;letter-spacing:.12em;font-stretch:120%}
.identity .wm span{display:block;font-weight:700;font-size:3.3cqw;letter-spacing:.5em;margin-top:2cqw;padding-left:.5em}
.identity .sw{left:6cqw;right:6cqw;top:103cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}
.identity .sw i{display:block;height:9cqw}
.identity .sw small{display:block;font-family:var(--f-mono);font-size:2cqw;margin-top:1cqw;letter-spacing:.04em}
.vh-caption{margin:14px 22px 0;font-size:14px;line-height:1.7;color:var(--ink-2);min-height:3.4em}
.vh-caption b{color:var(--ink)}

/* ---------- 跑馬燈 ---------- */
.vh-ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;border-block:1px solid var(--ink)}
.vh-ticker div{display:inline-flex;gap:28px;padding:14px 0;animation:vh-tick 38s linear infinite;font-family:var(--f-disp);font-weight:800;font-size:20px;letter-spacing:.04em}
.vh-ticker em{font-style:normal;color:var(--red)}
.vh-ticker i{font-style:normal;color:var(--yellow)}
@keyframes vh-tick{to{transform:translateX(-50%)}}

/* ---------- 區塊共用 ---------- */
.vh-sec{padding:96px 0}
.vh-sec-head{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;align-items:end;margin-bottom:48px}
.vh-no{font-family:var(--f-disp);font-weight:900;font-size:88px;line-height:.8;letter-spacing:-.04em;grid-row:span 2}
.vh-sec-head h2{margin:0;font-size:clamp(28px,3.4vw,42px);line-height:1.25;font-weight:900;letter-spacing:-.01em}
.vh-sec-head p{margin:0;color:var(--ink-2);max-width:42em;font-size:15.5px}

/* ---------- 兩件事 ---------- */
.vh-two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.vh-card{position:relative;border-radius:4px;padding:36px 36px 32px;display:flex;flex-direction:column;min-height:620px;overflow:hidden}
.vh-card.poster{background:var(--red);color:var(--ink)}
.vh-card.identity{background:var(--white);color:var(--ink);border:1px solid var(--ink)}
.vh-card .tag{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;border-bottom:1px solid currentColor;padding-bottom:12px}
.vh-card h3{margin:28px 0 6px;font-size:clamp(34px,4vw,52px);line-height:1.1;font-weight:900;letter-spacing:-.02em;position:relative;z-index:1}
.vh-card .en{font-family:var(--f-disp);font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 20px;position:relative;z-index:1}
.vh-card p.d{margin:0 0 22px;font-size:15.5px;line-height:1.9;max-width:28em;position:relative;z-index:1}
.vh-steps{list-style:none;margin:0 0 24px;padding:0;counter-reset:s;position:relative;z-index:1}
.vh-steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:9px 0;border-top:1px solid currentColor;font-size:15px;font-weight:500}
.vh-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:12px}
.vh-steps li small{grid-column:2;font-weight:400;font-size:13px;opacity:.75;line-height:1.5}
.vh-card .out{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.vh-card .out span{font-size:13px;font-weight:500;padding:3px 10px;border:1px solid currentColor;border-radius:999px}
.vh-card .go{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.vh-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;background:var(--ink);color:var(--paper);transition:transform .2s}
.vh-btn:hover{transform:translateY(-2px)}
.vh-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.vh-btn svg{width:14px;height:14px}
/* 卡片裝飾 */
.vh-card.poster .deco{position:absolute;right:-70px;top:56px;width:220px;height:220px;border-radius:50%;background:var(--yellow);mix-blend-mode:multiply;opacity:.95}
.vh-card.poster .deco2{position:absolute;right:34px;top:150px;width:104px;height:104px;background:var(--ink);transform:rotate(14deg);mix-blend-mode:multiply}
.vh-card.poster h3,.vh-card.poster .en,.vh-card.poster p.d{max-width:calc(100% - 170px)}
.vh-card.identity .deco{position:absolute;right:28px;top:84px;width:150px;height:150px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:18.75px 18.75px;border:1px solid var(--line)}
.vh-card.identity .deco::after{content:"";position:absolute;inset:37.5px;background:var(--blue);border-radius:50% 50% 50% 0}
.vh-card.identity h3,.vh-card.identity .en,.vh-card.identity p.d{max-width:calc(100% - 170px)}
.vh-card.identity .vh-steps li{border-color:var(--line)}

/* ---------- 圖像 → 標誌 ---------- */
.vh-reduce{background:var(--ink);color:var(--paper)}
.vh-reduce .vh-sec-head p{color:#B9B4AA}
.vh-rd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.vh-rd-view{position:relative;aspect-ratio:1;background:var(--paper);border-radius:4px;overflow:hidden}
.vh-rd-view svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.96);transition:opacity .5s,transform .5s}
.vh-rd-view svg.on{opacity:1;transform:none}
.vh-rd-view .stamp{position:absolute;left:16px;top:14px;font-family:var(--f-mono);font-size:12px;color:var(--ink);letter-spacing:.06em;z-index:2}
.vh-rd-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:28px}
.vh-rd-tabs button{all:unset;cursor:pointer;text-align:center;padding:12px 4px 10px;border-top:3px solid #3A3833;font-weight:700;font-size:15px;color:#8E897F;transition:color .3s,border-color .3s}
.vh-rd-tabs button small{display:block;font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.06em}
.vh-rd-tabs button.on{color:var(--paper);border-color:var(--yellow)}
.vh-rd-tabs button:focus-visible{outline:2px solid var(--yellow)}
.vh-rd-range{width:100%;accent-color:var(--yellow);margin:0 0 28px}
.vh-rd-text h3{margin:0 0 10px;font-size:30px;font-weight:900}
.vh-rd-text p{margin:0 0 18px;color:#D6D1C6;font-size:15.5px;line-height:1.9}
.vh-rd-use{display:flex;gap:8px;flex-wrap:wrap}
.vh-rd-use span{font-size:13px;padding:4px 12px;border-radius:999px;border:1px solid #57534B;color:#8E897F;transition:all .3s}
.vh-rd-use span.on.p{background:var(--red);border-color:var(--red);color:var(--ink)}
.vh-rd-use span.on.i{background:var(--blue);border-color:var(--blue);color:var(--white)}

/* ---------- 18 週：指標牌 ---------- */
.vh-weeks{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.vh-lane h3{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:20px;font-weight:900}
.vh-lane h3 .pill{font-family:var(--f-disp);font-size:13px;letter-spacing:.1em;color:var(--white);padding:4px 10px;border-radius:3px}
.vh-lane.a .pill{background:var(--red);color:var(--ink)}
.vh-lane.b .pill{background:var(--blue)}
.vh-lane h3 small{font-family:var(--f-mono);font-weight:400;font-size:12px;color:var(--ink-2);margin-left:auto}
.vh-sign{display:grid;grid-template-columns:92px 1fr 44px;align-items:stretch;text-decoration:none;margin-bottom:8px;border-radius:5px;overflow:hidden;min-height:76px;transition:transform .25s var(--ease)}
.vh-sign:hover{transform:translateX(6px)}
.vh-sign .w{display:flex;flex-direction:column;justify-content:center;padding:0 14px;font-family:var(--f-disp);font-weight:900;font-size:24px;line-height:1;letter-spacing:-.01em}
.vh-sign .w small{font-family:var(--f-mono);font-weight:400;font-size:10.5px;letter-spacing:.08em;margin-bottom:5px;opacity:.8}
.vh-sign .t{display:flex;flex-direction:column;justify-content:center;padding:12px 4px 12px 16px;font-weight:700;font-size:16px;line-height:1.45}
.vh-sign .t small{font-weight:400;font-size:12.5px;opacity:.8;margin-top:2px}
.vh-sign .arr{display:flex;align-items:center;justify-content:center}
.vh-sign .arr svg{width:20px;height:20px}
.vh-lane.a .vh-sign{background:var(--red);color:var(--ink)}
.vh-lane.a .vh-sign .w{background:var(--ink);color:var(--red)}
.vh-lane.b .vh-sign{background:var(--blue);color:var(--white)}
.vh-lane.b .vh-sign .w{background:var(--white);color:var(--blue)}
.vh-sign.intro{background:var(--ink)!important;color:var(--paper)!important}
.vh-sign.intro .w{background:var(--yellow)!important;color:var(--ink)!important}
.vh-sign.final .w{background:var(--yellow)!important;color:var(--ink)!important}
.vh-extra{display:block;font-size:13px;margin:-2px 0 12px 4px;color:var(--ink-2)}
.vh-extra a{color:var(--ink);font-weight:700}

/* ---------- 工具箱（圖示牌） ---------- */
.vh-tools{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.vh-tool{display:flex;flex-direction:column;gap:14px;text-decoration:none;background:var(--white);border:1px solid var(--ink);border-radius:4px;padding:22px 20px;transition:background .25s,color .25s}
.vh-tool .ic{width:56px;height:56px;background:var(--ink);color:var(--paper);border-radius:10px;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.vh-tool .ic svg{width:30px;height:30px}
.vh-tool b{font-size:17px}
.vh-tool small{font-size:13px;color:var(--ink-2);line-height:1.6}
.vh-tool:hover{background:var(--ink);color:var(--paper)}
.vh-tool:hover small{color:#C9C4BA}
.vh-tool:hover .ic{background:var(--yellow);color:var(--ink)}

/* ---------- 頁尾 ---------- */
.vh-foot{border-top:1px solid var(--ink);padding:40px 0 56px;font-size:13px;color:var(--ink-2)}
.vh-foot .vh-wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.vh-foot p{margin:0;line-height:1.9}
.vh-foot a{color:var(--ink);font-weight:700}
.vh-foot img.cnt{display:inline-block;vertical-align:middle;height:22px;width:auto}
.vh-foot .big{font-family:var(--f-disp);font-weight:900;font-size:clamp(40px,8vw,96px);line-height:.85;color:var(--ink);letter-spacing:-.03em}

/* ---------- RWD ---------- */
@media (max-width:980px){
  .vh-hero .vh-wrap{grid-template-columns:1fr;gap:28px}
  .vh-two,.vh-rd,.vh-weeks{grid-template-columns:1fr}
  .vh-tools{grid-template-columns:repeat(2,1fr)}
  .vh-card{min-height:0}
}
@media (max-width:640px){
  .vh-wrap{padding:0 16px}
  .vh-top .vh-wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:8px}
  .vh-brand small{display:none}
  .vh-nav{margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .vh-nav::-webkit-scrollbar{display:none}
  .vh-nav a{padding:6px 12px;font-size:13px}
  .vh-hero{padding:32px 0 48px}
  .vh-h1{font-size:19vw}
  .vh-sec{padding:64px 0}
  .vh-sec-head{grid-template-columns:1fr;margin-bottom:32px}
  .vh-no{font-size:56px;grid-row:auto}
  .vh-card{padding:26px 20px 24px}
  .vh-card.identity .deco{width:96px;height:96px;right:16px;top:64px;background-size:12px 12px}
  .vh-card.identity .deco::after{inset:24px}
  .vh-card.identity h3,.vh-card.identity .en,.vh-card.identity p.d{max-width:none}
  .vh-card.identity h3{max-width:calc(100% - 100px)}
  .vh-card.poster .deco{width:130px;height:130px;right:-50px;top:44px}
  .vh-card.poster .deco2{width:60px;height:60px;right:14px;top:110px}
  .vh-card.poster .en,.vh-card.poster p.d{max-width:none}
  .vh-card.poster h3{max-width:calc(100% - 90px)}
  .vh-switch button{padding:9px 14px;font-size:13px}
  .vh-sign{grid-template-columns:84px 1fr 36px}
  .vh-sign .w{font-size:18px;padding:0 10px;white-space:nowrap}
  .vh-sign .t{font-size:15px}
  .vh-tools{grid-template-columns:1fr 1fr;gap:10px}
  .vh-tool{padding:16px 14px}
  .vh-rd-tabs button{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .vh-ticker div{animation:none}
  .vh-sheet .sh,.vh-sheet .lay{transition-duration:.01s!important;transition-delay:0s!important}
}