/* ============================================================
   百灵牛牛局 · 共享样式表 /assets/site.css
   展览画册式布局 · 复古出版色 · 切角面板 · 等宽索引
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  --paper:#F6EFDD;
  --ink:#221A14;
  --lark:#1E8F5E;
  --velvet:#0B2B22;
  --yellow:#FFC53D;
  --neon:#7B4DDB;
  --ember:#E4552B;
  --mist:#C9D6CC;
  --float:#FFFFFF;

  --ink-70:rgba(34,26,20,.72);
  --ink-45:rgba(34,26,20,.45);
  --paper-70:rgba(246,239,221,.74);
  --line:rgba(34,26,20,.18);
  --line-soft:rgba(34,26,20,.09);
  --line-paper:rgba(246,239,221,.18);

  --font-display:"Yuanti SC","YouYuan","Hiragino Maru Gothic ProN","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"Cascadia Mono","Roboto Mono","DejaVu Sans Mono","Courier New",monospace;

  --wrap:1240px;
  --gut:clamp(18px,4vw,44px);
  --cut:16px;
  --header-h:68px;
  --shadow:0 20px 40px -26px rgba(11,43,34,.6);
  --ease:cubic-bezier(.22,.68,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background-color:var(--paper);
  background-image:repeating-linear-gradient(0deg,rgba(34,26,20,.028) 0 1px,transparent 1px 5px);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,h5,p,figure,blockquote,hr{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--neon);outline-offset:2px}
#main-content{display:block;scroll-margin-top:140px}

/* ---------- 3. 排版 ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.2;letter-spacing:.005em}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.45rem,3vw,2.15rem)}
h3{font-size:clamp(1.12rem,2vw,1.4rem)}
.display-xl{font-family:var(--font-display);font-weight:800;font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:1.06;letter-spacing:-.01em}
.title--stencil{color:var(--lark);-webkit-text-stroke:1px var(--yellow);paint-order:stroke fill}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--lark)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--ember);flex:0 0 auto}
.lede{font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.72;color:var(--ink-70);max-width:40em}
.prose{font-size:17px;line-height:1.75}
.prose p{max-width:40em;margin-bottom:1.05em}
.prose ul,.prose ol{padding-left:1.35em;margin-block:14px;max-width:40em}
.prose ul{list-style:square}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.45em}
.prose h2{margin-block:1.3em .5em}
.prose h3{margin-block:1.1em .4em}
.note{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;color:var(--ink-70)}
.mono{font-family:var(--font-mono);letter-spacing:.04em}
.muted{color:var(--ink-70)}
.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}

/* ---------- 4. 布局 ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(42px,6vw,84px)}
.section--tight{padding-block:clamp(24px,3.4vw,44px)}
.section--velvet{background:var(--velvet);color:var(--paper)}
.section--velvet .lede,.section--velvet .muted{color:var(--paper-70)}
.section--velvet .eyebrow{color:var(--yellow)}
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.split{display:grid;gap:clamp(20px,3vw,42px);grid-template-columns:minmax(0,6fr) minmax(0,4fr);align-items:start}

/* ---------- 5. 跳过链接 ---------- */
.skip-link{
  position:absolute;left:14px;top:-70px;z-index:200;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;
  padding:11px 18px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:14px}

/* ---------- 6. 页头 ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}
.site-header__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gut);
  min-height:var(--header-h);
  display:flex;align-items:center;gap:18px;flex-wrap:nowrap;
}
.site-header__brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand__mark{
  width:30px;height:30px;flex:0 0 auto;background:var(--lark);position:relative;
  clip-path:polygon(0 0,100% 0,100% 66%,66% 100%,0 100%);
}
.brand__mark::after{
  content:"";position:absolute;right:4px;bottom:4px;width:12px;height:12px;background:var(--yellow);
  clip-path:polygon(0 100%,100% 0,100% 100%);
}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:1.24rem;letter-spacing:.04em;line-height:1}
.brand__version{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-70);border-left:1px solid var(--line);padding-left:12px;white-space:nowrap;
}

.nav-toggle{
  display:none;align-items:center;gap:8px;cursor:pointer;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;
  padding:9px 15px;flex:0 0 auto;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.nav-toggle:hover{background:var(--velvet)}
.nav-toggle__close{display:none}
.site-header[data-open] .nav-toggle__open{display:none}
.site-header[data-open] .nav-toggle__close{display:inline}

.site-nav{margin-left:auto}
.site-nav__list{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.site-nav__item{flex:0 0 auto}
.site-nav__link{
  display:block;position:relative;padding:8px 12px;text-decoration:none;
  font-size:.94rem;font-weight:600;color:var(--ink);
  border:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease);
}
.site-nav__link:hover{color:var(--lark);border-color:var(--line)}
.site-nav__link[aria-current="page"]{background:var(--lark);color:var(--float);border-color:var(--velvet)}
.site-nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:var(--yellow);
}

.header-utility{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding-left:16px;margin-left:6px;border-left:1px solid var(--line);
}
.header-utility__hours{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-70);white-space:nowrap;
}
.header-utility__link{white-space:nowrap}

.index-band{background:var(--velvet);color:var(--paper);overflow:hidden}
.index-band__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:16px;min-height:42px;
}
.index-band__label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.24em;color:var(--yellow);flex:0 0 auto;
}
.index-band__list{
  display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.index-band__list::-webkit-scrollbar{display:none}
.index-band__item{flex:0 0 auto}
.index-band__link{
  display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;
  padding:12px 15px;text-decoration:none;font-size:.85rem;
  color:var(--paper-70);border-right:1px solid var(--line-paper);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.index-band__link:hover{color:var(--yellow);background:rgba(255,197,61,.09)}
.index-band__link[aria-current="page"]{background:var(--yellow);color:var(--velvet)}
.index-band__num{font-family:var(--font-mono);font-size:.68rem;opacity:.75}

/* ---------- 7. 页脚 ---------- */
.site-footer{
  margin-top:clamp(48px,8vw,120px);
  background:var(--velvet);color:var(--paper);
  border-top:4px solid var(--lark);
}
.footer__grid{
  display:grid;gap:clamp(24px,3vw,48px);
  grid-template-columns:1.7fr repeat(4,minmax(0,1fr));
  padding-block:clamp(38px,6vw,72px) clamp(26px,4vw,48px);
}
.footer__brandcol{display:flex;flex-direction:column;gap:12px}
.site-footer .brand__name{color:var(--paper)}
.footer__note{font-size:.95rem;color:var(--paper-70);max-width:22em}
.footer__contact,.footer__address,.footer__hours{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--paper-70);line-height:1.7;
}
.footer__address{max-width:26em}
.footer__col{min-width:0}
.footer__title{
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow);padding-bottom:9px;margin-bottom:14px;border-bottom:1px solid var(--line-paper);
}
.footer__list{display:grid;gap:9px}
.footer__list a{
  font-size:.92rem;color:var(--paper-70);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .16s var(--ease),border-color .16s var(--ease);
}
.footer__list a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
.footer__bottom{border-top:1px solid var(--line-paper);background:rgba(0,0,0,.18)}
.footer__bottom-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;
  padding-block:16px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--paper-70);
}
.footer__region{margin-left:auto;color:var(--yellow)}

/* ---------- 8. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:.95rem;line-height:1;text-decoration:none;cursor:pointer;
  padding:12px 20px;background:var(--float);color:var(--ink);border:1px solid var(--ink);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:transform .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--lark);border-color:var(--velvet);color:var(--float)}
.btn--primary:hover{background:var(--velvet);border-color:var(--velvet)}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--ember{background:var(--ember);border-color:var(--ember);color:var(--float)}
.btn--ember:hover{background:var(--ink);border-color:var(--ink)}
.btn--sm{padding:9px 15px;font-size:.85rem}

/* ---------- 9. 标签与徽章 ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;line-height:1;
  padding:5px 9px;background:var(--mist);color:var(--velvet);border:1px solid rgba(11,43,34,.22);
}
.tag--green{background:var(--lark);color:var(--float);border-color:var(--velvet)}
.tag--yellow{background:var(--yellow);color:var(--ink);border-color:rgba(34,26,20,.24)}
.tag--neon{background:var(--neon);color:var(--float);border-color:var(--neon)}
.tag--ember{background:var(--ember);color:var(--float);border-color:var(--ember)}

.badge{
  --badge-from:var(--neon);
  --badge-to:var(--lark);
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px 6px 10px;
  background-image:linear-gradient(115deg,var(--badge-from),var(--badge-to));
  background-size:220% 100%;
  color:var(--float);
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.08em;line-height:1.3;
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px));
  animation:badgeFlow 9s ease-in-out infinite alternate;
}
.badge--green{--badge-from:var(--lark);--badge-to:#0B2B22}
.badge--neon{--badge-from:var(--neon);--badge-to:var(--ember)}
.badge--yellow{--badge-from:var(--yellow);--badge-to:var(--ember);color:var(--ink)}
@keyframes badgeFlow{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---------- 10. 面板与卡片 ---------- */
.panel{
  position:relative;background:var(--float);border:1px solid var(--line);
  padding:clamp(18px,2.5vw,28px);
}
.panel--cut{
  border:0;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.panel--paper{background:var(--paper);border-color:var(--ink)}
.panel--velvet{background:var(--velvet);border-color:var(--velvet);color:var(--paper)}
.panel--mist{background:var(--mist);border-color:rgba(11,43,34,.24)}

.card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--float);border:1px solid var(--line);
  padding:clamp(16px,2vw,24px);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--lark)}
.card--accent{border-top:3px solid var(--lark)}
.card--cut{
  border:0;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.card__title{font-family:var(--font-display);font-weight:800;font-size:1.14rem;line-height:1.35}
.card__meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-70)}
.card__body{font-size:.95rem;color:var(--ink-70)}

/* ---------- 11. 索引清单 / 表格 / 面包屑 ---------- */
.index-list{display:block}
.index-list__item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.index-list__item:nth-child(7n){border-bottom-color:var(--line);margin-bottom:8px}
.index-list__num{font-family:var(--font-mono);font-size:.75rem;color:var(--ember);letter-spacing:.08em}
.index-list__label{font-weight:700;font-size:1rem}
.index-list__meta{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-70);letter-spacing:.06em;white-space:nowrap}

.table{width:100%;font-size:.93rem;background:var(--float)}
.table th,.table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.table thead th{
  background:var(--velvet);color:var(--paper);
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.table tbody tr:nth-child(even){background:rgba(201,214,204,.34)}

.breadcrumb{padding-block:18px}
.breadcrumb__list{
  display:flex;flex-wrap:wrap;gap:4px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-70);
}
.breadcrumb__item{display:inline-flex;align-items:center}
.breadcrumb__item + .breadcrumb__item::before{content:"/";margin-inline:10px;color:var(--ember)}
.breadcrumb__item a{text-decoration:none;border-bottom:1px solid var(--line)}
.breadcrumb__item a:hover{color:var(--lark);border-bottom-color:var(--lark)}
.breadcrumb__item[aria-current="page"]{color:var(--ink)}

/* ---------- 12. 图片容器（页面阶段放置图片占位） ---------- */
.figure{display:block;margin:0}
.figure__frame{
  position:relative;overflow:hidden;background:var(--mist);
  border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.figure__frame img,.figure__frame svg{width:100%;height:100%;object-fit:cover;display:block}
.figure--16x9 .figure__frame{aspect-ratio:16/9}
.figure--4x3 .figure__frame{aspect-ratio:4/3}
.figure--3x2 .figure__frame{aspect-ratio:3/2}
.figure--1x1 .figure__frame{aspect-ratio:1/1}
.figure__caption{margin-top:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-70)}

/* ---------- 13. 筛选与分步 ---------- */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filter-btn{
  cursor:pointer;background:transparent;color:var(--ink);
  border:1px solid var(--line);padding:8px 14px;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;
  transition:background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.filter-btn:hover{border-color:var(--lark);color:var(--lark)}
.filter-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filter-btn[aria-pressed="true"]:hover{color:var(--paper);background:var(--velvet)}
.filter-count{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-70);letter-spacing:.06em}

.steps{border:1px solid var(--line);background:var(--float)}
.steps__nav{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.step-btn{
  flex:1 1 auto;min-width:118px;cursor:pointer;
  background:transparent;color:var(--ink-70);border:0;border-right:1px solid var(--line);
  padding:12px 14px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.step-btn:hover{color:var(--lark)}
.step-btn[aria-selected="true"]{background:var(--lark);color:var(--float)}
.steps__panel{padding:clamp(16px,2.5vw,26px)}

/* ---------- 14. 轨迹与显现 ---------- */
.trace{
  position:relative;height:2px;border:0;overflow:hidden;
  background:linear-gradient(90deg,var(--line),transparent);
  margin-block:clamp(20px,3vw,32px);
}
.trace::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--ember) 32%,var(--yellow) 68%,transparent);
  transform:translateX(-100%);
}
.trace--flip{background:linear-gradient(270deg,var(--line),transparent)}
.trace--flip::after{background:linear-gradient(270deg,transparent,var(--neon) 32%,var(--yellow) 68%,transparent)}
.reveal[data-visible="true"] .trace::after,
.trace[data-visible="true"]::after{animation:sweep 1.1s var(--ease) .1s 1 both}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal[data-visible="true"]{opacity:1;transform:none}

.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:90;pointer-events:none;
  background:linear-gradient(90deg,var(--ember),var(--yellow));
}

/* ---------- 15. 响应式 ---------- */
@media (max-width:1080px){
  .header-utility__hours{display:none}
  .split{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .footer__grid{grid-template-columns:1.6fr repeat(3,minmax(0,1fr))}
  .footer__col:nth-of-type(4){grid-column:2 / span 3}
}

@media (max-width:899px){
  .site-header{position:relative;top:auto}
  .site-header__inner{flex-wrap:wrap;gap:10px;padding-block:10px;min-height:0}
  .site-header__brand{order:1}
  .brand__version{display:none}
  .header-utility{order:2;margin-left:auto;padding-left:0;border-left:0;gap:8px}
  .nav-toggle{order:3;display:inline-flex}
  .site-nav{
    order:4;flex:1 0 100%;margin-left:0;display:none;
    background:var(--velvet);border:1px solid var(--velvet);
  }
  .site-header[data-open] .site-nav{display:block}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__item{border-bottom:1px solid var(--line-paper)}
  .site-nav__item:last-child{border-bottom:0}
  .site-nav__link{color:var(--paper);padding:13px 16px;font-size:.98rem;border:0}
  .site-nav__link:hover{color:var(--yellow);border:0;background:rgba(255,197,61,.08)}
  .site-nav__link[aria-current="page"]{background:var(--lark);color:var(--float)}
  .index-band__list{width:100%}
  .split{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .footer__brandcol{grid-column:1 / -1}
  .footer__col:nth-of-type(4){grid-column:auto}
}

@media (max-width:560px){
  body{font-size:16px}
  .brand__name{font-size:1.08rem}
  .header-utility__link{display:none}
  .btn{padding:11px 16px;font-size:.9rem}
  .btn--sm{padding:9px 13px;font-size:.82rem}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .footer__bottom-inner{gap:6px 16px}
  .footer__region{margin-left:0}
}

/* ---------- 16. 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .badge{animation:none}
  .badge,.btn:hover,.card:hover{transform:none}
}