/* ==========================================================================
   云体育 · 共享站点样式  /assets/site.css
   基调：展览画册 + 印刷索引卡 + 框架式边缘导航
   ========================================================================== */

/* 1 · 变量 ---------------------------------------------------------------- */
:root{
  --ink:#11161C;
  --paper:#F7F5F0;
  --cyan:#5FA8BC;
  --cyan-deep:#1E5A6B;
  --signal:#D8382C;
  --gold:#C79A32;
  --night:#16273C;
  --stone:#8C949B;
  --sand:#EFE4CE;

  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,serif;
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Oswald","Roboto Condensed","DIN Alternate","Bahnschrift",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --frame-w:132px;
  --head-h:60px;
  --maxw:1240px;
  --line:1.5px solid var(--ink);
  --ease:.18s ease;
}

/* 2 · 重置 ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 20px);
}
body{
  margin:0;
  padding-top:var(--head-h);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ol,ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
table{border-collapse:collapse;width:100%}
hr{border:0}
::selection{background:var(--cyan);color:var(--ink)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}

/* 3 · 排版工具 ------------------------------------------------------------ */
.h-display{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;line-height:1.16}
.h1{font-size:clamp(30px,5.2vw,58px)}
.h2{font-size:clamp(23px,3.4vw,38px)}
.h3{font-size:clamp(18px,2.1vw,24px);line-height:1.32}
.lede{font-size:clamp(16px,1.5vw,19px);line-height:1.72;color:#2C343D;max-width:62ch}
.prose{max-width:68ch}
.prose p+p{margin-top:1em}
.prose h3{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.4;margin:1.6em 0 .5em}
.prose ul{margin:1em 0;padding-left:1.1em;list-style:square}
.prose li{margin-bottom:.4em}
.prose a{color:var(--cyan-deep);border-bottom:1px solid currentColor}
.numb{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--stone)}
.skip-link{
  position:fixed;top:6px;left:6px;z-index:90;
  padding:9px 16px;font-size:13px;font-weight:600;letter-spacing:.04em;
  background:var(--ink);color:var(--paper);
  transform:translateY(-180%);
  transition:transform var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* 4 · 布局 ---------------------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,56px)}
.container--narrow{max-width:860px}
.grid{display:grid;gap:clamp(16px,2.4vw,30px)}
.grid--board{grid-template-columns:repeat(12,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.band{padding:clamp(30px,5vw,74px) 0}
.band--tight{padding:clamp(20px,3vw,42px) 0}
.band--sand{background:var(--sand)}
.band--cyan{background:var(--cyan);color:var(--ink)}
.band--night{background:var(--night);color:#EDEFF2}
.band--night .muted{color:#93A2AF}
.band--night a{color:#EDEFF2}
.rule{border:0;height:1.5px;background:var(--ink);margin:0}
.rule--dotted{border-top:1.5px dotted var(--stone);height:0;background:none}
.rule--cyan{background:var(--cyan)}

/* 5 · 标签 · 按钮 · 面包屑 ------------------------------------------------ */
.tag{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:3px 9px;font-size:12px;font-weight:500;letter-spacing:.08em;
  border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);
}
.tag--cyan{background:var(--cyan)}
.tag--gold{background:var(--gold)}
.tag--signal{background:var(--signal);color:var(--paper);border-color:var(--signal)}
.tag--ghost{background:transparent;color:var(--stone);border-color:var(--stone)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;font-size:14px;font-weight:600;letter-spacing:.04em;
  border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--signal);border-color:var(--signal);color:#fff}
.btn--solid:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--line{background:transparent}
.btn--quiet{border-color:transparent;background:none;padding-inline:0;text-decoration:underline;text-underline-offset:4px}
.btn--quiet:hover{background:none;color:var(--cyan-deep)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-size:12.5px;letter-spacing:.05em;color:var(--stone)}
.breadcrumb a{color:var(--cyan-deep);border-bottom:1px solid rgba(30,90,107,.4)}
.breadcrumb a:hover{color:var(--signal);border-color:var(--signal)}
.breadcrumb__sep{color:var(--stone)}

/* 6 · 章节 · 卡片 --------------------------------------------------------- */
.chapter{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;
  gap:clamp(14px,2.6vw,30px);
  padding-top:14px;border-top:var(--line);
  margin-bottom:clamp(20px,3vw,34px);
}
.chapter__num{font-family:var(--mono);font-weight:700;font-size:clamp(42px,7vw,84px);line-height:.8;letter-spacing:-.03em;color:var(--cyan)}
.chapter__body{padding-top:6px}
.chapter__k{display:block;margin-bottom:6px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.chapter__t{font-family:var(--serif);font-weight:700;font-size:clamp(21px,2.8vw,32px);line-height:1.2;letter-spacing:-.01em}
.chapter__d{margin-top:10px;max-width:62ch;font-size:15.5px;color:#333B44}
.band--night .chapter__d{color:#B7C3CD}
.card{position:relative;padding:clamp(16px,2.2vw,24px);border:var(--line);background:var(--paper)}
.card--sand{background:var(--sand)}
.card--night{background:var(--night);color:#EDEFF2;border-color:var(--night)}
.card__k{display:block;margin-bottom:6px;font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--stone)}
.card--night .card__k{color:#8FA0AE}
.card__t{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.4}
.stack-card{position:relative;isolation:isolate;padding:clamp(16px,2.2vw,24px);border:var(--line);background:var(--paper)}
.stack-card::before{content:"";position:absolute;inset:7px -7px -7px 7px;z-index:-1;background:var(--sand);border:var(--line)}

/* 7 · 影像容器 ------------------------------------------------------------ */
.media-frame{position:relative;overflow:hidden;border:var(--line);background:var(--sand)}
.media-frame>img,.media-frame>.media-frame__ph{display:block;width:100%;height:100%;object-fit:cover}
.media-frame--16x9{aspect-ratio:16/9}
.media-frame--4x3{aspect-ratio:4/3}
.media-frame--1x1{aspect-ratio:1/1}
.media-frame--3x4{aspect-ratio:3/4}
.media-frame--wide{aspect-ratio:21/9}
.media-frame__ph{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg,rgba(17,22,28,.07) 0 2px,transparent 2px 10px),
    linear-gradient(160deg,var(--sand),#E2D5BA);
}
.media-frame__cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:9px 12px;font-size:12px;letter-spacing:.04em;
  background:rgba(17,22,28,.84);color:var(--paper);
}
.halftone{
  position:absolute;inset:0;pointer-events:none;opacity:.16;color:var(--ink);
  background-image:radial-gradient(currentColor 1px,transparent 1.2px);
  background-size:9px 9px;
}

/* 8 · 页头 / 框架导航 ----------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--paper);
  border-bottom:var(--line);
}
.site-header[data-scrolled="true"]{box-shadow:0 6px 18px rgba(17,22,28,.08)}
.frame-top{display:flex;align-items:stretch;height:var(--head-h)}
.brand{
  display:flex;align-items:center;gap:10px;
  flex:0 0 auto;min-width:var(--frame-w);
  padding:0 14px;border-right:var(--line);
  transition:background var(--ease);
}
.brand:hover{background:var(--sand)}
.brand__mark{
  display:grid;place-items:center;width:30px;height:30px;
  background:var(--cyan);color:var(--ink);
  border:1.5px solid var(--ink);
  font-family:var(--serif);font-weight:700;font-size:16px;line-height:1;
}
.brand__txt{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.02em;white-space:nowrap}
.frame-top__day{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:12px;
  padding:0 clamp(14px,2.2vw,28px);
  overflow:hidden;white-space:nowrap;
}
.frame-top__k{
  flex:0 0 auto;padding:3px 8px;
  background:var(--cyan-deep);color:var(--paper);
  font-size:11px;font-weight:600;letter-spacing:.16em;
}
.frame-top__v{font-family:var(--mono);font-weight:700;font-size:13.5px;letter-spacing:.02em}
.frame-top__day em{
  font-style:normal;font-family:var(--sans);font-weight:400;
  font-size:12.5px;letter-spacing:.04em;color:var(--stone);
}
.frame-top__meta{display:flex;align-items:stretch;flex:0 0 auto}
.ver-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 clamp(12px,1.6vw,20px);
  border-left:var(--line);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;
  color:var(--ink);white-space:nowrap;
}
.ver-badge__n{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--signal)}
.ghost-link{
  display:inline-flex;align-items:center;
  padding:0 clamp(12px,1.6vw,22px);
  border-left:var(--line);background:var(--sand);
  font-size:13px;font-weight:600;letter-spacing:.06em;white-space:nowrap;
  transition:background var(--ease),color var(--ease);
}
.ghost-link:hover{background:var(--cyan)}
.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:0 16px;border-left:var(--line);
  font-size:12.5px;font-weight:600;letter-spacing:.08em;
}
.nav-toggle__bar{position:relative;display:block;width:18px;height:2px;background:var(--ink)}
.nav-toggle__bar::before,.nav-toggle__bar::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);
  transition:transform var(--ease);
}
.nav-toggle__bar::before{top:-6px}
.nav-toggle__bar::after{top:6px}
[data-nav-toggle][aria-expanded="true"] .nav-toggle__bar{background:transparent}
[data-nav-toggle][aria-expanded="true"] .nav-toggle__bar::before{transform:translateY(6px) rotate(45deg)}
[data-nav-toggle][aria-expanded="true"] .nav-toggle__bar::after{transform:translateY(-6px) rotate(-45deg)}
.nav-toggle__txt{line-height:1}

/* 抽屉态（默认，≤1023px） */
.frame-nav{
  position:fixed;top:var(--head-h);left:0;right:0;z-index:55;
  max-height:0;overflow:hidden;visibility:hidden;
  background:var(--paper);
  border-bottom:var(--line);
  transition:max-height .24s ease,visibility .24s ease;
}
.frame-nav[data-open="true"]{max-height:min(76vh,560px);overflow-y:auto;visibility:visible}
.frame-nav__list{display:block}
.frame-nav__item{border-bottom:1px dotted rgba(140,148,155,.55)}
.frame-nav__link{
  display:flex;align-items:baseline;gap:10px;
  padding:14px 20px;font-size:15px;font-weight:500;line-height:1.3;
  border-left:3px solid transparent;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.frame-nav__link:hover{background:var(--sand)}
.frame-nav__link[aria-current="page"]{background:var(--sand);border-left-color:var(--signal);color:var(--cyan-deep);font-weight:700}
.frame-nav__num{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--stone)}
.frame-nav__label{display:block}
.frame-nav__note{display:none}

.scroll-meter{position:absolute;left:0;right:0;bottom:-1.5px;height:2px;pointer-events:none;background:transparent}
.scroll-meter__fill{
  display:block;width:100%;height:100%;
  background:var(--signal);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .12s linear;
}

/* 9 · 页脚 ---------------------------------------------------------------- */
.site-footer{
  margin-top:clamp(52px,8vw,110px);
  background:var(--night);color:#DCE3E8;
  border-top:6px solid var(--gold);
}
.site-footer__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(34px,5vw,62px) clamp(20px,4vw,56px) clamp(24px,3vw,40px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,34px);
}
.foot-col__t{
  margin-bottom:14px;padding-bottom:9px;
  border-bottom:1px solid rgba(247,245,240,.22);
  font-size:11.5px;font-weight:600;letter-spacing:.2em;color:var(--gold);
}
.foot-list li+li{margin-top:9px}
.foot-link{
  font-size:14.5px;color:#DCE3E8;
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.foot-link:hover{color:#fff;border-bottom-color:var(--cyan)}
.foot-text{font-size:13.5px;line-height:1.75;color:#A9B6C1}
.foot-text--dim{font-size:12.5px;color:#7F8D99}
.foot-mark{
  display:flex;align-items:baseline;gap:7px;margin-bottom:8px;
  font-family:var(--serif);font-weight:700;font-size:21px;color:var(--paper);
}
.foot-mark em{font-style:normal;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--cyan)}
.site-footer__base{
  max-width:var(--maxw);margin-inline:auto;
  padding:16px clamp(20px,4vw,56px) 22px;
  border-top:1px solid rgba(247,245,240,.18);
  display:flex;flex-wrap:wrap;gap:10px 24px;
  justify-content:space-between;align-items:center;
  font-size:12.5px;color:#8E9CA8;
}
.foot-note,.foot-tip{font-size:12.5px}
.foot-tip .foot-link{font-size:12.5px;color:var(--cyan)}

/* 10 · 响应式 ------------------------------------------------------------- */
@media (max-width:1199px){
  :root{--head-h:56px}
  .frame-top__day em{display:none}
}
@media (max-width:1023px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col-4,.col-6,.col-8{grid-column:span 6}
  .site-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .ver-badge{display:none}
  .nav-toggle{display:inline-flex}
}
@media (max-width:767px){
  .frame-top__day{display:none}
  .brand{min-width:0;border-right:0;padding-left:16px}
  .frame-top__meta .ghost-link{border-left:0}
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .grid--board{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-4,.col-6,.col-8{grid-column:span 6}
  .site-footer__inner{grid-template-columns:minmax(0,1fr)}
  .chapter{grid-template-columns:minmax(0,1fr);gap:8px}
  .chapter__num{font-size:44px}
  .stack-card::before{inset:5px -5px -5px 5px}
}
@media (min-width:1024px){
  body{padding-left:var(--frame-w)}
  .frame-nav{
    top:var(--head-h);left:0;right:auto;bottom:0;width:var(--frame-w);
    display:flex;flex-direction:column;
    max-height:none;overflow-y:auto;visibility:visible;
    border-bottom:0;border-right:var(--line);
    padding:14px 0 16px;
    transition:none;
  }
  .frame-nav__item{border-bottom:0}
  .frame-nav__link{
    display:block;padding:10px 14px 10px 15px;
    font-size:13.5px;letter-spacing:.01em;
  }
  .frame-nav__num{display:block;font-size:10px;margin-bottom:2px}
  .frame-nav__link[aria-current="page"]{color:var(--ink)}
  .frame-nav__note{
    display:block;margin-top:auto;padding:16px 16px 0;
    font-size:11px;line-height:1.65;letter-spacing:.04em;color:var(--stone);
  }
}

/* 11 · 动效与打印 --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .frame-nav{transition:none}
  .scroll-meter__fill{transition:none}
}
@media print{
  .site-header,.frame-nav,.nav-toggle,.skip-link,.scroll-meter{display:none !important}
  body{padding:0;background:#fff}
  .site-footer{margin:0;background:#fff;color:#11161C;border-top:1.5px solid #11161C}
  .foot-link,.foot-text,.foot-note,.foot-tip{color:#11161C}
}