/* ============================================================
   LUNE & BRUME 官网 · 首页与第二屏（联动）
   左上品牌主标题（带重影切片）+ 右上占位导航；
   正中主图（4:5 图片）：有 JS 时随滚动从第一屏正中滑到第二屏标题正中停住；
   「月与岚」竖排于主图右下角，与第二屏标题一样做「接触图片黑白反色」。
   反色由 base.css 的 .blend-invert 实现（主图去色反相后裁进字形，
   main.js 逐帧对齐），接触主图处始终呈黑白反相。
   ============================================================ */

/* ---- 页眉 ---- */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:48px;
}

/* 左上品牌主标题（Goli；重影切片见下方 .stut） */
.brand{
  font-family:var(--font-brand, var(--font-display));   /* 调试台可切换 Goli / Amarna */
  font-weight:var(--fw-brand,500);           /* 后台可调（Goli 300–700） */
  font-size:var(--fs-brand);                 /* 后台可调（手机端自动换算） */
  letter-spacing:var(--ls-brand,.015em);     /* 后台可调 */
  line-height:1;
  white-space:nowrap;
}
.brand a{display:block;transition:opacity .3s var(--ease)}
.brand a:hover{opacity:.55}

/* ---- 品牌字「重影切片」（与「Logo 控制器」同一套参数）----
   同一行字叠多份（N 条残影 + 最前一份完整的），每条只露一段。
   品牌在左上角，重影朝下：主字在最前，残影逐条向下（由近到远）；
   基线压到每条带的底边，露出字的下缘。
   参数（后台可调，由 PHP 逐条输出到内联变量）：
   · 切片高度 --h = 残影比例^-k（k = 第几条）；· 层间隙 --slic-gapem（em）；
   · 各层透明度 --o × 总浓度 --slic-om。
   「&」不参与重影：残影层里把它藏起来（visibility 保留占位，横向位置不挪）。 */
.stut{
  display:block;
  white-space:nowrap;
  --fs-stut:1em;                    /* 切片按元素实际字号（前台=品牌字号；后台预览按内联字号自适应） */
  --cap:.711;                       /* 大写高 / em（各层窗口高度即以此为单位） */
  --asc:.760;                       /* 行框顶 → 基线 / em（兜底值，实际由 main.js 实测覆盖） */
  --slic-ov:.0105;                  /* 基线以下补偿（圆头字压过基线的那一点） */
}
.stut__b{
  display:block;
  position:relative;
  overflow:hidden;
  height:calc(var(--h, 1) * var(--cap) * var(--fs-stut));
}
.stut__b + .stut__b{
  margin-top:calc(var(--slic-gapem, .064) * var(--fs-stut));
}
.stut__b i{
  display:block;
  font-style:normal;
  white-space:nowrap;
}
.stut__b--g{opacity:calc(var(--o, 1) * var(--slic-om, 1))}
.stut__b--g .amp{visibility:hidden}
/* 重影朝下：基线压到每条带的底边 */
.stut--down .stut__b i{
  margin-top:calc((var(--h, 1) * var(--cap) - var(--asc)) * var(--fs-stut));
}
.stut--down .stut__b:first-child{
  /* 主字（本体）在最前：窗口上沿提升到「行框顶 → 基线」全高，
     避免「&」等高于 cap 高度的字形顶部被裁平（重影条仍按各自高度裁剪）；
     负外边距使窗口向上外扩、字墨位置与原来完全一致 */
  height:calc((var(--asc) + var(--slic-ov)) * var(--fs-stut));
  margin-top:calc((var(--cap) - var(--asc)) * var(--fs-stut));
}
.stut--down .stut__b:first-child i{
  margin-top:0;
}

/* ---- 右上占位导航（四组；文案后续替换） ---- */
.site-nav{display:flex;gap:clamp(40px,7.93vh,150px);padding-top:2px}
.nav-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5em;
  min-width:0;
}
.nav-col a{position:relative;line-height:1.45;transition:opacity .3s var(--ease)}
.nav-col a:hover{opacity:.55}
.nav-col__title{font-weight:700}
/* 悬停下划线：从左向右展开 */
.nav-col a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:.05em;
  height:1px;
  background:currentColor;
  transition:right .32s var(--ease);
}
.nav-col a:hover::after{right:0}

/* ---- 主图：休息位在第一屏正中；有 JS（桌面）时改为固定定位，随滚动下移 ---- */
.stage{
  flex:1 1 auto;
  min-height:0;
  position:relative;
  margin-top:clamp(24px,4.5vh,56px);   /* 与页眉之间的留白 */
}
.hero{
  position:absolute;
  left:50%;top:50%;
  width:calc(var(--hero-h) * .8);      /* 4:5 竖版 */
  height:var(--hero-h);
  transform:translate(-50%,-50%);
  z-index:1;                           /* 压住底层墨字；反色层 z-index:2 再压回来 */
}
.hero__media{display:block;width:100%;height:100%;object-fit:cover;object-position:center}  /* 任意尺寸的图都按中心裁成 4:5 显示 */
/* 有 JS 的桌面端：固定定位，由脚本每帧驱动（第 1→2 屏滑行）。
   无 JS 时就停在上面的休息位，页面照常浏览。 */
@media (min-width:821px){
  html.js .hero{
    position:fixed;
    top:0;
    transform:translate(-50%, calc(50vh - var(--hero-h) / 2));
    will-change:transform;
  }
}

/* ---- 「月与岚」：位置与写法由后台设置（12 种，见 main.js 的 placeYue）----
   本块样式为「无脚本兜底」（默认主图右下角竖排）；有脚本时由 main.js
   按设置精确对齐（对称位置边距一致、居中精确居中、图外位置手机端落回图内）。
   与主图重叠处呈黑白反色（同第二屏标题），未接触处为墨字。 */
.yue{
  position:absolute;
  left:calc(50% + var(--hero-h) * .344);   /* 主图右缘往左内缩 7% 主图宽 */
  top:calc(50% + var(--hero-h) * .43);     /* 主图下缘往上内缩 7% 主图高 */
  transform:translate(-100%,-100%);
  pointer-events:none;
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:'GenWanMin2','Glow Sans SC',sans-serif;
  font-weight:var(--fw-yue, 500);
  font-size:calc(var(--hero-h) * .05);
  line-height:1;letter-spacing:.3em;
  white-space:nowrap;
}

/* 横排变体（后台选择「横排」位置时由 main.js 加类） */
.yue--h{writing-mode:horizontal-tb;text-orientation:initial;letter-spacing:.18em}

/* ---- 页脚：仪表数字 + 署名行，贴左版心 ---- */
.site-footer{
  padding-top:clamp(16px,3vh,34px);
  font-size:var(--fs-meta);
}
/* 「仪表数字」读数行（署名行上方，引号包裹）：字体 / 字号 / 字重与署名行同款；
   左五位循环流动、右五位各自乱跳（逻辑见 main.js ④） */
.meter{
  letter-spacing:.09em;
  margin-bottom:.5em;
  -webkit-user-select:none;
  user-select:none;
}
.meter .m-sep{opacity:.5;margin:0 .55em;letter-spacing:0}   /* 分隔「+」：半透明（同旧版） */
/* 署名行（中文自动用未来荧黑，见 base.css 的字体栈） */
.studio{
  letter-spacing:.09em;
}

/* ---- 窄桌面 / 平板：页眉上下堆叠，导航仍排一行 ---- */
@media (max-width:900px){
  .site-header{flex-direction:column;gap:26px}
  .site-nav{padding-top:0;gap:clamp(40px,8vw,96px)}
}

/* ---- 手机竖屏：导航两列，主图回到自然流（随宽度撑开、页面滚动） ---- */
@media (max-width:820px){
  .site-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 28px;
    width:100%;
    padding-top:0;
  }
  .stage{flex:0 0 auto;margin-top:clamp(18px,3.5vh,40px)}
  .hero{position:relative;left:auto;top:auto;transform:none;width:auto;height:auto}
  .hero__media{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
  .yue{
    left:auto;top:auto;right:7%;bottom:7%;
    transform:none;
    font-size:calc((100vw - 44px) * .062);   /* 字号跟随移动端主图宽度 */
  }
  .site-footer{padding-top:14px}
}