/* site.css — 整站唯一的设计令牌与外壳(2026-10-07,仓库根 设计-官网统一外壳-2026-10-07.md 第一期)。
   每一页都先引这一份,再引自己的版面:文字页 /_shared.css、关于页 /about/altitude.css、营地页 /climb/strand.css、首页(三维山)自己的内联样式。
   这里管:字体、颜色令牌、页头(品牌标 + 导航)、手机菜单、山里的站点菜单、页脚、页间过渡。

   🔴 全站只有夜色。没有 prefers-color-scheme 分支;白天只是山里的游戏选项(Day 按钮)。
   🔴 零外链:字体自托管在 /fonts/(拷自 app/fonts/,OFL)。
   🔴 改完这份文件跑 `python3 web/shell/build_shell.py`:它按内容哈希改写每一页的 ?v=。
      alpenrise.app 对静态文件有 4 小时边缘缓存,同名覆盖会让用户继续拿到旧版(HANDOVER 2026-09-27)。
   🔴 令牌名沿用首页三维山的 :root(山是源头),首页内联样式里同名变量会覆盖这里 —— 两边的值保持一致。 */

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/bricolage.woff2) format('woff2')}

:root{
  color-scheme:dark;
  /* 夜空:页面底色由深到浅 */
  --deep:#03060e; --night:#0b1220; --night2:#101a2b;
  /* 面:山里的玻璃(顶栏 pill、提示条)与三层卡面 */
  --panel:rgba(4,8,18,.78); --surf:#152438; --surf2:#1b2a3d; --surf3:#0c1b2e;
  --line:#1e2d42; --line3:#33465f;
  /* 墨:由亮到暗 ink > ink4 > ink2 > ink3 */
  --ink:#e9eef6; --ink4:#b9c7da; --ink2:#8ba0bc; --ink3:#798ea8;
  /* 灯 = 唯一的主强调(按钮、链接、当前项);极光青只表示「点亮 / 完成」 */
  --lamp:#ffb042; --lampink:#241505; --lampline:rgba(255,176,66,.34);
  --aur:#2dd4bf; --aursoft:rgba(45,212,191,.10); --aurline:rgba(45,212,191,.30);
  --bad:#f2836b;
  /* 纸 = 山底部标签栏的那张卡纸:票据、价目卡 */
  --paper:#f3e6c7; --paperline:#b9a57a; --paperink:#5c4e38; --paperdeep:#2a2116;
  --disp:'Bricolage Grotesque','Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}

/* ── 页间过渡:同源整页跳转时交叉淡化,品牌标原地不动(Chrome 126+ / Safari 18.2+;其余浏览器照常跳转)── */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
}

/* ── 品牌标:首页顶栏与每一页页头是同一个。view-transition-name 全页只能有一个,页脚别用 .brand ── */
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none;color:var(--ink);view-transition-name:brand}
.brand svg{width:22px;height:22px;flex:none;display:block}
.bm-m{fill:currentColor}.bm-s{fill:var(--lamp)}
.brand b{font:800 18px/1 var(--disp);letter-spacing:-.015em}
.brand span{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);padding-top:2px}
.brand:hover b{color:#fff}
.brand:focus-visible{outline:2px solid var(--lamp);outline-offset:4px;border-radius:6px}
@media (max-width:640px){.brand span{display:none}}

/* ── 页头:位置、内边距与首页顶栏(.hud)一致,跳页时品牌标落在同一个坐标 ── */
.sh-top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px}
.sh-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* 与首页顶栏的 .pill 同一个样子(那边的类名被游戏控件占着,这里另起名) */
.sh-pill{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid var(--line3);background:var(--panel);
  font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);text-decoration:none;cursor:pointer;white-space:nowrap}
.sh-pill:hover{color:var(--ink);border-color:#4a5f7a}
.sh-pill:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.sh-pill[aria-current="page"]{background:var(--surf2);color:var(--ink);border-color:#4a5f7a}
.sh-pill.sh-acct{border-color:var(--lamp);color:var(--lamp)}
.sh-pill.sh-acct[aria-current="page"]{background:rgba(255,176,66,.12)}

/* 手机:导航收进「Menu」(原生 <details>,零 JS —— 文字页的 CSP 不放脚本) */
.sh-more{display:none;position:relative}
.sh-more>summary{list-style:none}
.sh-more>summary::-webkit-details-marker{display:none}
.sh-more[open]>summary{border-color:var(--lamp);color:var(--lamp)}
.sh-drop{position:absolute;right:0;top:calc(100% + 8px);width:min(310px,calc(100vw - 28px));padding:8px;
  background:var(--surf);border:1px solid var(--line3);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.55);z-index:50}
@media (max-width:900px){.sh-nav{display:none}.sh-more{display:block}}

/* 菜单列表:手机菜单与山里的站点菜单共用 */
.sh-list{display:flex;flex-direction:column;gap:2px}
.sh-list a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.sh-list a b{font:700 15.5px/1.25 var(--disp);letter-spacing:-.005em}
.sh-list a span{font-size:13px;line-height:1.4;color:var(--ink2)}
.sh-list a:hover,.sh-list a:focus-visible{background:var(--surf2);outline:none}
.sh-list a[aria-current="page"] b{color:var(--lamp)}
.sh-list a.sh-acct b{color:var(--lamp)}
.sh-small{margin:8px 12px 4px;font:12.5px/1.7 var(--sans);color:var(--ink3)}
.sh-small a{color:var(--ink2);text-decoration:none}
.sh-small a:hover{color:var(--ink);text-decoration:underline}
.sh-eyebrow{margin:0 12px 6px;font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}

/* ── 天边:文字页顶上那条纸雕夜山(/about/ 首屏横幅的同一张图),从山上下来落在同一张纸上 ── */
.sh-sky{position:absolute;left:0;right:0;top:0;height:clamp(180px,26vw,320px);z-index:0;pointer-events:none;
  background:url(/about/art/band.webp) 50% 0/cover no-repeat;opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%)}

/* ── 页脚:全站一份链接、一个顺序 ── */
.sh-foot{position:relative;z-index:1;margin-top:72px;border-top:1px solid var(--line);
  padding:28px 14px calc(36px + env(safe-area-inset-bottom,0px))}
.sh-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 48px;align-items:flex-start;justify-content:space-between}
.sh-sig{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font:800 15px/1 var(--disp);letter-spacing:-.01em;text-decoration:none}
.sh-sig svg{width:18px;height:18px}
.sh-sig small{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.sh-links{display:flex;flex-wrap:wrap;gap:8px 20px;max-width:640px}
.sh-links a{color:var(--ink2);text-decoration:none;font-size:13.5px}
.sh-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sh-legal{flex-basis:100%;margin:0;color:var(--ink3);font-size:12.5px;line-height:1.6}
.sh-legal a{color:var(--ink2)}

@media print{.sh-top,.sh-foot,.sh-sky{display:none!important}}