/* 作品集首頁：殼只用灰階＋一點螢光萊姆（借 U45／U37），每件作品帶自己的舞台色。
   字：Inter 800 當主體、Instrument Serif 斜體當重音（借 U17），JetBrains Mono 當小標籤。 */
:root {
  --bg: #f2f2f0;
  --surface: #ffffff;
  --ink: #14141a;
  --accent: #14141a;
  --accent-ink: #ffffff;
  --lime: #d4ff3a;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --hero-bg: #f2f2f0;
  --hero-on: #14141a;
  --hero-on-2: #14141a;
  --hero-off: #d9d9d5;
  --hero-hot: #14141a;
  --gutter: clamp(16px, 4vw, 48px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0e0e11; --surface: #18181c; --ink: #ededee; --accent: #ededee; --accent-ink: #0e0e11;
    --hero-bg: #0e0e11; --hero-on: #ededee; --hero-on-2: #ededee; --hero-off: #26262b; --hero-hot: #d4ff3a;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0e0e11; --surface: #18181c; --ink: #ededee; --accent: #ededee; --accent-ink: #0e0e11;
  --hero-bg: #0e0e11; --hero-on: #ededee; --hero-on-2: #ededee; --hero-off: #26262b; --hero-hot: #d4ff3a;
  color-scheme: dark;
}

body { font-family: var(--font-sans); }

/* ── 頁首 ── */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.studio { font-weight: 800; letter-spacing: -.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.studio::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.top-nav { display: flex; gap: 4px; }
.top-nav a {
  font: 500 13px/1 var(--font-sans); text-decoration: none; padding: 9px 12px; border-radius: 999px; color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .top-nav a:hover { background: var(--well); color: var(--ink); } }

/* ── 首屏：點陣字＋螢光筆句 ── */
.hero { padding: 0 var(--gutter) clamp(24px, 3vw, 40px); }
.dots { display: block; width: 100%; height: clamp(200px, 34vh, 360px); touch-action: pan-y; cursor: crosshair; }
.dots-hint .touch { display: none; }
@media (hover: none) { .dots-hint .mouse { display: none; } .dots-hint .touch { display: inline; } }
.dots-hint {
  margin: 4px 0 0; font: 400 13px/1.4 var(--font-sans); color: var(--ink-2);
}
.lead {
  margin: clamp(14px, 2vw, 24px) 0 0; max-width: 34ch;
  font: 600 clamp(24px, 2.8vw, 38px)/1.18 var(--font-sans); letter-spacing: -.03em; text-wrap: balance;
}
.lead > span { color: color-mix(in oklab, var(--ink) 42%, var(--bg)); }
/* 借 U10 螢光筆連結：淡色圓角底塊、換行兩段都保有圓角 */
.hl {
  color: var(--ink); text-decoration: none; border-radius: .18em; padding: .02em .14em; margin-inline: -.02em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; hyphens: none;
  background: var(--hl); transition: filter .25s var(--ease), background .25s var(--ease);
}
.hl[data-tone='1'] { --hl: #e3f7a6; }
.hl[data-tone='2'] { --hl: #d9e4ff; }
.hl[data-tone='3'] { --hl: #ffdccc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hl[data-tone='1'] { --hl: #3c4a12; }
  :root:not([data-theme='light']) .hl[data-tone='2'] { --hl: #24345a; }
  :root:not([data-theme='light']) .hl[data-tone='3'] { --hl: #5a3224; }
}
@media (hover: hover) and (pointer: fine) { .hl:hover { filter: saturate(1.8) brightness(.97); } }

/* ── 案例 ── */
.work { padding: 0 var(--gutter) clamp(56px, 8vw, 120px); }
.sec-head { display: flex; align-items: baseline; gap: 12px; border-top: 1px solid var(--line-2); padding-top: 18px; margin-bottom: clamp(20px, 3vw, 36px); }
.sec-head h2 { margin: 0; font: 600 15px/1 var(--font-sans); }
.count { font: 500 15px/1 var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cases { display: grid; gap: clamp(48px, 7vw, 104px); }

.case { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 52px); align-items: end; }
.case:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.case:nth-child(even) .stage { order: 2; }

.stage {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 11; border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--stage, #9aa0a6) 70%, var(--bg)), color-mix(in oklab, var(--stage, #9aa0a6) 42%, var(--bg)));
  transition: background .6s var(--ease);
}
.flood { position: absolute; inset: 0; z-index: 1; clip-path: circle(0 at 50% 100%); pointer-events: none; }
.frame { position: absolute; z-index: 2; display: block; overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45), 0 0 0 1px rgb(0 0 0 / .06); }
.frame img { width: 100%; height: auto; display: block; }
.desk { left: 7%; top: 9%; width: 80%; border-radius: 10px; transition: transform .8s var(--ease); }
.desk .bar { display: flex; gap: 5px; padding: 7px 9px; background: color-mix(in oklab, var(--surface) 92%, #000); }
.desk .bar i { width: 7px; height: 7px; border-radius: 50%; background: rgb(0 0 0 / .14); }
.phone { right: 6%; bottom: -14%; width: 23%; border-radius: 18px; border: 4px solid #111; transition: transform .8s var(--ease); }
.phone img { aspect-ratio: 390 / 760; object-fit: cover; object-position: top; }
@media (hover: hover) and (pointer: fine) {
  .stage:hover .desk { transform: translateY(-6px); }
  .stage:hover .phone { transform: translateY(-14px) rotate(-1.5deg); }
}

.case-info { display: grid; gap: 14px; align-content: end; padding-bottom: 6px; }
.case-title { margin: 0; font: 700 clamp(26px, 3vw, 40px)/1.06 var(--font-sans); letter-spacing: -.035em; text-wrap: balance; }
.case-sum { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 46ch; text-wrap: pretty; }
.covers { display: block; margin: 0; padding: 0; list-style: none; font: 400 14px/1.6 var(--font-sans); color: var(--ink-2); }
.covers li { display: inline; }
.covers li + li::before { content: ' · '; color: var(--ink-3); }
.covers .covers-label { color: var(--ink); font-weight: 600; }
.covers .covers-label::after { content: ' '; }
.covers .covers-label + li::before { content: ''; }

.skins { display: grid; gap: 8px; margin-top: 6px; }
.skins-label { font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--font-sans);
  transition: box-shadow .3s var(--ease), transform .4s var(--spring);
}
.chip i { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 210deg, var(--dot) 0 62%, var(--dot-2) 62% 100%); }
.chip[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (pointer: coarse) { .chip { min-height: 44px; padding-right: 14px; } .chip i { width: 26px; height: 26px; } }
.chip:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .chip:hover { box-shadow: inset 0 0 0 1px var(--ink-3); } .chip[aria-pressed='true']:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }

.open {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 13px 18px 13px 20px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font: 600 14.5px/1 var(--font-sans); text-decoration: none; transition: transform .4s var(--spring);
}
.open svg { width: 16px; height: 16px; transition: transform .4s var(--spring); }
.open::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); margin-left: 2px; }
@media (hover: hover) and (pointer: fine) { .open:hover svg { transform: translate(2px, -2px); } }
.open:active { transform: scale(.97); }

/* ── 換皮檔 ── */
.reskin {
  margin: 0 var(--gutter) clamp(56px, 8vw, 110px); padding: clamp(24px, 4vw, 56px);
  border-radius: 26px; background: var(--well);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
}
.reskin h2 { margin: 0 0 12px; font: 700 clamp(30px, 4vw, 52px)/1 var(--font-sans); letter-spacing: -.04em; }
.reskin h2::first-line { font-family: inherit; }
.reskin p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 42ch; }
.json { border-radius: 16px; background: #14141a; color: #ededee; overflow: hidden; box-shadow: 0 30px 60px -36px rgb(0 0 0 / .5); }
.json-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.json-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .18); }
.json-bar b { margin-left: 8px; font: 400 12px/1 var(--font-mono); color: rgb(255 255 255 / .6); }
.json-body { list-style: none; margin: 0; padding: 14px 0 18px; font: 400 14px/1.5 var(--font-mono); counter-reset: ln; }
.json-body::before, .json-body::after { display: block; padding: 3px 18px 3px 52px; color: rgb(255 255 255 / .5); }
.json-body::before { content: '{'; }
.json-body::after { content: '}'; }
.json-body li { position: relative; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 3px 18px 3px 70px; }
.json-body li::before { counter-increment: ln; content: counter(ln, decimal-leading-zero); position: absolute; left: 18px; color: rgb(255 255 255 / .28); }
.json-body code { color: #d4ff3a; font: inherit; }
.json-body code::after { content: ': { … }'; color: rgb(255 255 255 / .45); }
.json-body span { color: rgb(255 255 255 / .55); font-family: var(--font-sans); font-size: 13px; }
.json-body span::before { content: '// '; font-family: var(--font-mono); }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 22px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3);
}
.foot span:first-child { font-weight: 700; color: var(--ink); }

/* ── 手機 ── */
@media (max-width: 860px) {
  .case, .case:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .case:nth-child(even) .stage { order: 0; }
  .stage { aspect-ratio: 4 / 3.4; border-radius: 18px; }
  .desk { left: 5%; top: 7%; width: 84%; }
  .phone { width: 30%; right: 4%; bottom: -10%; border-width: 3px; border-radius: 14px; }
  .reskin { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
}
@media (max-width: 520px) {
  .dots { height: 230px; }
  .json-body li { padding-left: 52px; }
  .json-body li::before { left: 14px; }
  .top-nav a { padding: 8px 10px; }
}

/* ── 中文站（/zh/）：中文字體、取消負字距、全形標點收半（palt） ── */
:root:lang(zh-Hant) { --font-sans: 'Inter', 'Noto Sans TC', system-ui, sans-serif; }
:lang(zh-Hant) .lead, :lang(zh-Hant) .case-title, :lang(zh-Hant) .reskin h2, :lang(zh-Hant) .sec-head h2 {
  letter-spacing: 0; font-feature-settings: 'palt'; text-spacing-trim: trim-both;
}
:lang(zh-Hant) .lead { font-weight: 700; line-height: 1.32; max-width: 22em; }
:lang(zh-Hant) .case-title { font-weight: 800; line-height: 1.2; }