/*
 * 道心小說 AI 官網樣式。
 *
 * ═══ 這份 CSS 在守什麼 ═══
 * CLAUDE.md §4 的設計語言：低彩度、大量留白、無陰影、無漸層、1px 細線、宋體。
 * 兩套主題——**米色版**（Flax 那個暖米調，預設）與**深色沉靜版**。
 * 兩者都不是「把顏色反過來」：深色版的文字刻意不用純白（#D9D4C7 而非 #fff），
 * 因為純白在深底上會發光刺眼，而這個站的主體是要讀很久的長文。
 *
 * 顏色一律定義在 :root（米色版），深色只覆寫變數，不覆寫規則——
 * 這樣加第三套主題時不必再碰任何一條版面規則。
 */

/* ── 主題變數 ─────────────────────────────────────────────── */
:root {
  /*
   * 米白版（預設）。
   *
   * 第一版用 #f7f2e7（紅比藍高 16）——Owner 2026-08-22：「太偏黃了，
   * 有點陳舊骯髒的感覺」。成立：黃味一過頭，米色就從「紙」變成「舊紙」。
   * 現在是 #f7f6f2（紅比藍高 5）：還是暖的、還是比純白舒服，但不再泛黃。
   * 想再冷一點就往 #f6f7f7 走（藍比紅高，蒼白調），那是另一種乾淨。
   */
  --bg: #f7f6f2;
  --surface: #fdfcf9;
  --fg: #2b2a26;
  --muted: #6d6a62;
  --line: #e4e2da;
  --line-strong: #cdcabf;
  --accent: #7d8f7a;      /* 淡綠：只用在小圓點與 focus，不做色塊 */
  --shade: rgba(43, 42, 38, 0.04);
}

/* 深色沉靜版。跟隨系統，也可由切換鈕強制。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1b19;
    --surface: #232220;
    --fg: #d9d4c7;
    --muted: #8e8878;
    --line: #38352f;
    --line-strong: #4a463d;
    --accent: #7d948a;
    --shade: rgba(217, 212, 199, 0.05);
  }
}
:root[data-theme="dark"] {
  --bg: #1c1b19;
  --surface: #232220;
  --fg: #d9d4c7;
  --muted: #8e8878;
  --line: #38352f;
  --line-strong: #4a463d;
  --accent: #7d948a;
  --shade: rgba(217, 212, 199, 0.05);
}

/* ── 字型 ─────────────────────────────────────────────────
 * 自架子集（338 KB，只含網站實際用字）。**不外連 Google Fonts**——
 * 隱私條款寫明「沒有安裝任何第三方分析或廣告追蹤」，那句話要成立，
 * 就不能讓訪客的瀏覽器去別人家拿字。
 * local() 優先：裝置已裝思源宋體就零網路請求。
 */
/*
 * 標題用黑體、內文用宋體（Owner 2026-08-22 對照 Gamma 產出後的判斷：
 * 「標題大小＋內文排版＋字體選用比較有現代美感，也更好讓眼睛閱讀」）。
 *
 * 這一組混排是刻意的：**現代感來自黑體標題，閱讀舒適來自宋體內文**。
 * 全站改黑體會失掉侘寂的底色；全站宋體則像我第一版那樣，標題抓不住眼睛。
 *
 * local() 排在最前面：多數裝置本來就有系統黑體（蘋方／微軟正黑），
 * 而且**系統字有真正的粗體**——我們自架的子集只有 Regular，
 * 靠瀏覽器合成的偽粗體在中文大字上會糊。
 * 自架子集只有 46 KB（只含標題會用到的 331 個字），是沒有系統字時的後備。
 */
@font-face {
  font-family: "DaoSans";
  src:
    local("Noto Sans TC"),
    local("PingFang TC"),
    local("Microsoft JhengHei"),
    url("../fonts/NotoSansTC-heading.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "DaoSerif";
  src:
    local("Noto Serif TC"),
    local("Source Han Serif TC"),
    url("../fonts/NotoSerifTC-subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ── 基礎 ─────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

/*
 * 字級基準放在 html（根）而不是 body。
 *
 * 第一版把 17px／18px 寫在 body 上，結果所有用 rem 的介面文字
 *（品牌名、導覽、按鈕小字）仍然綁在瀏覽器預設的 16px——
 * **內文長大了，介面沒跟著長**，寬螢幕上就顯得特別小。
 * Owner 2026-08-22：「左上『道心小說 AI』、『目前邀請制…』這些字都太小」。
 * 改成調根字級之後，整套 rem 會一起縮放，只需要維護一個數字。
 *
 * 註：媒體查詢裡的 rem 一律以瀏覽器初始值（16px）計算，
 * 不受這裡影響，所以斷點不會跟著漂。
 */
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "DaoSerif", "Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif;
  font-size: 1rem;
  /* 1.9：第一版用 2 太鬆，段落會散開、抓不到成塊的感覺。1.8 是下限。 */
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.3em; }
a:hover { text-decoration-color: var(--fg); }

:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}

/* 動效一律克制；使用者要求減少動態就整組關掉 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── 版面骨架 ─────────────────────────────────────────────── */
/*
 * 欄寬（Owner 2026-08-22：「全部內文縮在中間 1/3 覺得有點侷促」）。
 *
 * 第一版 46rem 是照「一行 30–36 字」訂的，那個數字對**紙本**是對的，
 * 對 1900px 的寬螢幕就變成一條窄帶。改 52rem（一行約 48 字）——
 * 上限仍在中文舒適區內，而且行高 1.9 撐得住。
 * 更關鍵的是**圖片不再被關在文字欄裡**（見下面 figure 的破格）：
 * 侷促感有一半來自「圖跟字一樣窄」。
 */
.wrap {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.wrap-wide { max-width: 74rem; }

section {
  padding-block: 5.5rem;
  border-top: 1px solid var(--line);
}
section:first-of-type { border-top: 0; }

@media (max-width: 40rem) {
  section { padding-block: 3.5rem; }
  html { font-size: 16px; }
}

/* ── 標題 ─────────────────────────────────────────────────
 * 標題一律不加粗，改用字距拉開（§4）。粗體只留給句子裡真正的重點。
 */
/*
 * 標題：黑體、夠大、字距收緊。
 *
 * 第一版三件事都做反了——宋體、23px、字距 0.08em。
 * **標題的任務是讓人在捲動時抓得到段落**，而拉開字距的細宋體抓不住。
 * 字距在黑體大字上要**收**不要放：放了會散，那是小字級才需要的補償。
 */
h1, h2, h3 {
  font-family: "DaoSans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.45;
  margin: 0 0 1.6rem;
}
h1 { font-size: clamp(1.9rem, 5.2vw, 2.9rem); line-height: 1.4; }
h2 { font-size: clamp(1.55rem, 4vw, 2.1rem); }
h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.7rem; }

p { margin: 0 0 1.4rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

.lede { color: var(--muted); }
.small { font-size: 0.86rem; line-height: 1.9; color: var(--muted); }

/* ── 頁首 ─────────────────────────────────────────────────
 * 不 sticky：這個站的主體是長文，一直跟著捲的橫條會壓縮閱讀區。
 */
.site-header {
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.1rem;
}
.brand {
  font-family: "DaoSans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 1.18rem;              /* 品牌名是識別，不該比導覽還小 */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.site-nav {
  font-family: "DaoSans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 0.98rem;
}
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover { color: var(--fg); }
/* 登入：給已經是用戶的人，不搶「索取邀請」的位置——一條細下劃線就夠了 */
.site-nav a.signin { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.site-nav a.signin:hover { border-bottom-color: var(--fg); }

/* 手機不做漢堡選單：只有四個連結，藏起來反而多一次點擊 */
@media (max-width: 34rem) {
  .site-header .bar { justify-content: flex-start; }
  .site-nav { gap: 1rem; font-size: 0.94rem; }
}

/* ── 行動鈕 ─────────────────────────────────────────────────
 * 1px 細框 + 淺底，不做實心彩色（§4：彩色只用在小點綴）。
 */
.cta,
button.cta {
  font-family: "DaoSans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                 /* 最小觸控目標 */
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cta:hover { border-color: var(--fg); background: var(--bg); }
/* 行動鈕底下那句是給人看的說明，不是註腳——0.82rem 太小了 */
.cta-note { display: block; margin-top: 0.8rem; font-size: 0.94rem; color: var(--muted); }

/* 主題切換：一顆小字鈕，不搶戲 */
.theme-toggle {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  /* 44px 是觸控最小值。視覺上想小一點，但**按不到的鈕比醜的鈕糟**，
     所以維持高度、改用小字級與窄留白來收斂它的存在感。 */
  padding: 0.35rem 0.85rem;
  min-height: 44px;
  border-radius: 2px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--line-strong); }

/* ── 首屏 ─────────────────────────────────────────────────── */
.hero { padding-block: 6rem 4rem; }
/*
 * 主標是兩句對仗，**必須剛好兩行**（Owner 2026-08-22：「變成三行實在看得很尷尬」）。
 * 第一行 24 個全形字，所以要成立必須同時滿足：容器夠寬、字級夠收。
 *   24 字 × 44px ≈ 1056px，而首屏容器放寬到 68rem（≈1260px）——留得下。
 * 首屏因此**不吃一般的文字欄寬**：那個 52rem 是為長段落訂的，主標不是長段落。
 */
.hero .wrap { max-width: 68rem; }
.hero h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.55;
  letter-spacing: 0;
  margin-bottom: 2rem;
}
.hero h1 .line { display: block; }        /* 對仗要換行才看得出來 */
.hero .sub { color: var(--muted); margin-bottom: 2.5rem; }

.hero-figure { margin-block: 3.5rem 0; }
.hero-figure img { width: 100%; }

@media (max-width: 40rem) {
  .hero { padding-block: 3.5rem 2.5rem; }
  .hero h1 { line-height: 1.85; }
}

/* ── 圖 ─────────────────────────────────────────────────── */
/*
 * 圖片破格：跳出文字欄、置中放大到 68rem。
 * 文字要窄才好讀，圖要寬才有力——把兩者綁在同一個寬度是第一版最大的失誤。
 * 寬度夾在 100vw 之內，所以不會造成整頁橫向捲動。
 */
figure {
  margin: 3rem 0 0;
  width: min(68rem, calc(100vw - 3rem));
  margin-inline-start: 50%;
  transform: translateX(-50%);
}
figure img { width: 100%; }
figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); }

/*
 * 插畫與文字並排（Owner 2026-08-22：「道道也太小了，突兀的佔據好幾行，
 * 而不是鑲嵌在文字內」——說得對，第一版是把圖丟在文字下面佔位子，不是排版）。
 *
 * 做法：整段改成兩欄——文字一欄、插畫一欄，垂直置中對齊。
 * 用 .wrap-wide 當容器而不是 .wrap：**否則插畫會從文字身上偷走寬度**，
 * 那等於又回到「內文縮在中間」那個問題。
 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 26%, 340px);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
/* 插畫放左邊 */
.split--art-start { grid-template-columns: clamp(200px, 26%, 340px) minmax(0, 1fr); }
.split--art-start .split-art { order: -1; }
/* 長文段落：插畫對齊頂端比較穩，置中會讓它浮在半空 */
.split--top { align-items: start; }
/*
 * 插畫上限 480px 高：卷軸那張是 460×1200 的細長比例，
 * 不設限的話 320px 寬會撐出 836px 高——**三行字配一張兩人高的圖**，
 * 那不是排版是錯位。限高之後它會收成書籤般的細長條，正好貼那一段的語意。
 */
.split-art img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  object-position: center;
}
/*
 * 小尺寸插畫用 width 不用 max-width：
 * `justify-self: center` 會讓格子縮成內容寬，而圖是父層的 100%——
 * 兩者互相依賴就塌成 0×0（第一版就是這樣，FAQ 那隻整個消失）。
 */
.split-art.small {
  width: min(190px, 100%);
  justify-self: center;
}

@media (max-width: 52rem) {
  .split,
  .split--art-start { grid-template-columns: 1fr; }
  .split-art,
  /* 指定到 .split--art-start 才蓋得過「插畫排前面」那條（它的權重比較高）。
     手機上**一律先給標題**——讓一張兩人高的插畫把標題頂到螢幕外，
     等於要人捲過一張圖才知道這一段在講什麼。 */
  .split--art-start .split-art {
    order: 0;
    justify-self: center;
    max-width: 240px;
    margin-top: 2.5rem;
  }
}

/* 真人照的暫位：生成之前先留一個安靜的框，不要讓版面看起來壞掉 */
.photo-slot {
  margin-top: 2.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  background: var(--shade);
}

/* ── 條列與表 ─────────────────────────────────────────────── */
.stack > * + * { margin-top: 2.2rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2rem;
}
.cards > div {
  background: var(--bg);
  padding: 1.3rem 1.2rem 1.3rem 1.1rem;
  /* 左側一道粗線：一眼看得出「這是一則」，比四面框線輕，也不破壞低彩度 */
  border-inline-start: 3px solid var(--line-strong);
}
.cards h3 { margin-bottom: 0.4rem; }
.cards p { font-size: 0.95rem; color: var(--muted); margin: 0; line-height: 1.9; }

.entry {
  margin-top: 2rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--line-strong);
}
.entry h3 { margin-bottom: 0.3rem; }
.entry p { margin-bottom: 0; }

table.plain {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  font-size: 0.97rem;
}
table.plain th,
table.plain td {
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0.6rem;
  text-align: start;
  vertical-align: top;
  line-height: 1.85;
}
table.plain th {
  font-family: "DaoSans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}
table.plain td:last-child { color: var(--muted); }

/* 表格在窄螢幕上自己捲，不讓整頁橫向捲動 */
.table-scroll { overflow-x: auto; }

.evidence {
  margin-top: 2.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--muted);
}
.evidence strong { color: var(--fg); }

/* ── 常見問題 ─────────────────────────────────────────────── */
.qa { margin-top: 2.4rem; }
.qa > div + div { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.qa h3 { margin-bottom: 0.5rem; }
.qa p { margin: 0; color: var(--muted); }

/* ── 表單 ─────────────────────────────────────────────────── */
.invite {
  margin-top: 2.5rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.invite input[type="email"] {
  flex: 1 1 18rem;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
}
.invite input::placeholder { color: var(--muted); opacity: 1; }
.form-note { margin-top: 1rem; }
.form-msg { margin-top: 1rem; font-size: 0.88rem; }
.form-msg[data-state="ok"] { color: var(--accent); }
.form-msg[data-state="error"] { color: var(--fg); }

/* ── 頁尾 ─────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 3rem 4rem;
  font-size: 0.94rem;
  color: var(--muted);
}
.site-footer .links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--fg); }
.site-footer .copy { margin-top: 1.6rem; font-size: 0.8rem; }
/* 頁尾那隻：與連結同一行，不要自己佔一段 */
.site-footer .bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-mark img { max-height: 96px; width: auto; }

/* 回到頂部：唯一的導覽輔助（首頁刻意不做錨點目錄） */
.to-top {
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
}
.to-top:hover { color: var(--fg); }

/* 只給螢幕閱讀器 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 全幅圖帶：收尾前那一口氣。沒有文字，也不吃 .wrap 的欄寬限制——
   長文讀了十四段之後，需要一個什麼都不必讀的地方。 */
.band {
  border-top: 1px solid var(--line);
}
.band img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  object-position: center;
}

/*
 * 寬螢幕再加一級（≥1500px）——**這一段必須留在檔案最後面**。
 * 它覆寫的 .wrap／figure 都在上面定義過，而 CSS 同權重時後寫的贏；
 * 放在中間會被後面的 figure 規則蓋掉（第一次就是這樣，圖沒有變寬）。
 *
 * 只把欄寬拉寬會讓一行變太長，所以**字級與欄寬一起放大**：
 * 字大了，同樣的「一行 50 字」自然佔更多像素。
 * 寬螢幕該做的不是把字塞滿，是讓字變得好讀。
 */
@media (min-width: 1500px) {
  html { font-size: 18.5px; }      /* 內文與介面文字一起放大 */
  .wrap-wide { max-width: 78rem; }
  figure { width: min(72rem, calc(100vw - 4rem)); }
  section { padding-block: 6.5rem; }
}

/*
 * 子頁的頁首區塊：比首頁那個小一號。
 * 首頁的主標要停住一個剛到的人，子頁的讀者已經進來了——
 * 同樣的字級在這裡只會顯得吵。
 */
.page-hero { padding-block: 4.5rem 3rem; }
.page-hero .wrap { max-width: 60rem; }
.page-hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 1.4rem; }
.page-hero .lede { font-size: 1.02rem; }
@media (max-width: 40rem) { .page-hero { padding-block: 3rem 2rem; } }

/* ── 條款頁 ─────────────────────────────────────────────── */
.doc .wrap { max-width: 54rem; }
.doc h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-top: 3rem; }
.doc h3 { font-size: 1.08rem; margin-top: 2rem; }
.doc .rule { margin: 2.5rem 0; }
.doc blockquote {
  margin: 1.5rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-inline-start: 3px solid var(--line-strong);
  color: var(--muted);
}
.doc ul { margin: 1.2rem 0; }

/* 尚未填寫的欄位：**看不見的空白最危險**，所以刻意標出來 */
mark.todo {
  background: transparent;
  color: var(--fg);
  border-bottom: 2px dotted var(--line-strong);
  padding: 0 0.1em;
}
.draft-note {
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--muted);
}
.draft-note strong { color: var(--fg); }

/* 蜜罐欄位：藏起來但不是 display:none——有些機器人會跳過 display:none 的欄位 */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── 兩條路的按鈕列 ─────────────────────────────────────────
 * 「索取邀請」是主線，「下載桌面版」是給已經知道自己要什麼的人。
 * 兩顆一樣重會讓人停下來選，而停下來選就是流失——所以第二顆刻意安靜。
 */
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cta.cta-quiet { border-color: var(--line); color: var(--muted); background: transparent; }
.cta.cta-quiet:hover { border-color: var(--line-strong); color: var(--fg); }

/* ── 下載頁：兩條路的並排 ────────────────────────────────────
 * 兩張卡等寬、等重——這一頁的重點是「你可以選」，
 * 而不是把人推去其中一邊。窄螢幕自動疊成一欄。
 */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 2.4rem;
}
.path-card { border: 1px solid var(--line); padding: 1.8rem 1.6rem; }
.path-card h2 { margin-top: 0; }
.path-note { color: var(--muted); margin-top: -0.4rem; }
ul.plain { list-style: none; padding: 0; margin: 1.2rem 0; }
ul.plain li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  line-height: 1.85;
}
ul.plain li:last-child { border-bottom: 1px solid var(--line); }