@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');

:root{
  --ink:#12211F;
  --gold:#D9A441;
  --cream:#F5F1E8;
  --line:rgba(217,164,65,.32);
  --line-soft:rgba(217,164,65,.16);
  --display:'Poiret One','Didact Gothic',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --body:'Didact Gothic',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --r:10px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--ink);
}

body{
  margin:0;
  min-height:100%;
  padding-bottom:clamp(94px,14vh,120px);
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(217,164,65,.12), transparent 70%),
    var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}

a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:#f0c470; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* 底部固定导航 */
.tray{
  position:fixed;
  inset:auto 0 0 0;
  z-index:60;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(18,33,31,.86), rgba(18,33,31,.98));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));
}
.tray-inner{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:1240px;
  margin:0 auto;
  min-height:54px;
}
.tray-nav{
  order:1;
  flex:1 1 auto;
  min-width:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:4px;
}
.tray-set{ display:flex; align-items:center; gap:2px; margin:0; min-width:0; }
.tray-set--left{ justify-content:flex-end; }
.tray-set--right{ justify-content:flex-start; }
.tray-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:42px;
  padding:9px 10px;
  border-radius:var(--r);
  color:var(--cream);
  font-size:16px;
  white-space:nowrap;
  text-decoration:none;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.tray-link:hover,
.tray-link:focus-visible{ background:rgba(217,164,65,.14); color:var(--gold); transform:translateY(-1px); }
.tray-link.is-hit{ background:rgba(217,164,65,.24); color:var(--gold); }
.tray-dot{
  width:5px;
  height:5px;
  flex:0 0 5px;
  border-radius:50%;
  background:var(--gold);
  opacity:.5;
  transition:opacity .25s ease, transform .25s ease;
}
.tray-link:hover .tray-dot{ opacity:1; transform:scale(1.6); }
.tray-brand{ margin:0; padding:0 8px; }
.tray-brand a{
  font-family:var(--display);
  font-size:20px;
  letter-spacing:.22em;
  color:var(--gold);
  text-decoration:none;
  white-space:nowrap;
}
.tray-search{ order:2; flex:0 0 auto; margin:0; }
.tray-input{
  width:clamp(78px,16vw,170px);
  min-height:42px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(245,241,232,.04);
  color:var(--cream);
  font-family:inherit;
  font-size:16px;
  outline:none;
}
.tray-input::placeholder{ color:rgba(245,241,232,.5); }
.tray-input:focus{ border-color:var(--gold); background:rgba(217,164,65,.1); }

/* 报头海报 */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:70vh;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:20px;
  padding:clamp(70px,12vh,110px) 20px clamp(62px,10vh,96px);
  text-align:center;
  border-bottom:1px solid var(--line);
  scroll-margin-bottom:130px;
}
.hero-dots{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(circle, rgba(217,164,65,.55) 1px, transparent 1.5px);
  background-size:24px 24px;
  opacity:.34;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 8%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 46%, #000 8%, transparent 72%);
}
.hero::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(660px,84vw);
  height:min(660px,84vw);
  transform:translate(-50%,-50%);
  border:1px solid rgba(217,164,65,.22);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
.hero-figure{
  position:absolute;
  inset:0;
  margin:0;
  z-index:1;
  pointer-events:none;
}
.hero-plate{
  position:absolute;
  height:clamp(140px,26vh,250px);
  width:auto;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:var(--r);
  filter:saturate(.9) contrast(1.05);
  opacity:.88;
}
.hero-plate--1{
  left:clamp(8px,4vw,64px);
  top:clamp(26px,8vh,96px);
  transform:rotate(-6deg);
  animation:float-a 9s ease-in-out infinite;
}
.hero-plate--2{
  right:clamp(8px,4vw,64px);
  bottom:clamp(26px,8vh,88px);
  transform:rotate(5deg);
  animation:float-b 11s ease-in-out infinite;
}
@keyframes float-a{ 50%{ transform:rotate(-3deg) translateY(-10px); } }
@keyframes float-b{ 50%{ transform:rotate(2.5deg) translateY(10px); } }

.hero-stack{
  position:relative;
  z-index:3;
  display:grid;
  gap:14px;
  justify-items:center;
  max-width:820px;
}
.hero-kicker{
  margin:0;
  font-family:var(--display);
  font-size:15px;
  letter-spacing:.44em;
  color:var(--gold);
}
.hero-title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(40px,10vw,104px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:.04em;
  background:linear-gradient(175deg, #F5F1E8 8%, #F5F1E8 52%, #D9A441 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  will-change:transform;
}
.hero-title span{
  display:inline-block;
  animation:rise .85s cubic-bezier(.2,.72,.2,1) both;
  animation-delay:calc(var(--i,0) * 55ms + 90ms);
}
@keyframes rise{
  from{ opacity:0; transform:translateY(.55em) rotate(6deg) scale(.94); filter:blur(4px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}

/* 正文与侧栏 */
.spread{
  display:grid;
  grid-template-columns:minmax(0,1fr) 278px;
  gap:56px;
  align-items:start;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(36px,6vw,64px) 20px 72px;
}
.prose{ min-width:0; }
.prose article{
  padding:clamp(26px,4vw,44px) 0;
  border-bottom:1px solid var(--line-soft);
  scroll-margin-bottom:130px;
}
.prose article:first-child{ padding-top:0; }
.prose article:last-child{ border-bottom:0; padding-bottom:0; }
.prose h2{
  margin:0 0 12px;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px,4.6vw,40px);
  line-height:1.22;
  letter-spacing:.03em;
  color:var(--cream);
}
.prose h2::after{
  content:"";
  display:block;
  width:72px;
  height:2px;
  margin-top:14px;
  background:linear-gradient(90deg,var(--gold),rgba(217,164,65,0));
}
.prose .subtitle{
  margin:0 0 20px;
  color:var(--gold);
  font-size:16px;
  letter-spacing:.06em;
}
.prose h3{ margin:26px 0 10px; font-size:20px; font-weight:400; color:var(--gold); }
.prose p{ margin:0 0 16px; }
.prose ul,
.prose ol{ margin:0 0 18px; padding-left:1.25em; }
.prose li{ margin:9px 0; }
.prose li::marker{ color:var(--gold); }
.prose figure{ margin:24px 0; }
.prose figure img{ width:100%; height:auto; }
.prose img{ height:auto; border-radius:var(--r); border:1px solid var(--line); }
.prose aside{
  margin:24px 0;
  padding:18px 20px;
  border:1px solid var(--line);
  border-left-width:3px;
  border-radius:var(--r);
  background:rgba(217,164,65,.06);
}
.prose blockquote{
  margin:24px 0;
  padding:14px 20px;
  border-left:2px solid var(--gold);
  color:rgba(245,241,232,.86);
}
.prose hr{ border:0; border-top:1px solid var(--line-soft); margin:32px 0; }
.prose strong{ color:var(--gold); font-weight:400; }

.rail{
  position:sticky;
  top:28px;
  padding:22px 20px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(217,164,65,.05);
}
.rail-title{
  margin:0 0 8px;
  font-family:var(--display);
  font-weight:400;
  font-size:22px;
  letter-spacing:.14em;
  color:var(--gold);
}
.rail .subtitle{
  margin:0 0 18px;
  font-size:16px;
  letter-spacing:.04em;
  color:rgba(245,241,232,.64);
}
.rail-nav{ display:grid; gap:2px; }
.rail-item{ margin:0; }
.rail-item a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:6px 8px;
  border-radius:8px;
  color:var(--cream);
  font-size:16px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.rail-item a:hover{ background:rgba(217,164,65,.16); color:var(--gold); }
.rail-num{ font-family:var(--display); font-size:15px; letter-spacing:.1em; color:var(--gold); }

/* 页脚 */
.colophon{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 28px;
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 40px;
  border-top:1px solid var(--line);
}
.colo-brand{ display:grid; gap:6px; max-width:420px; }
.colo-mark{
  font-family:var(--display);
  font-size:20px;
  letter-spacing:.2em;
  color:var(--gold);
  text-decoration:none;
}
.colo-desc{ margin:0; font-size:16px; line-height:1.6; color:rgba(245,241,232,.62); }
.colo-nav{ display:flex; flex-wrap:wrap; gap:2px; }
.colo-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:6px 9px;
  border-radius:8px;
  color:var(--cream);
  font-size:16px;
  text-decoration:none;
}
.colo-nav a:hover{ color:var(--gold); background:rgba(217,164,65,.14); }
.colo-copy{ margin:0; font-size:16px; color:rgba(245,241,232,.55); }

/* 回到顶部 */
.lift{
  position:fixed;
  right:14px;
  bottom:calc(78px + env(safe-area-inset-bottom,0px));
  z-index:70;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:rgba(18,33,31,.92);
  color:var(--gold);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.lift.on{ opacity:1; transform:none; pointer-events:auto; }

/* 滚动显现 */
.js .prose article{ opacity:0; transform:translateY(26px); }
.js .prose article.in{
  opacity:1;
  transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.72,.2,1);
}

@media (max-width:900px){
  .spread{ grid-template-columns:1fr; gap:34px; padding-bottom:56px; }
  .rail{ position:static; }
}

@media (max-width:720px){
  .tray-nav{ display:flex; overflow-x:auto; scrollbar-width:none; gap:2px; }
  .tray-nav::-webkit-scrollbar{ display:none; }
  .tray-set{ flex:0 0 auto; }
  .tray-brand{ order:0; padding:0 4px; }
  .hero{ min-height:auto; padding-top:74px; padding-bottom:60px; }
  .hero-plate{ height:clamp(108px,17vh,158px); opacity:.55; }
  .hero-plate--1{ left:-16px; top:16px; }
  .hero-plate--2{ right:-16px; bottom:16px; }
  .colo-brand{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-title span{ animation:none; }
  .hero-plate{ animation:none; }
  .js .prose article{ opacity:1; transform:none; }
  *{ transition-duration:.01ms !important; }
}

button[aria-expanded]{min-width:44px;min-height:44px}