/* =====================================================================
   创世红海 · site.css
   共享外壳：reset / 变量 / 刊头 / 导航 / 页脚 / 通用组件
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  --deep-sea:#0B2E4F;
  --abyss:#061A2E;
  --coral:#E8483B;
  --amber:#F08A3C;
  --pearl:#F6F3EE;
  --cream:#FBF8F2;
  --ink:#241C18;
  --mist:#7C93A6;
  --tide:#2E9E9B;
  --gold:#D9B26A;

  --line:rgba(124,147,166,.34);
  --line-soft:rgba(124,147,166,.20);
  --line-strong:rgba(124,147,166,.62);
  --on-dark:rgba(246,243,238,.88);
  --on-dark-dim:rgba(246,243,238,.58);

  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --content:1180px;
  --gutter:clamp(1rem,3.4vw,2.5rem);

  --fz-13:13px;
  --fz-15:15px;
  --fz-17:17px;
  --fz-18:18px;
  --fz-20:20px;
  --fz-28:28px;
  --fz-40:40px;
  --fz-56:56px;
  --fz-72:72px;

  --cut:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset & 中文基准 ---------- */
*,
*::before,
*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background-color:var(--pearl);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fz-18);
  font-weight:400;
  line-height:1.85;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:900;line-height:1.25;letter-spacing:.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--deep-sea);text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0}
hr{border:0}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
::selection{background:var(--coral);color:#fff}

/* ---------- 3. 容器与工具类 ---------- */
.wrap{
  width:100%;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em}

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

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;left:1rem;top:-5rem;z-index:200;
  background:var(--coral);color:#fff;
  font-size:var(--fz-15);font-weight:700;
  padding:.7rem 1.1rem;text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:1rem}

/* ---------- 5. 滚动进度 ---------- */
.scroll-track{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:190;
  pointer-events:none;background:rgba(11,46,79,.10);
}
.scroll-track__fill{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--coral) 0%,var(--amber) 58%,var(--tide) 100%);
  will-change:transform;
}

/* ---------- 6. 刊头 ---------- */
.site-head{
  position:relative;
  z-index:100;
  background:var(--pearl);
  border-bottom:1px solid var(--line);
}
.site-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,
    var(--deep-sea) 0 34%,
    var(--coral) 34% 60%,
    var(--amber) 60% 82%,
    var(--tide) 82% 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 58%);
  pointer-events:none;
}

.masthead{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1.4rem;
  padding:1.35rem 0 .95rem;
}

.masthead__meta{
  grid-column:1;
  margin:0;
  display:flex;align-items:baseline;gap:.45rem;
  font-family:var(--mono);
  font-size:var(--fz-13);
  letter-spacing:.04em;
  color:var(--mist);
  line-height:1.5;
}
.masthead__meta .mono{color:var(--coral);font-weight:700}

.masthead__brand{
  grid-column:2;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  text-decoration:none;
}
.masthead__title{
  font-size:var(--fz-56);
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;
  padding-left:.08em;
  color:var(--deep-sea);
  transition:color .2s var(--ease);
}
.masthead__brand:hover .masthead__title{color:var(--coral)}
.masthead__tagline{
  font-family:var(--mono);
  font-size:var(--fz-13);
  letter-spacing:.42em;
  padding-left:.42em;
  color:var(--amber);
}

.masthead__tools{
  grid-column:3;
  display:flex;align-items:center;justify-content:flex-end;gap:.85rem;
}

.entry-link{
  font-size:var(--fz-15);
  font-weight:700;
  color:var(--deep-sea);
  text-decoration:none;
  border-bottom:2px solid var(--coral);
  padding-bottom:.15rem;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.entry-link:hover{color:var(--coral);border-color:var(--amber)}

.version-badge{
  display:inline-flex;align-items:center;
  font-family:var(--mono);
  font-size:var(--fz-13);
  font-weight:700;
  letter-spacing:.06em;
  background:var(--coral);
  color:#fff;
  padding:.3rem .65rem .34rem;
  text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  transition:background .18s var(--ease),color .18s var(--ease);
}
.version-badge:hover{background:var(--amber);color:var(--abyss)}

/* ---------- 7. 导航行 ---------- */
.nav-row{
  position:relative;
  border-top:1px solid var(--line-soft);
  padding:.2rem 0 .45rem;
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
}

.site-nav__list{
  display:flex;align-items:center;justify-content:center;
  gap:2.1rem;flex-wrap:wrap;
  list-style:none;margin:0;padding:0;
}

.site-nav__link{
  display:block;
  padding:.5rem .1rem .4rem;
  font-size:var(--fz-17);
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.site-nav__link:hover{color:var(--coral);border-bottom-color:var(--amber)}
.site-nav__link[aria-current="page"]{
  color:var(--coral);
  font-weight:900;
  border-bottom-color:var(--coral);
}

.site-nav__utility{
  display:flex;align-items:center;gap:1.1rem;
  list-style:none;margin:0;
  padding:0 0 0 1.5rem;
  border-left:1px solid var(--line);
}
.site-nav__utility a{
  font-family:var(--mono);
  font-size:var(--fz-13);
  letter-spacing:.03em;
  color:var(--mist);
  text-decoration:none;
  transition:color .18s var(--ease);
}
.site-nav__utility a:hover{color:var(--amber)}

.nav-toggle{
  display:none;
  align-items:center;justify-content:center;gap:.6rem;
  width:100%;
  border:0;
  background:var(--deep-sea);
  color:var(--pearl);
  padding:.7rem 1rem;
  font-size:var(--fz-15);
  font-weight:700;
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:background .18s var(--ease);
}
.nav-toggle[aria-expanded="true"]{background:var(--coral)}

.nav-toggle__lines{
  position:relative;display:block;width:18px;height:2px;
  background:currentColor;
}
.nav-toggle__lines::before,
.nav-toggle__lines::after{
  content:"";position:absolute;left:0;width:18px;height:2px;
  background:currentColor;
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.nav-toggle__lines::before{top:-6px}
.nav-toggle__lines::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::after{transform:translateY(-6px) rotate(-45deg)}

.nav-toggle__text{letter-spacing:.16em}

/* ---------- 8. 移动端底部快捷条 ---------- */
.quick-dock{display:none}

/* ---------- 9. 页脚 ---------- */
.site-foot{
  position:relative;
  margin-top:6rem;
  background:var(--deep-sea);
  color:var(--on-dark);
}
.site-foot::before{
  content:"";display:block;height:6px;
  background:linear-gradient(90deg,var(--coral) 0%,var(--amber) 52%,var(--tide) 100%);
  clip-path:polygon(0 0,100% 0,100% 40%,0 100%);
}

.site-foot__inner{
  width:100%;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.site-foot__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.3fr;
  gap:3rem;
  padding:3.4rem 0 3.2rem;
}

.foot-col{min-width:0}

.foot-brand{
  margin:0;
  font-size:var(--fz-28);
  font-weight:900;
  line-height:1.1;
  letter-spacing:.1em;
  color:var(--pearl);
}
.foot-tag{
  margin:.55rem 0 0;
  font-family:var(--mono);
  font-size:var(--fz-13);
  letter-spacing:.3em;
  color:var(--amber);
}
.foot-meta{
  margin:1rem 0 0;
  font-family:var(--mono);
  font-size:var(--fz-13);
  letter-spacing:.02em;
  color:var(--on-dark-dim);
}

.foot-title{
  margin:0 0 .95rem;
  font-size:var(--fz-15);
  font-weight:700;
  letter-spacing:.16em;
  color:var(--amber);
}

.foot-list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.55rem;
}
.foot-list a{
  font-size:var(--fz-15);
  color:var(--on-dark);
  text-decoration:none;
  transition:color .18s var(--ease);
}
.foot-list a:hover{color:var(--amber)}
.foot-list a[aria-current="page"]{color:var(--coral);font-weight:700}
.foot-list--legal{margin-bottom:1.1rem}

.foot-contact{
  margin:.45rem 0 0;
  font-size:var(--fz-15);
  color:var(--on-dark);
  word-break:break-word;
}
.foot-contact.mono{font-size:var(--fz-13);color:var(--on-dark-dim)}

.site-foot__base{
  background:var(--abyss);
  border-top:1px solid rgba(124,147,166,.22);
}
.site-foot__baseline{
  width:100%;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin-inline:auto;
  padding:1.15rem var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem 1.5rem;
  font-family:var(--mono);
  font-size:var(--fz-13);
  color:var(--on-dark-dim);
}
.site-foot__baseline p{margin:0}
.foot-icp{color:var(--on-dark)}
.foot-copy{color:var(--on-dark-dim)}

/* ---------- 10. 通用按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.5rem;
  font-size:var(--fz-17);
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  background:var(--deep-sea);
  color:var(--pearl);
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--coral);color:#fff}
.btn--primary:hover{background:var(--amber);color:var(--abyss)}
.btn--ghost{
  background:transparent;color:var(--deep-sea);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover{color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral)}
.btn--invert{background:var(--pearl);color:var(--deep-sea)}
.btn--invert:hover{background:var(--amber);color:var(--abyss)}

/* ---------- 11. 标签芯片 ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--mono);
  font-size:var(--fz-13);
  letter-spacing:.06em;
  padding:.22rem .6rem .26rem;
  border:1px solid var(--line-strong);
  color:var(--deep-sea);
  background:transparent;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}
.chip--coral{background:var(--coral);border-color:var(--coral);color:#fff}
.chip--amber{background:var(--amber);border-color:var(--amber);color:var(--abyss)}
.chip--tide{background:var(--tide);border-color:var(--tide);color:#fff}

/* ---------- 12. 面板 ---------- */
.panel{
  background:var(--cream);
  border:1px solid var(--line-soft);
  padding:1.6rem;
}
.panel--cut{
  border:0;
  padding:1.8rem;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
.panel--sea{
  background:var(--deep-sea);
  border-color:transparent;
  color:var(--on-dark);
}
.panel--abhyss{
  background:var(--abyss);
  border-color:transparent;
  color:var(--on-dark);
}

/* ---------- 13. 面包屑 ---------- */
.breadcrumb{
  font-family:var(--mono);
  font-size:var(--fz-13);
  letter-spacing:.04em;
  color:var(--mist);
}
.breadcrumb ol,
.breadcrumb ul{
  display:flex;flex-wrap:wrap;gap:.5rem;
  list-style:none;margin:0;padding:0;
}
.breadcrumb li{display:flex;align-items:center;gap:.5rem}
.breadcrumb li + li::before{content:"/";color:var(--line-strong)}
.breadcrumb a{color:var(--mist);text-decoration:none}
.breadcrumb a:hover{color:var(--coral)}
.breadcrumb [aria-current="page"]{color:var(--ink)}

/* ---------- 14. 正文阅读栏 ---------- */
.prose{
  max-width:38ch;
  font-size:var(--fz-18);
  line-height:1.85;
}
.prose p{margin:0 0 1.3em}
.prose h2{font-size:var(--fz-28);margin:1.7em 0 .7em}
.prose h3{font-size:var(--fz-20);margin:1.4em 0 .6em}
.prose ul,
.prose ol{padding-left:1.25em;margin:0 0 1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:.35em 0}
.prose a{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--amber)}
.prose blockquote{
  margin:1.6em 0;
  padding-left:1.1rem;
  border-left:3px solid var(--amber);
  color:var(--deep-sea);
}

/* ---------- 15. 网格骨架 ---------- */
.grid{display:grid;gap:2rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--7-5{grid-template-columns:7fr 5fr}
.grid--5-7{grid-template-columns:5fr 7fr}
.grid--4-8{grid-template-columns:4fr 8fr}
.grid--8-4{grid-template-columns:8fr 4fr}

/* ---------- 16. 分隔线 ---------- */
.rule{height:1px;background:var(--line);border:0;margin:2.5rem 0}
.rule--slant{
  height:8px;border:0;margin:2.5rem 0;
  background:linear-gradient(90deg,var(--coral),var(--amber) 55%,var(--tide));
  clip-path:polygon(0 0,100% 0,100% 55%,0 100%);
}

/* ---------- 17. 图片容器（供页面阶段放图） ---------- */
.media{
  position:relative;
  display:block;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(145deg,var(--deep-sea) 0%,#0d3a60 42%,var(--tide) 100%);
}
.media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(118deg,rgba(246,243,238,.07) 0 2px,transparent 2px 13px);
  pointer-events:none;
}
.media::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 54%,rgba(6,26,46,.5));
  pointer-events:none;
}
.media > img,
.media > svg{
  position:relative;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
}
.media--wide{aspect-ratio:16/9}
.media--band{aspect-ratio:21/9}
.media--square{aspect-ratio:1/1}
.media--tall{aspect-ratio:3/4}
.media--portrait{aspect-ratio:4/5}

/* ---------- 18. 进视口显现 ---------- */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
html.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- 19. 桌面/平板微调 ---------- */
@media (max-width:1080px){
  .site-nav__list{gap:1.5rem}
  .site-nav{gap:1.3rem}
  .site-foot__grid{gap:2.4rem}
}

/* ---------- 20. 移动端（≤900px） ---------- */
@media (max-width:900px){
  body{padding-bottom:3.2rem}

  .masthead{
    grid-template-columns:1fr;
    justify-items:center;
    gap:.55rem;
    padding:1rem 0 .85rem;
  }
  .masthead__meta{display:none}
  .masthead__brand{grid-column:1}
  .masthead__title{font-size:var(--fz-40)}
  .masthead__tools{grid-column:1;justify-content:center}

  .nav-row{
    display:flex;
    flex-direction:column-reverse;
    align-items:stretch;
    gap:.55rem;
    padding:.55rem 0 .7rem;
  }
  .nav-toggle{display:flex}

  .site-nav{
    display:block;
    flex-wrap:nowrap;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .28s var(--ease),opacity .2s var(--ease);
  }
  .site-nav[data-open="true"]{max-height:36rem;opacity:1}

  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__link{
    padding:.72rem .2rem;
    font-size:var(--fz-17);
    border-bottom:1px solid var(--line-soft);
  }
  .site-nav__list li:last-child .site-nav__link{border-bottom:0}

  .site-nav__utility{
    justify-content:center;
    gap:1.5rem;
    margin-top:.5rem;
    padding:.7rem 0 0;
    border-left:0;
    border-top:1px solid var(--line);
  }

  .quick-dock{
    display:block;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:150;
    background:var(--abyss);
    border-top:1px solid rgba(240,138,60,.45);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .quick-dock ul{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    list-style:none;margin:0;padding:0;
  }
  .quick-dock a{
    display:block;
    padding:.72rem .2rem .78rem;
    text-align:center;
    font-family:var(--mono);
    font-size:var(--fz-13);
    letter-spacing:.08em;
    color:var(--on-dark);
    text-decoration:none;
  }
  .quick-dock a:hover,
  .quick-dock a:focus-visible{color:var(--amber)}

  .site-foot{margin-top:4rem}
  .site-foot__grid{
    grid-template-columns:1fr;
    gap:2rem;
    padding:2.6rem 0 2.4rem;
  }
  .site-foot__baseline{padding:1rem var(--gutter)}
}

@media (max-width:640px){
  .grid--2,
  .grid--3,
  .grid--7-5,
  .grid--5-7,
  .grid--4-8,
  .grid--8-4{grid-template-columns:1fr}
  .media--band{aspect-ratio:16/9}
}

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