/* =========================================================
   大发黄金 · 共享站点样式 /assets/site.css
   黑金蓝图 · 叠纸索引 · 等宽编号
   ========================================================= */

/* ---------- 1. 变量 ---------- */
:root{
  --ink:#0B0C0E;
  --obsidian:#14161A;
  --graphite:#2A2E35;
  --gold:#D6A84F;
  --gold-hi:#F2C96D;
  --copper:#A66B32;
  --wine:#6E1F2A;
  --paper:#E9E1D2;
  --cream:#F7F1E5;
  --blueprint:#7F98A8;

  --hair:rgba(214,168,79,.24);
  --hair-soft:rgba(233,225,210,.12);
  --ink-line:rgba(11,12,14,.16);
  --text-dim:rgba(233,225,210,.72);
  --text-mute:rgba(233,225,210,.55);

  --shell-max:1180px;
  --font-sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --ease:cubic-bezier(.2,.72,.2,1);
}

/* ---------- 2. Reset ---------- */
*,*::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,pre,fieldset{ margin:0 }
ul,ol{ margin:0; padding:0 }
img,svg,video{ display:block; max-width:100% }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0 }
a{ color:var(--gold-hi); text-decoration-color:rgba(214,168,79,.45); text-underline-offset:3px }
a:hover{ color:var(--gold) }
:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:2px }
::selection{ background:rgba(214,168,79,.3); color:var(--cream) }

/* ---------- 3. 基础排版与蓝图底 ---------- */
body{
  min-height:100vh;
  background-color:var(--ink);
  color:var(--cream);
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(70vw 44vw at 84% -12%, rgba(214,168,79,.12), transparent 62%),
    radial-gradient(46vw 40vw at -6% 6%, rgba(110,31,42,.18), transparent 70%),
    repeating-linear-gradient(0deg, rgba(127,152,168,.055) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(127,152,168,.055) 0 1px, transparent 1px 96px);
  background-repeat:no-repeat,no-repeat,repeat,repeat;
}
h1,h2,h3,h4{ font-weight:800; line-height:1.14; letter-spacing:-.01em; color:var(--cream) }
strong{ font-weight:700; color:var(--cream) }
#main-content{ display:block; scroll-margin-top:120px }

/* ---------- 4. 布局容器 ---------- */
.shell{
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,48px);
}
.shell--wide{ max-width:1360px }
.shell--narrow{ max-width:820px }

.section{ position:relative; padding-block:clamp(52px,8vw,108px) }
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;
  margin-bottom:clamp(24px,3.4vw,44px);
}
.section__body{ margin-top:clamp(20px,3vw,36px) }
.hairline{
  height:1px;
  border:0;
  background:linear-gradient(90deg, var(--hair), rgba(214,168,79,.04) 70%, transparent);
}

/* ---------- 5. 文字组件 ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.75em;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow::before{
  content:"";
  width:24px;
  height:1px;
  background:linear-gradient(90deg, var(--gold-hi), rgba(214,168,79,.1));
}
.display-title{
  font-size:clamp(38px,6.2vw,88px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.025em;
  text-shadow:0 1px 0 rgba(242,201,109,.14);
}
.section-title{ font-size:clamp(23px,3vw,38px); font-weight:800; line-height:1.18; letter-spacing:-.015em }
.lede{
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.85;
  color:var(--text-dim);
  max-width:62ch;
}
.section-index{
  display:block;
  font-family:var(--font-mono);
  font-weight:200;
  font-size:clamp(52px,10vw,128px);
  line-height:.82;
  letter-spacing:-.04em;
  color:rgba(214,168,79,.5);
}
@supports ((-webkit-text-stroke:1px #000) and (-webkit-text-fill-color:transparent)){
  .section-index{
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px rgba(214,168,79,.55);
    color:rgba(214,168,79,.4);
  }
}
.mono{ font-family:var(--font-mono); font-weight:500; letter-spacing:.06em; font-variant-numeric:tabular-nums }

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:2px;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), filter .2s var(--ease);
}
.btn--gold{
  background:linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 58%, var(--copper) 100%);
  border-color:rgba(242,201,109,.85);
  color:#14100A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px -18px rgba(214,168,79,.9);
}
.btn--gold:hover{ color:#14100A; filter:brightness(1.07) }
.btn--gold:active{ transform:translateY(1px) }
.btn--ghost{
  border-color:var(--hair);
  background:rgba(233,225,210,.04);
  color:var(--cream);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-hi); background:rgba(214,168,79,.1) }
.btn--sm{ padding:9px 16px; font-size:12.5px; letter-spacing:.08em }

/* ---------- 7. 页头 ---------- */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:300;
  transform:translateY(-180%);
  padding:10px 18px;
  border-radius:2px;
  background:var(--gold-hi);
  color:#14100A;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  transition:transform .22s var(--ease);
}
.skip-link:focus{ transform:translateY(0); color:#14100A }

.site-header{
  position:sticky;
  top:0;
  z-index:90;
  color:var(--cream);
  background:linear-gradient(180deg, rgba(11,12,14,.99) 0%, rgba(11,12,14,.93) 72%, rgba(11,12,14,.97) 100%);
  border-bottom:1px solid var(--hair);
  backdrop-filter:blur(12px);
}
.site-header[data-scrolled]{ box-shadow:0 22px 48px -36px #000 }
.header-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  z-index:3;
  background:linear-gradient(90deg, var(--wine), var(--copper) 30%, var(--gold) 60%, var(--gold-hi));
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
  pointer-events:none;
}

.header-upper{
  border-bottom:1px solid var(--hair-soft);
  background:linear-gradient(90deg, rgba(20,22,26,.92), rgba(11,12,14,.5));
}
.header-upper__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(12px,3vw,40px);
  padding-block:10px;
  transition:padding .26s var(--ease);
}
.site-header[data-scrolled] .header-upper__inner{ padding-block:6px }

.brand{
  display:inline-flex;
  align-items:baseline;
  gap:14px;
  flex:0 0 auto;
  text-decoration:none;
  color:var(--cream);
}
.brand__mark{
  font-size:clamp(18px,2vw,21px);
  font-weight:800;
  letter-spacing:.07em;
  line-height:1.1;
  color:var(--gold-hi);
  background:linear-gradient(100deg, var(--gold-hi), var(--gold) 55%, var(--copper));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand:hover .brand__mark{ filter:brightness(1.12) }
.brand__line{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--blueprint);
  white-space:nowrap;
}
.header-note{
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(233,225,210,.5);
  white-space:nowrap;
}
.header-stamp{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 9px;
  border:1px solid var(--hair);
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  white-space:nowrap;
  background:rgba(214,168,79,.05);
}
.header-stamp__tag{ color:var(--gold-hi) }
.header-stamp__text{ color:rgba(127,152,168,.95) }

.header-lower__inner{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:16px;
  min-height:56px;
}

.nav{ display:flex; align-items:stretch; min-width:0 }
.nav__list{ display:flex; align-items:stretch; list-style:none }
.nav__item{ display:flex }
.nav__item + .nav__item{ border-left:1px solid var(--hair-soft) }
.nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 clamp(10px,1.5vw,20px);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.05em;
  color:rgba(247,241,229,.74);
  text-decoration:none;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .28s var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible{
  color:var(--gold-hi);
  background:rgba(214,168,79,.07);
  text-decoration:none;
}
.nav__link:hover::after,
.nav__link:focus-visible::after{ transform:scaleX(1) }
.nav__link[aria-current="page"]{
  color:var(--gold-hi);
  background:rgba(214,168,79,.1);
}
.nav__link[aria-current="page"]::after{ transform:scaleX(1) }
.nav__link[aria-current="page"] .nav__index{ color:var(--gold-hi) }
.nav__index{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.12em;
  color:rgba(127,152,168,.85);
  transition:color .2s var(--ease);
}
.nav__text{ white-space:nowrap }

.header-actions{ display:flex; align-items:center; gap:12px; flex:0 0 auto }
.header-cta{ white-space:nowrap }

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border:1px solid var(--hair);
  border-radius:2px;
  background:rgba(233,225,210,.04);
  color:var(--cream);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  cursor:pointer;
}
.nav-toggle:hover{ border-color:var(--gold); color:var(--gold-hi) }
.nav-toggle__bars{ display:inline-flex; flex-direction:column; gap:4px; width:18px }
.nav-toggle__bar{
  display:block;
  height:1.5px;
  width:100%;
  background:var(--gold-hi);
  transition:transform .26s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{ transform:translateY(2.75px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{ transform:translateY(-2.75px) rotate(-45deg) }
.nav-toggle__label{ white-space:nowrap }

/* ---------- 8. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(56px,8vw,110px);
  padding-bottom:26px;
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg, var(--ink) 0%, var(--obsidian) 58%, var(--ink) 100%);
  color:var(--cream);
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(46vw 30vw at 88% 0%, rgba(214,168,79,.14), transparent 64%),
    repeating-linear-gradient(0deg, rgba(127,152,168,.06) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(127,152,168,.06) 0 1px, transparent 1px 72px);
}
.footer-rule{
  position:relative;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 22%, var(--copper) 70%, transparent);
  opacity:.7;
}
.footer-top{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(36px,5vw,64px) clamp(28px,4vw,48px);
  border-bottom:1px solid var(--hair-soft);
}
.footer-brand__mark{
  font-family:var(--font-sans);
  font-size:clamp(22px,2.4vw,27px);
  font-weight:800;
  letter-spacing:.07em;
  line-height:1.1;
  color:var(--gold-hi);
  background:linear-gradient(100deg, var(--gold-hi), var(--gold) 58%, var(--copper));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.footer-brand__summary{
  margin-top:16px;
  max-width:36ch;
  font-size:14px;
  line-height:1.9;
  color:var(--text-dim);
}
.footer-brand__meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--blueprint);
  flex-wrap:wrap;
}
.footer-brand__mono{ color:rgba(127,152,168,.95) }
.footer-brand__dot{ color:var(--copper) }

.footer-nav__title,
.footer-contact__title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--gold);
  padding-bottom:10px;
  border-bottom:1px solid var(--hair-soft);
  margin-bottom:16px;
}
.footer-nav__list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 18px;
  list-style:none;
}
.footer-nav__item{ display:flex }
.footer-nav__link{
  position:relative;
  padding-left:12px;
  font-size:13.5px;
  color:rgba(247,241,229,.76);
  text-decoration:none;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.footer-nav__link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:5px;
  height:1px;
  background:var(--copper);
  transition:width .2s var(--ease), background-color .2s var(--ease);
}
.footer-nav__link:hover,
.footer-nav__link:focus-visible{ color:var(--gold-hi); text-decoration:none }
.footer-nav__link:hover::before,
.footer-nav__link:focus-visible::before{ width:9px; background:var(--gold-hi) }

.footer-contact__list{ display:grid; gap:12px }
.footer-contact__row{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:start }
.footer-contact__row dt{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--blueprint);
  padding-top:2px;
}
.footer-contact__row dd{ margin:0 }
.footer-contact__value{
  font-size:13.5px;
  line-height:1.7;
  color:rgba(247,241,229,.88);
  overflow-wrap:anywhere;
}
.footer-contact__value--mono{ font-family:var(--font-mono); letter-spacing:.06em }
.footer-contact__note{
  margin-top:16px;
  padding-left:11px;
  border-left:2px solid var(--wine);
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-mute);
}

.footer-base{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  flex-wrap:wrap;
  padding-top:22px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:rgba(127,152,168,.9);
}
.footer-base__icp{ color:rgba(233,225,210,.62) }
.footer-base__copy{ color:rgba(233,225,210,.62) }
.footer-base__sig{ color:rgba(214,168,79,.72) }

/* ---------- 9. 面包屑 ---------- */
.crumbs{ font-size:12px; letter-spacing:.06em; color:var(--blueprint) }
.crumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  list-style:none;
}
.crumbs__item{ display:flex; align-items:center; gap:8px }
.crumbs__link{
  color:rgba(233,225,210,.7);
  text-decoration:none;
  transition:color .18s var(--ease);
}
.crumbs__link:hover{ color:var(--gold-hi); text-decoration:underline }
.crumbs__sep{ color:var(--copper); font-family:var(--font-mono) }
.crumbs__current{ color:var(--gold-hi) }
.crumbs [aria-current="page"]{ color:var(--gold-hi) }

/* ---------- 10. 网格 ---------- */
.grid{ display:grid; gap:clamp(18px,3vw,40px) }
.grid--12{ grid-template-columns:repeat(12, minmax(0,1fr)) }
.grid--12 > *{ grid-column:span 12 }
.grid--split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
.grid--split-rev{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
.span-4{ grid-column:span 4 }
.span-5{ grid-column:span 5 }
.span-6{ grid-column:span 6 }
.span-7{ grid-column:span 7 }
.span-8{ grid-column:span 8 }
.span-12{ grid-column:span 12 }

/* ---------- 11. 卡片与标签 ---------- */
.card{
  position:relative;
  padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--hair);
  border-radius:3px;
  background:linear-gradient(158deg, rgba(20,22,26,.97), rgba(11,12,14,.97));
  color:var(--cream);
  box-shadow:inset 0 1px 0 rgba(233,225,210,.05);
}
.card__title{ font-size:clamp(17px,1.6vw,21px); font-weight:700; line-height:1.35; letter-spacing:0 }
.card__meta{
  display:block;
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--blueprint);
}
.card--paper{
  background:linear-gradient(168deg, var(--paper), #DED4C1);
  border-color:rgba(11,12,14,.22);
  color:var(--ink);
  box-shadow:0 26px 50px -40px #000, 0 2px 0 rgba(11,12,14,.18);
}
.card--paper .card__title{ color:var(--ink) }
.card--paper .card__meta{ color:rgba(11,12,14,.6) }
.card--paper p{ color:rgba(11,12,14,.78) }
.card--mark::after{
  content:"";
  position:absolute;
  top:-1px;
  right:-1px;
  width:20px;
  height:20px;
  background:linear-gradient(221deg, var(--gold) 0 49%, transparent 50%);
  pointer-events:none;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:3px 8px;
  border:1px solid currentColor;
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.6;
  color:var(--gold);
  white-space:nowrap;
}
.tag--wine{ color:#D08A93; border-color:rgba(110,31,42,.9); background:rgba(110,31,42,.28) }
.tag--paper{ color:var(--ink); border-color:rgba(11,12,14,.3); background:var(--paper) }

/* ---------- 12. 表格 ---------- */
.table-scroll{ overflow-x:auto; border:1px solid var(--hair); border-radius:3px }
.data-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:14px;
  line-height:1.65;
}
.data-table th,
.data-table td{
  padding:13px 16px;
  text-align:left;
  border-bottom:1px solid var(--hair-soft);
  vertical-align:top;
}
.data-table thead th{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--gold);
  background:rgba(214,168,79,.07);
  border-bottom:1px solid var(--hair);
  white-space:nowrap;
}
.data-table tbody tr:last-child td{ border-bottom:0 }
.data-table tbody tr:hover td{ background:rgba(214,168,79,.05) }
.data-table td{ color:var(--text-dim) }
.data-table td strong{ color:var(--cream) }

/* ---------- 13. 展开组 ---------- */
.accordion{ border-top:1px solid var(--hair) }
.accordion__item{ border-bottom:1px solid var(--hair) }
.accordion__trigger{
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:18px 4px;
  text-align:left;
  font-size:clamp(14.5px,1.3vw,16.5px);
  font-weight:600;
  color:var(--cream);
  cursor:pointer;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.accordion__trigger::after{
  content:"+";
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:18px;
  line-height:1;
  color:var(--gold);
  transition:color .2s var(--ease);
}
.accordion__trigger:hover{ color:var(--gold-hi) }
.accordion__trigger[aria-expanded="true"]{ color:var(--gold-hi) }
.accordion__item[data-open] .accordion__trigger::after{ content:"–"; color:var(--gold-hi) }
.accordion__panel{
  padding:0 4px 22px;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-dim);
}
.accordion__panel[hidden]{ display:none }
@keyframes gd-panel-in{
  from{ opacity:0; transform:translateY(-4px) }
  to{ opacity:1; transform:translateY(0) }
}
@media (prefers-reduced-motion: no-preference){
  .accordion__panel:not([hidden]){ animation:gd-panel-in .28s var(--ease) both }
}

/* ---------- 14. 目录 ---------- */
.toc{ position:relative }
.toc__list{
  list-style:none;
  border-left:1px solid var(--hair);
}
.toc__item{ display:block }
.toc__link{
  display:block;
  margin-left:-1.5px;
  padding:9px 0 9px 16px;
  border-left:2px solid transparent;
  font-size:13px;
  line-height:1.5;
  color:rgba(233,225,210,.66);
  text-decoration:none;
  transition:color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.toc__link:hover{ color:var(--gold-hi); background:rgba(214,168,79,.06) }
.toc__link[aria-current="true"]{
  color:var(--gold-hi);
  border-left-color:var(--gold);
  background:linear-gradient(90deg, rgba(214,168,79,.14), transparent 85%);
}

/* ---------- 15. 图片容器基础 ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border:1px solid var(--hair);
  border-radius:3px;
  background:
    radial-gradient(circle at 72% 18%, rgba(214,168,79,.28), transparent 58%),
    radial-gradient(circle at 18% 82%, rgba(110,31,42,.34), transparent 62%),
    repeating-linear-gradient(0deg, rgba(127,152,168,.14) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(127,152,168,.14) 0 1px, transparent 1px 34px),
    linear-gradient(160deg, var(--obsidian), var(--ink));
}
.media-frame--wide{ aspect-ratio:21 / 9 }
.media-frame--tall{ aspect-ratio:4 / 5 }
.media-frame--square{ aspect-ratio:1 / 1 }
.media-frame__img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame__caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--blueprint);
}

/* ---------- 16. 响应式 ---------- */
@media (max-width:1080px){
  .header-note{ display:none }
  .footer-top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .footer-brand{ grid-column:1 / -1 }
}

@media (max-width:900px){
  .header-lower__inner{ align-items:center; min-height:54px }
  .nav-toggle{ display:inline-flex }

  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:block;
    max-height:calc(100dvh - 96px);
    overflow-y:auto;
    background:linear-gradient(180deg, #101216 0%, var(--ink) 100%);
    border-bottom:1px solid var(--hair);
    box-shadow:0 28px 64px -20px rgba(0,0,0,.85);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s var(--ease);
  }
  .nav[data-open]{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .nav__list{ flex-direction:column; align-items:stretch }
  .nav__item{ border-left:0; border-top:1px solid var(--hair-soft) }
  .nav__item:first-child{ border-top:0 }
  .nav__link{
    width:100%;
    justify-content:flex-start;
    padding:16px clamp(18px,4vw,32px);
    font-size:15px;
  }
  .nav__link::after{
    left:clamp(18px,4vw,32px);
    right:auto;
    width:calc(100% - clamp(36px,8vw,64px));
  }
  .nav__index{ font-size:11px; color:rgba(214,168,79,.8) }

  .grid--split,
  .grid--split-rev,
  .grid--12{ grid-template-columns:minmax(0,1fr) }
  .grid--12 > *{ grid-column:1 / -1 }

  .nav-toggle__label{ display:none }
  .footer-top{ gap:32px }
}

@media (max-width:720px){
  .brand__line{ display:none }
  .header-stamp{ display:none }
  .footer-nav__list{ grid-template-columns:minmax(0,1fr) }
}

@media (max-width:620px){
  .footer-top{ grid-template-columns:minmax(0,1fr) }
  .footer-base{ flex-direction:column; align-items:flex-start; gap:8px }
  .footer-contact__row{ grid-template-columns:minmax(0,1fr); gap:2px }
  .header-cta{ display:none }
  .section__head{ align-items:flex-start }
  .data-table{ min-width:480px }
}

/* ---------- 17. 动效与可访问性 ---------- */
@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-behavior:auto !important;
  }
  .skip-link{ transition:none }
}