/* ==========================================================================
   article-ds.css（homepage-v4 · 故事页用的 spike 17 提案 token，从 spikes/19-article-gallery/ds.css 原样复制；只给 stories/clothes-home、moonlight-bay 两页）
   叠在 v4 的 css/tokens.css + css/ds-bridge.css 之上（相对路径 ../…），
   只新增、不改 v4 文件。这里是「提议」的 token：若采纳，落地时搬进 v4 的 tokens.css / ds-bridge.css，
   再把 mvp.css §0 §1、me-card.css、tub.css、mobile-skin.css §5、site.css、story.css 里各自写死的值换成这些变量。

   命名原则：
     · 表面（surface）和它上面的墨成对：--sf-<名>（表面色）↔ --sf-<名>-ink（墨的 rgb 三元组）。
       元素只声明「我在哪种表面上」（class .on-paper / .on-print / .on-plastic / .on-chip / .on-wall），
       三档墨（--ink / --ink-2 / --ink-3）、发丝线、下划线全部从 --ink-rgb 派生，一处定义。
     · 字只有五档 + 字标：--t-s 13 · --t-m 15 · --t-r 17（阅读页正文）· --t-l 24 · --t-xl 32 · 字标 40。
     · 夕阳不是第三套 token：它是白天的 token + L4/L5 的光（golden.js 只动墙、影、窗光，不动墨）。
   ========================================================================== */

:root {
  /* ---------- 0 · 表面 ↔ 墨（白天 / 夕阳） ---------- */
  --sf-wall: #FAF7EF;             --sf-wall-ink: 30 36 48;
  --sf-paper: #FFFDF8;            --sf-paper-ink: 30 36 48;      /* 纸卡：魔法笔、找故事、来信、文章里的纸 */
  --sf-print: #FAFAF8;            --sf-print-ink: 30 36 48;      /* 覆膜相纸（instax 白框）；背面 #F3F1EB */
  --sf-print-back: #F3F1EB;
  --sf-plastic: #D6D3CE;          --sf-plastic-ink: 30 36 48;    /* TROFAST 半透明盆（颜色画在 svg 里，这里只是字的配对参考） */
  --sf-chip: #FFFFFF;             --sf-chip-ink: 30 36 48;       /* 白色小物件：Yoto 卡、“bus” 字条 */
  --sf-film: 127 195 234;         --sf-film-ink: 30 36 48;       /* 亚克力透明片（暂不上线） */

  /* ---------- 1 · 墨的三档（从 --ink-rgb 派生；每种表面只改 --ink-rgb） ---------- */
  --ink-rgb: var(--sf-wall-ink);
  /* 三档墨的派生写在下面的「表面 class」那一条规则里（:root 和 .on-* 共用一条）。
     为什么不能只写在 :root：自定义属性在声明它的元素上就算完了（--ink 在 :root 上用 :root 的 --ink-rgb 算出 rgb(30 36 48)，
     子元素继承的是算完的值）。v4 里每个文件各写一遍五个变量，根因就是这个；这里改成一条规则列出所有表面，仍然只有一处。 */

  /* ---------- 2 · 强调 / 状态 ---------- */
  /* 没有强调色。PLIK 四片的颜色只属于字标；蜡笔色只属于作品插图。CTA = 墨色实心，字 = 所在表面的颜色。 */
  /* 主按钮的 --cta-bg / --cta-fg 只在 tokens.css 的派生规则里定义（底 = 墨，字 = 这一面的 --surface-bg）；下面的 .on-* 只设 --surface-bg */
  --film-p: #7FC3EA; --film-l: #F29BB8; --film-i: #F3C64A; --film-k: #9ED9B8;   /* 字标四片（只给字标） */
  /* 状态：没有红绿。错误 / 成功 = ink-1 + 字重不变 + 一句话；发送中 = ink-3。 */

  /* ---------- 3 · 字 ---------- */
  --font-text: "PLIK Latin", "PingFang SC", "Noto Sans SC Variable", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "PLIK Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-brand-zh: "PLIK Smiley", "Smiley Sans Oblique", "Smiley Sans", "PingFang SC", sans-serif;
  --font-brand-en: "Bricolage Grotesque Variable", "Bricolage Grotesque", var(--font-text);

  /* --t-s 13 / --t-m 15 / --t-l 24 只在 tokens.css 定义；这里只补行高和阅读页的两档 */
  --lh-s: 1.5;   /* 小标签 / 链接 / 按钮 / 图注 / 页尾 / 注释 */
  --lh-m: 1.75;  /* 卡上的正文、header 的 tagline、输入框 */
  --t-r: 17px;  --lh-r: 1.9;   /* 阅读页正文（文章、About 全文）—— 比卡上大一档，长读才用 */
  --lh-l: 1.45;  /* 卡上那一句 / 文章小标题 */
  --t-xl: 32px; --lh-xl: 1.3;  /* 文章标题（手机 26） */
  --t-brand: 40px;             /* 「霹雳啪啦实验室」字标（手机 22）—— 不在阶梯里，它是招牌 */

  --ls-label: .14em;           /* 中文小标签 */
  --ls-label-en: .2em;         /* 英文小标签（mono、大写） */
  --ls-title: .01em;           /* 24 / 32 的中文标题 */

  --w-text: 400;               /* 全站字重只有 400 */
  --w-brand: 600;              /* 例外：Bricolage 的 PLIK Lab 字标 */

  /* ---------- 4 · 间距、网格、圆角 ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 26px; --sp-7: 30px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px;
  --pad-card-y: 22px; --pad-card-x: 26px;        /* 卡内留白（所有纸卡 / 相纸背面 / 来信 / 找故事同一对） */
  --gap-label: 10px;                             /* 小标签 → 那一句 */
  --gap-title: 10px;                             /* 那一句 → 正文 */
  --gap-actions: 14px;                           /* 正文 → 链接行 */
  --page-x: 40px; --page-max: 1200px;   /* [v3 · R8] 卡片间距 --grid-gap 只在 tokens.css 定义（桌面 / 平板 24，手机 16） */
  --measure-zh: 36em;                            /* 阅读页：中文一行 ≤ 36 字（17px → 612px） */
  --measure-en: 68ch;

  --r-paper: 3px;   /* 纸卡、文章配图 */
  --r-print: 5px;   /* 相纸 */
  --r-obj: 9px;     /* 塑料小物件（Yoto 卡 9 / 手机 6）*/
  --r-pill: 999px;  /* 实心按钮、字条、磨砂胶囊 */

  /* ---------- 5 · 动效 ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);     /* 一般过渡 */
  --ease-obj: cubic-bezier(.3, .7, .3, 1); /* 物件被摸到：抬起 / 材质按钮 */
  --dur-hover: .35s; --dur-fade: .2s; --dur-flip: .9s; --dur-theme: .42s; --dur-tub: .32s;
}

/* ---------- 夜里：墙暗、纸暗、相纸变暖灰；内容不暗 ---------- */
:root[data-theme="night"] {
  --sf-wall: #1C1915;             --sf-wall-ink: 238 233 223;
  --sf-paper: var(--night-paper); --sf-paper-ink: 238 233 223;   /* 提议：暗纸上的墨和墙上的墨同一个值（现在是 233 226 212，和 238 233 223 肉眼分不出，只多一个值） */
  --sf-print: #D9D3C9;            --sf-print-ink: 30 36 48;      /* 台灯下的覆膜相纸：还是深墨 */
  --sf-print-back: #CFC9BE;
  --sf-plastic: #35302A;          --sf-plastic-ink: 238 233 223;
  --sf-chip: #F1EDE6;             --sf-chip-ink: 30 36 48;       /* 白色实物夜里还是亮的 */
}

/* ---------- 表面 class：元素只说「我在哪」；三档墨在这一条里派生（:root 和所有 .on-* 共用） ---------- */
:root, .on-wall, .on-paper, .on-print, .on-plastic, .on-chip {
  --ink:   rgb(var(--ink-rgb));            /* ink-1：标题、卡上那一句、首段 / 引文、链接 hover、实心按钮底 */
  --ink-2: rgb(var(--ink-rgb) / .80);      /* ink-2：正文、文字链接、按钮字 */
  --ink-3: rgb(var(--ink-rgb) / var(--ink-3-a));      /* [v3] 透明度 = tokens.css --ink-3-a .72。 ink-3：小标签、图注、页尾、占位字（最小 ≥ 4.5 : 1，含盆和夜里的相纸） */
  --hair:  rgb(var(--ink-rgb) / .08);      /* 发丝线：卡边、分隔 */
  --hair-2: rgb(var(--ink-rgb) / .18);     /* 稍深的发丝线：输入框底线静态态、引文左线 */
  --rule:  rgb(var(--ink-rgb) / .45);      /* 下划线（文字链接）；hover → currentColor */
}
/* 各表面设 --surface-bg，--cta-* 由 tokens.css 的派生规则跟着算（这几个 class 已列进那条规则） */
.on-wall    { --ink-rgb: var(--sf-wall-ink);    --surface-bg: var(--sf-wall);   color: var(--ink); }
.on-paper   { --ink-rgb: var(--sf-paper-ink);   --surface-bg: var(--sf-paper);  color: var(--ink); background-color: var(--sf-paper); }
.on-print   { --ink-rgb: var(--sf-print-ink);   --surface-bg: var(--sf-print);  color: var(--ink); background-color: var(--sf-print); color-scheme: light; }
.on-plastic { --ink-rgb: var(--sf-plastic-ink); --surface-bg: var(--sf-plastic); color: var(--ink); background-color: var(--sf-plastic); }
.on-chip    { --ink-rgb: var(--sf-chip-ink);    --surface-bg: var(--sf-chip);   color: var(--ink); background-color: var(--sf-chip); color-scheme: light; }

/* ---------- 字的五档（class 版，给规范页和 spike 用；落地时就是这几条规则） ---------- */
.t-s  { font: var(--w-text) var(--t-s) / var(--lh-s) var(--font-text); letter-spacing: 0; }
.t-m  { font: var(--w-text) var(--t-m) / var(--lh-m) var(--font-text); letter-spacing: 0; }
.t-r  { font: var(--w-text) var(--t-r) / var(--lh-r) var(--font-text); letter-spacing: 0; }
.t-l  { font: var(--w-text) var(--t-l) / var(--lh-l) var(--font-text); letter-spacing: var(--ls-title); text-wrap: balance; }
.t-xl { font: var(--w-text) var(--t-xl) / var(--lh-xl) var(--font-text); letter-spacing: var(--ls-title); text-wrap: balance; }
.t-brand { font: 400 var(--t-brand) / 1.12 var(--font-brand-zh); letter-spacing: .03em; }
.label  { font: var(--w-text) var(--t-s) / var(--lh-s) var(--font-text); letter-spacing: var(--ls-label); color: var(--ink-3); }
html[data-lang="en"] .label, .label.en { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--ls-label-en); }
@media (max-width: 699.98px) { :root { --t-xl: 26px; --t-brand: 22px; --pad-card-y: 20px; --pad-card-x: 22px; --page-x: 16px; } }
@media (min-width: 700px) and (max-width: 1023.98px) { :root { --page-x: 32px; } }

/* ---------- 组件（提议的默认态） ---------- */
.ds-link { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--rule); text-underline-offset: .28em; transition: color var(--dur-fade), text-decoration-color var(--dur-fade); }
.ds-link:hover, .ds-link:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.ds-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 9px 18px; border: 0; border-radius: var(--r-pill); background: var(--cta-bg); color: var(--cta-fg);
  font: var(--w-text) var(--t-s) / var(--lh-s) var(--font-text); letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter var(--dur-fade), translate var(--dur-fade) var(--ease); }
.ds-cta:hover { filter: brightness(1.06); } .ds-cta:active { filter: brightness(.96); } .ds-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: none) { .ds-cta { min-height: 44px; } }
.ds-field { display: block; width: 100%; min-width: 0; padding: 6px 0 8px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); caret-color: var(--ink);
  font: var(--w-text) var(--t-m) / var(--lh-m) var(--font-text); }
.ds-field::placeholder { color: var(--ink-3); opacity: 1; }
.ds-field:focus-visible { outline: 0; border-bottom: 1.5px solid var(--ink); }
.ds-chip { display: inline-block; padding: 5px 11px 6px; border-radius: 12px; background: var(--sf-chip); color: rgb(var(--sf-chip-ink)); font: var(--w-text) var(--t-m) / 1.2 var(--font-text); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 0 0 .5px rgb(var(--sf-chip-ink) / .14), 0 1px 2px rgb(var(--sh-rgb, 44 56 80) / .14); }
.ds-turn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 8px; border: 0; background: none; color: var(--ink-3); font: var(--w-text) 12px / 1 var(--font-text); cursor: pointer; }
.ds-turn i { font-style: normal; font-size: 17px; transition: rotate .4s var(--ease); }
.ds-turn:hover { color: var(--ink); } .ds-turn:hover i { rotate: 180deg; }
.ds-turn.on-photo { border-radius: var(--r-pill); color: #fff; background: rgb(20 22 28 / .58); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .22); height: 30px; min-width: 30px; }
.ds-soon { font: var(--w-text) var(--t-s) / var(--lh-s) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ds-soon::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 8px 1px 0; background: currentColor; opacity: .55; vertical-align: middle; }
.ds-sw { display: inline-grid; place-items: center; width: 44px; height: 44px; }
.ds-sw i { width: 28px; height: 28px; border-radius: 50%; display: block; background: var(--sw, #E8B8C8); box-shadow: 0 0 0 .5px rgb(var(--ink-rgb) / .12), 0 1px 1.5px rgb(40 30 20 / .12); outline: 1.25px solid transparent; outline-offset: 2.5px; transition: transform .28s var(--ease-obj), outline-color .28s; }
.ds-sw[aria-checked="true"] i { transform: scale(1.08); outline-color: rgb(var(--ink-rgb) / .42); }

/* 文章配图三级宽度（spike article.html 和规范页共用） */
.fig { margin: var(--sp-7) 0; }
.fig img { display: block; width: 100%; height: auto; border-radius: var(--r-paper); }
.fig figcaption { margin-top: var(--sp-2); font: var(--w-text) var(--t-s) / var(--lh-s) var(--font-text); color: var(--ink-3); }
:root[data-theme="night"] .fig img { box-shadow: 0 0 0 1px rgb(255 240 220 / .12); }
.fig.wide { margin-inline: calc(-1 * var(--bleed, 0px)); }
.fig.full { margin-inline: calc(50% - 50vw); } .fig.full img { border-radius: 0; }
.fig.full figcaption { padding-inline: var(--page-x); }