/* /assets/site.css — 财神CN 全站共享样式 */

/* 1. 设计令牌 */
:root{
  --cinnabar:#B7282E;
  --cinnabar-deep:#7E1B20;
  --gold:#C9A227;
  --gold-light:#E8D48A;
  --ink:#171412;
  --ink-soft:#2A2521;
  --paper:#F7F1E6;
  --glow:#EFE4CF;
  --warm-gray:#6B625A;
  --celadon:#3E7C6A;
  --sea:#2E5F8A;

  --font-display:"Songti SC","Source Han Serif CN","Noto Serif SC","STSong",serif;
  --font-body:"PingFang SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"JetBrains Mono","IBM Plex Mono","SFMono-Regular",Menlo,monospace;

  --rail-w:96px;
  --maxw:1280px;
  --gap:24px;
  --pad:20px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --radius:4px;
  --hairline:1px solid rgba(23,20,18,.14);
}

@media (min-width:768px){
  :root{--pad:24px;--gap:28px;}
}

/* 2. Reset 与基础 */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 16% 8%, rgba(201,162,39,.07), transparent 44%),
    radial-gradient(circle at 86% 82%, rgba(183,40,46,.05), transparent 46%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-0.02em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2rem,5vw,4rem);}
h2{font-size:clamp(1.5rem,2.6vw,2.5rem);}
h3{font-size:clamp(1.15rem,1.6vw,1.5rem);}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img{display:block;max-width:100%;height:auto;}
button{font:inherit;color:inherit;}
address{font-style:normal;}
a{color:var(--sea);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--cinnabar);}
::selection{background:var(--gold-light);color:var(--ink);}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--ink);
  border-radius:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.muted{color:var(--warm-gray);}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;}

/* 3. 跳转链接 */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  transform:translateY(-180%);
  background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:var(--radius);
  font-size:14px;text-decoration:none;
  border:1px solid var(--gold);
  transition:transform 160ms var(--ease);
}
.skip-link:focus{transform:translateY(0);color:var(--gold-light);}

/* 4. 左侧品牌轨道 */
.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail-w);z-index:70;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:24px 0 26px;
  color:var(--paper);
  background-color:var(--cinnabar);
  background-image:linear-gradient(180deg,var(--cinnabar) 0%,var(--cinnabar-deep) 66%,#5C1216 100%);
}
.rail::after{
  content:"";position:absolute;inset:0 0 0 auto;width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,162,39,.9),transparent);
}
.rail__brand{
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-size:20px;font-weight:800;
  letter-spacing:.3em;
  color:var(--paper);
  text-decoration:none;
  padding:12px 0;
  border-block:1px solid rgba(232,212,138,.5);
  transition:color 240ms var(--ease);
}
.rail__brand:hover,.rail__brand:focus-visible{color:var(--gold-light);}
.rail__gauge{
  position:relative;
  width:2px;flex:1;min-height:80px;
  margin:22px 0;
}
.rail__gauge-track{
  position:absolute;inset:0;
  background:rgba(247,241,230,.22);
  border-radius:2px;
}
.rail__gauge-fill{
  position:absolute;inset:0;
  border-radius:2px;
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform 100ms linear;
}
.rail__links{
  display:flex;flex-direction:column;
  align-items:center;gap:14px;
}
.rail__link{
  writing-mode:vertical-rl;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.22em;
  color:rgba(247,241,230,.74);
  text-decoration:none;
  padding:6px 2px;
  transition:color 240ms var(--ease);
}
.rail__link:hover,.rail__link:focus-visible{color:var(--gold-light);}

/* 5. 居中刊头 */
.masthead{
  position:sticky;top:0;z-index:60;
  background:rgba(247,241,230,.94);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:var(--hairline);
  padding-block:12px;
  transition:padding 240ms var(--ease),box-shadow 240ms var(--ease);
}
.masthead.is-compact{
  padding-block:8px;
  box-shadow:0 2px 20px rgba(23,20,18,.09);
}
.masthead__progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--cinnabar),var(--gold));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 80ms linear;
}
.masthead__inner{
  position:relative;
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;flex-direction:column;
  gap:14px;
}
.masthead__top{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
}
.utility{
  display:none;
  align-items:center;gap:18px;
  justify-self:start;
}
.utility__link{
  font-size:13px;
  color:var(--warm-gray);
  text-decoration:none;
  letter-spacing:.04em;
  transition:color 240ms var(--ease);
}
.utility__link:hover,.utility__link:focus-visible{color:var(--cinnabar);}
.masthead__brandwrap{justify-self:start;text-align:left;min-width:0;}
.masthead__brand{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(1.45rem,2.4vw,2rem);
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.1;
  color:var(--ink);
  text-decoration:none;
  transition:color 240ms var(--ease);
}
.masthead__brand:hover,.masthead__brand:focus-visible{color:var(--cinnabar);}
.masthead__sub{
  display:none;
  margin:6px 0 0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--warm-gray);
}
.masthead__actions{
  justify-self:end;
  display:flex;align-items:center;gap:12px;
}
.masthead__cta{
  display:none;
  padding:8px 16px;
  font-size:14px;font-weight:600;
  letter-spacing:.04em;
  background:var(--cinnabar);
  color:var(--paper);
  text-decoration:none;
  border:1px solid var(--cinnabar-deep);
  border-radius:var(--radius);
  transition:background 240ms var(--ease),color 240ms var(--ease),border-color 240ms var(--ease);
}
.masthead__cta:hover,.masthead__cta:focus-visible{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.nav-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:transparent;
  color:var(--ink);
  border:1px solid rgba(23,20,18,.3);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color 240ms var(--ease),color 240ms var(--ease);
}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--gold);color:var(--cinnabar);}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:3px;width:16px;}
.nav-toggle__bars span{
  display:block;height:2px;border-radius:1px;
  background:currentColor;
  transition:transform 240ms var(--ease),opacity 160ms var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
.nav-toggle__text{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.12em;
}

.nav{
  position:absolute;
  left:0;right:0;top:100%;
  display:none;
  background:var(--paper);
  border-top:var(--hairline);
  border-bottom:1px solid rgba(23,20,18,.2);
  padding:12px var(--pad) 18px;
  box-shadow:0 18px 30px rgba(23,20,18,.12);
}
.nav[data-open]{display:block;animation:navDrop 240ms var(--ease) both;}
.nav__list{display:flex;flex-direction:column;gap:0;}
.nav__link{
  display:block;
  padding:12px 4px;
  font-size:16px;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(23,20,18,.1);
  transition:color 240ms var(--ease),border-color 240ms var(--ease);
}
.nav__link:hover,.nav__link:focus-visible{color:var(--cinnabar);border-bottom-color:var(--gold-light);}
.nav__link[aria-current="page"]{
  color:var(--cinnabar);
  font-weight:700;
  border-bottom-color:var(--gold);
}
@keyframes navDrop{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:none;}
}

/* 6. 移动端底部快捷坞 */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--ink);
  border-top:1px solid rgba(201,162,39,.42);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock__item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 4px 12px;
  color:rgba(247,241,230,.72);
  text-decoration:none;
  border-right:1px solid rgba(247,241,230,.08);
  transition:color 240ms var(--ease),background 240ms var(--ease);
}
.dock__item:last-child{border-right:0;}
.dock__item:hover,.dock__item:focus-visible{
  color:var(--gold-light);
  background:rgba(201,162,39,.1);
}
.dock__icon{
  width:14px;height:14px;
  border:1.5px solid currentColor;
  border-radius:3px;
  display:block;
}
.dock__item:nth-child(2) .dock__icon{border-radius:50%;}
.dock__item:nth-child(3) .dock__icon{transform:rotate(45deg);border-radius:2px;}
.dock__item:nth-child(4) .dock__icon{border-radius:50% 2px 50% 2px;}
.dock__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
}

/* 7. 通用容器与节奏 */
.container{
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{
  position:relative;
  padding-block:clamp(48px,7vw,96px);
}
.section--tight{padding-block:clamp(32px,4vw,56px);}
.section--ink{
  background:var(--ink);
  color:rgba(247,241,230,.86);
}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:var(--paper);}
.section--ink a{color:var(--gold-light);}
.section--glow{
  background:linear-gradient(180deg,rgba(239,228,207,0),var(--glow) 38%,rgba(239,228,207,0));
}
.stack{display:flex;flex-direction:column;gap:var(--gap);}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}

.grid{display:grid;gap:var(--gap);}
.grid--2,.grid--3{grid-template-columns:1fr;}
.grid--12{grid-template-columns:repeat(4,1fr);}

/* 8. 文字组件 */
.display{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-0.02em;
  margin:0 0 18px;
}
.display--xl{font-size:clamp(2.4rem,6vw,4.5rem);}
.display--lg{font-size:clamp(2rem,4vw,2.5rem);}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cinnabar);
  margin:0 0 14px;
}
.eyebrow::before{
  content:"";display:block;
  width:24px;height:1px;
  background:var(--gold);
}
.section--ink .eyebrow{color:var(--gold-light);}
.lede{
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.8;
  color:var(--warm-gray);
  max-width:64ch;
  margin:0 0 24px;
}
.section--ink .lede{color:rgba(247,241,230,.74);}
.prose{
  max-width:70ch;
  font-size:17px;
  line-height:1.85;
  color:var(--ink);
}
.prose h2{margin:2em 0 .6em;font-size:1.6rem;}
.prose h3{margin:1.8em 0 .5em;font-size:1.2rem;}
.prose p{margin:0 0 1.1em;}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.35em;list-style:revert;}
.prose li{margin-bottom:.4em;}
.prose a{color:var(--sea);text-decoration:underline;text-underline-offset:3px;}

/* 9. 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;
  border-radius:var(--radius);
  border:1px solid transparent;
  font-family:var(--font-body);
  font-size:15px;font-weight:600;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  transition:background 240ms var(--ease),color 240ms var(--ease),
             border-color 240ms var(--ease),transform 240ms var(--ease);
}
.btn--primary{background:var(--cinnabar);color:var(--paper);border-color:var(--cinnabar-deep);}
.btn--primary:hover,.btn--primary:focus-visible{
  background:var(--cinnabar-deep);color:var(--paper);border-color:var(--gold);
}
.btn--gold{background:var(--gold);color:var(--ink);border-color:#A8871D;}
.btn--gold:hover,.btn--gold:focus-visible{background:var(--gold-light);color:var(--ink);border-color:var(--gold);}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(23,20,18,.4);}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* 10. 卡片与标签 */
.panel{
  background:var(--glow);
  border:1px solid rgba(23,20,18,.12);
  border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);
  transition:transform 240ms var(--ease),border-color 240ms var(--ease),box-shadow 240ms var(--ease);
}
.panel--link{cursor:pointer;}
.panel--link:hover,.panel--link:focus-within{
  transform:translateY(-2px);
  border-color:var(--gold);
  box-shadow:0 10px 24px rgba(23,20,18,.09);
}
.panel__title{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:800;
  line-height:1.3;
  margin:0 0 8px;
}
.panel__meta{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--warm-gray);
  margin:0;
}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  padding:4px 10px;
  border-radius:100px;
  background:var(--gold-light);
  color:var(--ink);
  border:1px solid rgba(23,20,18,.12);
}
.tag--sea{background:rgba(46,95,138,.12);color:var(--sea);border-color:rgba(46,95,138,.32);}
.tag--celadon{background:rgba(62,124,106,.12);color:var(--celadon);border-color:rgba(62,124,106,.32);}
.tag--red{background:rgba(183,40,46,.1);color:var(--cinnabar);border-color:rgba(183,40,46,.3);}

/* 11. 分隔与面包屑 */
.rule{
  display:flex;align-items:center;gap:14px;
  margin:32px 0;
  color:var(--gold);
}
.rule::before,.rule::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,rgba(201,162,39,0),rgba(201,162,39,.65),rgba(201,162,39,0));
}
.rule__dot{
  width:6px;height:6px;flex:none;
  background:var(--gold);
  transform:rotate(45deg);
}
.breadcrumb{margin:0 0 24px;padding:0;}
.breadcrumb__list{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--warm-gray);
}
.breadcrumb__list li{display:flex;align-items:center;gap:8px;}
.breadcrumb__list li+li::before{content:"/";color:rgba(107,98,90,.5);}
.breadcrumb__link{color:var(--sea);text-decoration:none;}
.breadcrumb__link:hover,.breadcrumb__link:focus-visible{color:var(--cinnabar);}
.breadcrumb__current{color:var(--ink);}

/* 12. 图片容器基础规则 */
.figure{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(23,20,18,.1);
  aspect-ratio:4/3;
  background-color:var(--glow);
  background-image:
    repeating-linear-gradient(45deg,rgba(201,162,39,.1) 0 1px,transparent 1px 14px),
    radial-gradient(circle at 28% 18%,rgba(183,40,46,.13),transparent 55%),
    radial-gradient(circle at 78% 84%,rgba(46,95,138,.12),transparent 58%);
}
.figure img{width:100%;height:100%;object-fit:cover;}
.figure--wide{aspect-ratio:16/9;}
.figure--tall{aspect-ratio:3/4;}
.figure--square{aspect-ratio:1/1;}
.figure__caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--warm-gray);
}

/* 13. 页脚 */
.site-footer{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:rgba(247,241,230,.78);
  border-top:3px solid var(--cinnabar);
}
.site-footer::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:6px;
  background-image:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 22px);
  opacity:.45;
  pointer-events:none;
}
.footer__glow{
  position:absolute;left:-10%;right:-10%;bottom:-40%;height:420px;
  background:radial-gradient(ellipse at 50% 100%,rgba(201,162,39,.22),transparent 68%);
  pointer-events:none;
}
.footer__inner{
  position:relative;z-index:1;
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding:56px var(--pad) 36px;
  display:grid;
  grid-template-columns:1fr;
  gap:44px;
}
.footer__lead{display:flex;flex-direction:column;align-items:flex-start;}
.footer__brand{
  font-family:var(--font-display);
  font-size:30px;font-weight:800;
  letter-spacing:.08em;
  line-height:1.2;
  color:var(--paper);
  margin:0 0 4px;
}
.footer__brand-accent{color:var(--gold);font-family:var(--font-mono);font-size:.72em;letter-spacing:.06em;}
.footer__tagline{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--gold-light);
  margin:0 0 20px;
}
.footer__summary{
  font-size:15px;
  line-height:1.85;
  color:rgba(247,241,230,.72);
  max-width:40ch;
  margin:0 0 24px;
}
.footer__contact{display:grid;gap:10px;margin:0;padding:0;}
.footer__contact-row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin:0;
  font-size:14px;
  line-height:1.6;
}
.footer__contact-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--gold);
  min-width:44px;
}
.footer__contact-row span{color:rgba(247,241,230,.86);}
.copy-btn{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;
  padding:3px 9px;
  border-radius:2px;
  background:transparent;
  color:var(--gold-light);
  border:1px solid rgba(201,162,39,.45);
  cursor:pointer;
  transition:background 240ms var(--ease),color 240ms var(--ease),border-color 240ms var(--ease);
}
.copy-btn:hover,.copy-btn:focus-visible{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:32px;
}
.footer__col{min-width:0;}
.footer__col-title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  color:var(--gold);
  margin:0 0 14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(247,241,230,.14);
}
.footer__list{display:grid;gap:10px;}
.footer__link{
  display:inline-block;
  font-size:14px;
  color:rgba(247,241,230,.78);
  text-decoration:none;
  transition:color 240ms var(--ease),padding-left 240ms var(--ease);
}
.footer__link:hover,.footer__link:focus-visible{color:var(--gold-light);padding-left:4px;}
.footer__note{
  position:relative;z-index:1;
  width:100%;max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad) 32px;
  font-size:13px;
  line-height:1.8;
  color:rgba(247,241,230,.5);
}
.footer__base{
  position:relative;z-index:1;
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding:20px var(--pad) 28px;
  border-top:1px solid rgba(247,241,230,.12);
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  gap:12px 24px;
  font-size:13px;
  color:rgba(247,241,230,.6);
}
.footer__legal{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
}
.footer__legal-links{display:flex;flex-wrap:wrap;gap:16px;}
.footer__legal-links a{
  font-size:13px;
  color:rgba(247,241,230,.68);
  text-decoration:none;
  transition:color 240ms var(--ease);
}
.footer__legal-links a:hover,.footer__legal-links a:focus-visible{color:var(--gold-light);}

/* 14. 返回顶部与提示 */
.to-top{
  position:fixed;
  right:16px;bottom:88px;z-index:75;
  width:42px;height:42px;
  display:grid;place-items:center;
  background:var(--cinnabar);
  color:var(--paper);
  border:1px solid var(--gold);
  border-radius:50%;
  cursor:pointer;
  opacity:0;visibility:hidden;
  transform:translateY(8px);
  transition:opacity 240ms var(--ease),transform 240ms var(--ease),
             visibility 240ms var(--ease),background 240ms var(--ease);
}
.to-top[data-visible]{opacity:1;visibility:visible;transform:none;}
.to-top:hover,.to-top:focus-visible{background:var(--cinnabar-deep);color:var(--gold-light);}
.to-top__arrow{font-size:16px;line-height:1;}
.toast{
  position:fixed;
  left:50%;bottom:96px;z-index:120;
  transform:translate(-50%,12px);
  padding:10px 20px;
  background:var(--ink);
  color:var(--gold-light);
  border:1px solid rgba(201,162,39,.5);
  border-radius:var(--radius);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 160ms var(--ease);
}
.toast[data-visible]{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* 15. 断点：平板与桌面 */
@media (min-width:768px){
  .grid--2{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .grid--12{grid-template-columns:repeat(12,1fr);}
  .masthead__sub{display:block;}
  .masthead__cta{display:inline-block;}
  .footer__inner{padding-block:72px 44px;}
  .figure--tall{aspect-ratio:3/4;}
}

@media (min-width:960px){
  html{scroll-padding-top:140px;}
  body{padding-left:var(--rail-w);}
  .rail{display:flex;}
  .dock{display:none;}
  .to-top{right:24px;bottom:24px;}
  .toast{bottom:32px;}
  .masthead{padding-block:20px 16px;}
  .masthead__top{grid-template-columns:1fr auto 1fr;gap:16px;}
  .utility{display:flex;}
  .masthead__brandwrap{justify-self:center;text-align:center;}
  .nav-toggle{display:none;}
  .nav{
    position:static;
    display:block;
    background:transparent;
    border-top:1px solid rgba(23,20,18,.1);
    border-bottom:0;
    padding:10px 0 0;
    box-shadow:none;
    animation:none;
  }
  .nav__list{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 30px;}
  .nav__link{
    padding:6px 2px 8px;
    font-size:15px;
    border-bottom:2px solid transparent;
    border-top:0;
  }
  .nav__link[aria-current="page"]{border-bottom-color:var(--gold);}
  .masthead.is-compact .masthead__sub{opacity:0;height:0;margin:0;overflow:hidden;}
  .footer__inner{
    grid-template-columns:1.1fr 1.6fr;
    gap:64px;
    padding-block:80px 52px;
  }
}

@media (min-width:1100px){
  .grid--3{grid-template-columns:repeat(3,1fr);}
  .to-top{width:46px;height:46px;}
}

@media (max-width:959px){
  body{padding-bottom:74px;}
  .footer__inner{padding-top:52px;}
  .footer__base{padding-bottom:100px;}
}

/* 16. 动效降级 */
@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;
  }
  .panel--link:hover,.panel--link:focus-within{transform:none;}
  .to-top{transform:none;}
  .nav[data-open]{animation:none;}
}