@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap');

:root{
  --paper:#f5e6c8;
  --paper-deep:#eedab5;
  --paper-soft:#f7ebd3;
  --sepia:#d4a574;
  --sepia-deep:#a97b4c;
  --ink:#262117;
  --ink-soft:#4a3f2e;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --mono:"Space Mono",ui-monospace,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --wide:"Syncopate","Space Mono",ui-monospace,"PingFang SC","Microsoft YaHei",sans-serif;
}

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

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

body{
  margin:0;
  padding-bottom:80px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:17px;
  line-height:1.85;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  background-image:var(--grain);
  background-size:160px 160px;
  opacity:.2;
  mix-blend-mode:multiply;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--sepia-deep);text-underline-offset:3px}

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

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:72px 20px 110px;
  background:linear-gradient(158deg,#e9d0a7,#d4a574 52%,#b98b55 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 7vw));
}

.hero::before{
  content:"";
  position:absolute;
  z-index:2;
  left:-12vw;
  top:6vh;
  width:62vw;
  height:62vw;
  max-width:640px;
  max-height:640px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,232,190,.8),rgba(212,165,116,0) 68%);
  mix-blend-mode:screen;
  pointer-events:none;
}

.hero-media{position:absolute;inset:0;z-index:1}

.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:sepia(.38) saturate(.78) contrast(1.06);
}

.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(38,33,23,.46),rgba(38,33,23,.14) 42%,rgba(38,33,23,.68));
}

.hero-copy{
  position:relative;
  z-index:3;
  max-width:15em;
  text-align:center;
  color:var(--paper);
}

.hero-brand{
  margin:0 0 18px;
  font-size:16px;
  letter-spacing:.42em;
  text-indent:.42em;
  color:#f6e3bd;
  text-shadow:0 2px 10px rgba(38,33,23,.6);
}

.hero-h1{
  margin:0;
  font-family:var(--wide);
  font-weight:700;
  font-size:clamp(1.85rem,6.2vw,4rem);
  line-height:1.26;
  letter-spacing:.06em;
  text-shadow:0 4px 26px rgba(38,33,23,.62);
}

/* ---------- 主体骨架：左侧 aside + 右侧 article ---------- */
.wrap{
  max-width:1160px;
  margin:0 auto;
  padding:0 20px;
}

.stage{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:44px;
  padding:60px 0 20px;
}

.rail{
  position:sticky;
  top:24px;
  align-self:start;
  background:var(--paper-deep);
  border-radius:28px;
  padding:22px 18px;
}

.rail-title{
  margin:0 0 14px;
  font-family:var(--wide);
  font-size:16px;
  letter-spacing:.2em;
  line-height:1.4;
  color:var(--ink-soft);
}

.rail-list{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:r;
  display:grid;
  gap:3px;
}

.rail-list li a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:6px 10px;
  border-radius:16px;
  font-size:16px;
  line-height:1.45;
  color:var(--ink);
  text-decoration:none;
}

.rail-list li a::before{
  counter-increment:r;
  content:counter(r,decimal-leading-zero);
  font-size:14px;
  letter-spacing:.06em;
  color:var(--sepia-deep);
}

.rail-list li a:hover,
.rail-list li a:focus-visible{
  background:var(--paper-soft);
  outline:none;
}

/* ---------- 正文 ---------- */
.prose{min-width:0;overflow-wrap:break-word}

.prose > section{
  padding:46px 0;
  border-top:2px dashed rgba(38,33,23,.2);
  scroll-margin-top:22px;
}

.prose > section:first-child{border-top:0;padding-top:0}
.prose > section:last-child{padding-bottom:10px}

.prose h2{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0 0 18px;
  font-family:var(--wide);
  font-weight:700;
  font-size:clamp(1.2rem,3.1vw,1.75rem);
  line-height:1.45;
  letter-spacing:.035em;
}

.prose h2::before{
  content:"";
  flex:0 0 auto;
  width:26px;
  height:7px;
  background:var(--sepia);
  transform:skewX(-22deg);
}

.prose h2 > span{display:inline}

.prose h3{
  margin:34px 0 12px;
  font-family:var(--wide);
  font-size:1.05rem;
  line-height:1.6;
  letter-spacing:.03em;
}

.prose p{margin:0 0 1.15em}

.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.4em}
.prose li{margin:0 0 .5em}

.prose strong{font-weight:700;background:linear-gradient(transparent 62%,rgba(212,165,116,.75) 62%)}

.prose blockquote{
  margin:1.4em 0;
  padding:18px 22px;
  background:var(--paper-deep);
  border-radius:28px;
  border-left:6px solid var(--sepia);
}

.prose blockquote p:last-child{margin-bottom:0}

.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid rgba(38,33,23,.22);text-align:left}
.prose code{font-size:15px;background:var(--paper-deep);padding:2px 6px;border-radius:6px}
.prose pre{overflow-x:auto;background:var(--ink);color:var(--paper);padding:16px 18px;border-radius:20px}
.prose pre code{background:none;padding:0;color:inherit}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:76px;
  padding:56px 24px 0;
  display:grid;
  grid-template-columns:1.5fr 1fr 1.1fr;
  gap:38px;
  background:var(--ink);
  color:var(--paper);
  border-top:9px solid var(--sepia);
}

.foot h2{
  margin:0 0 14px;
  font-family:var(--wide);
  font-size:16px;
  letter-spacing:.22em;
  line-height:1.5;
  color:var(--sepia);
}

.foot-desc{
  margin:0;
  font-size:16px;
  line-height:1.8;
  color:#e0d2b4;
}

.foot-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}

.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:2px 0;
  font-size:16px;
  color:#e8d7b4;
  text-decoration:none;
}

.foot-links a:hover,.foot-links a:focus-visible{color:var(--sepia)}

.subform{display:grid;gap:10px;max-width:300px}

.subform input{
  width:100%;
  min-height:46px;
  padding:10px 14px;
  font-family:var(--mono);
  font-size:16px;
  color:var(--paper);
  background:rgba(245,230,200,.08);
  border:2px solid #6d5c3f;
  border-radius:14px;
}

.subform input::placeholder{color:#a99672}

.subform input:focus{
  outline:none;
  border-color:var(--sepia);
}

.subform button{
  min-height:46px;
  padding:10px 18px;
  font-family:var(--wide);
  font-size:16px;
  letter-spacing:.16em;
  color:var(--ink);
  background:var(--sepia);
  border:0;
  border-radius:14px;
  cursor:pointer;
}

.subform button:hover{background:#e0b284}

.foot-base{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding:18px 0 26px;
  border-top:1px solid rgba(245,230,200,.2);
}

.copy{margin:0;font-size:16px;color:#b8a582;letter-spacing:.08em}

.foot-top{margin:0;display:flex;gap:18px}

.foot-top a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  font-size:16px;
  color:#e8d7b4;
  text-decoration:none;
}

.foot-top a:hover{color:var(--sepia)}

/* ---------- 底部固定导航条 ---------- */
.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 18px calc(8px + env(safe-area-inset-bottom));
  background:var(--ink);
  border-top:2px solid var(--sepia);
}

.dock-brand{
  display:inline-flex;
  align-items:center;
  min-height:46px;
  font-family:var(--wide);
  font-size:16px;
  letter-spacing:.14em;
  color:var(--paper);
  text-decoration:none;
}

.dock-menu{position:relative}

.dock-menu summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:8px 16px;
  font-size:16px;
  letter-spacing:.12em;
  color:var(--paper);
  border:2px solid var(--sepia);
  border-radius:14px;
  cursor:pointer;
}

.dock-menu summary::-webkit-details-marker{display:none}

.dock-menu menu{
  position:absolute;
  right:0;
  bottom:calc(100% + 12px);
  min-width:196px;
  margin:0;
  padding:10px;
  list-style:none;
  display:grid;
  gap:2px;
  background:#312a1e;
  border:2px solid var(--sepia);
  border-radius:24px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}

.dock-menu menu a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:4px 12px;
  font-size:16px;
  color:var(--paper);
  text-decoration:none;
  border-radius:12px;
}

.dock-menu menu a:hover,
.dock-menu menu a:focus-visible{background:#463c2a;outline:none}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero-copy{animation:rise .9s cubic-bezier(.2,.72,.2,1) both}
  .hero::before{animation:leak 15s ease-in-out infinite alternate}
  .hero-img{animation:track 8s steps(1) infinite}

  body.js-on .prose > div{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .62s ease,transform .62s ease;
  }
  body.js-on .prose > div.in{opacity:1;transform:none}
}

@keyframes rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

@keyframes leak{
  from{transform:translate3d(0,0,0) scale(1);opacity:.65}
  to{transform:translate3d(13vw,7vh,0) scale(1.16);opacity:1}
}

@keyframes track{
  0%,90%,100%{transform:none;filter:sepia(.38) saturate(.78) contrast(1.06)}
  92%{transform:translateX(-3px) skewX(-.5deg);filter:sepia(.46) saturate(.7) contrast(1.12)}
  95%{transform:translateX(4px);filter:sepia(.3) saturate(.9) contrast(1.02)}
}

/* ---------- 桌面 ---------- */
@media (min-width:880px){
  .dock-menu summary{display:none}
  .dock-menu menu{
    position:static;
    display:flex;
    gap:2px;
    min-width:0;
    padding:0;
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .dock-menu menu a{padding:4px 13px;white-space:nowrap}
}

/* ---------- 窄屏 ---------- */
@media (max-width:760px){
  body{font-size:16px;padding-bottom:76px}
  .stage{
    grid-template-columns:1fr;
    gap:28px;
    padding-top:34px;
  }
  .rail{
    position:static;
    border-radius:22px;
    padding:14px 14px 12px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail-title{margin-bottom:10px}
  .rail-list{display:flex;gap:8px}
  .rail-list li a{
    white-space:nowrap;
    background:var(--paper-soft);
    padding:6px 14px;
  }
  .prose > div{padding:36px 0}
  .foot{
    grid-template-columns:1fr;
    gap:30px;
    padding:44px 20px 0;
  }
  .foot-base{flex-direction:column;align-items:flex-start}
  .dock-menu menu{right:-2px}
}
</style>

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