/* ============================================================
   landing.css — 未登录时的产品说明页（#loginView.landing）
   金蔷薇的品牌门面：首屏花冠绽放 → 你的诗逐行落定
   → 怎么用（花茎随滚动生长）→ 底线 → 入口。
   登录 / 注册入口在右上角，正文里只保留结尾一处 CTA。

   约定：
   - 只服务说明页。所有可能撞名的选择器（.rv/.kicker/.prose/.stem/.node…）
     一律限定在 .landing 之下，不渗进 #appView 的收件箱界面。
   - 配色与字体全部取 tokens.css 的 html[data-theme="rose"] 令牌，
     与登录后的收件箱是同一朵金蔷薇。
   - 动效只用 transform / opacity / filter，不碰宽高与边距：
     进场不能把下面的内容推得上下跳（走查底线：视觉抖动即 bug）。
   ============================================================ */

/* ============ 版面骨架 ============ */
.landing {
  max-width: none;
  padding: 0;
  position: relative;
  overflow-x: clip;      /* 金尘迸发与视差位移不许顶出横向滚动条 */
}
.landing section { scroll-margin-top: calc(76px + env(safe-area-inset-top)); }
.landing > section,
.landing > footer { position: relative; z-index: 1; }

/* 金尘画布：整页底饰，浮在 body 渐变之上、正文之下 */
.landing .dust { position: fixed; inset: 0; width: 100%; height: 100%;
                 display: block; z-index: 0; pointer-events: none; }

/* —— 顶栏：平时通宽一行，下滑后整行缩成一颗居中悬着的描金胶囊 —— */
/* inbox.css 里那条给收件箱顶栏写的裸 `header` 规则会漏到这一行上（暖黑底 + 金发丝线 + 模糊），
   说明页这一行平时是透明的、底衬另有其人，所以先把那三样按回去。
   边框留着 1px 只是不想让顶栏高度差出一像素，把发丝线的位置挪走。 */
.land-top { position: fixed; left: 0; right: 0; top: 0; z-index: 30;
            --pad-x: clamp(14px, 4vw, 40px);
            --pw: calc(var(--w, 0px) + 48px);      /* 收拢后那颗胶囊的宽度：那一行 + 左右各 24px */
            display: flex; align-items: center;
            padding: calc(12px + env(safe-area-inset-top)) var(--pad-x) 12px;
            background: transparent; border-bottom: 1px solid transparent;
            backdrop-filter: none; -webkit-backdrop-filter: none; }
/* 顶栏那层底衬就是「栏」本身：平时通宽、下沿一条金色发丝分隔线；
   收拢时是这条栏自己缩成那颗胶囊——两端往里、上下各让出 6px、长出圆角、四边描金、底色变透，
   始终一层，不搞「底衬淡出 + 另起一颗淡入」那种交接。 */
.land-top::before { content: ""; position: absolute; inset: 0; z-index: -1;
                    border: 1px solid transparent; border-bottom-color: rgba(226, 176, 74, .13);
                    background: rgba(12, 8, 4, .74);
                    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
                    opacity: 0;
                    transition: opacity .3s var(--ease),
                                top .8s var(--ease), bottom .8s var(--ease),
                                left .8s var(--ease), right .8s var(--ease),
                                border-radius .8s var(--ease), border-color .8s var(--ease),
                                background-color .8s var(--ease), box-shadow .8s var(--ease); }
.land-top.stuck::before { opacity: 1; }
/* 玻璃那颗：底色压到 .46，让身后的正文透上来一点、靠 blur 磨成磨砂；
   内投影那一线高光顶在胶囊上沿，才像一块玻璃而不是一个黑斑。 */
.land-top.capsule::before { top: 6px; bottom: 6px;
                            left: calc((100% - var(--pw)) / 2); right: calc((100% - var(--pw)) / 2);
                            border-radius: var(--radius-pill);
                            border-color: rgba(226, 176, 74, .26);
                            background: rgba(26, 17, 8, .46);
                            box-shadow: 0 14px 32px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 226, 150, .09); }
/* 一行通宽摊在顶栏内容盒两端；收拢时两组各按 --g 往中间走，跟那条栏的两端走的是同一拍。
   --g（走多远）与 --w（收拢后的原生宽度）由 landing.js 量在 #landTop 上：视图可见时一次、
   resize 一次、内嵌宋体落定再一次；量不到（还 hidden）就留 0，那一行按原样摊开，不会先缩再弹开。 */
.land-pill { position: relative; flex: 1 1 auto; display: flex; align-items: center;
             justify-content: space-between; gap: 6px; }
.land-pill.measure { flex: 0 0 auto; width: max-content; }   /* 只在量的那一瞬 */
.land-pill.notrans .land-mark, .land-pill.notrans .land-ends { transition: none !important; }
.land-mark, .land-ends { flex: none; display: flex; align-items: center; gap: 6px;
                         transition: transform .8s var(--ease); }
.land-ends { margin-left: clamp(56px, 11vw, 132px); }   /* 胶囊要宽，靠中间这段留白撑，不是把两侧糊厚 */
.land-top.capsule .land-mark { transform: translateX(var(--g, 0px)); }
.land-top.capsule .land-ends { transform: translateX(calc(var(--g, 0px) * -1)); }
/* 阅读进度就是这一条发丝线：平时跟底衬一样摸到屏幕两边，收拢时缩到胶囊里侧那一段（14px 内收，
   正好躲开胶囊两端的圆角）；上下不动，只挪左右两端 */
.land-progress { position: absolute; left: calc(-1 * var(--pad-x)); right: calc(-1 * var(--pad-x));
                 bottom: -13px;                        /* 顶栏底衬的下沿：内容盒下沿 + 12px 内边距 */
                 height: 1px; border-radius: 1px;
                 transform: scaleX(var(--p, 0)); transform-origin: left center;
                 background: linear-gradient(90deg, var(--rose-deep), var(--accent) 45%, var(--rose-hi));
                 opacity: 0;
                 transition: opacity .45s var(--ease), left .8s var(--ease), right .8s var(--ease); }
.land-top.stuck .land-progress { opacity: .85; }
/* 收拢后缩到那一行的原生宽度上，两端各让开胶囊的圆角 */
.land-top.capsule .land-progress { left: calc((100% - var(--w, 0px)) / 2);
                                   right: calc((100% - var(--w, 0px)) / 2); }
.land-brand { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: .3em;
              border: none; background: transparent; padding: 0; min-height: 0; cursor: pointer;
              color: var(--rose-brand); text-shadow: 0 0 22px rgba(226, 176, 74, .28);
              transition: color .3s, text-shadow .3s; }
.land-brand:hover { color: var(--accent-hover); text-shadow: 0 0 26px rgba(240, 193, 105, .5); }
.land-brand:active { transform: none; }
.land-signin { font-size: var(--fs-small); letter-spacing: .08em; color: var(--text-2);
               border: none; background: transparent; min-height: 38px; padding: 0 8px;
               transition: color .3s; }
.land-signin:hover { color: var(--accent); border: none; background: transparent; }

/* —— 描金胶囊按钮：高光跟指针，位移只有 box-shadow，不推任何东西 —— */
.land-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
            min-height: 38px; padding: 0 15px; border-radius: var(--radius-pill);
            border: 1px solid rgba(226, 176, 74, .4); color: var(--rose-brand);
            background: linear-gradient(180deg, rgba(62, 43, 17, .62) 0%, rgba(23, 15, 7, .8) 100%);
            font-size: 14px; letter-spacing: .05em; cursor: pointer;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 226, 150, .09);
            transition: border-color .35s, box-shadow .35s, color .35s; }
.land-cta::before { content: ""; position: absolute; inset: -1px; border-radius: inherit;
                    background: radial-gradient(120px 64px at var(--mx, 50%) var(--my, 50%),
                                                rgba(255, 229, 157, .26), rgba(255, 229, 157, 0) 68%);
                    opacity: 0; transition: opacity .4s; pointer-events: none; }
.land-cta:hover { color: #fff2cf; border-color: rgba(246, 207, 98, .78);
                  box-shadow: 0 0 0 3px rgba(226, 176, 74, .1), 0 10px 30px rgba(226, 176, 74, .16),
                              inset 0 1px 0 rgba(255, 232, 170, .16); }
.land-cta:hover::before { opacity: 1; }
.land-cta.big { min-height: 48px; padding: 0 28px; font-size: 15px; }
/* 顶栏那颗注册不再自己描一圈：整行已经是一颗胶囊，里面再套一颗就成了两个框。
   只留金色字，比「登录」亮一档，仍然是主入口。 */
.land-cta.plain { border-color: transparent; background: none; box-shadow: none;
                  padding: 0 8px; font-size: var(--fs-small); letter-spacing: .08em; }
.land-cta.plain::before { display: none; }
.land-cta.plain:hover { border-color: transparent; background: none; box-shadow: none; }

/* 503（认证服务不可用）时才有内容：浮在顶栏下方，不占版面——
   它在流里会把整屏首屏往下推 66px，正好把首屏底部挤出折叠线 */
.landing #loginError { position: fixed; left: 0; right: 0; top: 0; z-index: 40;
                       max-width: 620px; margin: 0 auto; pointer-events: none;
                       padding: calc(66px + env(safe-area-inset-top)) 20px 0; }
.landing #loginError:empty { display: none; }

/* ============ 首屏：恒为一整屏 ============ */
/* 用 svh（最小视口高）而不是 dvh：手机地址栏收起会改 dvh，
   首屏高度跟着变就是一次整页跳动；svh 稳定，内容也一定在折叠之上 */
.land-hero { height: 100svh; overflow: hidden; display: flex; flex-direction: column;
             align-items: center; justify-content: center; text-align: center;
             padding: calc(64px + env(safe-area-inset-top)) 20px calc(52px + env(safe-area-inset-bottom)); }
/* 花冠与字号同时按视口高收，矮屏（横放手机、小笔记本）也塞得进一屏 */
.land-rose { width: clamp(196px, min(38svh, 54vw), 380px);
             animation: heroRise 1.5s cubic-bezier(.22, .8, .3, 1) both; }
.rose-bloom { display: block; width: 100%; height: auto;
              filter: drop-shadow(0 24px 46px rgba(0, 0, 0, .5)) drop-shadow(0 0 34px rgba(232, 169, 60, .14)); }
@keyframes heroRise { from { opacity: 0; transform: translateY(30px) scale(.94); }
                      to { opacity: 1; transform: none; } }

/* 花冠自内向外绽开，而且一直开着：入场逐层绽一遍，之后每层按 --i 错开，
   以 13s 一轮的极慢节拍向外张开再落回——首屏是一朵还在长的花，不是静图。
   CSS transform 会覆盖同名 transform 属性，所以每层外套一个不带定位属性的 .bloom，
   定位留给内层那个 g；两条动画同写 transform 时列表里靠后的赢，
   而 bloomWave 不带 fill，等待期不生效，入场那段仍由 petalOpen 说话。
   --dir 让相邻两层朝相反方向微拧，看着是花瓣外翻展开，不是整朵等比缩放。 */
.landing .bloom { transform-box: fill-box; transform-origin: center; opacity: 0;
                  animation: petalOpen 1.25s cubic-bezier(.16, .84, .3, 1) both,
                             bloomWave 13s ease-in-out infinite;
                  animation-delay: calc(200ms + var(--i) * 118ms), calc(3.4s + var(--i) * 880ms); }
@keyframes petalOpen { from { opacity: 0; transform: scale(.4) rotate(-9deg); }
                       to { opacity: 1; transform: none; } }
@keyframes bloomWave { 0%, 100% { transform: none; }
                       46% { transform: scale(1.024) rotate(calc(1.2deg * var(--dir))); }
                       74% { transform: scale(1.006) rotate(calc(-.5deg * var(--dir))); } }
/* 光晕亮一次，之后与绽开同一节拍向外涨（只有 transform，不碰明度也就不会跳） */
.hero-glow { transform-box: fill-box; transform-origin: center; opacity: 0;
             animation: glowIn 1.9s 560ms ease-out both, glowBreath 13s 3.4s ease-in-out infinite; }
@keyframes glowIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes glowBreath { 0%, 100% { transform: scale(1); } 46% { transform: scale(1.05); } }
/* 花心与方向光不属于任何一层花瓣，不跟着显形的话，还没绽开就先在原地摆着一块褐色饼子。
   花心 r=84，比早期那几个花苞大得多，得等外圈开到能盖住它的位置再显形；
   方向光压在最后，等整朵开齐了才提亮左上、压暗右下。 */
.hero-core, .hero-light { opacity: 0; animation: glowIn ease-out both; }
.hero-core { animation-duration: 1.25s; animation-delay: 980ms; }
.hero-light { animation-duration: 1.3s; animation-delay: 1.5s; }

/* 标题只走「亮金 → 主题金 → 暗金」这一档窄区间，不铺强对比反光 */
.land-title { font-family: var(--font-display); font-weight: 600; line-height: 1.08;
              font-size: clamp(38px, min(9.6svh, 9.4vw), 72px); letter-spacing: .18em; text-indent: .18em;
              margin: clamp(14px, 3svh, 32px) 0 0;
              background: linear-gradient(180deg, var(--rose-hi) 0%, var(--accent) 54%, var(--rose-deep) 100%);
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.land-title span { display: inline-block; opacity: 0;
                   animation: charIn 1s cubic-bezier(.2, .78, .26, 1) both; }
.land-title span:nth-child(1) { animation-delay: .74s; }
.land-title span:nth-child(2) { animation-delay: .9s; }
.land-title span:nth-child(3) { animation-delay: 1.06s; }
@keyframes charIn { from { opacity: 0; transform: translateY(26px); filter: blur(9px); }
                    to { opacity: 1; transform: none; filter: blur(0); } }
.land-tag { font-family: var(--font-display); font-size: clamp(15px, min(2.7svh, 2.7vw), 21px);
            line-height: 1.9; letter-spacing: .06em; color: var(--text);
            margin: clamp(12px, 2.6svh, 26px) 0 0; max-width: 30em;
            opacity: 0; animation: softIn 1.3s 1.5s ease-out both; }
/* 中文按 balance 断会把「好东西」劈成两行，改成只在逗号后换行（窄屏才需要） */
.landing .n-br { display: none; }
.land-meta { font-size: var(--fs-caption); letter-spacing: .1em; color: var(--text-2); margin: 12px 0 0;
             max-width: 52em; line-height: 1.9; word-break: keep-all;   /* 只在「 / 」的空格处折行 */
             opacity: 0; animation: softIn 1.3s 1.78s ease-out both; }
.landing .land-dot { margin: 0 10px; color: var(--accent); }
.landing .land-to { white-space: nowrap; }   /* 「→ 你自己的 Obsidian」不拆成两行 */
@keyframes softIn { from { opacity: 0; transform: translateY(14px); filter: blur(5px); }
                    to { opacity: 1; transform: none; filter: blur(0); } }

.land-cue { position: absolute; left: 50%; bottom: clamp(16px, 4vh, 40px); transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: 12px;
            font-size: var(--fs-caption); letter-spacing: .36em; text-indent: .36em;
            color: var(--text-2); text-decoration: none; opacity: 0;
            animation: softIn 1.2s 2.4s ease-out both; transition: opacity .5s var(--ease); }
.land-cue-line { position: relative; width: 1px; height: 54px; overflow: hidden;
                 background: linear-gradient(180deg, rgba(226, 176, 74, .06), rgba(226, 176, 74, .38)); }
.land-cue-line::after { content: ""; position: absolute; left: 0; top: -30%; width: 100%; height: 30%;
                        background: linear-gradient(180deg, rgba(255, 233, 168, 0), #ffe9a8, rgba(255, 233, 168, 0));
                        animation: cueFall 2.9s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes cueFall { 0% { transform: translateY(0); } 62%, 100% { transform: translateY(440%); } }
.landing.scrolled .land-cue { opacity: 0; pointer-events: none; }

/* ============ 入场基元：IntersectionObserver 给 .rv 逐个加 .in ============ */
/* 触发线在视口底部，元素刚露头动画就开跑，等滚到跟前早播完了——
   压 200ms 基础延迟，让元素先多进视口一段再动，动画过程看得见 */
.landing .rv { opacity: 0; transform: translateY(18px); filter: blur(7px);
               transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1.1s var(--ease);
               transition-delay: calc(200ms + var(--i, 0) * 115ms); }
.landing .rv.in { opacity: 1; transform: none; filter: none; }

/* ============ 诗 ============ */
.land-poem { padding: clamp(80px, 17vh, 168px) 22px clamp(56px, 12vh, 120px);
             display: flex; flex-direction: column; align-items: center; text-align: center; }
.poem-lead { font-family: var(--font-display); font-size: clamp(16px, 2.5vw, 20px);
             letter-spacing: .1em; line-height: 2.1; color: #cbb794; margin: 0 0 clamp(34px, 7vh, 60px); }
.landing .stanza { margin-bottom: clamp(30px, 6vh, 54px); }
.landing .stanza p { font-family: var(--font-display); font-size: clamp(17px, 2.9vw, 23px);
                     line-height: 2.3; letter-spacing: .05em; margin: 0; color: var(--text); }
/* 诗眼上的「金粉」用鎏金渐变，其余保持墨色，避免满页都是金色 */
.landing .g { font-style: normal;
              background: linear-gradient(178deg, var(--rose-hi) 6%, var(--accent) 52%, var(--rose-deep) 96%);
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.poem-word { position: relative; font-family: var(--font-display); font-weight: 600;
             font-size: clamp(34px, 7.4vw, 56px); letter-spacing: .2em; text-indent: .2em; margin: clamp(26px, 5.5vh, 50px) 0 0;
             background: linear-gradient(180deg, var(--rose-hi) 8%, var(--accent) 58%, var(--rose-deep) 100%);
             -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 末句落地时亮一次背光（JS 加 .lit，一次即止，不做来回呼吸） */
.poem-word::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
                     width: 8em; height: 8em; margin: -4em 0 0 -4em; border-radius: 50%; pointer-events: none;
                     background: radial-gradient(circle, rgba(226, 176, 74, .2) 0%, rgba(201, 156, 98, .07) 42%, rgba(169, 121, 66, 0) 70%);
                     opacity: 0; transform: scale(.5);
                     transition: opacity 1.6s var(--ease), transform 1.8s var(--ease); }
.poem-word.lit::before { opacity: 1; transform: scale(1); }

/* 末句迸出的金粉 */
.landing .mote { position: fixed; z-index: 5; width: 5px; height: 5px; border-radius: 50%;
                 pointer-events: none; opacity: 0;
                 background: radial-gradient(circle, #fff0c2 0%, #e0aa3e 52%, rgba(224, 170, 62, 0) 74%);
                 animation: moteRise 1.7s cubic-bezier(.25, .6, .3, 1) forwards; }
@keyframes moteRise { 0% { opacity: 0; transform: translate(0, 6px) scale(.45); }
                      16% { opacity: 1; }
                      100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.95); } }

.landing .kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 30px;
                   font-size: var(--fs-caption); letter-spacing: .4em; color: var(--text-2); }
.landing .kicker::before { content: ""; width: 34px; height: 1px; flex: none;
                           background: linear-gradient(90deg, rgba(226, 176, 74, 0), var(--accent)); }
.landing .prose { font-size: 15px; line-height: 2.05; color: var(--text-2); letter-spacing: .02em; }
.landing .prose p { margin: 22px 0 0; }
.landing .prose p:first-child { margin-top: 0; }

/* ============ 怎么用：花茎随滚动生长 ============ */
.land-how { max-width: 800px; margin: 0 auto; padding: clamp(60px, 12vh, 120px) 22px 0; }
.how-body { position: relative; --col: 22px; }
.landing .stem { position: absolute; left: calc(var(--col) / 2 - .5px); top: 8px; bottom: 10px; width: 1px;
                 background: rgba(226, 176, 74, .12); }
.landing .stem i { position: absolute; inset: 0; transform-origin: top center;
                   transform: scaleY(var(--grow, 0));
                   background: linear-gradient(180deg, var(--rose-hi), var(--accent) 40%, rgba(184, 134, 47, .35)); }
.landing .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(30px, 5.5vh, 50px); }
.landing .step { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: 16px; align-items: start; }
.landing .step h3, .landing .step p { grid-column: 2; }
.landing .step h3 { margin: 0; font-family: var(--font-display); font-size: clamp(19px, 2.9vw, 23px);
                    font-weight: 600; letter-spacing: .06em; line-height: 1.5;
                    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.step-sub { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400;
            letter-spacing: .04em; color: var(--text-2); }
.landing .node { grid-column: 1; justify-self: center; margin-top: 11px; width: 11px; height: 11px;
                 border-radius: 50%; background: #191108; border: 1px solid rgba(226, 176, 74, .3);
                 transition: background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s, transform .5s var(--ease); }
.step.lit .node { border-color: transparent; transform: scale(1.15);
                  background: radial-gradient(circle at 36% 30%, #fff0c2, var(--accent) 58%, var(--rose-deep));
                  box-shadow: 0 0 0 4px rgba(226, 176, 74, .09), 0 0 15px rgba(226, 176, 74, .5); }

.vows { margin-top: clamp(52px, 10vh, 92px); }
.landing .vowlist { list-style: none; margin: 0; padding: 0;
                    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.landing .vowlist li { position: relative; padding: 16px 0 16px 22px; border-top: 1px solid rgba(226, 176, 74, .12); }
.landing .vowlist li::before { content: ""; position: absolute; left: 0; top: 25px; width: 6px; height: 6px;
                               border-radius: 50%; background: var(--accent); opacity: .5; }
.landing .vowlist b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600;
                     letter-spacing: .06em; margin-bottom: 6px; }
.landing .vowlist span { font-size: var(--fs-small); line-height: 1.85; color: var(--text-2); }

/* ============ 结尾入口 ============ */
.land-join { text-align: center; padding: clamp(80px, 17vh, 160px) 22px clamp(40px, 8vh, 70px); }
.land-join .kicker { justify-content: center; }
/* 居中那一条要左右各一根发丝线，否则「线 + 字」整体看着往右偏 */
.land-join .kicker::after { content: ""; width: 34px; height: 1px; flex: none;
                            background: linear-gradient(270deg, rgba(226, 176, 74, 0), var(--accent)); }
.join-title { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: .06em;
              font-size: clamp(22px, 4.4vw, 33px); line-height: 1.7; text-wrap: balance; }
.land-cta.big { margin-top: 30px; }
.join-note { max-width: 540px; margin: 26px auto 0; font-size: var(--fs-small); line-height: 1.95; color: var(--text-2); }

.land-foot { display: flex; flex-direction: column; align-items: center;
             gap: calc(var(--fs-caption) * 1.6);  /* 约一行正文高：备案号与上面空开一行 */
             padding: 0 22px calc(46px + env(safe-area-inset-bottom));
             font-size: var(--fs-caption); letter-spacing: .1em; color: rgba(177, 156, 124, .7); }
.land-foot-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; }
.land-foot-brand { font-family: var(--font-display); font-size: 14px; letter-spacing: .34em; text-indent: .34em;
                   color: var(--rose-brand); }
.land-foot-icp { color: inherit; text-decoration: none; transition: color .3s; }
.land-foot-icp:hover { color: var(--rose-brand); }

/* ============ 窄屏 ============ */
@media (max-width: 760px) {
  .landing .n-br { display: inline; }
  .land-hero { padding-top: calc(56px + env(safe-area-inset-top)); }
  .land-rose { width: clamp(180px, min(36svh, 72vw), 300px); }
  .land-title { letter-spacing: .12em; text-indent: .12em; }
  .landing .stanza p { line-height: 2.15; }
  .how-body { --col: 18px; }
  .landing .step { column-gap: 12px; }
  .landing .vowlist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .land-cta { padding: 0 12px; }
  .land-brand { font-size: 17px; }
  /* 窄屏顶栏左右只留 14px，胶囊两侧再各外扩 24px 就顶到屏幕边了，收到 18px */
  .land-top { --pw: calc(var(--w, 0px) + 36px); }
}

/* —— 矮视口（横放的手机、小笔记本）：首屏仍要是一整屏，只能收花冠与字号 —— */
@media (max-height: 620px) {
  .land-hero { padding: calc(48px + env(safe-area-inset-top)) 20px 44px; }
  .land-rose { width: clamp(150px, 34svh, 240px); }
  .land-title { font-size: clamp(30px, 8svh, 46px); margin-top: 10px; }
  .land-tag { font-size: 15px; margin-top: 10px; line-height: 1.7; }
  .land-meta { margin-top: 8px; }
  .land-cue { bottom: 10px; }
  .land-cue-line { height: 30px; }
}

/* ============ 降级：关掉动效也要读得完这一页 ============ */
@media (prefers-reduced-motion: reduce) {
  .landing .rv, .land-tag, .land-meta, .land-cue, .land-title span, .land-rose {
    opacity: 1; transform: none; filter: none; animation: none; }
  .landing .bloom, .hero-glow, .hero-core, .hero-light, .land-title, .land-cue-line::after {
    animation: none; }
  /* 逐层绽开与这几层都以 opacity:0 起幅，关掉动效要手动显形 */
  .landing .bloom, .hero-glow, .hero-core, .hero-light { opacity: 1; }
  .landing .stem i { transform: scaleY(1); }
  .poem-word::before { transition: none; }
  .land-cue-line::after { display: none; }
  /* 顶栏那行该不该收拢仍由滚动决定，只是不再滑：位移与那条栏的形变都是布局的一部分，
     留着，只把过渡掐掉 */
  .land-mark, .land-ends, .land-progress, .land-top::before { transition-duration: 1ms; }
}