/* ============================================================
   MOCHIU — 鋼印米紙
   零圓角、零模糊陰影、底色零漸層。漸層只出現在字裡。
   換全站基調＝只改「五個色相」那五行；其餘顏色都是引用。
   ============================================================ */

:root {
  /* ── 1. 五個色相：全站唯一寫死色碼的地方 ── */
  --h-paper:  #f1eddf;
  --h-ink:    #20201d;
  --h-blue:   #1f4488;
  --h-yellow: #f2c84b;
  --h-red:    #9c3320;

  /* ── 2. 由色相派生的面 ── */
  --s-paper-hi: color-mix(in srgb, var(--h-paper) 86%, #fff);

  /* ── 3. 角色 token，預設值＝米紙地面 ── */
  --ground:      var(--h-paper);
  --on-ground:   var(--h-ink);
  --accent:      var(--h-blue);
  --chrome:      var(--chrome-on-paper);
  --sheen:       var(--sheen-dim);
  --sheen-blend: multiply;
  --seam:        var(--h-ink);

  /* ── 4. 五支鉻色梯，一個地面一支 ──
     鐵律：一支梯子的所有停點都必須待在「對該地面 ≥3:1」的明度帶裡。
     梯子的明度只要掃過地面的明度，中間就會出現一條等亮度線，落在每個字的
     同一高度，把整行讀成上下兩截。深底梯往上收，淺底梯往下收；淺底上的
     金屬因此是槍鐵灰而不是鏡面銀。 */
  --chrome-on-ink: linear-gradient(176deg,
      #f4f7f9   0%, #cfd8de  16%, #a6b1b9  34%, #6b757e  47%,
      #6f7981  50%, #808b93  54%, #b9c3ca  70%, #ffffff  86%, #c3ccd2 100%);
  --chrome-on-blue: linear-gradient(176deg,
      #f4f7f9   0%, #d2dade  16%, #adb7bf  34%, #8e9aa4  47%,
      #939fa8  51%, #b0bac1  60%, #dde4e8  76%, #ffffff  88%, #c8d0d6 100%);
  --chrome-on-red: linear-gradient(176deg,
      #ffffff   0%, #e2e8ec  18%, #c2cbd2  36%, #a8b3ba  48%,
      #adb8bf  52%, #cfd7dc  66%, #f2f5f7  82%, #d8dfe4 100%);
  --chrome-on-paper: linear-gradient(176deg,
      #14181c   0%, #333b42  14%, #5a646c  28%, #7c8790  38%,
      #454e56  46%, #1b2024  52%, #3d454d  62%, #6d7880  78%, #2a3137 100%);
  --chrome-on-yellow: linear-gradient(176deg,
      #14181c   0%, #2e353b  14%, #4d565d  28%, #656f77  38%,
      #3a4249  46%, #171b1f  52%, #333a40  62%, #5a636b  78%, #23282d 100%);

  /* 首屏專用：熱感應色階。紫 → 洋紅 → 橘 → 黃 → 近白，像一塊被加熱到
     不同溫度的金屬。整條梯子都很亮，只有深地面撐得住（對墨 4.6–15:1）。
     --thermal-shadow 是這塊材質自己的暗部，不是品牌色相。 */
  --chrome-thermal: linear-gradient(125deg,
      #9a6bff  0%, #9a6bff 13%, #c95cf0 16%, #c95cf0 30%,
      #ee4a8e 33%, #ee4a8e 47%, #fb6a3a 50%, #fb6a3a 64%,
      #ff9d3f 67%, #ff9d3f 81%, #f8d45c 84%, #f8d45c 94%,
      #fff3d2 96%, #fff3d2 100%);
  --thermal-shadow: #614284;
  --thermal-stroke: #ffeed2;

  /* 掃光：深底用白光提亮（有明度餘裕），淺底用暗光壓過去。
     淺底若也用白光，overlay 會把中段停點的明度加倍，直接衝破 3:1 上限。 */
  --sheen-lift: rgba(255, 255, 255, .92);
  --sheen-dim:  rgba(0, 0, 0, .55);

  /* ── 5. 噪點瓦片，內嵌無外部請求 ── */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* ── 6. 線與圓角 ── */
  --bd-hair: 1px;
  --bd-rule: 3px;
  --bd-seam: 6px;
  --radius: 0;

  /* ── 7. 硬陰影，blur 與 spread 永遠 0 ── */
  --drop: 4px;
  --drop-lg: 7px;

  /* ── 8. 間距 ── */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;
  --gutter:      clamp(1.25rem, 5vw, 3.5rem);
  --section-pad: clamp(3rem, 11vw, 6.5rem);
  --measure:     34rem;
  --content-max: 72rem;

  /* ── 9. 動態 ── */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-snap: cubic-bezier(.16, 1, .30, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --t-tap: 120ms;
  --t-cut: 260ms;
  --t-enter: 380ms;
  --t-slab: 440ms;
  --t-sweep: 460ms;
  --stagger: 45ms;

  /* ── 10. 字級階梯，390px 是設計原點，320 是保險 ── */
  --t-micro: clamp(.75rem,   .727rem  + .095vw, .8125rem);
  --t-body:  clamp(.9375rem, .891rem  + .190vw, 1.0625rem);
  --t-lead:  clamp(1.0625rem, .855rem + .857vw, 1.75rem);
  --t-h3:    clamp(1.375rem, 1.143rem + .952vw, 2rem);
  /* 章節大標最長七個全形字（餘裕從計畫開始），加上描邊與硬影要塞得進內容寬。
     最長的那一句決定整個階梯，不為單一標題開特例。 */
  --t-h2:    clamp(2.25rem,  -.25rem + 13.5vw, 6rem);
  /* 每行四個全形字加上描邊與硬影，必須塞得進內容寬（100vw 減兩側 gutter）。 */
  --t-hero:  clamp(4rem,     .25rem + 20vw, 13rem);

  /* ── 11. 字 ── */
  --font-cjk:   "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --font-latin: "Anton", "Noto Sans TC Variable", Impact, sans-serif;
  --font-mono:  "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── 12. 觸控與安全區 ── */
  --tap-min: 44px;
  --tap-cta: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --hud-h: 44px;

  color-scheme: light;
}

/* 派生 token 必須和它引用的角色 token 落在同一個元素上。
   var() 在宣告所在的元素就被代換掉，代換完的結果才往下繼承——
   寫在 :root 的 --frame 會當場算成墨色，之後地面翻黑也不會跟著變。 */
:root,
[data-ground] {
  --on-ground-2:    color-mix(in srgb, var(--on-ground) 80%, var(--ground));
  --rule:           color-mix(in srgb, var(--on-ground) 30%, var(--ground));
  --frame:          var(--on-ground);
  --shadow-hard:    var(--drop) var(--drop) 0 var(--frame);
  --shadow-hard-lg: var(--drop-lg) var(--drop-lg) 0 var(--frame);
}

/* ── 13. 地面作用域：一個區塊只換這幾行，沒有任何字面色碼 ──
   --metal-shadow 刻意不等於 --accent：飽和色當硬陰影時會比字本身還顯眼，
   眼睛會把陰影當成字形。降飽和之後陰影仍在，但不搶字。 */
[data-ground="paper"] {
  --ground: var(--h-paper); --on-ground: var(--h-ink); --accent: var(--h-blue);
  --chrome: var(--chrome-on-paper); --sheen: var(--sheen-dim); --sheen-blend: multiply;
  --metal-shadow: color-mix(in srgb, var(--h-blue) 50%, var(--h-paper));
}
[data-ground="ink"] {
  --ground: var(--h-ink); --on-ground: var(--h-paper); --accent: var(--h-yellow);
  --chrome: var(--chrome-on-ink); --sheen: var(--sheen-lift); --sheen-blend: screen;
  --metal-shadow: color-mix(in srgb, var(--h-yellow) 40%, var(--h-ink));
}
[data-ground="blue"] {
  --ground: var(--h-blue); --on-ground: var(--h-paper); --accent: var(--h-yellow);
  --chrome: var(--chrome-on-blue); --sheen: var(--sheen-lift); --sheen-blend: screen;
  --metal-shadow: color-mix(in srgb, var(--h-yellow) 50%, var(--h-ink));
}
[data-ground="yellow"] {
  --ground: var(--h-yellow); --on-ground: var(--h-ink); --accent: var(--h-red);
  --chrome: var(--chrome-on-yellow); --sheen: var(--sheen-dim); --sheen-blend: multiply;
  --metal-shadow: color-mix(in srgb, var(--h-red) 70%, var(--h-paper));
}
[data-ground="red"] {
  --ground: var(--h-red); --on-ground: var(--h-paper); --accent: var(--h-yellow);
  --chrome: var(--chrome-on-red); --sheen: var(--sheen-lift); --sheen-blend: screen;
  --metal-shadow: color-mix(in srgb, var(--h-yellow) 45%, var(--h-red));
  --on-ground-2: color-mix(in srgb, var(--on-ground) 88%, var(--ground));
}

/* ── 14. 基礎 ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--h-ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 固定 HUD 高 44px。少了這行，Shift+Tab 往回走時剛取得焦點的連結
     會整個被壓在 HUD 底下，只露出一兩個像素。 */
  scroll-padding-top: calc(var(--hud-h) + var(--safe-t) + var(--sp-4));
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--h-paper);
  color: var(--h-ink);
  font: 400 var(--t-body)/1.85 var(--font-cjk);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

::selection { color: var(--ground, var(--h-paper)); background: var(--on-ground, var(--h-ink)); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; display: block; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--h-ink);
  color: var(--h-paper);
  font: 700 var(--t-body)/1 var(--font-cjk);
}
.skip-link:focus { left: 0; top: 0; }
.skip-link:focus-visible { outline-color: var(--h-yellow); }

/* 只給螢幕閱讀器的文字：另開分頁的預告、footer 的區塊標題。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus-visible { outline-color: var(--h-yellow); }

/* ============================================================
   儀表列與進度軌
   fixed 元素拿不到 [data-ground] 的角色色，色碼直接引用色相。
   ============================================================ */

.hud {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: calc(var(--hud-h) + var(--safe-t));
  padding: var(--safe-t) var(--gutter) 0;
  background: var(--h-ink);
  color: var(--h-paper);
  border-bottom: var(--bd-hair) solid rgba(241, 237, 223, .28);
  --hud-accent: var(--h-yellow);
}
.hud[data-accent="blue"]   { --hud-accent: var(--h-blue); }
.hud[data-accent="yellow"] { --hud-accent: var(--h-yellow); }
.hud[data-accent="red"]    { --hud-accent: var(--h-red); }

.hud__brand {
  display: inline-flex;
  align-items: center;
  /* line-height:1 的 inline-flex 盒高等於字高 22px，構不成觸控目標。 */
  min-height: var(--tap-min);
  margin-inline-start: calc(var(--sp-2) * -1);
  padding-inline: var(--sp-2);
  gap: var(--sp-2);
  color: inherit;
  text-decoration: none;
  font: 400 1.375rem/1 var(--font-latin);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-synthesis: none;
}
.hud__tick {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--hud-accent);
}
.hud__count {
  font: 700 var(--t-micro)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: rgba(241, 237, 223, .72);
}
.hud__count b { color: var(--h-paper); }

.rail {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  /* border-box 之下 height 與 padding 會互吃：height:4px 加上安全區 padding，
     內容盒會被壓成 0，整條軌道消失。改成把安全區寫進 height。 */
  height: calc(4px + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(32, 32, 29, .35);
  pointer-events: none;
}
.rail i {
  display: block;
  height: 4px;
  background: var(--h-yellow);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ============================================================
   區塊骨架
   ============================================================ */

section[data-ground],
footer[data-ground] {
  position: relative;
  background: var(--ground);
  color: var(--on-ground);
  border-top: var(--bd-seam) solid var(--seam);
  padding-block: var(--section-pad);
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
}

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* 權重要壓過 section[data-ground]（元素＋屬性＝(0,1,1)），
   單一 class 的 .hero 蓋不過去，padding-top 會變成死碼。 */
section.hero {
  min-height: 100svh;
  border-top: 0;
  padding-top: calc(var(--hud-h) + var(--safe-t) + var(--section-pad));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@supports not (height: 100svh) {
  .hero { min-height: 88vh; }
}

/* 編號標籤。≥900px 才縱書，以下一律橫排。 */
.tag {
  display: inline-block;
  margin-bottom: var(--sp-6);
  padding: var(--sp-2) var(--sp-3);
  border: var(--bd-hair) solid var(--frame);
  font: 700 var(--t-micro)/1 var(--font-mono);
  letter-spacing: .22em;
  color: var(--on-ground);
}

/* 章節內的產品名直排軸線 */
.axis {
  font: 700 var(--t-micro)/1 var(--font-cjk);
  letter-spacing: .3em;
  color: var(--on-ground-2);
  border-bottom: var(--bd-hair) solid var(--rule);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-5);
}
@media (min-width: 900px) {
  .axis {
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-indent: .3em;
    border-bottom: 0;
    border-left: var(--bd-hair) solid var(--rule);
    padding: var(--sp-3) var(--sp-2);
    margin: 0;
  }
}

/* 掃線用 clip-path 而不是 transform：這個元素同時掛 .rv，
   而 .rv 也在動 transform，兩者寫同一個屬性時後者會整條蓋掉前者。 */
.cut {
  height: var(--bd-rule);
  background: var(--accent);
  margin-bottom: var(--sp-6);
}
.js .cut {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-cut) var(--ease-io);
}
.cut.is-in { clip-path: inset(0 0 0 0); }

/* ============================================================
   文字
   ============================================================ */

.lead {
  font: 500 var(--t-lead)/1.7 var(--font-cjk);
  letter-spacing: .015em;
  color: var(--on-ground);
  max-width: var(--measure);
  margin: 0 0 var(--sp-4);
}

p {
  font: 400 var(--t-body)/1.85 var(--font-cjk);
  letter-spacing: .02em;
  color: var(--on-ground-2);
  max-width: var(--measure);
  margin: 0 0 var(--sp-4);
}

.micro {
  font: 700 var(--t-micro)/1.6 var(--font-cjk);
  letter-spacing: .18em;
  color: var(--on-ground-2);
}

/* 強調：實心色塊。地面一翻，色塊與字色跟著翻，對比一條公式算完。 */
.hl {
  background: var(--accent);
  color: var(--ground);
  padding: .04em .18em;
  /* 不准斷行。斷了之後第二行會只剩一兩個字獨自躺在色塊裡，
     比整塊被擠到下一行難看得多。 */
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 三部曲識別色只在主題與前提兩處並置時出現；進了章節，地面本身就是識別。
   用實心色塊而不是文字色，飽和度才不必為了對比讓步。 */
.chip {
  padding: .06em .3em;
  font-weight: 900;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.chip--money { background: var(--h-blue);   color: var(--h-paper); }
.chip--time  { background: var(--h-yellow); color: var(--h-ink); }
.chip--rel   { background: var(--h-red);    color: var(--h-paper); }

.sq { list-style: none; padding: 0; margin: 0 0 var(--sp-6); }
.sq li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--sp-3);
  max-width: var(--measure);
  color: var(--on-ground);
}
.sq li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .5em;
  height: .5em;
  background: var(--accent);
}

/* ============================================================
   金屬字
   可讀性由描邊承擔，漸層只負責質感。每一顆金屬字都必須有描邊，
   只准用在 40px 以上。
   ============================================================ */

.metal {
  /* filter 需要獨立盒。padding + 負 margin 讓硬影長在 clip 盒裡面，
     進場的 clip-path 才不會把影子裁掉。 */
  display: inline-block;
  /* 硬影是 .05em，padding 要大於它才包得住；跟著字級走，不能寫死 px。 */
  padding: .10em .09em .16em .04em;
  /* 只抵銷水平方向。垂直的負邊界會把兩行金屬字疊在一起——
     行距改由下面壓低的 line-height 讓出來。 */
  margin-inline: -.04em -.09em;
  /* 有 padding 之後，這行讓鉻色梯仍然對齊字身；漏掉會讓地平線
     暗帶偏離字腰，字上出現一條找不到原因的黑腰。 */
  background-origin: content-box;

  font-family: var(--font-cjk);
  /* 900 字重的密集中文字，筆間淨空會被描邊與硬影吃光，糊成實心塊。
     降到 820 才留得住字腔。 */
  font-weight: 820;
  /* 中文字面幾乎撐滿字身框，行距壓到 1 以下兩行就會相撞。 */
  line-height: 1;
  letter-spacing: -.03em;
  word-break: keep-all;
  line-break: strict;

  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 用 em：寫死 px 的描邊在大字級上會細到看不見。 */
  -webkit-text-stroke: var(--metal-stroke, .032em) var(--on-ground);
  paint-order: stroke fill;

  background-image:
    linear-gradient(100deg, transparent 42%, var(--sheen) 50%, transparent 58%),
    var(--grain),
    var(--chrome);
  background-size: 240% 100%, 160px 160px, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat;
  /* background-size 是 240%，百分比位置方向會反過來：正值把圖往左推。
     140% 就是停在盒子右外側。 */
  background-position: 140% 0, 0 0, 0 0;
  background-blend-mode: var(--sheen-blend), soft-light, normal;
  -webkit-background-clip: text;
          background-clip: text;

  /* 一定要 drop-shadow，不能 text-shadow：配 background-clip:text 與透明
     填色時 text-shadow 會從字的鏤空處透出來，整塊糊掉。 */
  filter: drop-shadow(var(--metal-drop, .05em) var(--metal-drop, .05em) 0 var(--metal-shadow));
}

/* 漸層是以盒計算的，不是以行計算的。每一行必須自己就是 .metal，
   否則第一行拿到鉻色梯上半、第二行拿到下半，金屬感當場失效。 */
.ln.metal { display: block; }

/* 描邊與硬影全站統一，不再依地面分歧——分歧的是梯子與陰影色，不是幾何。 */

/* 首屏底圖。canvas 沒畫成之前是透明的，地面色自己撐著，不會閃白。 */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
section.hero > .wrap { position: relative; z-index: 1; }

/* 首屏是全站唯一走熱感應色階的一屏：地面翻墨，字身整條梯子都在亮部。
   米紙撐不住這組明度（最亮的停點對米紙只有 1.0:1），所以這一屏必須是深的。
   多疊一層 125 度的細斜紋，讓亮面不會糊成一片色。 */
section.hero[data-ground="ink"] {
  --chrome: var(--chrome-thermal);
  --metal-shadow: var(--thermal-shadow);
  --sheen: rgba(255, 244, 216, .72);
  --sheen-blend: screen;
}
section.hero .metal {
  -webkit-text-stroke: .021em var(--thermal-stroke);
  background-image:
    linear-gradient(100deg, transparent 41%, var(--sheen) 50%, transparent 59%),
    repeating-linear-gradient(125deg,
      rgba(0, 0, 0, .26) 0, rgba(255, 255, 255, .11) .023em, rgba(0, 0, 0, .26) .046em),
    var(--grain),
    var(--chrome);
  background-size: 240% 100%, 100% 100%, 160px 160px, 100% 100%;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  background-position: 140% 0, 0 0, 0 0, 0 0;
  background-blend-mode: var(--sheen-blend), soft-light, soft-light, normal;
  filter: drop-shadow(.05em .055em 0 var(--metal-shadow));
}
/* 多一層之後 background-position 從三組變四組，掃光的 keyframes 要跟著配對 */
@keyframes metal-sweep-hero {
  from { background-position: -240% 0, 0 0, 0 0, 0 0; }
  to   { background-position:  140% 0, 0 0, 0 0, 0 0; }
}
section.hero .metal--hero.is-lit { animation-name: metal-sweep-hero; }

.hd-hero {
  margin: 0 0 var(--sp-8);
  font-size: inherit;
}
.hd-hero .metal { font-size: var(--t-hero); }

.hd-sec {
  margin: 0 0 var(--sp-6);
  font-size: inherit;
}
.hd-sec .metal { font-size: var(--t-h2); }

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .metal {
    color: var(--on-ground);
    -webkit-text-fill-color: var(--on-ground);
    -webkit-text-stroke: 0;
    background-image: none;
    filter: none;
    text-shadow: .05em .05em 0 var(--metal-shadow);
  }
}

@media (forced-colors: active) {
  .metal {
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    -webkit-text-stroke: 0;
    background: none;
    filter: none;
  }
  /* 強制色彩會把所有 background-color 換成系統色，靠純色塊區分的東西
     會一起歸零。補上邊框，語意才不會只剩顏色。 */
  .chip, .hl { border: var(--bd-hair) solid CanvasText; }
  .slots i { border: var(--bd-hair) solid CanvasText; }
  .slots i[data-s="busy"] { background: CanvasText; }
  .slots i[data-s="rest"] { background: GrayText; }
  .slots-key i[data-s="busy"] { background: CanvasText; }
  .slots-key i[data-s="rest"] { background: GrayText; }
  .jars i { border: var(--bd-hair) solid CanvasText; }
  .jars i::before { background: CanvasText; background-image: none; }
  .jars-key i { border: var(--bd-hair) solid CanvasText; }
  .jars-key i[data-s="left"] { background: CanvasText; background-image: none; }
}

/* ============================================================
   卡、框、狀態標籤
   硬陰影會撐出水平溢出，帶陰影的容器一律留出右下 padding。
   ============================================================ */

.frame {
  border: var(--bd-hair) solid var(--frame);
  box-shadow: var(--shadow-hard);
  background: transparent;
  padding: var(--sp-5);
}

.state {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--sp-2) var(--sp-4);
  border: var(--bd-hair) solid var(--frame);
  font: 700 var(--t-micro)/1 var(--font-cjk);
  letter-spacing: .12em;
}
/* 兩段狀態一眼分得開：空框＝封測中、虛線＝設計中 */
.state--beta { background: transparent; color: var(--on-ground); }
.state--draft {
  background: transparent;
  color: var(--on-ground-2);
  border-style: dashed;
}

/* ── 三格前提 ── */
.trio {
  display: grid;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-10);
  padding: 0;
  list-style: none;
}
.trio li {
  border: var(--bd-hair) solid var(--frame);
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
}
.trio b {
  font: 700 var(--t-micro)/1 var(--font-mono);
  letter-spacing: .18em;
  color: var(--on-ground-2);
}
.trio .chip {
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -.01em;
  justify-self: start;
}
.trio__def {
  grid-column: 2;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--on-ground);
}
@media (min-width: 720px) {
  .trio li { grid-template-columns: 1fr; }
  .trio__def { grid-column: 1; }
}
@media (min-width: 720px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
}

/* ── 產品章節 ── */
.chapter {
  display: grid;
  gap: var(--sp-8);
}
@media (min-width: 900px) {
  .chapter {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--sp-12);
  }
  .chapter .axis { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .chapter__body { grid-column: 1; }
  .chapter__art  { grid-column: 1; }
}

/* 裁成 3:4 的方框、對齊上緣，整支手機的長截圖會把一個章節撐成兩屏。 */
.shot {
  margin: 0;
  border: var(--bd-hair) solid var(--frame);
  box-shadow: var(--shadow-hard-lg);
  background: var(--s-paper-hi);
  width: min(100%, 13rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* NYAKEI 的配糧罐：寬度是月初配下去的額度，實心的高度是還動得了的。
   跟時間方格同一套語彙（1px 硬框、實心／留白兩態），但形不同——
   時間是離散的格子，錢是連續的量，所以一個用網格、一個用液面。 */
.jars {
  --jar-cell: 12px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: min(100%, 22rem);
  height: 5.5rem;
  margin: 0 0 var(--sp-4);
}
.jars i {
  position: relative;
  flex: var(--w, 20) 1 0;
  height: 100%;
  border: var(--bd-hair) solid var(--frame);
}
.jars i::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--left, 0) * 1%);
  /* 實心面再壓一層網格，跟時間方格同一套語彙。
     格線從底邊往上長（to top），液面升降時格子才不會跟著位移。 */
  background-color: var(--on-ground);
  background-image:
    repeating-linear-gradient(to right, var(--ground) 0 1px, transparent 1px var(--jar-cell)),
    repeating-linear-gradient(to top,   var(--ground) 0 1px, transparent 1px var(--jar-cell));
}

.jars-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
  font: 700 var(--t-micro)/1 var(--font-cjk);
  letter-spacing: .12em;
  color: var(--on-ground-2);
}
.jars-key li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.jars-key i {
  width: 12px;
  height: 12px;
  border: var(--bd-hair) solid var(--frame);
}
.jars-key i[data-s="left"] {
  background-color: var(--on-ground);
  background-image:
    repeating-linear-gradient(to right, var(--ground) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(to top,   var(--ground) 0 1px, transparent 1px 4px);
}

/* SHYIFT 的時間方格：已排填實、休息半調、還挪得出留白 */
.slots {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: min(100%, 22rem);
  margin: 0 0 var(--sp-6);
}
.slots i {
  display: block;
  /* min-height 是 aspect-ratio 的保險：沒有它，不支援的瀏覽器上
     這二十四格會因為沒有內容而高度歸零，整張圖塌成一條線。 */
  min-height: 1.5rem;
  aspect-ratio: 1;
  border: var(--bd-hair) solid var(--frame);
}
.slots i[data-s="busy"] { background: var(--on-ground); }
.slots i[data-s="rest"] { background: color-mix(in srgb, var(--on-ground) 38%, var(--ground)); }
.slots i[data-s="free"] { background: transparent; }

.slots-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
  font: 700 var(--t-micro)/1 var(--font-cjk);
  letter-spacing: .12em;
  color: var(--on-ground-2);
}
.slots-key li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.slots-key i {
  width: 12px;
  height: 12px;
  border: var(--bd-hair) solid var(--frame);
}
.slots-key i[data-s="busy"] { background: var(--on-ground); }
.slots-key i[data-s="rest"] { background: color-mix(in srgb, var(--on-ground) 38%, var(--ground)); }

/* FIVELATION 的留白就是宣告 */
.void {
  border: var(--bd-hair) dashed var(--rule);
  min-height: 9rem;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.axis--faint { opacity: .35; }

.card-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  gap: var(--sp-2);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer { padding-block-end: calc(var(--sp-12) + var(--safe-b) + 12px); }

.foot-grid {
  display: grid;
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}
@media (min-width: 720px) {
  .foot-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); }
}
.foot-grid h3 {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--bd-hair) solid var(--rule);
  font: 700 var(--t-micro)/1 var(--font-cjk);
  letter-spacing: .28em;
  color: var(--on-ground-2);
}
.foot-grid p, .foot-grid address {
  margin: 0 0 var(--sp-2);
  font-style: normal;
  font-size: var(--t-body);
  color: var(--on-ground);
  max-width: none;
}
.foot-grid dl { margin: 0; }
.foot-grid dl div { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.foot-grid dt { color: var(--on-ground-2); min-width: 6.5em; }
.foot-grid dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.foot-grid a {
  color: var(--on-ground);
  display: inline-flex;
  align-items: center;
  /* flex 容器會吃掉子元素之間的純空白節點，外連的 ↗ 靠 gap 撐開，不能靠 HTML 的空格 */
  gap: var(--sp-2);
  min-height: var(--tap-min);
}

/* 註冊標語，字距拉到全站最開，不換色不加底線不做動態 */
.foot-slogan {
  margin: 0 0 var(--sp-6);
  font: 400 var(--t-lead)/1.6 var(--font-cjk);
  letter-spacing: .34em;
  color: var(--on-ground);
  max-width: none;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  border-top: var(--bd-hair) solid var(--rule);
  padding-top: var(--sp-5);
  font: 400 var(--t-micro)/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--on-ground-2);
}
.foot-bottom a {
  color: var(--on-ground);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* ============================================================
   進場動態，全部 ≤460ms，只動 transform / opacity / clip-path
   ============================================================ */

/* 進場的隱藏狀態只在 JS 跑得起來時才套用。少了 .js 這個閘，
   JS 一掛整頁三十幾個元素全部 opacity:0，訪客與不執行 JS 的爬蟲看到的是空白頁。 */
.js .rv {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.985);
  transition:
    opacity   var(--t-enter) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
    transform var(--t-enter) var(--ease-out) calc(var(--i, 0) * var(--stagger));
}
.rv.is-in { opacity: 1; transform: none; }

.js .rv-slab .ln {
  clip-path: inset(100% 0% 0% 0%);
  transform: translate3d(0, 18px, 0);
  transition:
    clip-path var(--t-slab) var(--ease-snap) calc(var(--i, 0) * 60ms),
    transform var(--t-slab) var(--ease-snap) calc(var(--i, 0) * 60ms);
}
.rv-slab.is-in .ln { clip-path: inset(0% 0% 0% 0%); transform: none; }

@keyframes metal-sweep {
  from { background-position: -240% 0, 0 0, 0 0; }
  to   { background-position:  140% 0, 0 0, 0 0; }
}
.metal--hero.is-lit {
  animation: metal-sweep var(--t-sweep) var(--ease-io) calc(120ms + var(--i, 0) * 60ms) 1 both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
  .rv-slab .ln { clip-path: none !important; transform: none !important; }
  .cut { clip-path: none !important; }
  .metal--hero.is-lit { animation: none !important; }
}

/* 橫置矮螢幕：不壓一下，HERO 一屏塞不下 */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --section-pad: 2rem; --t-hero: clamp(3rem, 8vw, 4rem); }
  .hero { min-height: auto; }
}