/* ══ 浮岛内战 · 典藏级视觉核心 ══ */
:root{
  --bar-t:68px;
  --bar-b:76px;
  --pad-x:clamp(24px,5.4vw,104px);

  /* 深窑青系底色，带轻微冷调 */
  --ink-0:#05080d;
  --ink-1:#080e15;
  --ink-2:#0c141d;
  --ink-3:#131e28;

  --hairline:rgba(236,229,210,.10);
  --line:rgba(236,229,210,.16);
  --line-2:rgba(236,229,210,.30);

  --fg:#f5f3ec;
  --fg-2:#ccd3ce;
  --fg-3:#8d9aa4;

  --gold:#d0a856;
  --gold-soft:#e8c97f;
  --accent:#c05f45;

  --serif:"Noto Serif SC",Georgia,"Songti SC","STSong",serif;
  --sans:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Consolas,monospace;

  --ease:cubic-bezier(.22,.78,.16,1);
  --ease-slow:cubic-bezier(.16,.84,.18,1);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink-0);color:var(--fg);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-decoration:none}
button:focus,a:focus{outline:none}
button:focus-visible,a:focus-visible{outline:1px solid var(--gold-soft);outline-offset:4px}
h1,h2,h3,h4,p{margin:0}
img{display:block;max-width:100%}
::selection{background:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--fg)}

/* ── 三层背景：穹光、经纬、暗角 ── */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-base{background:
  radial-gradient(130% 100% at 6% -14%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 62%),
  radial-gradient(120% 90% at 104% 112%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 60%),
  linear-gradient(162deg,#04070b 0%,#0b1520 44%,#05090e 100%);
  transition:background 1.5s var(--ease-slow)}
.bg-base::before{content:"";position:absolute;inset:0;
  background:radial-gradient(52% 40% at 50% 44%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 74%);
  animation:aurora 13s ease-in-out infinite}
.bg-base::after{content:"";position:absolute;inset:0;
  background:radial-gradient(34% 26% at 82% 18%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 78%);
  animation:aurora 17s ease-in-out infinite reverse}
@keyframes aurora{0%,100%{opacity:.3;transform:scale(1) translateY(0)}50%{opacity:.85;transform:scale(1.1) translateY(-1.5%)}}

.bg-lines{opacity:.075;background-image:
  linear-gradient(rgba(180,215,208,.85) 1px,transparent 1px),
  linear-gradient(90deg,rgba(180,215,208,.85) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(74% 64% at 50% 40%,#000 12%,transparent 86%);
  animation:lineDrift 40s linear infinite}
@keyframes lineDrift{to{background-position:76px 76px,76px 76px}}

.bg-vig{box-shadow:inset 0 0 min(260px,26vw) rgba(0,0,0,.82),inset 0 0 70px rgba(0,0,0,.42)}

/* ── 顶栏 ── */
.bar-t{position:fixed;z-index:60;top:0;left:0;right:0;height:var(--bar-t);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:0 var(--pad-x);
  background:linear-gradient(180deg,rgba(5,8,13,.99) 18%,rgba(5,8,13,.55));
  border-bottom:1px solid var(--hairline)}
.bar-t::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--accent) 0%,transparent 30%,transparent 70%,color-mix(in srgb,var(--accent) 30%,transparent) 100%)}
.mark-brand{display:flex;align-items:center;gap:13px;min-width:0}
.sigil{position:relative;width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;
  color:var(--gold-soft);font:700 16px/1 var(--serif);
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:rgba(208,168,86,.06);
  box-shadow:inset 0 0 14px rgba(208,168,86,.07)}
.sigil::before,.sigil::after{content:"";position:absolute;width:8px;height:8px;border:1px solid var(--gold-soft);opacity:.75}
.sigil::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.sigil::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.brand-txt{min-width:0}
.brand-txt b{display:block;font:600 13px/1.2 var(--serif);letter-spacing:.22em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt small{display:block;margin-top:4px;color:var(--fg-3);font:7px/1 var(--mono);letter-spacing:.26em}
.crumb{justify-self:center;max-width:46vw;padding:8px 17px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:var(--fg-2);font:8px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--hairline);background:rgba(255,255,255,.016);backdrop-filter:blur(6px)}
.acts{justify-self:end;display:flex;gap:8px}
.act{position:relative;height:36px;min-width:36px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 12px;overflow:hidden;color:#dde2dc;border:1px solid var(--hairline);background:rgba(255,255,255,.022);
  transition:color .2s,border-color .2s,background-color .2s,transform .2s}
.act::before{content:"";position:absolute;inset:0;transform:translateX(-115%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transition:transform .6s var(--ease)}
.act:hover::before{transform:translateX(115%)}
.act:hover{border-color:var(--line-2);background:rgba(255,255,255,.065);transform:translateY(-1px)}
.act.on{color:color-mix(in srgb,var(--accent) 88%,white);
  border-color:color-mix(in srgb,var(--accent) 62%,transparent);
  background:color-mix(in srgb,var(--accent) 13%,transparent)}
.act svg{width:14.5px;height:14.5px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.act span{color:var(--fg-3);font-size:9px;letter-spacing:.12em}

/* ── 舞台 ── */
.stage{position:fixed;z-index:10;top:var(--bar-t);left:0;right:0;bottom:var(--bar-b);overflow:hidden}
.slide{position:absolute;inset:0;display:none;align-items:center;padding:clamp(18px,3.4vh,44px) var(--pad-x)}
.slide.on{display:flex}
.hold{position:relative;z-index:3;width:min(1360px,100%);max-height:100%;margin:auto}
.ghost{position:absolute;z-index:0;right:-.06em;bottom:-.26em;color:transparent;pointer-events:none;user-select:none;
  font:700 clamp(170px,27vw,380px)/.76 var(--serif);letter-spacing:-.1em;
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent) 15%,transparent)}
.stamp{position:absolute;z-index:4;top:clamp(10px,2vh,20px);right:var(--pad-x);padding:6px 11px;
  color:#6f7d84;font:7px/1 var(--mono);letter-spacing:.24em;border:1px solid var(--hairline);background:rgba(5,9,13,.55)}

/* ── 排版 ── */
.eyebrow{display:inline-flex;align-items:center;gap:11px;color:color-mix(in srgb,var(--accent) 78%,white);
  font:600 8.5px/1.2 var(--mono);letter-spacing:.3em;text-transform:uppercase}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor}
.eyebrow::after{content:"";width:4.5px;height:4.5px;background:currentColor;transform:rotate(45deg)}
.h-max{margin:18px 0 20px;font:700 clamp(44px,7vw,108px)/.88 var(--serif);letter-spacing:-.058em;text-wrap:balance;
  background:linear-gradient(150deg,#f6f4ed 42%,#b9c2bd 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-mid{margin:13px 0 16px;font:700 clamp(31px,4.6vw,64px)/1 var(--serif);letter-spacing:-.044em;text-wrap:balance;
  background:linear-gradient(150deg,#f6f4ed 45%,#b2bcb6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{max-width:68ch;color:#d9ded7;font:clamp(13px,1.3vw,18px)/1.8 var(--serif)}
.prose{max-width:64ch;margin-top:14px;color:var(--fg-2);font-size:clamp(11px,.97vw,13.5px);line-height:1.95}
.hr{width:min(440px,62%);height:2px;margin-top:24px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 22%,transparent) 52%,transparent)}

/* ── 引言 ── */
.cite{position:relative;margin-top:22px;padding:17px 20px 16px 36px;overflow:hidden;color:#e2e5dc;
  font:italic clamp(13px,1.18vw,17px)/1.74 var(--serif);
  border-left:2px solid var(--accent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 62%)}
.cite::before{content:"“";position:absolute;left:9px;top:7px;color:var(--accent);font:36px/1 var(--serif);opacity:.9}
.cite::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%)}
.cite cite{display:block;margin-top:10px;color:var(--fg-3);font:normal 7.5px/1.4 var(--mono);letter-spacing:.16em}