/* 與 app 同一套顏色（R-215）：紙 #FFFBEF、墨 #2B3539、朱砂 #B5402E。
   網站和 app 看起來要是同一個東西，而不是兩個產品。 */
:root {
  --paper: #fffbef;
  --paper-shade: #f6f1e3;
  --ink: #2b3539;
  --ink-soft: #5e686c;
  --ink-faint: #c9c2b2;
  --seal: #b5402e;
  --measure: 34rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.85 "Noto Serif TC", "Songti TC", "PingFang TC", "Hiragino Sans",
    "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
}

main, nav.top, footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── 導覽 ── */
nav.top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 0.9rem;
}
nav.top a { color: var(--ink-soft); text-decoration: none; }
nav.top a:hover { color: var(--ink); text-decoration: underline; }
nav.top .brand {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-right: auto;
}

/* ── 文字 ── */
h1 {
  font-size: 1.9rem;
  line-height: 1.45;
  margin: 1.2rem 0 1.4rem;
  letter-spacing: 0.01em;
}
h2 {
  font-size: 1.05rem;
  margin: 2.2rem 0 0.5rem;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
}
p { margin: 0 0 1.1rem; }
.lede { font-size: 1.12rem; }
.crumb { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.crumb a { color: var(--ink-soft); }
a { color: var(--ink); text-underline-offset: 0.22em; }

/* ── 唯一的朱砂：主要行動（R-215 的規矩，網站照用） ── */
.cta {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.7rem 1.4rem;
  background: var(--seal);
  color: var(--paper);
  text-decoration: none;
  border-radius: 999px;
  font-size: 0.95rem;
}
.cta:hover { filter: brightness(1.08); }

/* 次要行動：同樣是連結，但不搶朱砂的位置。 */
.plain {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 2px;
}
.plain:hover { border-bottom-color: var(--ink); }

/* ── 卡片與列表 ── */
.card {
  margin: 2rem 0;
  padding: 1.3rem 1.4rem;
  background: var(--paper-shade);
  border-radius: 14px;
}
.card h2 { margin-top: 0; color: var(--ink); font-size: 1.15rem; }

.group { margin: 2.4rem 0; }
ul.terms { list-style: none; margin: 0; padding: 0; }
ul.terms li { border-top: 1px solid var(--ink-faint); }
ul.terms li:last-child { border-bottom: 1px solid var(--ink-faint); }
ul.terms a {
  display: block;
  padding: 0.85rem 0;
  text-decoration: none;
  color: var(--ink);
}
ul.terms a:hover { background: var(--paper-shade); }
ul.terms b { display: block; font-weight: 600; }
ul.terms span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

dl.features { margin: 1.5rem 0; }
dl.features dt { font-weight: 600; margin-top: 1.1rem; }
dl.features dd { margin: 0.1rem 0 0; color: var(--ink-soft); }

/* ── iOS 等候名單 ──
   送出鈕**不是朱砂**：這一頁的主要行動是去商店下載，而朱砂只給唯一的
   那一個（R-215 ③）。這裡用墨框，看得出是按鈕但不搶位置。 */
form.waitlist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1.4rem 0 0.9rem;
  max-width: 22rem;
}
form.waitlist label { font-size: 0.9rem; color: var(--ink-soft); }
form.waitlist input {
  width: 100%;
  padding: 0.6rem 0.2rem;
  font: inherit;
  color: var(--ink);
  background: none;
  /* 四面框加底色會讓它變成一個「表單元件」；只留一條底線，和 app 的
     問題輸入是同一個處理（R-216 ④）。 */
  border: none;
  border-bottom: 1px solid var(--ink-faint);
  border-radius: 0;
}
form.waitlist input:focus {
  outline: none;
  border-bottom-color: var(--seal);
}
form.waitlist input::placeholder { color: var(--ink-faint); }

.btn {
  margin-top: 0.4rem;
  padding: 0.55rem 1.2rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: none;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--ink); }
.btn:disabled { opacity: 0.5; cursor: default; }

.waitlist-status { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.waitlist-status.bad { color: var(--seal); }

/* ── 頁尾 ── */
footer {
  margin: 4rem auto 3rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
/* 1px 的 border-top 是瀏覽器的線；這一筆是這個站自己的筆。
   **全站只有這一處**——到處是筆觸就等於沒有筆觸。
   尺寸寫在 `mark.mjs` 裡（110×4.6），這裡不要再縮放它：拉長就看不出收鋒，
   那正是第一版 560 寬失敗的原因。 */
footer .rule {
  display: block;
  margin-bottom: 1.6rem;
}
footer .langs a { color: var(--ink-soft); }
footer .langs [aria-current] { color: var(--ink); }
.fineprint { line-height: 1.7; }

/* ── 底圖 ──
   兩張都是 `marketing/web_images.py` 從原檔壓出來的，紙色與 --paper 只差 1–3，
   所以邊緣接得上、不會看到一個方塊。

   岔路口那張是滿版的，**高度隨視窗變而不是等比**：等比的話 1400px 寬就是
   590px 高，整個首頁被一張圖佔滿。`object-position` 的 72% 是用來保住
   下面那段——上方四成是全空的天，裁掉不可惜；山、太陽、岔路與人都在下半。 */
.hero { width: 100%; margin: 0 0 2.4rem; }
.hero img {
  display: block;
  width: 100%;
  height: clamp(140px, 27vw, 360px);
  object-fit: cover;
  object-position: center 72%;
}

/* 區塊頁那幾條在欄寬之內，**照原比例顯示**——裁切是在 `web_images.py`
   做的，而且只替看過的圖做（書那張裁掉了上方全空的 30%）。 */
figure.art-band { margin: 0 0 1.6rem; }
figure.art-band img { display: block; width: 100%; height: auto; }

/* 詞條頁是短頁：一條 2.35:1 的圖擺上去會蓋過內容本身。這裡裁成窄帶，
   而且是**用 CSS 裁**——那十五張我還沒看過，不替沒看過的構圖先決定裁哪裡。
   某一張裁壞了就單獨調它的 `object-position`，不必重畫。 */
figure.art-band.narrow img {
  height: clamp(84px, 17vw, 132px);
  object-fit: cover;
  object-position: center 58%;
}

/* ── 卦象 ──
   頁面的簽名：它是這一則算出來的那一卦，不是裝飾性的插圖（R-216 ②）。 */
figure.mark-block {
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-start;
}
figure.mark-block svg.mark { max-width: 100%; height: auto; }
figure.mark-block figcaption {
  font-size: 0.95rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* ── 古書斷例 ──
   排盤刻意**不用朱砂**：朱砂留給唯一的主要行動（R-215）。動爻靠底色
   加上 ○／× 就看得出來，再上一個紅色只會跟頁底那顆按鈕打架。 */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.facts b { color: var(--ink); font-weight: 600; margin-right: 0.35rem; }

/* 表格比欄寬還寬時只讓它自己橫捲，**不要讓整頁橫捲** */
.chart-wrap {
  overflow-x: auto;
  margin: 1rem -1.25rem 0.8rem;
  padding: 0 1.25rem;
}
table.chart {
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 21rem;
}
table.chart th,
table.chart td {
  padding: 0.42rem 0.6rem 0.42rem 0;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink-faint);
}
table.chart thead th {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}
table.chart tbody th { font-weight: 400; color: var(--ink-soft); }
table.chart tbody tr.moving { background: var(--paper-shade); }
table.chart .dim { color: var(--ink-faint); margin-left: 0.15rem; }
.kong {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--ink-soft);
  border: 1px solid var(--ink-faint);
  border-radius: 3px;
  padding: 0 0.22rem;
  margin-left: 0.35rem;
}
table.chart .mk { font-weight: 600; }

/* 陽一條、陰兩條，用與 app 同一支筆畫（R-216）。
   原本是兩個圓角色塊——而 R-216 ③ 正是在講那個：整齊的色塊看起來是
   UI 元件，不是墨。 */
td.yao { width: 4.4rem; }
.yao-mark { display: inline-block; vertical-align: middle; }
.mv {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* 原文照錄的那一段 */
blockquote {
  margin: 1rem 0 0.6rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper-shade);
  border-radius: 12px;
  line-height: 1.95;
}
blockquote a { color: var(--ink); }

/* 說明性的小字：排盤怎麼重建的、原文照錄的聲明 */
.aside {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0.3rem 0 1.3rem;
}

dl.facts-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1.2rem;
  margin: 0.8rem 0 1.6rem;
  font-size: 0.95rem;
}
dl.facts-list dt { color: var(--ink-soft); }
dl.facts-list dd { margin: 0; }

.group h2 .n {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-faint);
}

@media (max-width: 30rem) {
  h1 { font-size: 1.55rem; }
  .lede { font-size: 1.05rem; }
}