/* ============================================================
   LUNE & BRUME 官网 · 基础样式（全站共用）
   版心边距、字体、颜色、页面骨架等全站参数集中在本文件变量里，
   后续所有页面的视觉调整优先改这里的变量。
   ============================================================ */

:root{
  /* ---- 版面（桌面端按基准视口等比缩放；基准 = 2560×1312，见 lb_ref_h()）---- */
  --page-margin:clamp(56px, 3.906vw, 240px);  /* 版心边距（2560 宽时 = 100px） */
  --pad-top:2.591vh;              /* 每屏顶部留白（1312 高时 ≈ 34px） */
  --pad-bottom:1.982vh;           /* 每屏底部留白（1312 高时 ≈ 26px） */
  --hero-h:64vh;                  /* 主图高度（4:5 竖版；宽度 = 高度 × 0.8） */
  --tail-h:calc(100vh / 3);       /* 页尾（黑色 1/3 页）高度 */
  --tail-bg:var(--ink);           /* 页尾背景色（全站墨黑 #0a0a0a；想调整只改这一处） */
  --wb-h:83vh;                    /* 第五屏「工作台」占位框高度（暂定值，随内容深化调整） */

  /* ---- 字体（字号随视口高度等比，横板电脑比例一致）---- */
  --font-display:'Goli','GenWanMin2','Glow Sans SC',serif;   /* 英文标题 / 品牌（中文回退源云明体） */
  --font-brand:'Goli','GenWanMin2','Glow Sans SC',serif;     /* 品牌字 + 第二屏标题（调试台可切换 Goli / Amarna） */
  --font-en:'Evolventa','Glow Sans SC',sans-serif;           /* 其他英文（中文回退未来荧黑） */
  --fs-brand-size:2.134vh;        /* 品牌主标题字号（基准 1312 时 ≈ 28px；后台写入按同基准换算） */
  /* 实际使用值：窗口比基准矮时「缩幅减半」——字号只在等比窄幅的一半内缩小
     （= 等比值与基准字面各取一半，正好是「过小」与「过大」的中间值；
     手机端改用无单位基准值固定换算，见下方媒体查询） */
  --fs-brand:max(var(--fs-brand-size), calc(var(--fs-brand-size) / 2 + var(--brand-base, 28) * .5px));
  --fs-nav:max(1.029vh, calc(1.029vh / 2 + 6.75px));   /* 导航字号（基准 1312 时 = 13.5px；矮窗缩幅减半） */
  --fs-meta:max(1.029vh, calc(1.029vh / 2 + 6.75px));  /* 页脚小字字号（与导航小字一致） */
  --fw-yue:500;                   /* 「月与岚」/ 中文模式第二屏标题的字重（源云明体 M；中文更粗会被浏览器合成加粗） */

  /* ---- 颜色（纯白底、近黑字） ---- */
  --bg:#ffffff;
  --ink:#0a0a0a;

  /* ---- 动效节奏 ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* 页尾高度：支持 svh 的浏览器用「小视口高」（与各屏 100svh 的处理一致） */
@supports (height:1svh){
  :root{ --tail-h:calc(100svh / 3); }
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-en);
  font-size:var(--fs-nav);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--bg)}

/* ---- 「接触反色」文字：两种效果（后台可切换，见 html[data-invert]）----
   原理：把「背景（按效果取值）+ 白底」作为文字自身的背景、裁进字形
   （background-clip:text），再整体「去色 + 反相」——
   · 效果 1（默认，data-invert="1"）：背景 = 主图实拍 → 接触处黑白反相；
   · 效果 2（data-invert="2"）：背景 = 与主图同位的黑色块 → 接触处纯白、其余纯黑。
   主图与文字的逐帧对齐由 main.js 写 background-size / background-position。
   不支持 background-clip:text 或没有脚本时退回墨字，不影响阅读。 */
.blend-invert{
  position:relative;
  z-index:2;
  color:var(--ink);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.js .blend-invert{
    color:transparent;
    -webkit-text-fill-color:transparent;
    background-color:var(--bg);
    background-image:url(../img/hero.jpg);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    filter:grayscale(1) invert(1);
  }
  /* 效果 2：用与主图同尺寸位置的黑色块替代实拍图（反相后即为纯白） */
  html.js[data-invert="2"] .blend-invert{
    background-image:linear-gradient(#000,#000);
  }
}

/* ---- 页面骨架：每一屏铺满一屏高度（首屏与其他屏共用） ---- */
.shell,
.screen{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:var(--pad-top) var(--page-margin) var(--pad-bottom);
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- 手机竖屏（≤820px）：字号等改为固定档位 ---- */
@media (max-width:820px){
  :root{
    --page-margin:22px;
    --pad-top:22px;
    --pad-bottom:18px;
    --fs-brand:calc(var(--brand-base, 28) * .786px);   /* 固定档位：后台字号 × .786（--brand-base 由 index.php 输出） */
    --fs-nav:13px;
    --fs-meta:13px;
  }
}