/* ══════════════════════════════════════════════════════════════════
   _lab-higgs.html — 版式实验，不是规范
   骨架照 higgsfield.ai · 色与字体取自 tokens.css · 文案与菜单取自线上
   page 7772（modified 2026-08-13）与 makefun.ai 渲染页，非虚构
   三处收紧：渐变 35→2 · 圆角 −40% · 辅助色降为点缀
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  font-weight:300 700;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB}

:root{
  /* ── 排版尺度（2026-08-23 立）─────────────────────────────
     动因：用户指出「每个板块字体、字间距不统一」。量出来比感觉严重：
     font-size 27 种取值、letter-spacing 17 种、line-height 23 种。

     字号阶按**实测用量**收敛，不是拍的：13px 用了 24 处、15px 14 处、14px 12 处，
     这三档是主干；9.5 / 11.5 / 19 各只有 1–4 处，并进相邻档（+4.3% ~ +5.3%）。
     26px 不进这个阶 —— 它是 span.dev__ico 的表情图标尺寸，不是文字。 */
  --fs-2xs:10px;  --fs-xs:12px;   --fs-sm:13px;  --fs-md:14px;  --fs-lg:15px;
  --fs-xl:18px;   --fs-2xl:20px;  --fs-3xl:24px; --fs-4xl:34px; --fs-5xl:40px;

  /* 字距改用 em，让它跟着字号走 —— 原来 -.1/-.2/-.3/-.4/-.5/-.6/-1/-1.2px
     是一段连续光谱，明显是逐处随手写的。
     ⚠ --ls-caps 只给**真全大写**的元素（查过 text-transform，共 6 个）。
       词首大写的小标签（.tile__flag "POPULAR/Image"、.card__pin "Pro"、
       .foot__title "Quick Links"、.dev__k、.prose__h4）字距归零，变化 −0.2~−0.5px。
     ⚠ 大写也分两档：字号越大越要收。.sec__t 是 18px 全大写，用 --ls-caps-lg；
       其余 5 个都 ≤13px，用 --ls-caps。一档到底会让 .sec__t 多出 +0.50px。 */
  --ls-display:-.02em;  --ls-title:-.01em;  --ls-caps:.05em;
  --ls-caps-lg:.03em;   --ls-wide:2px;

  /* display 阶：**只有 --fs-lead 是真合并**（原来 4 处各写一遍同一个 clamp）。
     其余每个是一个角色的定值，多数有实测依据，所以命名但**不合并** ——
     把它们放进 :root 是为了让整套尺度在一处可见、可比，不是为了省字符。 */
  --fs-lead:clamp(14px, 1.1vw, 16.8px);      /* 导语 / 大正文：.lead .mh__sub .cta__d .fp__d 共用 */
  --fs-d-row:clamp(24px, 1.9vw, 34px);       /* .alt__t   图文交替的行标题 */
  --fs-d-bnr:clamp(26px, 2.1vw, 40px);       /* .bnr__t   通栏 banner，画布定稿 */
  --fs-d-foot:clamp(28px, 3.2vw, 46px);      /* .foot__h  页脚标语 */
  --fs-d-promo:clamp(30px, 2.3vw, 44px);     /* .promo__t 上限 44 —— 再大在 1280 那档会把 NO SUBSCRIPTION 挤成三行 */
  --fs-d-hero:clamp(36px, 3.6vw, 58px);      /* .mh__t    页面 H1，全页最大的正文字，比 --fs-d-band 高一档 */
  --fs-d-band:clamp(40px, 3.4vw, 52px);      /* .fp__t    通栏展示位，上限是设计稿在 1568 下的定值 */
  --fs-d-band-m:clamp(32px, 4.6vw, 44px);    /* .fp__t    中间档（比例放扁到 5:2 那一档） */
  --fs-d-band-s:clamp(30px, 9.2vw, 38px);    /* .fp__t    移动档 */
  --fs-mark:clamp(64px, 19.9vw, 329px);

  /* ── 行高（2026-08-23）──────────────────────────────────
     原来 23 种取值，无单位 / px / normal 三种写法混用。
     合并有可见影响（1.6 → 1.7 是 +6%），所以分档是按**角色**并的，不是按数字近似：
     大标题越大越要收，正文越长越要松。 */
  --lh-display:1.1;    /* 巨型标题：并 1.08 / 1.12 */
  --lh-tight:1.2;      /* 标题：并 1.15 / 1.18 / 1.2 / 1.25 */
  --lh-snug:1.35;      /* 小标题、卡标题：并 1.3 / 1.35 */
  --lh-normal:1.55;    /* 正文：并 1.5 / 1.55 */
  --lh-relaxed:1.7;    /* 长文正文：并 1.6 / 1.65 / 1.7 / 1.75 */
  /* ⚠ 不并的三类：① 1 / .7 / .8 是图标居中与装饰引号，不是文字行高；
     ② 12 / 16 / 20 / 24 / 30px 是逐像素对 Figma 的**契约值**，换成无单位就对不上画布；
     ③ normal 是 <pre> 的默认。 */

  /* ── 过渡（2026-08-23）──────────────────────────────────
     原来 18 种写法，时长 .15/.16/.18/.2/.22 五个值在做同一件事。
     并成 5 档，最大变化 30ms（.18→.15），人眼分辨不出。 */
  --t-press:.1s;   --t-fast:.15s;  --t-base:.2s;  --t-slow:.32s;  --t-media:.45s;
  --ease:ease;     --ease-out:cubic-bezier(.2,.7,.3,1);

  /* ── 层级（2026-08-23）──────────────────────────────────
     值一个没改，只是给了语义。组件内 1/2/3/5，全局浮层 50/55/60。
     ⚠ 下拉必须高过抽屉、抽屉必须高过导航条，这个顺序是功能性的。 */
  --z-base:1;  --z-raise:2;  --z-over:3;  --z-top:5;
  --z-nav:50;  --z-drawer:55;  --z-drop:60;

  /* ── 玻璃模糊 ── */
  --glass-blur:14px;   /* 导航条 */
  --glass-blur-sm:8px;

  /* ── 过渡组合 ──
     时长走 token 之后还剩 17 种「写法」，差别只在**哪些属性参与过渡**。
     其中 10 条全是同一个意图：交互态换色（hover / focus 时换字色、底色或描边色）。
     并成一条 —— 多过渡一两个本来就不变的属性没有副作用。
     其余（下拉的 opacity/visibility、图片 transform、按钮 box-shadow、进度条 width）
     各有各的意图，保留。 */
  --tr-tint:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
  /* hero 的内发光。160/20 是通栏形态下的实测值，与卡片用的 --glow-blur 不是一回事。 */
  --glow-hero:160px;  --glow-hero-spread:20px;
 /* 玻璃按钮 */
      /* .foot__mark 页脚巨型字标。**改 logo 宽或换字体这个数要重算** */


  /* ── 色：逐字节取自 tokens.css ───────────────────────────── */
  --c-orange:#FF6624; --c-amber:#FF9B29; --c-cream:#F2E7E1;
  --c-blue:#355CF5; --c-blue-ink:#728DF8;   --c-orange-deep:#BF4C1B;
  --c-void:#0B0907;   --c-night:#171310;  --c-panel:#2A2521;
  --c-lift:#3A3531;   --c-mute-dark:#B0A8A2; --c-white:#FFF; --c-black:#000;
  --c-orange-lit:#FF8A24; --c-orange-dim:#E45E0B;   /* CTA 渐变的高光与底缘 */

  /* 语义层 —— 组件只读这一层 */
  --bg:var(--c-void); --surface:var(--c-night); --surface-2:var(--c-panel);
  --surface-3:var(--c-lift);
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --text:#F5F1EE; --mute:var(--c-mute-dark); --faint:#8A817A;
  --accent:var(--c-orange); --accent-ink:var(--c-black);
  /* 重点推的卡才有的内发光。蓝是 makefun 规范里已有的 --c-blue，不是新色。
     原约定是「只做发光、不做面也不做字」，2026-08-23 起 hot 标签把它用作面色
     （见下面的 --hot），这条约定已放宽为「不做字」。 */
  --glow-hi:var(--c-blue); --glow-blur:32px; --glow-blur-hi:48px;
  /* hot 标签的面色。⚠ 推翻了上面那句「蓝只做发光、不做面也不做字」——
     用户 2026-08-23 决定 hot 用辅助蓝。
     取的是 --c-blue-ink 而不是 --c-blue：后者 L 只有 .150，做成块在深底上
     「面对底」仅 3.63，比 new 的橙块（6.51）沉一半，视觉上 hot 反而比 new 弱；
     blue-ink 的 L .294 与橙的 .309 相当，面对底 6.24，两块重量才一致。
     ⚠ 这是借色值：blue-ink 在 tokens.css 里的角色是「深色主题下的蓝字色」
     （--info-ink），这里当面色用。配黑字 6.88，与 new 的黑字统一；
     配白字只有 3.05，不能用。 */
  --hot:var(--c-blue-ink); --hot-on:var(--c-black);
  /* CTA 底座：强调色的暗版，色板里本来就有，不新造色。 */
  --accent-shade:var(--c-orange-deep);
  --accent-lit:var(--c-orange-lit); --accent-dim:var(--c-orange-dim);
  --tint-a:var(--c-blue); --tint-b:var(--c-amber); --tint-c:var(--c-cream);
  /* 全页唯一的渐变。高光落在 40% 而不是顶端，配合 4px 底座才有「一块实体」的感觉。 */
  --grad-cta:linear-gradient(180deg, var(--accent) 0%, var(--accent-lit) 40%, var(--accent-dim) 100%);

  /* ── 圆角：比 tokens.css 的 10/14/20/28/40 收紧约 40% ─────── */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:9999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px;
  /* 案例墙第四行露出的高度 —— 硬切，不做渐隐 */
  --gal-peek:112px;
  /* 瀑布流的可见高度 —— 它下面还有内容，靠裁切 + 遮罩收口。
     写成 min(定值, 视口比例) 而不是一个定值：列宽随视口连续变化，
     裁切线却是定值的话，**同一个断点带内**列会越变越矮，到带的窄端就撑不到底、
     列尾露白。1280 那一点实测就是这样翻的（GPT 的第五列差 75px）。
     px 那半负责封顶（版心 1600 以上列宽不再变），vw 那半负责跟住列高。 */
  --mas-h:min(840px, 55vw);

  /* ── 版心 1920 + 两边各 16 → 内容实宽 1888（用户 2026-08-23 定）。
     这是回到 higgsfield 的原始基准：1997 视口下它内容正是 1888、左边距 55。
     08-19 曾收到 1600（内容 1568），那次是审美判断不是修错，这次改回同理。
     视口超过 1920 之后内容恒 1888，不再随屏幕拉伸 —— 1888 是往后所有
     组件排列的设计基准，是个定数。
     1920 屏正好顶满；2192 单侧留白 136、2560 留白 320。
     --gutter 恒 16 不分档，nav / ticker / main 三处共用同一个来源。
     ⚠ 改这个值必须测到 2192 / 2560：上限值只有在超过它的宽度下才看得出
     生效没生效，08-19 那轮的探针只测到 1920，是个盲区。 ── */
  --wrap:1920px;
  --gutter:16px;

  /* ── Hero Rail 轨道参数 ──
     卡是**定尺**的，不随视口拉伸；窄屏只是少显示几张。
     448 = 1888 基准下正好 4 张（448×4 + 24×3 = 1864），且 16:9 得整数高 252，
     Figma 里能对到整数。 */
  --hero-w:448px;    /* 定尺，16:9 → 高 252 */
  --hero-gap:var(--s-5);   /* 卡间距 */
  --peek:80px;       /* 左侧露出上一张卡的量 */
  --font-sans:"Inter",system-ui,sans-serif;
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
}

/* ══════════ 作用域类 .mkf-lp（2026-08-23 · B0）══════════
   原来这 5 条是**真全局**的（`*` / `html` / `body` / `a` / `img`）。它们一旦随插件
   加载，线上所有旧页面立刻变样 —— 于是「先把插件装上、再慢慢换页面」这条路走不通，
   而首页切换窗口要接近零，恰恰依赖这条路。
   收进 `.mkf-lp` 之后：插件装上、CSS 加载，但页面没有这个类 → **一条都不命中**，
   线上零变化；换页面时 CSS 与 chrome 早已在位，只差一次 POST。
   （做法与 a2e-landing 的 `body.a2e-chrome` 同源。）

   ⚠ **必须用 `:where()`，不能直接加 `.mkf-lp ` 前缀。**
   `:where()` 特异性为零，`:where(.mkf-lp) a` 仍是 (0,0,1)，与原来的 `a` 完全相同；
   直接写 `.mkf-lp a` 会变成 (0,1,1)，反过来压过 `.faq__a a`(0,2,0) 之外的一堆规则 ——
   实测会当场破坏：`.dev__media{max-width:none}` 的卡内媒体出血、
   `.prose a` / `.list a` / `.faq__a a` / `.dev__d a` 四处散文内链的颜色与下划线。 */
:where(.mkf-lp),:where(.mkf-lp) *,:where(.mkf-lp) *::before,:where(.mkf-lp) *::after{box-sizing:border-box}

body:where(.mkf-lp){margin:0;-webkit-text-size-adjust:100%;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-md);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
:where(.mkf-lp) a{color:inherit;text-decoration:none}
:where(.mkf-lp) img{display:block;max-width:100%}
.mkf-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ══════════ 落地页上藏掉主题自己的 header / footer ══════════
   ⚠ 这条是**反方向**的：其余所有规则都只匹配 `.mkf-*`（所以主题碰不到我们），
   而这一条必须匹配**主题的**元素。作用域仍是 `.mkf-lp`，所以对旧页面完全惰性。

   为什么必须有它：主题的 header 是**区块模板部件**（`header.wp-block-template-part`），
   不在 `post_content` 里 —— 插件的 `content_has()` 守卫拦不住它。
   不藏掉就会「主题导航 + 我们注入的导航」两条并存。

   ⚠ **它的生效依赖先停用 `header css` 那段片段**：那 22KB 里有 326 处 `!` important，
   包括 `display:block !` important 直接打在同一个元素上。停用之前这条压不住它，
   停用之后这条才成立。两件事有先后，不是二选一。
   （片段备份见 build/sites/makefun-ai/snippets/，停用是可回滚的） */
/* ⚠ 不能用 `>` 直接子元素 —— 实测主题的祖先链是
   header.wp-block-template-part → div.wp-site-blocks → body，中间隔着一层，
   用子选择器匹配不到（第一版就是这么漏的，线上两条导航并存）。 */
body:where(.mkf-lp) header.wp-block-template-part,
body:where(.mkf-lp) footer.wp-block-template-part{display:none}

/* ══════════ 解开主题 alignwide 对正文的夹持（首页专属，2026-08-24）══════════
   同样是**反方向**规则：匹配主题的元素，作用域仍是 `.mkf-lp`。

   现象：首页正文实宽只有 **1368**，不是规范的 1888。祖先链量出来是

       MAIN.mkf-wrap                       max-width:1920  →  实际只有 1400
       └ DIV.entry-content.alignwide       max-width:1400  margin:0 auto   ← 元凶
         └ DIV.wp-block-group.alignfull.a2e-hf-page   padding:0 20px

   主题把 `wide-size` 定在 **1400**，`post_content` 带 `alignwide` 就被夹到 1400，
   我们的 `max-width:1920` 只是上限、夹不开。1400 − 32(gutter) = **1368**，与实测吻合。

   ⚠ **草稿页看不出来** —— 它不是「首页」，外层没有那个 `.a2e-hf-page` 容器，
   所以在 9825 上量到的一直是正确的 1888。**首页与二级页的祖先链不同，
   必须在真正的首页上量。** 这条是用户在宽屏上肉眼看出来的，
   我此前所有测量都在草稿页上做，因此全部漏掉。

   ⚠ 也只在视口 ≥1432 时看得见：更窄时 1400 这个上限本来就没生效。

   选择器为什么这么写：`body.mkf-lp .entry-content.wp-block-post-content` 是
   **(0,3,1)**，稳压主题那条布局规则（`.wp-container-… > .alignwide`，(0,2,0)）。
   这里**故意不用 `:where()`** —— 这是一场特异性的仗，而 `:where()` 特异性为 0。
   实测方法：把候选规则插在 `<head>` **最前面**再量，赢了才说明是特异性赢的、
   不是靠源码顺序侥幸。 */
body.mkf-lp .entry-content.wp-block-post-content{
  max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}

/* ⚠ 通栏 hero 还要单独解一次夹持 —— 与上面那条不是一回事，别合并。

   主题的 constrained 布局会给 `.entry-content` 的**每个直接子元素**发
   `max-width: contentSize`（实测 **1200px**）+ 左右 auto。
   `.mkf-wrap` 逃掉了，是因为我们给了它 `max-width:var(--wrap)`，同优先级下后写的赢；
   而 `.mkf-mh--full` **我们从来没声明过 max-width**，那条就无人对抗 ——
   实测线上 hero 只有 **1200×1011**、左右各留 478，本地是 2196 铺满（2026-08-24 用户看出来的）。

   ⚠ **首页不会暴露这个问题** —— 首页没有通栏 hero，第一屏是 `.mkf-wrap` 里的轨道。
   所以它必然要等到第一批二级页上线才会被发现。

   本地能铺满是因为 `<section class="mkf-mh--full">` 是 `<body>` 的直接子元素；
   线上它被塞进 `post_content` 里，祖先链完全不同。**这类"靠自己是 body 子元素"的
   组件，上线后都要重新量一遍。** 目前只有这一个。 */
body.mkf-lp .mkf-mh--full{max-width:none}
/* 外层那 20px 内边距也要去掉，否则 1920 视口下正文只有 1880。
   导航在 `wp-site-blocks` 外面、不受这层影响，不去掉就会与正文差 20px。 */
body.mkf-lp .wp-block-group.a2e-hf-page{padding-left:0;padding-right:0}