/* =========================================================
   小鸟牌局 · 共享样式 /assets/site.css
   框架式导航 + 左右分屏骨架 + 切角档案面板
   ========================================================= */

/* ---------- 1. 设计变量 ---------- */
:root{
  --jade:#0B3B36;      /* 翠湖深绿 */
  --sky:#1F6FB2;       /* 高原天空蓝 */
  --paper:#F2E3C0;     /* 公告纸黄 */
  --wood:#B07A45;      /* 棋子木色 */
  --neon:#7A4FD1;      /* 霓虹紫 */
  --wine:#7C2233;      /* 酒红 */
  --indigo:#221A45;    /* 靛紫深 */
  --cream:#F7F4EC;     /* 米白纸 */
  --ink:#12201F;       /* 墨青黑 */
  --mist:#5D716C;      /* 雾灰绿 */

  --rail:0px;
  --bar-h:62px;
  --wrap:1220px;
  --r-cut:16px;

  --font-head:"Songti SC","Source Han Serif SC","Noto Serif CJK SC","SimSun",Georgia,serif;
  --font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --line:rgba(18,32,31,.16);
  --line-soft:rgba(18,32,31,.08);
  --line-dark:rgba(242,227,192,.22);
  --on-dark:rgba(247,244,236,.78);
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar-h) + 26px);
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd,dt,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px;border-radius:2px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. 基础排版 ---------- */
body{
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.85;
  color:var(--ink);
  background-color:var(--cream);
  background-image:
    repeating-linear-gradient(90deg, rgba(11,59,54,.035) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(11,59,54,.035) 0 1px, transparent 1px 96px);
  padding-left:var(--rail);
  padding-top:var(--bar-h);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.26;
  letter-spacing:-.005em;
  color:var(--ink);
}
h1{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:-.015em}
h2{font-size:clamp(23px,3.1vw,34px)}
h3{font-size:clamp(18px,2vw,23px)}
h4{font-size:clamp(16px,1.6vw,18px)}
p a,li a{text-underline-offset:4px}
p a:hover,li a:hover{text-decoration:underline}

.lead{
  font-size:clamp(16px,1.5vw,18.5px);
  line-height:1.95;
  color:var(--mist);
  max-width:36em;
}

.mono{font-family:var(--font-mono);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.idx{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.16em;
  color:var(--mist);
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;
  color:var(--mist);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--wood)}

.prose{max-width:36em}
.prose > * + *{margin-top:1.05em}
.prose p{max-width:36em}
.prose h2,.prose h3{margin-top:1.9em}
.prose ul{list-style:none}
.prose ul li{position:relative;padding-left:1.5em;margin-top:.5em}
.prose ul li::before{
  content:"";position:absolute;left:.25em;top:.85em;
  width:7px;height:7px;background:var(--wood);
  border-radius:50% 2px 50% 50%;transform:rotate(-20deg);
}
.prose blockquote{
  border-left:3px solid var(--wood);
  padding:6px 0 6px 20px;
  font-family:var(--font-head);
  font-size:1.06em;
  color:var(--jade);
}

/* ---------- 4. 容器与分区 ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,3.4vw,44px)}
.wrap--narrow{max-width:820px}
.wrap--wide{max-width:1440px}

.band{padding-block:clamp(52px,7vw,104px);position:relative}
.band--tight{padding-block:clamp(34px,4.4vw,62px)}
.band--jade{background-color:var(--jade);color:var(--cream)}
.band--indigo{background-color:var(--indigo);color:var(--cream)}
.band--paper{background-color:var(--paper)}
.band--jade h1,.band--jade h2,.band--jade h3,
.band--indigo h1,.band--indigo h2,.band--indigo h3{color:var(--cream)}
.band--jade .lead,.band--indigo .lead{color:rgba(247,244,236,.76)}
.band--jade .eyebrow,.band--indigo .eyebrow{color:rgba(242,227,192,.72)}
.band--jade .idx,.band--indigo .idx{color:rgba(242,227,192,.6)}

.rule{height:1px;background:var(--line);border:0}
.rule--wood{background:var(--wood);height:2px;width:64px}

.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px,3vw,44px);
}
@media (min-width:820px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2--aside{grid-template-columns:minmax(240px,1fr) 2fr}
  .grid-2--aside-rev{grid-template-columns:2fr minmax(240px,1fr)}
}

/* ---------- 5. 切角 / 面板 / 标签 ---------- */
.cut{
  clip-path:polygon(
    var(--r-cut) 0, 100% 0,
    100% calc(100% - var(--r-cut)),
    calc(100% - var(--r-cut)) 100%,
    0 100%, 0 var(--r-cut)
  );
}
.panel{
  position:relative;
  padding:clamp(20px,2.6vw,32px);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:18px 3px 18px 3px;
}
.panel--paper{background:var(--paper);border-color:rgba(11,59,54,.16)}
.panel--jade{background:var(--jade);border-color:var(--line-dark);color:var(--on-dark)}
.panel--jade h2,.panel--jade h3,.panel--jade h4{color:var(--cream)}
.panel--indigo{background:var(--indigo);border-color:rgba(242,227,192,.2);color:var(--on-dark)}
.panel--indigo h2,.panel--indigo h3{color:var(--cream)}
.panel--wood{border-color:var(--wood);border-width:1.5px}
.on-dark{color:var(--on-dark)}
.on-dark strong{color:var(--cream)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  padding:3px 10px;
  background:var(--paper);color:var(--jade);
  border:1px solid rgba(11,59,54,.18);
  border-radius:8px 2px 8px 2px;
  font-variant-numeric:tabular-nums;
}
.tag--wine{background:var(--wine);color:var(--paper);border-color:transparent}
.tag--sky{background:var(--sky);color:#fff;border-color:transparent}
.tag--wood{background:transparent;color:var(--wood);border-color:var(--wood)}
.tag--neon{background:var(--neon);color:#fff;border-color:transparent}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:13px 26px;
  font-size:15px;font-weight:600;letter-spacing:.04em;line-height:1.2;
  background:var(--jade);color:var(--cream);
  border:1px solid transparent;
  border-radius:14px 3px 14px 3px;
  transition:background-color .22s ease,color .22s ease,transform .18s ease,border-color .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--cta{background:var(--neon);color:#fff}
.btn--cta:hover{background:#8c63e0}
.btn--ghost{background:transparent;border-color:var(--wood);color:var(--wood)}
.btn--ghost:hover{background:var(--wood);color:var(--cream)}
.btn--light{background:var(--cream);color:var(--jade)}
.btn--light:hover{background:var(--paper)}
.btn--sm{padding:9px 18px;font-size:13.5px;border-radius:10px 3px 10px 3px}

/* ---------- 7. 面包屑 / 锚点目录 ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;
  color:var(--mist);
}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li + li::before{
  content:"›";margin:0 10px;color:var(--wood);font-size:15px;
}
.crumbs a:hover{color:var(--jade);text-decoration:underline}

.anchor-list{display:flex;flex-wrap:wrap;gap:8px 10px}
.anchor-list a{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;
  padding:6px 13px;border-radius:9px 2px 9px 2px;
  border:1px solid var(--line);color:var(--mist);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.anchor-list a:hover{color:var(--jade);border-color:var(--wood);background:var(--paper)}

/* ---------- 8. 图片容器（页面阶段放图） ---------- */
.frame{
  position:relative;overflow:hidden;
  background-color:var(--paper);
  background-image:repeating-linear-gradient(
    45deg, rgba(11,59,54,.06) 0 10px, transparent 10px 20px
  );
  border:1px solid var(--line);
  border-radius:20px 4px 20px 4px;
}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--16x9{aspect-ratio:16/9}
.frame--4x3{aspect-ratio:4/3}
.frame--3x2{aspect-ratio:3/2}
.frame--1x1{aspect-ratio:1/1}
.frame--wide{aspect-ratio:21/9}
.frame--tall{aspect-ratio:3/4}
.frame__tag{
  position:absolute;top:12px;left:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  padding:4px 10px;background:var(--paper);color:var(--jade);
  border-radius:7px 2px 7px 2px;
}
.frame__cap{
  margin-top:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--mist);
}

/* ---------- 9. 主题筛选 ---------- */
.filter-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.chip{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;
  padding:8px 16px;
  border:1px solid rgba(11,59,54,.26);
  border-radius:11px 3px 11px 3px;
  color:var(--jade);
  background:transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.chip:hover{border-color:var(--neon);color:var(--neon)}
.chip[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:#fff}
.chip__n{opacity:.62;margin-left:6px}
.filter-status{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--mist);margin-left:auto;
}
.filter-empty{
  padding:26px 0;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  color:var(--mist);
}
[data-filter-item][hidden]{display:none !important}

/* ---------- 10. 滚动显现 ---------- */
html[data-reveal-ready] [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .62s ease,transform .62s cubic-bezier(.22,.7,.3,1);
}
html[data-reveal-ready] [data-reveal].is-in{opacity:1;transform:none}

/* =========================================================
   11. 头部：框架式导航
   ========================================================= */
.site-header{position:relative;z-index:70}

.skip-link{
  position:fixed;top:-120px;left:calc(var(--rail) + 12px);z-index:300;
  padding:12px 22px;
  background:var(--neon);color:#fff;
  font-size:14px;font-family:var(--font-mono);letter-spacing:.08em;
  border-radius:0 0 12px 12px;
  transition:top .22s ease;
}
.skip-link:focus{top:0}

/* 左侧刻度栏 */
.hdr-rail{
  position:fixed;inset:0 auto 0 0;
  width:var(--rail);z-index:75;
  display:none;
  flex-direction:column;align-items:center;justify-content:space-between;
  padding:16px 0 22px;
  background-color:var(--jade);
  background-image:linear-gradient(180deg,rgba(31,111,178,.28),rgba(122,79,209,.16) 60%,transparent);
  border-right:1px solid var(--line-dark);
}
.hdr-rail__pin{
  width:9px;height:9px;flex:0 0 auto;
  background:var(--paper);
  border-radius:50% 2px 50% 50%;transform:rotate(-24deg);
}
.hdr-rail__line{
  flex:1 1 auto;width:8px;margin:16px 0;
  border-left:1px solid rgba(242,227,192,.24);
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(242,227,192,.52) 0 1px,
    transparent 1px 13px
  );
}
.hdr-rail__code{
  writing-mode:vertical-rl;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.3em;
  color:var(--paper);font-variant-numeric:tabular-nums;
}

/* 顶部横条 */
.hdr-bar{
  position:fixed;top:0;left:var(--rail);right:0;
  height:var(--bar-h);z-index:70;
  display:flex;align-items:center;
  gap:clamp(10px,1.6vw,26px);
  padding:0 clamp(14px,2.6vw,34px);
  background-color:var(--jade);
  background-image:linear-gradient(112deg,rgba(31,111,178,.3),transparent 46%,rgba(122,79,209,.16));
  border-bottom:1px solid var(--line-dark);
  color:var(--cream);
}
.hdr-bar :focus-visible{outline-color:var(--paper)}

.hdr-brand{
  display:flex;align-items:center;gap:11px;
  flex:0 0 auto;margin-right:auto;
}
.hdr-brand__mark{
  position:relative;width:34px;height:34px;flex:0 0 auto;
  background:var(--paper);
  border-radius:11px 2px 11px 2px;
  display:grid;place-items:center;
}
.hdr-brand__dot{
  width:11px;height:11px;background:var(--jade);
  border-radius:50% 2px 50% 50%;transform:rotate(-24deg);
}
.hdr-brand__text{display:flex;flex-direction:column;line-height:1.18}
.hdr-brand__name{
  font-family:var(--font-head);font-weight:900;font-size:19px;
  letter-spacing:.07em;color:var(--cream);
}
.hdr-brand__domain{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  color:rgba(242,227,192,.62);
}

/* 导航基础（编号轨道） */
.site-nav__num{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  color:rgba(242,227,192,.55);
  font-variant-numeric:tabular-nums;
}
.site-nav__foot{
  display:none;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:rgba(242,227,192,.6);
}

/* 右侧工具区 */
.hdr-side{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);flex:0 0 auto}
.hdr-util{display:none;align-items:center;gap:18px}
.hdr-util__item{
  font-size:12.5px;letter-spacing:.02em;
  color:rgba(247,244,236,.7);
  white-space:nowrap;
}
.hdr-util__item b{
  font-family:var(--font-mono);font-weight:600;letter-spacing:.06em;
  color:var(--paper);font-variant-numeric:tabular-nums;
}
.hdr-cta{white-space:nowrap;padding:10px 20px;font-size:14px}

/* 移动目录按钮 */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:40px;flex:0 0 auto;
  border:1px solid rgba(242,227,192,.34);
  border-radius:11px 3px 11px 3px;
  color:var(--paper);
  transition:border-color .2s ease,background-color .2s ease;
}
.nav-toggle:hover{border-color:var(--paper);background-color:rgba(242,227,192,.1)}
.nav-toggle__bars{position:relative;display:block;width:18px;height:12px}
.nav-toggle__bars i{
  position:absolute;left:0;width:100%;height:2px;
  background:currentColor;
  transition:transform .24s ease;
}
.nav-toggle__bars i:first-child{top:0}
.nav-toggle__bars i:last-child{bottom:0}
.site-header[data-nav-open] .nav-toggle__bars i:first-child{transform:translateY(5px) rotate(45deg)}
.site-header[data-nav-open] .nav-toggle__bars i:last-child{transform:translateY(-5px) rotate(-45deg)}

/* 滚动进度刻度 */
.hdr-progress{
  position:fixed;top:calc(var(--bar-h) - 3px);left:var(--rail);right:0;
  height:3px;z-index:72;pointer-events:none;
}
.hdr-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--neon) 0%,var(--paper) 55%,var(--sky) 100%);
}

/* 移动端：导航面板 */
@media (max-width:1079px){
  .site-nav{
    position:fixed;
    top:var(--bar-h);left:var(--rail);right:0;
    max-height:calc(100vh - var(--bar-h));
    overflow-y:auto;
    display:none;
    padding:16px clamp(16px,4vw,36px) 30px;
    background-color:var(--jade);
    background-image:linear-gradient(160deg,rgba(31,111,178,.28),transparent 55%);
    border-top:1px solid var(--line-dark);
    border-bottom:1px solid var(--line-dark);
  }
  .site-nav[data-open]{display:block}
  .site-nav__list{display:flex;flex-direction:column}
  .site-nav__list li + li{border-top:1px solid rgba(242,227,192,.12)}
  .site-nav__list a{
    display:flex;align-items:baseline;gap:14px;
    padding:15px 4px;
    font-family:var(--font-head);font-weight:800;font-size:19px;
    letter-spacing:.02em;
    color:rgba(247,244,236,.84);
    transition:color .2s ease,padding-left .2s ease;
  }
  .site-nav__list a:hover{color:#fff;padding-left:10px}
  .site-nav__list a[aria-current="page"]{color:var(--paper)}
  .site-nav__list a[aria-current="page"] .site-nav__num{color:var(--paper)}
  .site-nav__foot{
    display:block;margin-top:22px;padding-top:16px;
    border-top:1px dashed rgba(242,227,192,.26);
  }
  .hdr-util{display:none}
}

@media (max-width:620px){
  .hdr-brand__domain{display:none}
  .hdr-cta{padding:9px 14px;font-size:13px}
  .hdr-bar{gap:8px}
}

/* 桌面端完整导航 */
@media (min-width:1080px){
  :root{--rail:62px;--bar-h:78px}
  .hdr-rail{display:flex}
  .nav-toggle{display:none}
  .hdr-util{display:flex}
  .site-nav{display:block;flex:0 1 auto}
  .site-nav__list{display:flex;align-items:center;gap:clamp(2px,.9vw,16px)}
  .site-nav__list a{
    display:inline-flex;align-items:baseline;gap:7px;
    padding:9px 7px;
    font-size:15px;
    color:rgba(247,244,236,.76);
    box-shadow:inset 0 -2px 0 transparent;
    transition:color .2s ease,box-shadow .2s ease;
  }
  .site-nav__list a:hover{color:#fff}
  .site-nav__list a[aria-current="page"]{
    color:#fff;
    box-shadow:inset 0 -2px 0 var(--paper);
  }
  .site-nav__list a[aria-current="page"] .site-nav__num{color:var(--paper)}
}

@media (min-width:1280px){
  .site-nav__list{gap:20px}
  .site-nav__list a{font-size:15.5px}
}

/* =========================================================
   12. 页脚
   ========================================================= */
.site-footer{
  position:relative;
  background-color:var(--jade);
  background-image:
    repeating-linear-gradient(90deg, rgba(247,244,236,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(247,244,236,.05) 0 1px, transparent 1px 72px);
  color:var(--on-dark);
  padding:clamp(46px,6vw,86px) clamp(16px,3.4vw,44px) 26px;
  margin-top:clamp(30px,5vw,70px);
  border-top:1px solid var(--line-dark);
}
.site-footer :focus-visible{outline-color:var(--paper)}

.ftr__grid{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:1fr;
  gap:clamp(28px,4vw,60px);
}
@media (min-width:820px){
  .ftr__grid{grid-template-columns:1.7fr 1fr 1fr}
}

.ftr__logo{
  font-family:var(--font-head);font-weight:900;
  font-size:26px;letter-spacing:.08em;color:var(--cream);
}
.ftr__domain{
  margin-top:7px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  color:var(--paper);
}
.ftr__desc{
  margin-top:15px;max-width:34em;
  font-size:14.5px;line-height:1.95;
  color:rgba(247,244,236,.68);
}

.ftr__col-title{
  margin-bottom:16px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.18em;color:var(--paper);
}
.ftr__col-title::after{
  content:"";display:block;width:26px;height:2px;
  margin-top:9px;background:var(--wood);
}
.ftr__col-list li + li{margin-top:10px}
.ftr__col-list a{
  font-size:14.5px;color:rgba(247,244,236,.76);
  transition:color .2s ease;
}
.ftr__col-list a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:5px}

.ftr__contact{
  max-width:var(--wrap);margin:clamp(30px,4.6vw,58px) auto 0;
  padding:clamp(20px,2.6vw,32px);
  display:grid;grid-template-columns:1fr;gap:18px 34px;
  border:1px solid rgba(242,227,192,.26);
  border-radius:18px 3px 18px 3px;
  background-color:rgba(242,227,192,.05);
}
@media (min-width:760px){
  .ftr__contact{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr__cell--wide{grid-column:1 / -1}
}
.ftr__k{
  display:block;margin-bottom:7px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--paper);
}
.ftr__v{
  display:block;font-size:14px;line-height:1.85;
  color:rgba(247,244,236,.82);
  word-break:break-word;
}

.ftr__base{
  max-width:var(--wrap);margin:clamp(24px,3.4vw,42px) auto 0;
  padding-top:20px;
  border-top:1px solid rgba(242,227,192,.16);
  display:flex;flex-wrap:wrap;gap:8px 28px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  color:rgba(242,227,192,.58);
}

/* =========================================================
   13. 无障碍与动效偏好
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html[data-reveal-ready] [data-reveal]{opacity:1;transform:none}
  .btn:hover{transform:none}
}