/* ============================================================
   乐鱼 · 赛事战报中心 — 共享样式 /assets/site.css
   1 变量与重置 · 2 中文排版 · 3 布局 · 4 组件
   5 头部 · 6 页脚 · 7 动效与响应式
   ============================================================ */

/* ---------- 1. 变量与重置 ---------- */
:root{
  --basin:#06283D;
  --current:#0B3C5D;
  --cyan:#0E8C9E;
  --shallow:#7FE3E8;
  --orange:#FF6B2C;
  --orange-deep:#E2551A;
  --coral:#D9454C;
  --paper:#F6F1E7;
  --card:#FFFDF8;
  --ink:#1C2B33;
  --mist:#5A6E78;
  --rule:#DCD3C4;

  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,serif;
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  --maxw:1240px;
  --gutter:clamp(16px,3.4vw,40px);
  --radius-lg:clamp(22px,3.6vw,44px);
  --radius-md:clamp(16px,2.2vw,26px);
  --shadow-soft:0 24px 60px -34px rgba(6,40,61,.55);
  --stack:1.25rem;
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button{font-family:inherit;font-size:inherit}

a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--basin)}

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:6px;
}

#main-content{scroll-margin-top:112px}

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

.skip-link{
  position:fixed;
  top:-90px;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  padding:10px 20px;
  border-radius:0 0 16px 16px;
  background:var(--basin);
  color:var(--card);
  font-weight:800;
  font-size:14px;
  box-shadow:var(--shadow-soft);
  transition:top .22s ease;
}
.skip-link:focus{top:0;color:var(--card)}

/* ---------- 2. 中文排版 ---------- */
.display-title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(30px,4.4vw,44px);
  line-height:1.18;
  letter-spacing:-.012em;
  color:var(--basin);
  max-width:22em;
}
.section-title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(22px,2.6vw,26px);
  line-height:1.32;
  color:var(--basin);
  letter-spacing:-.005em;
}
.sub-title{
  font-family:var(--font-sans);
  font-weight:800;
  font-size:17px;
  line-height:1.45;
  color:var(--basin);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-sans);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--cyan);
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  border-radius:2px;
  background:var(--orange);
  flex:0 0 auto;
}
.lede{
  font-size:17px;
  line-height:1.8;
  color:var(--mist);
  max-width:38em;
}
.prose{
  max-width:38em;
  font-size:17px;
  line-height:1.8;
  color:var(--ink);
}
.prose p + p{margin-top:1em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.data{
  font-family:var(--font-mono);
  font-size:15.5px;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.title-accent{
  position:relative;
  display:inline-block;
  isolation:isolate;
}
.title-accent::after{
  content:"";
  position:absolute;
  left:-.06em;right:-.06em;bottom:.04em;
  height:.32em;
  background:rgba(127,227,232,.62);
  transform:skewX(-2deg);
  border-radius:2px;
  z-index:-1;
}

/* ---------- 3. 布局 ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:880px}

.section{padding-block:clamp(40px,6vw,80px)}

.stack > * + *{margin-top:var(--stack)}

.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--aside{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
.grid--sidebar{
  grid-template-columns:minmax(220px,24%) minmax(0,1fr);
  align-items:start;
}

.rule{height:1px;border:0;background:var(--rule);margin:0}
.rule--dashed{height:0;background:none;border-top:1px dashed var(--rule)}

/* ---------- 4. 组件 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.68em 1.3em;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--basin);
  color:var(--card);
  font-family:var(--font-sans);
  font-weight:800;
  font-size:14.5px;
  line-height:1.2;
  letter-spacing:.01em;
  text-align:center;
  cursor:pointer;
  text-decoration:none;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}

.btn--primary{background:var(--orange);border-color:var(--orange);color:#08232F}
.btn--primary:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:#08232F}

.btn--cyan{background:var(--cyan);border-color:var(--cyan);color:#F2FDFF}
.btn--cyan:hover{background:var(--current);border-color:var(--current);color:#F2FDFF}

.btn--ghost{background:rgba(6,40,61,.05);border-color:var(--rule);color:var(--basin)}
.btn--ghost:hover{background:var(--basin);border-color:var(--basin);color:var(--card)}

.btn--onink{background:transparent;border-color:rgba(255,253,248,.42);color:var(--card)}
.btn--onink:hover{background:var(--shallow);border-color:var(--shallow);color:var(--basin)}

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

.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  padding:clamp(18px,2.4vw,28px);
}
.card--ink{
  background:var(--basin);
  border-color:transparent;
  color:rgba(255,253,248,.86);
}
.card--ink .sub-title,.card--ink .section-title{color:var(--card)}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(127,227,232,.28);
  color:var(--current);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.5;
}
.tag--orange{background:rgba(255,107,44,.18);color:#A93A0C}
.tag--coral{background:rgba(217,69,76,.15);color:#A82B33}
.tag--ink{background:var(--basin);color:var(--paper)}

.note{
  border-left:3px solid var(--shallow);
  padding:6px 0 6px 14px;
  font-size:14px;
  line-height:1.72;
  color:var(--mist);
}

.breadcrumb{font-size:13.5px;color:var(--mist)}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px}
.breadcrumb li + li::before{content:"/";color:var(--rule)}
.breadcrumb a{color:var(--current);text-decoration:underline;text-underline-offset:3px}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:700}

/* 图片容器基础（页面阶段放置实拍/占位） */
.media-frame{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:linear-gradient(148deg,var(--current) 0%,var(--cyan) 58%,var(--shallow) 100%);
  isolation:isolate;
}
.media-frame > img,
.media-frame > picture > img,
.media-frame > .media-ph{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(112deg,rgba(246,241,231,.14) 0 2px,transparent 2px 16px);
  opacity:.55;
  mix-blend-mode:screen;
}
.media-frame--plain::after{display:none}
.media-frame--16x9{aspect-ratio:16/9}
.media-frame--4x3{aspect-ratio:4/3}
.media-frame--1x1{aspect-ratio:1/1}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--cut{
  border-radius:var(--radius-md) var(--radius-md) clamp(56px,9vw,110px) var(--radius-md);
}

/* 分段标签 */
.tablist{
  display:inline-flex;
  gap:4px;
  padding:5px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:999px;
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:thin;
}
.tab{
  appearance:none;
  border:0;
  background:transparent;
  padding:8px 16px;
  border-radius:999px;
  font-family:var(--font-sans);
  font-weight:800;
  font-size:14px;
  line-height:1.4;
  color:var(--mist);
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.tab:hover{color:var(--basin);background:rgba(127,227,232,.22)}
.tab[aria-selected="true"]{background:var(--basin);color:var(--card)}
.tab-panel{margin-top:18px}
.tab-panel[hidden]{display:none}

/* ---------- 5. 头部 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  padding:12px 0 10px;
  background:linear-gradient(180deg,rgba(246,241,231,.98) 0%,rgba(246,241,231,.88) 60%,rgba(246,241,231,0) 100%);
}
.header-shell{
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.nav-capsule{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(8px,1.2vw,18px);
  padding:8px 10px 8px 16px;
  border-radius:999px;
  background:var(--basin);
  box-shadow:0 18px 40px -28px rgba(6,40,61,.9),inset 0 1px 0 rgba(127,227,232,.2);
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  padding-right:6px;
  color:var(--card);
  text-decoration:none;
}
.brand-mark:hover{color:var(--card)}
.brand-glyph{
  width:26px;height:26px;
  flex:0 0 auto;
  border-radius:50%;
  background:radial-gradient(circle at 30% 24%,var(--shallow) 0%,var(--cyan) 56%,var(--current) 100%);
  box-shadow:inset 0 0 0 2px rgba(6,40,61,.35);
}
.brand-text{display:flex;flex-direction:column;line-height:1.06}
.brand-name{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:16px;
  letter-spacing:.06em;
}
.brand-sub{
  font-family:var(--font-sans);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.12em;
  color:rgba(127,227,232,.8);
}

.primary-nav{flex:1 1 auto;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-link{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:700;
  color:rgba(255,253,248,.76);
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .18s ease,color .18s ease;
}
.nav-link:hover{background:rgba(127,227,232,.14);color:var(--card)}
.nav-link[aria-current="page"]{background:var(--shallow);color:#06283D}
.nav-link[aria-current="page"]:hover{background:var(--shallow);color:#06283D}

.nav-cta{flex:0 0 auto;padding:.55em 1.06em;font-size:13.5px}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:40px;height:40px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(127,227,232,.32);
  background:rgba(127,227,232,.14);
  color:var(--card);
  cursor:pointer;
}
.nav-toggle:hover{background:rgba(127,227,232,.26)}
.nav-toggle-bars{
  position:relative;
  display:block;
  width:16px;height:2px;
  border-radius:2px;
  background:currentColor;
  transition:background-color .2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s ease,top .2s ease;
}
.nav-toggle-bars::before{top:-5px}
.nav-toggle-bars::after{top:5px}
.site-header[data-open] .nav-toggle-bars{background:transparent}
.site-header[data-open] .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
.site-header[data-open] .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}

.scroll-meter{
  position:absolute;
  left:clamp(20px,4vw,64px);
  right:clamp(20px,4vw,64px);
  bottom:-6px;
  height:2px;
  border-radius:2px;
  overflow:hidden;
  pointer-events:none;
}
.scroll-meter-fill{
  display:block;
  height:100%;
  width:var(--scroll,0%);
  border-radius:2px;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--shallow) 58%,var(--orange) 100%);
}

/* ---------- 6. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(56px,9vw,110px);
  padding:0;
  background:var(--basin);
  color:rgba(255,253,248,.8);
  border-radius:clamp(30px,7vw,90px) clamp(30px,7vw,90px) 0 0;
  overflow:hidden;
  isolation:isolate;
}
.footer-water{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% -6%,rgba(14,140,158,.62),transparent 46%),
    radial-gradient(circle at 88% 8%,rgba(127,227,232,.24),transparent 42%),
    radial-gradient(circle at 62% 124%,rgba(255,107,44,.16),transparent 52%);
}
.footer-inner{
  position:relative;
  z-index:1;
  padding-block:clamp(40px,6vw,72px) 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,56px);
}
.footer-brand{max-width:36ch}
.footer-brand-link{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--font-serif);
  font-weight:700;
  font-size:24px;
  letter-spacing:.05em;
  color:var(--card);
  text-decoration:none;
}
.footer-brand-link:hover{color:var(--card)}
.footer-brand-link span{
  font-family:var(--font-sans);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--shallow);
}
.footer-intro{
  margin-top:14px;
  font-size:14.5px;
  line-height:1.8;
  color:rgba(255,253,248,.72);
}
.footer-stat{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  line-height:1.7;
  color:rgba(127,227,232,.86);
}
.footer-contact{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:rgba(255,253,248,.78);
}
.footer-col{min-width:0}
.footer-col-title{
  margin-bottom:12px;
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--shallow);
}
.footer-list{display:flex;flex-direction:column;gap:2px}
.footer-link{
  display:inline-block;
  padding:5px 0;
  font-size:14.5px;
  color:rgba(255,253,248,.78);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.footer-link:hover{color:var(--card);border-bottom-color:var(--orange)}
.footer-meta{
  margin-top:clamp(28px,4.5vw,52px);
  padding-top:18px;
  border-top:1px solid rgba(255,253,248,.16);
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  justify-content:space-between;
  align-items:center;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:rgba(255,253,248,.6);
}
.footer-legal{color:rgba(255,253,248,.7)}
.footer-note{max-width:46ch;line-height:1.7}

/* ---------- 7. 动效与响应式 ---------- */
.reveal-ready [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .26s ease,transform .26s ease;
  will-change:opacity,transform;
}
.reveal-ready [data-reveal].is-visible{
  opacity:1;
  transform:none;
}

@media (max-width:1080px){
  .primary-nav{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    z-index:6;
    flex:none;
    padding:10px;
    border-radius:26px;
    background:var(--basin);
    box-shadow:0 26px 54px -28px rgba(6,40,61,.85);
  }
  .site-header[data-open] .primary-nav{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px}
  .nav-link{
    display:block;
    padding:11px 14px;
    border-radius:14px;
    font-size:14.5px;
    white-space:normal;
  }
  .nav-link[aria-current="page"]{background:rgba(127,227,232,.9)}
  .nav-toggle{display:inline-flex}
  .nav-cta{margin-left:auto}
}

@media (max-width:900px){
  .grid--2,.grid--3,.grid--aside,.grid--sidebar{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1;max-width:none}
}

@media (max-width:640px){
  body{font-size:16px}
  .site-header{padding-top:10px}
  .nav-capsule{padding:7px 8px 7px 13px;gap:8px}
  .brand-name{font-size:15px}
  .brand-sub{font-size:10px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .footer-meta{flex-direction:column;align-items:flex-start}
}

@media (max-width:520px){
  .nav-cta{display:none}
  .btn{font-size:14px}
}

@media (max-width:400px){
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .display-title{font-size:clamp(27px,8vw,34px)}
}

@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-ready [data-reveal]{
    opacity:1 !important;
    transform:none !important;
  }
  .btn:hover{transform:none}
}