/* ============================================================
   四喜娱乐 · 共享样式 /assets/site.css
   高原矿物研究板：米白大底 · 浅湖分区 · 深湖页脚
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  --lake:#0F6E8C;
  --lake-deep:#073B4C;
  --lake-pale:#D9EEF3;
  --orange:#E8792E;
  --tibet:#B33A3A;
  --barley:#6C8E4E;
  --moss:#3F5F4A;
  --clay:#B66A4A;
  --ink:#3A4248;
  --ink-soft:#4A545B;
  --paper:#F6F1E7;
  --paper-raise:#FBF8F1;

  --line:rgba(58,66,72,.14);
  --line-strong:rgba(58,66,72,.24);
  --line-lake:rgba(15,110,140,.28);

  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --page-max:1180px;
  --narrow-max:760px;
  --gutter:clamp(1rem,3vw,2rem);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;

  --shadow-soft:0 14px 30px -26px rgba(7,59,76,.75);
  --shadow-raise:0 18px 34px -26px rgba(7,59,76,.85);
  --ease:180ms ease;
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  text-underline-offset:.22em;
}
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 70% at 88% -12%,rgba(217,238,243,.92),rgba(217,238,243,0) 62%),
    radial-gradient(70% 55% at -8% 0%,rgba(232,121,46,.09),rgba(232,121,46,0) 58%);
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0}
a{color:var(--lake);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--lake-deep)}
h1,h2,h3,h4{font-weight:800;line-height:1.25;letter-spacing:.03em;color:var(--lake-deep)}
strong{font-weight:700;color:var(--lake-deep)}
[id]{scroll-margin-top:6.5rem}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 3. 中文排版与通用文本 ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--lake);text-transform:uppercase;
}
.kicker::before{content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--orange)}
.lede{
  max-width:70ch;font-size:clamp(1rem,1.3vw,1.12rem);
  line-height:1.8;color:var(--ink-soft);
}
.section-title{
  font-size:clamp(1.5rem,3vw,2.4rem);
  letter-spacing:.03em;color:var(--lake-deep);
}
.section-num{
  display:block;font-family:var(--font-mono);
  font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;
  letter-spacing:.02em;line-height:1;color:rgba(15,110,140,.28);
}
.mono{font-family:var(--font-mono);letter-spacing:.06em}
.stat{
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(1.1rem,2vw,1.4rem);
  letter-spacing:.06em;color:var(--lake-deep);
}

/* ---------- 4. 布局容器与栅格 ---------- */
.wrap{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:var(--narrow-max)}
.section{padding:clamp(2rem,5vw,3.6rem) 0}
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
.bento-span-2{grid-column:span 2}
.bento-span-3{grid-column:span 3}
.bento-span-4{grid-column:span 4}
.bento-span-6{grid-column:span 6}

/* ---------- 5. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;padding:.55rem 1.05rem;
  border:1px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--font-sans);font-size:.9rem;font-weight:700;letter-spacing:.04em;
  cursor:pointer;text-align:center;
  transition:background-color var(--ease),color var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
.btn-primary{
  background:var(--lake);color:#FBFDFE;
  box-shadow:0 1px 0 rgba(7,59,76,.18),0 10px 20px -14px rgba(7,59,76,.9);
}
.btn-primary:hover{background:var(--lake-deep);color:#fff;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{
  background:transparent;border-color:var(--line-lake);color:var(--lake-deep);
}
.btn-ghost:hover{background:rgba(15,110,140,.1);border-color:var(--lake);color:var(--lake-deep)}
.btn-ghost:active{transform:translateY(1px)}
.btn-sm{min-height:38px;padding:.35rem .85rem;font-size:.82rem}

/* ---------- 6. 跳至正文 ---------- */
.skip-link{
  position:fixed;left:1rem;top:-4.5rem;z-index:200;
  padding:.7rem 1.1rem;border-radius:0 0 10px 10px;
  background:var(--lake-deep);color:var(--paper);
  font-size:.9rem;font-weight:700;letter-spacing:.04em;
  box-shadow:var(--shadow-raise);
  transition:top var(--ease);
}
.skip-link:focus-visible{top:0;outline:2px solid var(--orange);outline-offset:-4px;color:var(--paper)}

/* ---------- 7. 页头 ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(246,241,231,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(7,59,76,.06),0 12px 30px -26px rgba(7,59,76,.9);
}

/* 7.1 顶层细轨 */
.header-rail{background:var(--lake-deep);color:rgba(246,241,231,.84)}
.rail-inner{
  max-width:var(--page-max);margin:0 auto;
  padding:.4rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.rail-brand{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:600;letter-spacing:.09em;color:#F6F1E7;
}
.rail-dot{
  width:.45rem;height:.45rem;border-radius:50%;
  background:var(--orange);flex:none;
  box-shadow:0 0 0 3px rgba(232,121,46,.22);
}
.rail-meta{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:rgba(217,238,243,.85);white-space:nowrap;
}
.rail-item{display:inline-flex;align-items:center}
.rail-item + .rail-item::before{
  content:"";width:1px;height:.72rem;margin-right:.9rem;
  background:rgba(217,238,243,.3);
}

/* 7.2 主命令栏 */
.header-bar{position:relative}
.bar-inner{
  max-width:var(--page-max);margin:0 auto;
  padding:.7rem var(--gutter);
  display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem);
}

/* 品牌 */
.brand{
  display:inline-flex;align-items:center;gap:.65rem;flex:none;
  color:var(--lake-deep);
}
.brand:hover{color:var(--lake)}
.brand-mark{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.15fr .85fr;
  gap:2px;width:1.75rem;height:1.75rem;flex:none;
  padding:2px;border-radius:7px;
  background:rgba(7,59,76,.1);
}
.brand-mark i{display:block;border-radius:2px}
.brand-mark i:nth-child(1){background:var(--lake)}
.brand-mark i:nth-child(2){background:var(--orange)}
.brand-mark i:nth-child(3){background:var(--lake-deep)}
.brand-mark i:nth-child(4){background:var(--moss)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-size:1.05rem;font-weight:800;letter-spacing:.1em;color:inherit}
.brand-sub{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;
  color:rgba(58,66,72,.62);margin-top:.18rem;
}

/* 导航 */
.site-nav{flex:1 1 auto;display:flex;justify-content:flex-end;align-items:center}
.nav-list{
  display:flex;align-items:center;gap:clamp(.1rem,.6vw,.35rem);
  counter-reset:navi;
}
.nav-link{
  position:relative;display:inline-flex;align-items:baseline;gap:.35rem;
  padding:.5rem .6rem;border-radius:var(--radius-sm);
  color:#2B3339;font-size:.93rem;font-weight:600;letter-spacing:.02em;
  transition:color var(--ease),background-color var(--ease);
}
.nav-link::before{
  counter-increment:navi;
  content:counter(navi,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;
  color:var(--clay);
}
.nav-link:hover{color:var(--lake);background:rgba(15,110,140,.08)}
.nav-link[aria-current="page"]{
  color:var(--lake-deep);background:rgba(217,238,243,.92);
}
.nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:.6rem;right:.6rem;bottom:.22rem;
  height:2px;border-radius:2px;background:var(--orange);
}

/* 工具区 */
.bar-tools{display:flex;align-items:center;gap:.5rem;flex:none}
.bar-cta{white-space:nowrap}

/* 移动导航按钮 */
.nav-toggle{
  display:none;align-items:center;gap:.5rem;
  min-height:44px;padding:.4rem .8rem;
  background:rgba(15,110,140,.08);
  border:1px solid var(--line-lake);border-radius:var(--radius-sm);
  color:var(--lake-deep);font-size:.82rem;font-weight:700;letter-spacing:.1em;
  cursor:pointer;transition:background-color var(--ease),border-color var(--ease);
}
.nav-toggle:hover{background:rgba(15,110,140,.16);border-color:var(--lake)}
.nav-toggle-bars{display:grid;gap:3px;width:1.05rem;flex:none}
.nav-toggle-bars i{
  display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform var(--ease),opacity var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-toggle-label{line-height:1}

/* 滚动进度 */
.scroll-track{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  overflow:hidden;pointer-events:none;
}
.scroll-bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--lake) 0%,var(--lake) 55%,var(--orange) 100%);
  transition:width .12s linear;
}

/* ---------- 8. 页脚 ---------- */
.site-footer{
  position:relative;margin-top:clamp(3rem,7vw,6rem);
  background:var(--lake-deep);color:rgba(246,241,231,.8);
  overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-radial-gradient(circle at 84% 8%,rgba(217,238,243,.1) 0 1px,transparent 1px 34px);
  opacity:.55;
}
.footer-frame{
  position:relative;max-width:var(--page-max);margin:0 auto;
  padding:clamp(2rem,5vw,3.4rem) var(--gutter) clamp(1.2rem,3vw,1.8rem);
}
.footer-top{
  display:grid;grid-template-columns:1.5fr 1.35fr 1.05fr;
  gap:clamp(1.4rem,3vw,2.6rem);
}
.brand-footer{color:#F6F1E7}
.brand-footer:hover{color:#fff}
.brand-footer .brand-mark{background:rgba(217,238,243,.16)}
.brand-footer .brand-sub{color:rgba(217,238,243,.66)}
.footer-summary{
  margin-top:.9rem;max-width:36ch;
  font-size:.92rem;line-height:1.75;color:rgba(246,241,231,.74);
}
.footer-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.footer-tags li{
  padding:.22rem .6rem;border-radius:999px;
  border:1px solid rgba(217,238,243,.28);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  color:rgba(217,238,243,.85);
}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.footer-heading{
  margin-bottom:.8rem;
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
}
.footer-links li + li{margin-top:.45rem}
.footer-links a{
  display:inline-block;padding:.15rem 0;
  font-size:.92rem;color:rgba(246,241,231,.82);
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.footer-links a:hover,.footer-links a:focus-visible{
  color:#fff;border-bottom-color:rgba(232,121,46,.72);
}
.contact-list li{
  display:flex;align-items:baseline;gap:.6rem;
  padding:.5rem 0;border-bottom:1px dashed rgba(217,238,243,.18);
  font-size:.88rem;
}
.contact-list li:first-child{padding-top:0}
.contact-key{
  flex:none;min-width:3rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  color:var(--orange);
}
.contact-value{color:rgba(246,241,231,.92);word-break:break-word}
.footer-bottom{
  margin-top:clamp(1.6rem,4vw,2.4rem);padding-top:1.2rem;
  border-top:1px solid rgba(217,238,243,.18);
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;
  align-items:flex-start;justify-content:space-between;
}
.footer-legal{
  max-width:56ch;font-size:.8rem;line-height:1.75;
  color:rgba(246,241,231,.62);
}
.footer-meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;
  color:rgba(217,238,243,.72);
}
.footer-meta a{color:rgba(217,238,243,.85);border-bottom:1px solid rgba(217,238,243,.32)}
.footer-meta a:hover{color:#fff;border-bottom-color:rgba(232,121,46,.8)}

/* ---------- 9. 面包屑 ---------- */
.breadcrumb{margin:0 0 1.1rem}
.breadcrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.05em;
  color:rgba(58,66,72,.62);
}
.breadcrumb li{display:inline-flex;align-items:center;gap:.4rem}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--clay)}
.breadcrumb a{color:var(--lake)}
.breadcrumb a:hover{color:var(--lake-deep)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- 10. 基础组件 ---------- */
.card{
  position:relative;padding:clamp(1rem,2vw,1.5rem);
  background:var(--paper-raise);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),var(--shadow-soft);
  transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.card:hover{border-color:var(--line-lake);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),var(--shadow-raise)}
.card-accent{border-left:3px solid var(--orange)}
.card-lake{background:rgba(217,238,243,.6);border-color:rgba(15,110,140,.2)}
.card-title{margin-bottom:.5rem;font-size:1.1rem;font-weight:800;letter-spacing:.02em;color:var(--lake-deep)}
.card-text{font-size:.94rem;color:var(--ink-soft)}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .7rem;border-radius:999px;
  border:1px solid var(--line-lake);background:rgba(217,238,243,.72);
  color:var(--lake-deep);font-size:.78rem;font-weight:600;letter-spacing:.03em;
}
.tag{
  display:inline-flex;align-items:center;
  padding:.2rem .5rem;border-radius:6px;
  border:1px solid rgba(232,121,46,.34);background:rgba(232,121,46,.16);
  color:#8A4213;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
}
.note{
  padding:1rem 1.1rem;border-radius:var(--radius);
  background:rgba(108,142,78,.12);
  border:1px solid rgba(108,142,78,.3);
  color:#33452C;font-size:.9rem;
}
.note-warn{background:rgba(179,58,58,.1);border-color:rgba(179,58,58,.28);color:#7A2A2A}
.rule{height:0;border:0;border-top:1px solid var(--line);margin:clamp(1.5rem,3vw,2.4rem) 0}

/* 图片容器 */
.media-frame{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:linear-gradient(145deg,#D9EEF3 0%,#F6F1E7 52%,#E7D9C6 100%);
}
.media-frame::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(15,110,140,.1) 0 1px,transparent 1px 22px);
}
.media-frame > img{
  position:relative;z-index:0;
  display:block;width:100%;height:100%;object-fit:cover;
}
.media-frame[data-ratio="16-9"]{aspect-ratio:16/9}
.media-frame[data-ratio="4-3"]{aspect-ratio:4/3}
.media-frame[data-ratio="1-1"]{aspect-ratio:1/1}
.media-frame[data-ratio="3-4"]{aspect-ratio:3/4}
.media-frame[data-ratio="21-9"]{aspect-ratio:21/9}
.media-caption{
  display:block;margin-top:.5rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:rgba(58,66,72,.68);
}

/* 浮动章节索引 */
.index-list{
  display:flex;flex-direction:column;gap:.15rem;
  padding-left:.9rem;border-left:1px solid var(--line-strong);
}
.index-link{
  display:flex;align-items:center;gap:.45rem;
  padding:.35rem 0;border-radius:6px;
  font-size:.85rem;color:rgba(58,66,72,.66);
  transition:color var(--ease);
}
.index-link::before{
  content:"";width:.4rem;height:.4rem;border-radius:50%;flex:none;
  background:rgba(58,66,72,.28);
  transition:background-color var(--ease),transform var(--ease);
}
.index-link:hover{color:var(--lake-deep)}
.index-link[aria-current="true"]{color:var(--lake-deep);font-weight:700}
.index-link[aria-current="true"]::before{background:var(--orange);transform:scale(1.3)}

/* 显现 */
.js [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 11. 响应式 ---------- */
@media (max-width:1080px){
  .nav-link{font-size:.86rem;padding:.45rem .45rem}
  .nav-link::before{display:none}
  .nav-link[aria-current="page"]::after{left:.45rem;right:.45rem}
}

@media (max-width:960px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;top:100%;left:0;right:0;z-index:90;
    display:block;padding:0;
    max-height:min(72vh,32rem);overflow-y:auto;
    background:rgba(246,241,231,.99);
    border-bottom:1px solid var(--line-strong);
    box-shadow:0 26px 42px -32px rgba(7,59,76,.9);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }
  .site-nav[data-open]{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(0);
  }
  .nav-list{
    flex-direction:column;align-items:stretch;gap:0;
    padding:.55rem var(--gutter) .95rem;
    counter-reset:navi;
  }
  .nav-link{
    width:100%;justify-content:flex-start;
    padding:.85rem .4rem;font-size:1rem;border-radius:6px;
    border-bottom:1px solid rgba(58,66,72,.1);
  }
  .nav-link::before{display:inline;font-size:.66rem}
  .nav-link[aria-current="page"]::after{left:.4rem;right:auto;width:1.5rem;bottom:.5rem}
  .nav-list > li:last-child .nav-link{border-bottom:0}

  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .footer-note{grid-column:1 / -1}

  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-span-2,.bento-span-3,.bento-span-4,.bento-span-6{grid-column:span 2}
}

@media (max-width:720px){
  .rail-meta{display:none}
  .header-rail .rail-inner{justify-content:center}
  .brand-sub{display:none}
  .bar-inner{gap:.6rem}
}

@media (max-width:560px){
  .bar-cta{display:none}
  .footer-nav{grid-template-columns:1fr;gap:1.2rem}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .scroll-bar{transition:none}
}