/* ============================================================
   V体育主站 · 共享样式表 /assets/site.css
   深空蓝黑数据场 + 蓝图网格 + 悬浮胶囊浮岛
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --bg:#0A0E17;
  --panel:#101828;
  --grid:#1E2A3C;
  --cyan:#00E5FF;
  --orange:#FF6B1A;
  --green:#39FF88;
  --gold:#D9C08A;
  --ink:#E6F7FB;
  --muted:#8C9AAE;
  --white:#FFFFFF;

  --shell:1240px;
  --gutter:clamp(16px, 4vw, 40px);

  --r-pill:999px;
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;

  --font-display:"Inter Tight","Archivo Narrow","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-data:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --ease-out:cubic-bezier(.22,.8,.28,1);
  --band:clamp(48px, 8vw, 110px);
}

/* ---------- 2. 重置与基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

html,body{ min-height:100%; }

body{
  background-color:var(--bg);
  background-image:
    linear-gradient(to right, rgba(30,42,60,.60) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30,42,60,.60) 1px, transparent 1px);
  background-size:88px 88px;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 84% -12%, rgba(0,229,255,.11), transparent 70%),
    radial-gradient(700px 460px at 2% 108%, rgba(255,107,26,.09), transparent 72%);
}

::selection{ background:rgba(0,229,255,.28); color:var(--white); }

/* ---------- 3. 布局工具 ---------- */
.shell{
  width:min(calc(100% - var(--gutter) * 2), var(--shell));
  margin-inline:auto;
}
.section{ padding-block:var(--band); }
.section--tight{ padding-block:clamp(28px, 4vw, 56px); }

.grid{ display:grid; gap:clamp(18px, 2.6vw, 34px); }
.grid--rail{ grid-template-columns:minmax(0,3fr) minmax(0,7fr); }
.grid--split{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.grid--cols{ grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }

.rail{ min-width:0; }
.main-col{ min-width:0; }
.stack{ display:flex; flex-direction:column; gap:clamp(14px, 2vw, 24px); }
.stack--tight{ gap:10px; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }

/* ---------- 4. 排版 ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
}

.index-label{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.display{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px, 6.4vw, 88px);
  line-height:.98;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--white);
  margin:0;
}
.display--cn{
  letter-spacing:.04em;
  text-transform:none;
  transform:skewX(-2deg);
  -webkit-text-stroke:1px rgba(0,229,255,.42);
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.15; letter-spacing:.02em; }

.h-sec{
  font-size:clamp(22px, 3vw, 34px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--white);
}
.h-sub{ font-size:clamp(18px, 2.2vw, 24px); color:var(--white); }

.data-num{
  font-family:var(--font-data);
  font-size:clamp(20px, 2.4vw, 34px);
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.data-num--lg{ font-size:clamp(34px, 5vw, 56px); }

.prose{ max-width:68ch; font-size:17px; line-height:1.75; color:var(--ink); }
.prose p{ margin:0 0 1.4em; }
.prose h2{ font-size:clamp(20px, 2.6vw, 28px); margin:1.8em 0 .6em; color:var(--white); }
.prose h3{ font-size:clamp(18px, 2vw, 21px); margin:1.5em 0 .5em; color:var(--white); }
.prose ul,.prose ol{ padding-left:1.2em; margin:0 0 1.4em; }
.prose ul{ list-style:none; }
.prose ul li{ position:relative; padding-left:1em; }
.prose ul li::before{
  content:"";
  position:absolute;
  left:0; top:.85em;
  width:8px; height:1px;
  background:var(--cyan);
}
.prose ol{ list-style:decimal; }
.prose a{ color:var(--cyan); text-decoration-thickness:1px; text-underline-offset:3px; }
.prose strong{ color:var(--white); }
.muted{ color:var(--muted); }
.lede{ font-size:clamp(17px, 1.8vw, 20px); line-height:1.7; color:var(--ink); }

/* ---------- 5. 按钮与胶囊 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.78em 1.5em;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .22s var(--ease-out), background-color .22s, border-color .22s, color .22s;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn--primary{ background:var(--orange); color:#0A0E17; }
.btn--primary:hover{ background:#FF823F; color:#0A0E17; }

.btn--ghost{
  border-color:rgba(0,229,255,.42);
  background:rgba(0,229,255,.07);
  color:var(--cyan);
}
.btn--ghost:hover{ background:rgba(0,229,255,.15); }

.btn--quiet{
  border-color:var(--grid);
  color:var(--ink);
}
.btn--quiet:hover{ border-color:rgba(0,229,255,.4); color:var(--cyan); }

.btn--sm{ padding:.58em 1.1em; font-size:12px; letter-spacing:.14em; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.34em .9em;
  border:1px solid var(--grid);
  border-radius:var(--r-pill);
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.pill--live{ border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.09); color:var(--cyan); }
.pill--success{ border-color:rgba(57,255,136,.45); background:rgba(57,255,136,.09); color:var(--green); }
.pill--archive{ border-color:rgba(217,192,138,.4); background:rgba(217,192,138,.08); color:var(--gold); }

/* ---------- 6. 面包屑 ---------- */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.5em;
  margin:0 0 18px;
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.crumbs li{ display:flex; align-items:center; gap:.5em; }
.crumbs li + li::before{ content:"/"; color:var(--grid); }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--cyan); }
.crumbs [aria-current="page"]{ color:var(--cyan); }

/* ---------- 7. 面板与网格装饰 ---------- */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--grid);
  border-radius:var(--r-lg);
  padding:clamp(18px, 2.6vw, 32px);
}
.panel--data{ border-color:rgba(217,192,138,.28); }
.panel--data .panel__title{ color:var(--gold); }
.panel--focus{
  border-color:rgba(0,229,255,.42);
  box-shadow:0 0 0 1px rgba(0,229,255,.10), 0 18px 48px -28px rgba(0,229,255,.55);
}
.panel__title{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 14px;
}

.rule{
  height:1px;
  border:0;
  background:var(--grid);
  margin:clamp(20px, 3vw, 36px) 0;
  position:relative;
}
.rule--dotted{
  background-image:repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 14px);
  background-color:transparent;
}

.slant-line{
  position:absolute;
  width:clamp(90px, 16vw, 200px);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan));
  transform:rotate(-6deg);
  transform-origin:left center;
  pointer-events:none;
}
.slant-line--orange{ background:linear-gradient(90deg, transparent, var(--orange)); }

.coord{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.tick-frame{
  position:relative;
  border:1px solid var(--grid);
  border-radius:var(--r-lg);
  padding:clamp(20px, 3vw, 42px);
}
.tick-frame::before,
.tick-frame::after{
  content:"";
  position:absolute;
  left:clamp(20px, 3vw, 42px);
  right:clamp(20px, 3vw, 42px);
  height:6px;
  background-image:repeating-linear-gradient(90deg, rgba(0,229,255,.5) 0 1px, transparent 1px 22px);
  background-repeat:no-repeat;
}
.tick-frame::before{ top:0; }
.tick-frame::after{ bottom:0; }

.fold{ border:1px solid var(--grid); border-radius:var(--r-md); background:var(--panel); overflow:hidden; }
.fold__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}
.fold__body{ padding:0 18px 18px; border-top:1px solid var(--grid); }

/* ---------- 8. 媒体容器（页面阶段放置图片） ---------- */
.media{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border:1px solid var(--grid);
  border-radius:clamp(18px, 2.4vw, var(--r-lg));
  background-color:var(--panel);
  background-image:
    linear-gradient(135deg, rgba(0,229,255,.10), transparent 58%),
    repeating-linear-gradient(45deg, rgba(30,42,60,.85) 0 1px, transparent 1px 14px);
}
.media > img,
.media > picture > img,
.media > video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media__caption{
  position:absolute;
  left:14px;
  bottom:12px;
  z-index:2;
  max-width:calc(100% - 28px);
  padding:6px 12px;
  border:1px solid var(--grid);
  border-radius:var(--r-pill);
  background:rgba(10,14,23,.72);
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.media--wide{ aspect-ratio:21 / 9; }
.media--tall{ aspect-ratio:3 / 4; }
.media--square{ aspect-ratio:1 / 1; }

/* ---------- 9. 头部：悬浮胶囊浮岛 ---------- */
.skip-link{
  position:fixed;
  left:16px;
  top:-80px;
  z-index:200;
  padding:10px 20px;
  border-radius:var(--r-pill);
  background:var(--orange);
  color:#0A0E17;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
  transition:top .22s ease;
}
.skip-link:focus{ top:16px; }

.site-header{
  position:sticky;
  top:0;
  z-index:80;
  padding:clamp(8px, 1.4vw, 18px) var(--gutter);
}

.header-bar{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(10px, 2vw, 26px);
  width:min(100%, var(--shell));
  margin-inline:auto;
  padding:10px 12px 10px 18px;
  border:1px solid var(--grid);
  border-radius:var(--r-pill);
  background:rgba(16,24,40,.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  transition:max-width .38s var(--ease-out), padding .38s var(--ease-out), background-color .3s ease, border-color .3s ease;
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
  min-width:0;
}
.brand__mark{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:1px solid rgba(0,229,255,.4);
  border-radius:var(--r-pill);
  color:var(--cyan);
  background:rgba(0,229,255,.07);
}
.brand__text{ display:flex; flex-direction:column; min-width:0; }
.brand__name{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1.1;
  color:var(--white);
}
.brand__sub{
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  max-height:20px;
  opacity:1;
  transition:opacity .3s ease, max-height .3s ease;
}

/* 导航 */
.site-nav{ min-width:0; }
.nav-list{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  margin:0;
  padding:0;
}
.nav-list__item{ min-width:0; }
.nav-link{
  display:inline-block;
  padding:8px 14px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-size:14px;
  letter-spacing:.08em;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;
}
.nav-link:hover{ color:var(--ink); background:rgba(0,229,255,.08); }
.nav-link[aria-current="page"]{
  color:var(--cyan);
  border-color:rgba(0,229,255,.5);
  background:rgba(0,229,255,.11);
}

/* 回链胶囊 */
.header-actions{ display:flex; align-items:center; justify-content:flex-end; }
.return-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 16px;
  border:1px solid rgba(0,229,255,.36);
  border-radius:var(--r-pill);
  background:rgba(0,229,255,.08);
  color:var(--cyan);
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .22s ease, border-color .22s ease;
}
.return-pill:hover{ background:rgba(0,229,255,.16); border-color:rgba(0,229,255,.6); }
.return-pill__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(57,255,136,.18);
}

/* 移动菜单按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  border:1px solid rgba(0,229,255,.36);
  border-radius:var(--r-pill);
  color:var(--cyan);
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.nav-toggle__bars{ display:inline-flex; flex-direction:column; gap:5px; width:16px; }
.nav-toggle__bars span{
  display:block;
  height:1px;
  width:16px;
  background:currentColor;
  transition:transform .25s var(--ease-out), width .25s var(--ease-out);
}
.nav-toggle__bars span:last-child{ width:10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child{ width:16px; transform:translateY(-3px) rotate(-45deg); }

/* 滚动进度刻度 */
.header-progress{
  width:min(100%, var(--shell));
  margin:10px auto 0;
  height:1px;
  background:var(--grid);
  overflow:hidden;
}
.header-progress__fill{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg, var(--cyan), var(--orange));
  will-change:transform;
}

/* 滚动收起浮岛 */
.site-header.is-condensed .header-bar{
  background:rgba(16,24,40,.94);
  border-color:rgba(0,229,255,.22);
}
@media (min-width:900px){
  .site-header.is-condensed .header-bar{
    max-width:min(80%, 1000px);
    padding-block:6px;
  }
  .site-header.is-condensed .brand__sub{
    opacity:0;
    max-height:0;
  }
}

/* ---------- 10. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(64px, 10vw, 140px);
  background:linear-gradient(180deg, rgba(10,14,23,0) 0%, rgba(16,24,40,.72) 26%, #070A11 100%);
}

.footer-rule{
  height:7px;
  border-top:1px solid var(--grid);
  background-image:repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 28px);
  background-repeat:no-repeat;
  background-size:100% 6px;
  background-position:left top;
  opacity:.4;
}

.footer-inner{
  width:min(calc(100% - var(--gutter) * 2), var(--shell));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(26px, 4vw, 64px);
  padding:clamp(40px, 6vw, 76px) 0 clamp(26px, 3vw, 44px);
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--white);
}
.footer-brand__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(0,229,255,.14);
}
.footer-line{
  margin-top:14px;
  max-width:34ch;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}
.footer-quick{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.footer-quick a{
  display:inline-block;
  padding:8px 0;
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--grid);
  transition:color .2s ease, border-color .2s ease, padding-left .2s ease;
}
.footer-quick a:hover{ color:var(--cyan); border-color:rgba(0,229,255,.45); padding-left:6px; }

.footer-nav{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 2.4vw, 32px);
}
.footer-col__title{
  font-family:var(--font-data);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 14px;
}
.footer-col__list{ display:flex; flex-direction:column; gap:8px; }
.footer-col__list a{
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  transition:color .2s ease;
}
.footer-col__list a:hover{ color:var(--ink); }

.contact-list{ margin:0; display:flex; flex-direction:column; gap:14px; }
.contact-list__row{ display:flex; flex-direction:column; gap:4px; }
.contact-list dt{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.contact-list dd{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--ink);
  word-break:break-word;
}
.contact-note{
  margin-top:16px;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}

.footer-meta{
  width:min(calc(100% - var(--gutter) * 2), var(--shell));
  margin-inline:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 28px;
  padding:18px 0 34px;
  border-top:1px solid var(--grid);
}
.footer-meta p{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.footer-meta__coords{ color:rgba(140,154,174,.7); }

/* ---------- 11. 返回顶部（JS 挂载） ---------- */
.to-top{
  position:fixed;
  right:clamp(14px, 3vw, 32px);
  bottom:clamp(14px, 3vw, 32px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 16px;
  border:1px solid rgba(0,229,255,.4);
  border-radius:var(--r-pill);
  background:rgba(16,24,40,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--cyan);
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s ease, transform .3s var(--ease-out), visibility .3s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:rgba(0,229,255,.15); }
.to-top__ring{
  position:relative;
  display:inline-block;
  width:16px;
  height:16px;
  border:1px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
}
.to-top__ring::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:5px;
  height:5px;
  border-left:1px solid currentColor;
  border-top:1px solid currentColor;
  transform:rotate(45deg) translate(1px, 1px);
}

/* ---------- 12. 显现动效 ---------- */
[data-reveal][data-reveal-ready]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s var(--ease-out);
}
[data-reveal][data-reveal-ready].is-visible{
  opacity:1;
  transform:none;
}

/* ---------- 13. 响应式 ---------- */
@media (max-width:1080px){
  .footer-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
  .footer-contact{ grid-column:1 / -1; }
}

@media (max-width:899px){
  body{ background-attachment:scroll; background-size:64px 64px; }

  .header-bar{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand toggle"
      "nav nav"
      "actions actions";
    gap:10px;
    padding:12px 14px;
    border-radius:var(--r-lg);
  }
  .brand{ grid-area:brand; }
  .nav-toggle{ grid-area:toggle; display:inline-flex; }
  .site-nav{ grid-area:nav; }
  .header-actions{ grid-area:actions; }

  .site-nav{ display:none; }
  .site-nav[data-open]{ display:block; }
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--grid);
  }
  .nav-link{ display:block; padding:12px 12px; border-radius:var(--r-sm); }

  .return-pill{ width:100%; justify-content:center; }

  .grid--rail,
  .grid--split{ grid-template-columns:minmax(0,1fr); }

  .footer-nav{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:720px){
  .footer-inner{ grid-template-columns:minmax(0,1fr); }
  .footer-nav{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .footer-meta{ flex-direction:column; align-items:flex-start; }
  .display{ letter-spacing:.05em; }
}

@media (max-width:640px){
  .media{ aspect-ratio:4 / 3; }
  .media--wide{ aspect-ratio:16 / 9; }
  .media--tall{ aspect-ratio:4 / 5; }
  .brand__sub{ display:none; }
}

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