/* aboveLot — 視覺規格出自 200_Reference/brand/aboveLot-DESIGN.md
   一套系統字體，靠字重與大小拉階層；留白 > 塞滿。 */

:root {
  /* 🔴 這一行不是設定顏色，是告訴瀏覽器「這個網站只有淺色版」。
     沒有它的下場（Henry 2026-08-17 在 Fill-in mode 抓到）：他的 macOS 開著深色模式，
     Safari 就用**深色系統外觀**去畫原生元件，而頁面本身是淺色的 → Township 那個
     `<datalist>` 下拉一開始是黑底白字，一打字重繪成白底、字卻還是白的，選項整片看不見。
     ⚠️ 這不是我們的 CSS 畫得出來的東西：datalist 的彈出清單由作業系統畫，
        改 class、改 background 都碰不到它，只有 `color-scheme` 管得動。
     📌 全站（含後台外殼）都吃這份 site.css，所以寫在這裡一次就夠。
        哪天真的要做深色版，改成 `light dark` 並補上深色變數，不要直接刪掉。 */
  color-scheme: light;

  --ink: #1d1d1f;      /* 主色（近黑）：標題 */
  --blue: #0071e3;     /* 強調藍：CTA、連結 */
  --body: #333333;     /* 內文灰 */
  --muted: #6e6e73;    /* 次要灰：標註 */
  --bg: #ffffff;       /* 背景白 */
  --surface: #f5f5f7;  /* 淺灰區塊 */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  padding: 24px 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.wordmark {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.wordmark:hover { text-decoration: none; }

/* ⚠️ 不要用 main / .card 這種通用選擇器，會漏到其他頁（.specs 已經漏過一次） */
.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero {
  padding: 96px 0 64px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.lede {
  margin: 24px 0 0;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 400;
  color: var(--muted);
  max-width: 34em;
}

/* 骨架首頁專用（命名要夠特別，否則會漏到設計稿的卡片上） */
.spec-strip {
  background: var(--surface);
  border-radius: 14px;
  padding: 32px;
  margin: 32px 0 96px;
}

.spec-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spec-strip .label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.site-footer {
  border-top: 1px solid #e5e5ea;
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  font-size: 14px;
  color: var(--muted);
}

.site-footer p { margin: 0 0 4px; }
.site-footer .note { color: #a1a1a6; }