/* ════════════════════════════════════════════════════════════════════
   B2 — 儀表 / INSTRUMENT
   Binlight Studio 站台樣式（工作室頁專用；產品頁沿用 product.css）

   一句話：工作室是一間「有工作檯的工房」——首頁是一張製圖紙，
   作品是釘在上面的規格卡。所有事實（平台、語言、價格、年份）都是
   有標籤的欄位，而不是形容詞。

   為什麼讀起來是工作室不是那款遊戲：地色是無彩度的冷灰（遊戲是
   帶藍的深海），強調色是商標的暖琥珀（遊戲是青），資訊以欄位呈現
   而不是氣氛。這一頁在講「怎麼做、做了什麼、還會做」。

   參考：metalab.com（每個 token 都有 -invert 雙生，明暗兩態共用同一
        套元件）、basecamp.com root.css（canvas/ink 命名與非純白非純黑）、
        panic.com（產品色以外來 token 的身分被引用）。
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 底與墨（冷灰，無彩度）── */
  --bg:#F1F3F4;
  --panel:#FFFFFF;
  --panel-sunk:#E8EBED;
  --ink:#14181B;
  --ink-2:#586167;
  --ink-3:#767F85;      /* 對 --bg 約 4.6:1，小字過 AA */
  --rule:#DCE1E4;
  --rule-2:#BFC7CC;

  /* 強調色＝商標的光。暖色壓在冷灰上，和深海青決不會被認錯。 */
  --amber:#F5C451;
  --amber-ink:#7A5406;   /* 文字用；對 --panel 約 6.3:1 */
  --amber-wash:#FDF4DF;

  /* ── 字級階梯（1.25）── */
  --t-display:clamp(2rem,5.2vw,3.25rem);
  --t-h1:clamp(1.5rem,3.4vw,2rem);
  --t-h2:1.25rem;
  --t-h3:1.0625rem;
  --t-body:1.0625rem;    /* 17px */
  --t-small:.9375rem;    /* 15px */
  --t-data:.875rem;      /* 14px  等寬數值 */
  --t-label:.6875rem;    /* 11px  等寬標籤 */
  --t-micro:.8125rem;

  /* ── 行高 ── */
  --lh-display:1.06;
  --lh-tight:1.32;
  --lh-body:1.72;
  --lh-cjk:1.85;
  --lh-data:1.5;

  /* ── 字距 ── */
  --ls-display:-.022em;   /* 拉丁大字才收緊；中文不套用（見 :lang 規則）*/
  --ls-label:.14em;
  --ls-brand:.16em;

  /* ── 間距節奏：4px 基數 ── */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;  --s7:3rem;   --s8:4rem;
  --s9:5.5rem; --s10:7rem;

  /* ── 圓角與線寬 ── */
  --radius:6px;
  --radius-sm:4px;
  --radius-icon:22.37%;
  --hair:1px;

  --container:72rem;
  --pad:1.25rem;
  --topbar-h:55.2px;   /* 對齊產品頁頂列 */
  --gutter:1.5rem;   /* 欄距。製圖格線與刊頭共用它才對得齊 */

  color-scheme:light dark;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]),:root[data-theme="dark"]{
    /* 暗態是石墨灰，不是深海藍——刻意不往產品色靠。 */
    --bg:#121517;
    --panel:#191D20;
    --panel-sunk:#0E1113;
    --ink:#E8ECEE;
    --ink-2:#9BA5AB;
    --ink-3:#7E888E;
    --rule:#262B2F;
    --rule-2:#394146;
    --amber-ink:#F0C25E;
    --amber-wash:#241E10;
  }
}

/* 明確指定 data-theme="dark" 時也套用同一組值（給未來的手動切換用，
   同時讓暗態可以被單獨截圖驗證）。 */
:root[data-theme="dark"]{
    /* 暗態是石墨灰，不是深海藍——刻意不往產品色靠。 */
    --bg:#121517;
    --panel:#191D20;
    --panel-sunk:#0E1113;
    --ink:#E8ECEE;
    --ink-2:#9BA5AB;
    --ink-3:#7E888E;
    --rule:#262B2F;
    --rule-2:#394146;
    --amber-ink:#F0C25E;
    --amber-wash:#241E10;
  }

/* ── Reset / base ──────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "PingFang TC","Hiragino Sans CNS","Noto Sans CJK TC",
    "Microsoft JhengHei",sans-serif;
  font-size:var(--t-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
body:lang(zh-Hant){line-height:var(--lh-cjk)}
h1,h2,h3{margin:0; color:var(--ink); font-weight:600; line-height:var(--lh-tight)}
h1,h2,h3{text-wrap:balance}
p{margin:0 0 var(--s4); text-wrap:pretty}
a{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber-ink); outline-offset:3px}
img{max-width:100%; display:block}

.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--pad)}

/* 等寬：所有標籤與數值。ASCII 在中英文版本裡長得一模一樣，
   所以識別的骨架不會因為語言切換而位移。 */
.mono{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
    "Liberation Mono",monospace;
  font-variant-numeric:tabular-nums;
}
.label{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:var(--t-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--ink-3); line-height:1.4;
}

/* ── 頂列 ────────────────────────────────────────────────────────────
   幾何刻意和產品頁對齊：同高、24px 標記、品牌靠左、導覽靠右。 */
.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--panel);
  border-bottom:var(--hair) solid var(--rule);
}
.topbar .wrap{
  display:flex; align-items:center; gap:1rem;
  /* 55.2px = 產品頁頂列的內容高度（.35rem×2 內距 + 44px 觸控目標）。
     加上 1px 下緣線 = 56.2px，和產品頁逐像素相同。跨站時頂列不會跳。 */
  min-height:var(--topbar-h);
}
.brand{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-right:auto; text-decoration:none; color:var(--ink);
}
.brand .mark{width:24px; height:24px; flex:none}
.brand b{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:.8125rem; font-weight:600; letter-spacing:var(--ls-brand);
  text-transform:uppercase; white-space:nowrap;
}
.topbar nav{display:flex; align-items:center; gap:.1rem}
.topbar nav a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 .55rem;
  font-size:.9375rem; color:var(--ink-2); text-decoration:none; white-space:nowrap;
}
.topbar nav a:hover,.topbar nav a:focus-visible{color:var(--ink); text-decoration:underline}
.topbar nav a[aria-current]{color:var(--ink); text-decoration:underline}
.navsep{width:1px; height:14px; background:var(--rule-2); display:inline-block; margin:0 .35rem}

/* ── 製圖紙：可見的欄格 ──────────────────────────────────────────────
   這是本方向對「沒有文案的空頁」的答案：格線本身就是內容。
   1024 起 12 欄、768 起 6 欄、窄螢幕不畫。

   線的位置＝k×(W+gutter)/n，剛好等於「n 欄含欄距」的每一欄左緣，
   所以 .sheet > *{position:relative; z-index:1}
@media (min-width:768px){
  .sheet::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    max-width:var(--container); margin:0 auto;
    padding:0 var(--pad);
    background-clip:content-box; background-origin:content-box;
    background-image:linear-gradient(to right,var(--rule) 0 1px,transparent 1px);
    background-size:calc((100% + var(--gutter)) / 6) 100%;
    /* 壓淡一點：格線要在文字後面當背景，不要跟文字搶。 */
    opacity:.55;
  }
}
@media (min-width:1024px){
  .sheet::before{background-size:calc((100% + var(--gutter)) / 12) 100%}
}

/* ── 刊頭 ────────────────────────────────────────────────────────────
   沒有標語。字標 + 三個欄位（類別／作品數／年份）+ 一條量測線。 */
.masthead{padding:var(--s9) 0 var(--s7); position:relative}
@media (min-width:768px){.masthead{padding:var(--s10) 0 var(--s8)}}
.wordmark{
  font-size:var(--t-display); line-height:var(--lh-display);
  letter-spacing:var(--ls-display); color:var(--ink);
  font-weight:650; margin:0 0 var(--s4);
}
.wordmark:lang(zh-Hant){letter-spacing:0}
.wordmark .dim{color:var(--ink-3); font-weight:500}

@media (min-width:768px){}
/* ── 區塊標題 ────────────────────────────────────────────────────── */
.section-head{
  display:flex; align-items:baseline; gap:var(--s3);
  margin:var(--s8) 0 var(--s4);
}
.section-head .n{color:var(--amber-ink)}

/* ── 產品＝規格卡 ────────────────────────────────────────────────── */
.spec{
  background:var(--panel);
  border:var(--hair) solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  display:block; text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.spec:hover{border-color:var(--rule-2)}
.spec-top{
  display:flex; gap:var(--s4); align-items:flex-start;
  padding:var(--s5);
}
@media (min-width:600px){.spec-top{padding:var(--s6); gap:var(--s5)}}
.spec-icon{
  width:64px; height:64px; flex:none;
  border-radius:var(--radius-icon); border:var(--hair) solid var(--rule);
}
@media (min-width:600px){.spec-icon{width:80px; height:80px}}
.spec-title{min-width:0}
.spec-title h3{
  font-size:clamp(1.25rem,4.6vw,2rem); margin:0 0 var(--s2); letter-spacing:-.01em;
}
/* 中文副標永遠整串不斷；窄螢幕自己成一行。 */
.spec-title h3 .sub{white-space:nowrap}
.spec-title h3 .sub::before{content:" \FF5C "}
.spec-title h3 .sub:lang(en){white-space:normal}
.spec-title h3 .sub:lang(en)::before{content:" — "}
@media (max-width:599px){
  .spec-title h3 .sub{display:block}
  .spec-title h3 .sub::before,.spec-title h3 .sub:lang(en)::before{content:none}
  /* 圖示上移一行，標題與說明拿到整個卡片寬度。 */
  .spec-top{flex-direction:column; gap:var(--s4)}
}
.spec-title h3:lang(zh-Hant){letter-spacing:0}
.spec-title p{margin:0; color:var(--ink-2); font-size:var(--t-small); max-width:46em}

/* 欄位表：mono 標籤在左，值在右，髮絲線分列。 */
.spec-fields{
  margin:0; padding:0 var(--s5) var(--s2);
  border-top:var(--hair) solid var(--rule);
}
@media (min-width:600px){.spec-fields{padding:0 var(--s6) var(--s3)}}
.spec-fields .row{
  display:flex; align-items:baseline; gap:var(--s4);
  padding:.7rem 0;
  border-bottom:var(--hair) solid var(--rule);
}
.spec-fields .row:last-child{border-bottom:none}
.spec-fields dt{flex:0 0 8.5rem; margin:0}
.spec-fields dd{
  margin:0; color:var(--ink); font-size:var(--t-data); line-height:var(--lh-data);
}

/* ── 交界：下潛條 ──────────────────────────────────────────────
   規格卡最後一條是進入作品頁的動作條。PO 裁定：這一條用工作室自己的
   色（琥珀），不採用「漆成目的地顏色」的原案——全站視覺保持一致。 */
.dive{
  display:flex; align-items:center; gap:var(--s3);
  background:var(--amber-wash);
  color:var(--amber-ink);
  padding:0 var(--s5); min-height:52px;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:.75rem; letter-spacing:.08em;
  border-top:var(--hair) solid var(--rule-2);
}
@media (min-width:600px){.dive{padding:0 var(--s6)}}
.dive .path{color:var(--ink-3); margin-left:auto; font-size:var(--t-label); letter-spacing:var(--ls-label)}
.dive .arrow{transition:transform .18s ease}
.spec:hover .dive .arrow,.spec:focus-visible .dive .arrow,
.spec.is-preview .dive .arrow{transform:translateY(2px)}

/* 暗態：面板本身已經很深，下潛條靠色差就分不出來了。
   補一條產品青色的上緣線，讓「門」在暗態一樣是門。 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dive{
    border-top:2px solid var(--amber);
    background:var(--amber-wash);
  }
}
:root[data-theme="dark"] .dive{
  border-top:2px solid var(--amber);
  background:var(--amber-wash);
}

/* ── 按鈕 ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--s5);
  background:var(--ink); color:var(--bg);
  border:var(--hair) solid var(--ink); border-radius:var(--radius-sm);
  font-size:var(--t-small); font-weight:600; text-decoration:none;
}
.btn:hover{background:var(--amber-ink); border-color:var(--amber-ink); color:#FFF}
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--s5);
  background:var(--panel); color:var(--ink);
  border:var(--hair) solid var(--rule-2); border-radius:var(--radius-sm);
  font-size:var(--t-small); font-weight:600; text-decoration:none;
}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-row{display:flex; gap:var(--s3); flex-wrap:wrap}

/* ── 頁尾 ────────────────────────────────────────────────────────── */
.pagefoot{
  margin-top:var(--s9);
  border-top:var(--hair) solid var(--rule-2);
  padding:var(--s5) 0 var(--s8);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3) var(--s5);
  font-size:var(--t-micro); color:var(--ink-3);
}
.pagefoot a{color:var(--ink-2); text-decoration:none; white-space:nowrap}
.pagefoot a:hover{text-decoration:underline}
.pagefoot .copy{margin:0 0 0 auto}

/* ── 長文頁（隱私／支援）──────────────────────────────────────────── */
.prose{
  max-width:42rem; margin:0 auto;
  background:var(--panel); border:var(--hair) solid var(--rule);
  border-radius:var(--radius);
  padding:var(--s6) var(--s5) var(--s7);
}
@media (min-width:768px){.prose{padding:var(--s8) var(--s7)}}
.doc-wrap{padding-top:var(--s7)}
.prose h1{font-size:var(--t-h1); margin:0 0 var(--s2)}
.prose .updated{margin:0 0 var(--s6)}
.prose h2{
  font-size:var(--t-h2); margin:var(--s6) 0 var(--s3);
  padding-top:var(--s4); border-top:var(--hair) solid var(--rule);
}
.prose h2 .n{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:var(--t-label); color:var(--amber-ink);
  letter-spacing:var(--ls-label); margin-right:.6rem; vertical-align:.12em;
}
.prose p,.prose li{color:var(--ink-2); font-size:var(--t-small)}
.prose ul{padding-left:1.1rem}
.prose li{margin:.35rem 0}
.prose dt{color:var(--ink); font-weight:600; margin:var(--s5) 0 .2rem}
.prose dd{margin:0; color:var(--ink-2); font-size:var(--t-small)}

/* ── 跨頁轉場（純 CSS、零腳本）───────────────────────────────────────
   需要產品頁的 product.css 也放同一段（跨文件轉場兩邊都要 opt-in）。
   不支援的瀏覽器＝一般換頁，不會壞。 */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:bl-out .2s ease both}
  ::view-transition-new(root){animation:bl-in .3s ease both}
}
@keyframes bl-out{to{opacity:0}}
@keyframes bl-in{from{opacity:0}}
/* 保險：就算某個引擎仍然採用了條件式之外的轉場，reduce 也一律停掉。 */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important;
  }
}

/* ── 窄螢幕 ──────────────────────────────────────────────────────── */
@media (max-width:479px){
  :root{--pad:1rem}
  .topbar .wrap{gap:.5rem}
  .brand .mark{width:21px; height:21px}
  .brand b{font-size:.75rem; letter-spacing:.1em}
  .topbar nav a{padding:0 .32rem; font-size:.875rem}
  .navsep{margin:0 .18rem}
  .masthead{padding:var(--s7) 0 var(--s6)}
  .dive{font-size:.6875rem}
}
/* 極窄螢幕：品牌只留主字，"Studio" 讓位給導覽——頂列永遠一行，
   絕不折行。第二個字在刊頭立刻就會再出現一次。 */
@media (max-width:399px){
  .brand .w2{display:none}
  .topbar nav a{padding:0 .28rem}
}
/* 窄螢幕：欄位改成「標籤在上、值在下」。雙語標籤（平台 / PLATFORM）
   放不進固定寬的左欄，硬塞就會折成兩行。 */
@media (max-width:599px){
  .spec-fields .row{flex-direction:column; gap:.15rem; padding:.6rem 0}
  .spec-fields dt{flex:none}
}
@media (max-width:359px){
  .brand b{font-size:.6875rem; letter-spacing:.07em}
  .topbar nav a{padding:0 .25rem; font-size:.8125rem}
}

/* 刊頭的標記＋字標組合。標記用完整版（含尾與掌）——那些細節只在 48px 以上成立，
   頂列的 24px 用的是 binlight-mark.svg 的簡化版。 */
.lockup{display:flex; align-items:center; gap:.7rem}
.lockup-mark{width:72px; height:72px; flex:none; display:block}
.lockup .wordmark{margin:0}
@media (max-width:479px){
  .lockup{gap:.5rem}
  .lockup-mark{width:56px; height:56px}
}