/* ============================================================
   CQ游艺馆 · 共享站点样式  /assets/site.css
   ============================================================ */

:root{
  --paper:#F4EFE6;
  --paper-2:#EAE2D4;
  --ink:#1C1B18;
  --ink-soft:#2E2A24;
  --ink-2:#57534A;
  --silver:#4F7280;
  --silver-2:#A9C0C7;
  --cinnabar:#C24E2A;
  --cinnabar-2:#E8B39E;
  --mist:#7C8179;
  --gold:#B08A4F;

  --line:rgba(28,27,24,.16);
  --line-strong:rgba(28,27,24,.30);
  --line-light:rgba(244,239,230,.16);

  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono","SFMono-Regular",Consolas,monospace;

  --ease:cubic-bezier(0.2,0.7,0.3,1);
  --header-h:68px;
  --shell:1320px;
  --gutter:clamp(20px,4vw,64px);
}

@media (max-width:1019px){
  :root{ --header-h:60px; }
}

/* ---------- reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

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

body,
h1,h2,h3,h4,h5,h6,
p,figure,blockquote,dl,dd,dt,ul,ol{
  margin:0;
}

ul,ol{ padding:0; list-style:none; }

img,svg,video{ display:block; max-width:100%; height:auto; }

button,input,select,textarea{ font:inherit; color:inherit; }

button{ background:none; border:0; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--cinnabar-2); color:var(--ink); }

/* ---------- 中文排版基线 ---------- */
body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 12% 6%, rgba(169,192,199,.22), transparent 44%),
    radial-gradient(circle at 88% -4%, rgba(232,179,158,.18), transparent 40%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

@media (min-width:768px){
  body{ font-size:17px; }
}

h1,h2,h3,h4,h5{
  line-height:1.2;
  letter-spacing:-0.01em;
  font-weight:400;
  color:var(--ink);
}

h1{
  font-size:clamp(2rem,4.6vw,3.5rem);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-0.02em;
}

h2{ font-size:clamp(1.5rem,2.8vw,2.25rem); }
h3{ font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:600; line-height:1.35; }
h4{ font-size:1rem; font-weight:600; }

strong,b{ font-weight:700; }

p{ text-wrap:pretty; }

.display{
  font-size:clamp(2.5rem,7vw,7.5rem);
  font-weight:300;
  line-height:0.96;
  letter-spacing:-0.035em;
}

.mono{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
}

/* ---------- 焦点与可访问性 ---------- */
:focus-visible{
  outline:2px solid var(--cinnabar);
  outline-offset:3px;
  border-radius:2px;
}

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

#main-content{ scroll-margin-top:calc(var(--header-h) + 20px); }

.skip-link{
  position:absolute;
  left:16px;
  top:-72px;
  z-index:200;
  display:inline-block;
  padding:11px 18px;
  background:var(--ink);
  color:var(--paper);
  font-size:14px;
  letter-spacing:.04em;
  border-radius:2px;
  transition:top 160ms var(--ease);
}

.skip-link:focus{ top:12px; }

/* ---------- 布局 ---------- */
.container{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.container--narrow{ max-width:880px; }

.section{ padding-block:clamp(48px,7vw,96px); }

.band{
  background:var(--paper-2);
  padding-block:clamp(40px,6vw,72px);
  border-block:1px solid var(--line);
}

.band--ink{
  background:var(--ink);
  color:var(--paper);
  border-block-color:rgba(244,239,230,.14);
}

.band--ink h1,
.band--ink h2,
.band--ink h3{ color:var(--paper); }

.grid{
  display:grid;
  gap:clamp(20px,2.4vw,32px);
}

.grid--12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
}

@media (max-width:899px){
  .grid--12{ grid-template-columns:minmax(0,1fr); }
}

@media (min-width:900px){
  .col-3{ grid-column:span 3; }
  .col-4{ grid-column:span 4; }
  .col-5{ grid-column:span 5; }
  .col-6{ grid-column:span 6; }
  .col-7{ grid-column:span 7; }
  .col-8{ grid-column:span 8; }
  .col-9{ grid-column:span 9; }
  .col-10{ grid-column:span 10; }
  .col-12{ grid-column:span 12; }
}

/* ---------- 区块抬头 ---------- */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.16em;
  color:var(--silver);
  text-transform:uppercase;
}

.kicker::before{
  content:"";
  width:24px;
  height:1px;
  background:var(--cinnabar);
  flex:none;
}

.kicker--bare::before{ display:none; }

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(28px,4vw,48px);
}

.section-title{
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:300;
  letter-spacing:-0.015em;
}

.rule{
  height:1px;
  border:0;
  background:var(--line);
  margin-block:clamp(28px,4vw,48px);
}

.frame{
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:rgba(234,226,212,.28);
  padding:clamp(20px,2.6vw,36px);
}

.panel{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:2px;
  padding:clamp(20px,2.4vw,32px);
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 22px;
  font-size:.875rem;
  letter-spacing:.03em;
  line-height:1.4;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background-color 160ms var(--ease),
             color 160ms var(--ease),
             border-color 160ms var(--ease),
             transform 160ms var(--ease);
}

.btn:hover{
  transform:translateY(-2px);
  border-color:var(--ink);
}

.btn--primary{
  background:var(--cinnabar);
  border-color:var(--cinnabar);
  color:#FFF9F4;
}

.btn--primary:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

.btn--ghost{
  border-color:var(--line-strong);
  color:var(--ink-2);
}

.btn--ghost:hover{
  border-color:var(--silver);
  color:var(--silver);
  background:rgba(169,192,199,.16);
}

.btn--block{ width:100%; }

/* ---------- 标签与筛选 ---------- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 15px;
  font-size:.8125rem;
  line-height:1.5;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:transparent;
  color:var(--ink-2);
  cursor:pointer;
  transition:background-color 140ms var(--ease),
             border-color 140ms var(--ease),
             color 140ms var(--ease);
}

.chip:hover{
  border-color:var(--silver);
  color:var(--silver);
}

.chip[aria-pressed="true"],
.chip.is-active{
  background:var(--cinnabar-2);
  border-color:var(--cinnabar);
  color:#6B2A14;
}

.tag{
  display:inline-block;
  padding:4px 9px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  line-height:1.5;
  color:var(--silver);
  border:1px solid rgba(79,114,128,.42);
  border-radius:2px;
}

/* ---------- 面包屑 ---------- */
.breadcrumbs{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-2);
}

.breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.breadcrumbs li{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.breadcrumbs li + li::before{
  content:"/";
  color:var(--silver-2);
}

.breadcrumbs a{
  transition:color 140ms var(--ease);
  border-bottom:1px solid transparent;
}

.breadcrumbs a:hover{
  color:var(--silver);
  border-bottom-color:var(--silver-2);
}

.breadcrumbs [aria-current="page"]{ color:var(--ink); }

/* ---------- 正文排版 ---------- */
.prose{
  max-width:68ch;
  color:var(--ink-soft);
}

.prose > :first-child{ margin-top:0; }

.prose p,
.prose ul,
.prose ol,
.prose dl{ margin-top:1.5em; }

.prose h2{
  font-size:clamp(1.4rem,2.3vw,1.9rem);
  font-weight:400;
  margin-top:2.2em;
  color:var(--ink);
}

.prose h3{
  font-size:1.15rem;
  font-weight:600;
  margin-top:1.9em;
  color:var(--ink);
}

.prose ul{ padding-left:1.15em; }

.prose ul li{
  position:relative;
  padding-left:.9em;
}

.prose ul li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--silver-2);
}

.prose ol{
  padding-left:1.4em;
  list-style:decimal;
}

.prose ol li::marker{
  font-family:var(--font-mono);
  color:var(--silver);
  font-size:.85em;
}

.prose a{
  color:var(--silver);
  border-bottom:1px solid var(--silver-2);
  transition:color 140ms var(--ease), border-color 140ms var(--ease);
}

.prose a:hover{
  color:var(--cinnabar);
  border-bottom-color:var(--cinnabar-2);
}

.prose strong{ color:var(--ink); }

/* ---------- 图片容器基础规则 ---------- */
.media-frame{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:2px;
  background-color:var(--paper-2);
  background-image:
    linear-gradient(135deg, rgba(79,114,128,.09) 25%, transparent 25%),
    linear-gradient(225deg, rgba(79,114,128,.09) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(194,78,42,.06) 75%);
  background-size:18px 18px, 18px 18px, 18px 18px;
  background-position:0 0, 0 0, 0 0;
}

.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:1px;
}

.media-frame--wide{ aspect-ratio:16 / 9; }
.media-frame--banner{ aspect-ratio:21 / 9; }
.media-frame--tall{ aspect-ratio:3 / 4; }
.media-frame--square{ aspect-ratio:1 / 1; }

.media-frame__cap{
  position:absolute;
  left:0;
  bottom:0;
  padding:6px 11px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--paper);
  background:rgba(28,27,24,.78);
  border-top-right-radius:2px;
}

.figure-caption{
  margin-top:10px;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--ink-2);
}

/* ---------- 纵向索引条 ---------- */
.index-rail{
  position:sticky;
  top:calc(var(--header-h) + 28px);
  align-self:start;
  border-left:1px solid var(--line);
}

.index-rail ol{
  display:grid;
  gap:2px;
}

.index-rail a{
  display:block;
  margin-left:-1px;
  padding:8px 10px 8px 14px;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--ink-2);
  border-left:2px solid transparent;
  transition:color 160ms var(--ease),
             border-color 160ms var(--ease),
             background-color 160ms var(--ease);
}

.index-rail a:hover{ color:var(--ink); }

.index-rail a[aria-current="true"]{
  color:var(--silver);
  border-left-color:var(--cinnabar);
  background:linear-gradient(90deg, rgba(169,192,199,.26), rgba(169,192,199,0));
}

@media (max-width:899px){
  .index-rail{
    position:static;
    border-left:0;
    padding-bottom:4px;
    overflow-x:auto;
    scrollbar-width:thin;
  }

  .index-rail ol{
    display:flex;
    gap:6px;
    padding-bottom:2px;
  }

  .index-rail a{
    margin-left:0;
    white-space:nowrap;
    border:1px solid var(--line);
    border-radius:2px;
    padding:7px 13px;
    font-size:.8125rem;
  }

  .index-rail a[aria-current="true"]{
    border-color:var(--cinnabar);
    background:var(--cinnabar-2);
    color:#6B2A14;
  }
}

/* ============================================================
   头部命令栏
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(244,239,230,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,28px);
  width:100%;
  max-width:var(--shell);
  min-height:var(--header-h);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
  padding-block:8px;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:none;
  border:1px solid var(--silver);
  border-radius:2px;
  color:var(--silver);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  line-height:1;
  transition:background-color 160ms var(--ease), color 160ms var(--ease);
}

.brand:hover .brand-mark{
  background:var(--silver);
  color:var(--paper);
}

.brand-text{
  display:block;
  line-height:1.15;
}

.brand-name{
  display:block;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ink);
}

.brand-sub{
  display:block;
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.16em;
  color:var(--ink-2);
}

/* 导航 */
.site-nav{ margin-left:auto; }

.nav-list{
  counter-reset:navitem;
  display:flex;
  align-items:center;
  gap:clamp(8px,1.5vw,22px);
}

.nav-list li{ counter-increment:navitem; }

.nav-list a{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:8px 2px;
  font-size:.8125rem;
  line-height:1.4;
  letter-spacing:.01em;
  color:var(--ink-soft);
  transition:color 160ms var(--ease);
}

.nav-list a::before{
  content:counter(navitem, decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.08em;
  color:var(--gold);
  opacity:.85;
}

.nav-list a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--cinnabar);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 200ms var(--ease);
}

.nav-list a:hover{ color:var(--ink); }
.nav-list a:hover::after{ transform:scaleX(1); }

.nav-list a[aria-current="page"]{
  color:var(--cinnabar);
}

.nav-list a[aria-current="page"]::after{
  transform:scaleX(1);
}

.nav-foot{
  display:none;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

/* 顶部 CTA */
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  margin-left:clamp(6px,1.2vw,16px);
  padding:10px 17px;
  font-size:.8125rem;
  letter-spacing:.03em;
  line-height:1.4;
  white-space:nowrap;
  color:#FFF9F4;
  background:var(--cinnabar);
  border:1px solid var(--cinnabar);
  border-radius:2px;
  transition:background-color 160ms var(--ease),
             border-color 160ms var(--ease),
             transform 160ms var(--ease);
}

.header-cta:hover{
  background:var(--ink);
  border-color:var(--ink);
  transform:translateY(-2px);
}

/* 移动端按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  flex:none;
  margin-left:auto;
  padding:8px 12px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  line-height:1.4;
  cursor:pointer;
  transition:border-color 160ms var(--ease), color 160ms var(--ease);
}

.nav-toggle:hover{
  border-color:var(--silver);
  color:var(--silver);
}

.nav-toggle-bars{
  position:relative;
  display:block;
  width:16px;
  height:9px;
  flex:none;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;
  height:1px;
  background:currentColor;
  transition:transform 180ms var(--ease);
}

.nav-toggle-bars::before{ top:0; }
.nav-toggle-bars::after{ bottom:0; }

.site-header[data-open] .nav-toggle-bars::before{
  transform:translateY(4px) rotate(45deg);
}

.site-header[data-open] .nav-toggle-bars::after{
  transform:translateY(-4px) rotate(-45deg);
}

/* 阅读进度 */
.header-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--cinnabar);
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
}

/* 响应式命令栏 */
@media (max-width:1019px){
  .nav-toggle{ display:inline-flex; }

  .site-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    display:none;
    margin-left:0;
    padding:6px var(--gutter) 26px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 22px 34px -26px rgba(28,27,24,.55);
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
  }

  .site-header[data-open] .site-nav{ display:block; }

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .nav-list li{ border-bottom:1px solid var(--line); }

  .nav-list a{
    justify-content:flex-start;
    width:100%;
    padding:14px 0;
    font-size:.95rem;
  }

  .nav-list a::before{ opacity:1; }

  .nav-list a::after{ display:none; }

  .nav-list a[aria-current="page"]{
    padding-left:10px;
    background:linear-gradient(90deg, rgba(232,179,158,.30), rgba(232,179,158,0));
  }

  .nav-foot{ display:block; }

  .header-cta{ margin-left:auto; }
}

@media (max-width:560px){
  .header-cta{ display:none; }
  .brand-sub{ display:none; }
  .nav-toggle{ margin-left:auto; }
}

/* ============================================================
   页脚
   ============================================================ */
.site-footer{
  margin-top:clamp(56px,8vw,112px);
  background:var(--ink);
  color:#DCD5C7;
  border-top:1px solid var(--cinnabar);
}

.footer-inner{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(48px,6vw,80px) var(--gutter) 0;
}

.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(36px,5vw,72px);
}

@media (min-width:860px){
  .footer-top{
    grid-template-columns:minmax(240px,1.05fr) minmax(0,1.6fr);
  }
}

.footer-brand-block{ max-width:34ch; }

.footer-brand{
  font-size:clamp(1.5rem,2.6vw,2.25rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--paper);
}

.footer-tagline{
  margin-top:14px;
  font-size:.95rem;
  line-height:1.7;
  color:var(--silver-2);
}

.footer-note{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line-light);
  font-size:.8125rem;
  line-height:1.75;
  color:#9C9A8F;
}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}

@media (max-width:560px){
  .footer-cols{ grid-template-columns:minmax(0,1fr); gap:26px; }
}

.footer-col-title{
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  line-height:1.5;
  color:var(--gold);
}

.footer-links li + li{ margin-top:10px; }

.footer-links a{
  display:inline-block;
  font-size:.9rem;
  line-height:1.6;
  color:#DCD5C7;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color 160ms var(--ease), border-color 160ms var(--ease);
}

.footer-links a:hover,
.footer-links a:focus-visible{
  color:var(--paper);
  border-bottom-color:var(--cinnabar);
}

.footer-panel{
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line-light);
}

.contact-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:22px 32px;
}

.contact-item{ min-width:0; }

.contact-label{
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  line-height:1.5;
  color:var(--silver-2);
}

.contact-value{
  margin:0;
  font-size:.9rem;
  line-height:1.65;
  color:var(--paper);
  overflow-wrap:anywhere;
}

.contact-value--mono{
  font-family:var(--font-mono);
  font-size:.92rem;
  letter-spacing:.02em;
}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 28px;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding:22px var(--gutter) 30px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.6;
  color:#8E8778;
}

.footer-legal{ color:#A9A294; }

/* ============================================================
   入场动画（JS 写入 data-reveal="in"）
   ============================================================ */
[data-reveal]{
  transition:opacity 240ms var(--ease), transform 240ms var(--ease);
}

html[data-anim="on"] [data-reveal]:not([data-reveal="in"]){
  opacity:0;
  transform:translateY(12px);
}

/* ============================================================
   降级动效
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

  .btn:hover,
  .header-cta:hover{ transform:none; }

  html[data-anim="on"] [data-reveal]:not([data-reveal="in"]){
    opacity:1;
    transform:none;
  }
}