/* ============================================================
   Claim｜實證行鍻 — 全域樣式
   設計概念：診斷書 / 卷宗（Dossier）。冷靜、精準、有判決感。
   ============================================================ */

/* Google Fonts 載入（備援；主字型由 @fontsource 在 BaseLayout 引入） */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Noto+Sans+TC:wght@400;500&display=swap');

/* --- 設計 Token --- */
:root {
  --paper:  #ECEDE8;  /* 主背景 */
  --panel:  #F4F4F0;  /* 卡片、輸入框底色 */
  --ink:    #181A1B;  /* 主文字、主結構線 */
  --slate:  #585E62;  /* 次要文字、註解 */
  --line:   #C9CAC4;  /* 分隔線、邊框 */
  --signal: #C8472E;  /* 判決紅：極度節制，全頁最多一兩處 */
  --warn:   #C98A2B;  /* 警示黃 */
  --good:   #3F7A6B;  /* 良好綠 */

  --fr:   'Fraunces', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --body: 'Newsreader', 'Noto Sans TC', sans-serif;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Base --- */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--fr);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1 { font-size: clamp(28px, 4.6vw, 48px); }
h2 { font-size: clamp(22px, 3.4vw, 36px); }
h3 { font-size: clamp(18px, 2.4vw, 24px); }

p { line-height: 1.7; }

a { color: inherit; text-decoration: none; }

/* --- Layout --- */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px); }

.sec { padding: clamp(40px, 6vw, 72px) 0; }
.sec + .sec { border-top: 1px solid var(--line); }

/* --- Eyebrow (眉標) --- */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 12px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  padding: 13px 22px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
}
.btn-primary {
  background: var(--signal);
  color: #fff;
  border-color: var(--signal);
}
.btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
.cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Topbar --- */
.topbar {
  position: sticky;
  top: 0;
  background: rgba(236, 237, 232, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px clamp(20px, 5vw, 44px);
  flex-wrap: wrap;
  gap: 10px;
}
.mark {
  font-family: var(--fr);
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  color: var(--ink);
}
.mark .div { color: var(--line); margin: 0 5px; font-weight: 400; }
.mark small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.08em;
  font-weight: 400;
}
nav {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
nav a {
  color: var(--slate);
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s;
}
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--ink); border-color: var(--signal); }

/* --- Footer --- */
footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 48px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--slate);
}
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: center; }
footer .privacy-link { color: var(--slate); text-decoration: none; letter-spacing: 0.06em; }
footer .privacy-link:hover { color: var(--ink); }

/* --- Card --- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px;
}

/* --- Proof blocks --- */
.proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.pf {
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  background: var(--panel);
  border-radius: 2px;
  padding: 16px 18px;
}
.pf b { font-family: var(--fr); font-size: 16px; }
.pf span { display: block; font-size: 13.5px; color: var(--slate); margin-top: 5px; line-height: 1.55; }

/* --- Blog list --- */
.posts { margin-top: 24px; border-top: 1px solid var(--line); }
.post-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: color 0.15s;
}
.post-item:hover h3 { color: var(--signal); }
.post-item h3 { font-family: var(--fr); font-size: 20px; font-weight: 500; margin-bottom: 6px; transition: color 0.15s; }
.post-item p { font-size: 14px; color: var(--slate); max-width: 60ch; }
.post-meta { font-family: var(--mono); font-size: 11px; color: var(--slate); white-space: nowrap; letter-spacing: 0.04em; }

/* --- Prose (blog article) --- */
.prose { max-width: 68ch; }
.prose h2 { margin: 2em 0 0.6em; }
.prose h3 { margin: 1.6em 0 0.5em; }
.prose p { margin-bottom: 1.2em; }
.prose ul, .prose ol { margin: 0 0 1.2em 1.4em; }
.prose li { margin-bottom: 0.4em; line-height: 1.65; }
.prose blockquote {
  border-left: 3px solid var(--signal);
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  background: var(--panel);
  color: var(--slate);
  font-style: italic;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 2px;
}

/* --- Service cards --- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.svc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.svc.main { box-shadow: 0 0 0 1.5px var(--ink); border-color: var(--ink); }
.svc h3 { font-family: var(--fr); font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.svc .price { font-family: var(--mono); font-size: 14px; color: var(--signal); margin-bottom: 12px; }
.svc p { font-size: 14.5px; color: var(--slate); line-height: 1.6; flex: 1; }
.tagm { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }

/* --- Utilities --- */
.sub { color: var(--slate); max-width: 56ch; line-height: 1.7; }
.lead { font-size: clamp(16px, 2vw, 18px); color: var(--slate); max-width: 44ch; }

/* --- Responsive --- */
@media (max-width: 780px) {
  .cards3 { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; }
}

/* 手機導覽列 */
@media (max-width: 640px) {
  .topbar .wrap {
    padding: 12px clamp(20px, 5vw, 44px);
    gap: 6px;
  }
  .mark { font-size: 17px; }
  nav {
    font-size: 11px;
    gap: 10px;
    letter-spacing: 0.01em;
  }
}

/* 超小螢幕（< 400px）：nav 換行顯示在 logo 下方 */
@media (max-width: 400px) {
  .topbar .wrap { flex-direction: column; align-items: flex-start; }
  nav { flex-wrap: wrap; gap: 8px; }
  nav a { font-size: 10.5px; }
}

/* 防止水平 overflow */
body { overflow-x: hidden; }
.wrap { overflow-x: hidden; }