/* css/site.css — dawnbreaker.ai 版面 CSS
   由 variant-b3.html 抽出;顏色/字級/間距只准用 css/tokens.css 嘅 var(--*)。 */

/* ---- 字體 self-host(零第三方請求;subset 由 index.html 實際用字提取) ---- */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400 900;        /* variable 字重,一檔 cover 400/500/700/900 */
  font-display: swap;
  src: url('/assets/fonts/noto-sans-tc-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/montserrat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-700.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-zh);
  font-size: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink-body);
  background: var(--color-paper);
  border-top: var(--border-gold-rule) solid var(--color-gold);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-paper);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
  font-weight: 700;
  font-size: var(--font-body);
  letter-spacing: var(--ls-heading);
  text-decoration: none;
  white-space: nowrap;
}
.logo img { width: 1.75rem; height: auto; }
/* 公司 logo lockup(Bowie 2026-08-02:一律用 dawnbreaker_logo,唔用純中文字) */
.logo .brand-lockup { width: 178px; height: auto; }
.logo .logo-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--font-meta);
  letter-spacing: var(--ls-en);
}
.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--font-meta);
  font-weight: 500;
  padding-block: var(--space-2);
  border-bottom: var(--border-print) solid transparent;
  transition: border-color var(--speed) ease;
}
.site-nav a:hover { border-bottom-color: var(--color-gold); }
.nav-en {
  font-family: var(--font-en);
  color: var(--color-ink-mute);
  border: var(--border-thin) solid var(--color-line);
  font-size: var(--font-caption);
  font-weight: 600;
  letter-spacing: var(--ls-en);
  padding: var(--space-1) var(--space-3);
  cursor: default;
  user-select: none;
}
/* EN 掣解灰(M2):a 版本蓋過 .site-nav a 嘅 padding/border-bottom */
.site-nav a.nav-en {
  color: var(--color-ink);
  border: var(--border-thin) solid var(--color-ink);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background-color var(--speed) ease, border-color var(--speed) ease;
}
.site-nav a.nav-en:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-8) var(--space-8); }
.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-7);
  align-items: end;
}
.hero-mark {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.hero-callig { width: var(--callig-w); height: auto; }
.hero-seal { width: var(--seal-img); height: auto; margin-bottom: var(--space-1); }
.hero-lockup { width: 420px; max-width: 100%; height: auto; }
.hero-photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border: var(--border-print) solid var(--color-ink);
}
h1 {
  color: var(--color-ink);
  font-size: var(--font-h1);
  font-weight: 900;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--space-5);
}
/* CJK 冇詞界,text-wrap:balance 會拆散詞語 —— 改為喺 HTML 明確分組 */
h1 .nb { white-space: nowrap; }
.hero-lead {
  font-size: var(--font-lead);
  max-width: 30em;
  margin-bottom: var(--space-6);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.btn {
  display: inline-block;
  font-size: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border: var(--border-print) solid var(--color-ink);
  transition: background-color var(--speed) ease, color var(--speed) ease;
}
.btn-primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
}
.btn-primary:hover { background: var(--color-gold-deep); border-color: var(--color-gold-deep); }
.btn-secondary { background: transparent; color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-ink); color: var(--color-on-ink); }

/* placeholder 塊(平塗,無漸變) */
.ph {
  background: var(--color-paper-deep);
  border: var(--border-print) solid var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-ink-mute);
  font-size: var(--font-caption);
  padding: var(--space-4);
}
.hero-ph { aspect-ratio: 4 / 3; }

/* ---------- Section 骨架 ---------- */
.section { padding-block: var(--space-8); scroll-margin-top: var(--scroll-offset); }
.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.seal {
  width: var(--seal-size);
  height: var(--seal-size);
  flex: none;
  background: var(--color-gold);
  color: var(--color-paper);
  font-size: var(--font-seal);
  font-weight: 700;
  line-height: var(--seal-size);
  text-align: center;
  user-select: none;
}
/* EN 版印章用羅馬數字(Bowie 2026-08-02:英文頁唔用中文數字) */
.seal-en {
  font-family: var(--font-en);
  font-size: var(--font-seal);
  font-weight: 700;
  letter-spacing: 0.02em;
}
h2 {
  color: var(--color-ink);
  font-size: var(--font-h2);
  font-weight: 900;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.section-sub {
  color: var(--color-ink-mute);
  margin-left: calc(var(--seal-size) + var(--space-4));
  margin-bottom: var(--space-7);
}
.section-head-only { margin-bottom: var(--space-7); }

/* ---------- 作品:單欄大條目,似印刷品目錄 ---------- */
.work-list { display: grid; gap: 0; }
.work-item {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
  border-top: var(--border-thin) solid var(--color-line);
  text-decoration: none;
  color: inherit;
}
.work-list > :first-child { border-top: none; padding-top: 0; }
.work-list > :last-child { padding-bottom: 0; }
.work-media {
  aspect-ratio: 16 / 10;
  border: var(--border-print) solid var(--color-ink);
  background: var(--color-paper-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-ink-mute);
  font-size: var(--font-caption);
  padding: var(--space-4);
  overflow: hidden;
}
.work-media img { width: 100%; height: 100%; object-fit: cover; }
.work-media.has-img { padding: 0; }
h3 {
  color: var(--color-ink);
  font-size: var(--font-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.work-index {
  font-family: var(--font-en);
  font-size: var(--font-caption);
  font-weight: 600;
  letter-spacing: var(--ls-en);
  color: var(--color-ink-mute);
  margin-bottom: var(--space-2);
}
.work-sub {
  color: var(--color-ink-mute);
  font-size: var(--font-meta);
  margin-top: var(--space-1);
}
.work-meta {
  font-size: var(--font-meta);
  font-weight: 500;
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}
.work-meta-link {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: var(--ls-en);
  color: var(--color-gold-text);
}
.work-meta-link::after { content: " ↗"; }
.work-meta-plain { color: var(--color-ink-mute); }
/* 媒體報道連結(唯一容許嘅作品區外連——非產品網址) */
.work-press { margin-top: var(--space-3); }
.work-press a {
  font-size: var(--font-meta);
  font-weight: 600;
  color: var(--color-gold-text);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-line);
  padding-bottom: 2px;
  transition: border-color var(--speed) ease;
}
.work-press a::after { content: " ↗"; }
.work-press a:hover { border-bottom-color: var(--color-gold); }
a.work-item h3 {
  border-bottom: var(--border-print) solid transparent;
  display: inline;
  transition: border-color var(--speed) ease;
}
a.work-item:hover h3 { border-bottom-color: var(--color-gold); }

/* ---------- 服務 ---------- */
.section-alt { background: var(--color-paper-deep); }
.section-alt .ph, .section-alt .work-media { background: var(--color-paper); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.service {
  border-top: var(--border-print) solid var(--color-ink);
  padding-top: var(--space-5);
}
.service h3 { margin-bottom: var(--space-3); }

/* ---------- 關於 ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.pull-quote {
  color: var(--color-ink);
  font-size: var(--font-quote);
  font-weight: 900;
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-heading);
}
.pull-quote::before {
  content: "";
  display: block;
  width: var(--space-7);
  height: var(--border-gold-rule);
  background: var(--color-gold);
  margin-bottom: var(--space-5);
}
.about-body p { margin-bottom: var(--space-5); }
.company-line {
  color: var(--color-ink-mute);
  font-size: var(--font-meta);
  border-top: var(--border-thin) solid var(--color-line);
  padding-top: var(--space-4);
}

/* ---------- 聯絡(墨底收筆) ---------- */
.contact {
  background: var(--color-ink);
  padding-block: var(--space-8);
  scroll-margin-top: var(--scroll-offset);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-7);
  align-items: end;
}
.contact h2 { color: var(--color-on-ink); }
.contact p {
  color: var(--color-on-ink-soft);
  margin-block: var(--space-4) var(--space-6);
}
.btn-mail {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: var(--ls-en);
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
}
.btn-mail:hover { background: var(--color-gold-deep); border-color: var(--color-gold-deep); }
/* copy 完成 state(2026-08-03):墨底上「金→紙白」翻轉係最清晰嘅狀態信號;
   toast 文字比地址短,鎖咗 min-width 後要置中 */
.btn-mail { text-align: center; }
.btn-mail.is-copied {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}
.contact-callig { width: 172px; height: auto; }
.contact-lockup { width: 300px; max-width: 100%; height: auto; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-ink);
  border-top: var(--border-thin) solid var(--color-ink-line);
  padding-block: var(--space-6);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-on-ink);
  font-weight: 700;
  font-size: var(--font-meta);
  letter-spacing: var(--ls-heading);
}
.footer-mark img { width: 1.5rem; height: auto; }
.footer-mark .footer-lockup { width: 152px; height: auto; }
.site-footer p { color: var(--color-on-ink-mute); font-size: var(--font-meta); }
.site-footer a {
  color: var(--color-on-ink-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--speed) ease;
}
.site-footer a:hover { color: var(--color-on-ink); }

/* ---------- 私隱政策頁(/privacy/) ---------- */
.pps { padding-block: var(--space-8); }
.pps-container { max-width: 46em; }
.pps h1 {
  font-size: var(--font-h2);
  margin-bottom: var(--space-4);
}
.pps h2 {
  font-size: var(--font-h3);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}
.pps p { margin-bottom: var(--space-4); }
.pps ul {
  margin-bottom: var(--space-4);
  padding-left: 1.25em;
}
.pps li { margin-bottom: var(--space-2); }
.pps a {
  color: var(--color-gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--speed) ease;
}
.pps a:hover { color: var(--color-ink); }
.pps-updated {
  color: var(--color-ink-mute);
  font-size: var(--font-meta);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-print) solid var(--color-ink);
}
.pps-section { scroll-margin-top: var(--scroll-offset); }
.pps-en {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: var(--border-print) solid var(--color-ink);
}
.table-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-5);
  border: var(--border-print) solid var(--color-ink);
}
.pps table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: var(--font-meta);
  line-height: var(--lh-quote);
}
.pps th, .pps td {
  border: var(--border-thin) solid var(--color-line);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
}
.pps th {
  background: var(--color-paper-deep);
  color: var(--color-ink);
  font-weight: 700;
}
.pps-version {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--color-line);
  color: var(--color-ink-mute);
  font-size: var(--font-caption);
}

/* ---------- 手機 ---------- */
/* 服務由三格加到四格(2026-08-02):窄過 1180px 就 2×2,唔好迫到每格得兩個字闊 */
@media (max-width: 1180px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
  .work-item { grid-template-columns: 288px 1fr; gap: var(--space-5); }
  .service-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 720px) {
  .hero { padding-block: var(--space-7); }
  .section { padding-block: var(--space-7); }
  .hero-callig { width: var(--callig-w-m); }
  .hero-lockup { width: 300px; }
  .work-item { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .contact-callig { width: 132px; }
  .contact-lockup { width: 232px; }
}
@media (max-width: 480px) {
  .logo .logo-en { display: none; }
  /* lockup 比舊嘅「太陽+文字」闊,手機要收窄,否則 nav 斷行 */
  .logo .brand-lockup { width: 104px; }
  .footer-mark .footer-lockup { width: 132px; }
  .site-nav a { font-size: var(--font-caption); }
  .site-nav { gap: var(--space-3); }
  .hero-cta .btn { flex: 1; text-align: center; }
  .section-sub { margin-left: 0; }
}