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

:root{
  --paper:#f5e6c8;
  --paper-2:#fbf2df;
  --amber:#d4a574;
  --ink:#262117;
  --ink-soft:rgba(38,33,23,.7);
  --ink-faint:rgba(38,33,23,.42);
  --line:rgba(38,33,23,.22);
  --line-soft:rgba(38,33,23,.12);
  --r:18px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --display:"Orbitron","JetBrains 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;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:-40px;
  z-index:80;
  pointer-events:none;
  opacity:.3;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:79;
  pointer-events:none;
  mix-blend-mode:soft-light;
  background:
    radial-gradient(70% 50% at 8% 0%,rgba(255,246,218,.95),rgba(255,246,218,0) 62%),
    radial-gradient(52% 42% at 96% 16%,rgba(212,165,116,.7),rgba(212,165,116,0) 66%),
    radial-gradient(130% 90% at 50% 104%,rgba(38,33,23,.3),rgba(38,33,23,0) 62%);
}

img{max-width:100%;height:auto;display:block}

a{color:inherit}

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.3}

p{margin:0 0 1.1em}

/* ---------- 顶部双行 ---------- */
.masthead{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg,var(--paper) 0 78%,rgba(245,230,200,.9));
  border-bottom:1px solid var(--line);
  padding:8px clamp(12px,4vw,40px) 0;
  backdrop-filter:blur(2px);
}

.mast-brand{display:flex;align-items:center;min-height:44px}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:6px 0;
  text-decoration:none;
  color:var(--ink);
  font-family:var(--display);
  font-size:.98rem;
  letter-spacing:.16em;
  font-weight:700;
}

.brand-txt{border-bottom:1px solid transparent;transition:border-color .25s ease}
.brand:hover .brand-txt{border-bottom-color:var(--ink)}

.mark{
  width:26px;
  height:26px;
  flex:0 0 auto;
  border-radius:50%;
  border:2px solid var(--ink);
  display:inline-grid;
  place-items:center;
  font-size:.72rem;
  letter-spacing:0;
  background:
    conic-gradient(from 0deg,var(--amber) 0 25%,transparent 0 50%,var(--amber) 0 75%,transparent 0);
  transition:transform .5s ease;
}

.brand:hover .mark{transform:rotate(120deg)}
.mark-img{width:26px;height:26px;border-radius:50%}
.mark-txt{background:var(--amber);font-family:var(--display)}

.mast-nav{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 0 10px;
}

.menu{
  display:flex;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0 0 2px;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.menu::-webkit-scrollbar{display:none}

.menu a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 12px;
  white-space:nowrap;
  text-decoration:none;
  font-size:.9rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
  border:1px solid transparent;
  border-radius:999px;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}

.menu a:hover,.menu a.on{
  background:rgba(212,165,116,.55);
  border-color:var(--ink);
  color:var(--ink);
  transform:translateY(-1px);
}

.mast-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 16px;
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.14em;
  transition:background .22s ease,color .22s ease;
}
.mast-cta:hover{background:var(--amber);color:var(--ink)}

/* ---------- 主标题区 ---------- */
.billboard{
  position:relative;
  display:grid;
  place-items:center;
  min-height:45vh;
  padding:clamp(26px,7vw,58px) clamp(14px,5vw,40px);
  text-align:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.billboard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(38,33,23,.07) 0 1px,transparent 1px 5px);
  opacity:.55;
}

.billboard h1{
  position:relative;
  margin:0;
  max-width:22ch;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.85rem,7.4vw,4.3rem);
  line-height:1.12;
  letter-spacing:.015em;
  text-wrap:balance;
}

/* ---------- 正文与侧栏 ---------- */
.stage{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,3vw,32px);
  max-width:1180px;
  margin:0 auto;
  padding:clamp(20px,4vw,44px) clamp(12px,4vw,40px);
}

.rail{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper-2);
  padding:14px 12px 16px;
  position:relative;
}

.rail::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:8px;
  border-radius:var(--r) var(--r) 0 0;
  background:repeating-linear-gradient(90deg,var(--ink-faint) 0 6px,transparent 6px 16px);
  opacity:.5;
}

.rail-h{
  margin:6px 0 10px;
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.3em;
  color:var(--ink-soft);
}

.rail-h span{border-bottom:1px solid var(--amber);padding-bottom:2px}

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

.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:6px 9px;
  border-left:2px solid transparent;
  border-radius:6px;
  text-decoration:none;
  color:var(--ink-soft);
  font-size:.92rem;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}

.rail-list a:hover,.rail-list a.on{
  background:rgba(212,165,116,.42);
  border-left-color:var(--ink);
  color:var(--ink);
}

.prose{min-width:0;overflow-wrap:break-word}

.prose article[id]{scroll-margin-top:132px}

.prose article{
  padding:clamp(16px,3vw,26px) 0;
  border-top:1px dashed var(--line);
}

.prose article:first-child{border-top:0;padding-top:0}

.prose h2{
  font-family:var(--display);
  font-size:clamp(1.28rem,3.4vw,1.95rem);
  line-height:1.24;
  letter-spacing:.01em;
  margin:.2em 0 .7em;
}

.prose h2 > span{
  background:linear-gradient(transparent 64%,rgba(212,165,116,.62) 64%);
  padding-bottom:.06em;
}

.prose h3{
  font-size:1.14rem;
  line-height:1.4;
  letter-spacing:.02em;
  margin:1.5em 0 .55em;
  color:var(--ink);
}

.prose h3 > span{box-shadow:inset 0 -.5em 0 rgba(212,165,116,.45)}

.prose h4{font-size:1rem;margin:1.2em 0 .4em;color:var(--ink-soft)}

.prose ul,.prose ol{padding-left:1.35em;margin:0 0 1.1em}

.prose li{margin:.3em 0}

.prose a{
  color:#7b4f21;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .2s ease,background .2s ease;
}
.prose a:hover{color:var(--ink);background:rgba(212,165,116,.45)}

.prose strong{font-weight:500;color:var(--ink);border-bottom:1px solid var(--amber)}

.prose blockquote{
  margin:1.35em 0;
  padding:12px 18px;
  border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;
  background:rgba(212,165,116,.18);
  color:var(--ink-soft);
}

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

.prose figure{margin:1.4em 0}

.prose img{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:6px;
  background:var(--paper-2);
}

.prose table{
  width:100%;
  border-collapse:collapse;
  margin:1.2em 0;
  font-size:.94rem;
}

.prose th,.prose td{
  border:1px solid var(--line);
  padding:8px 10px;
  text-align:left;
  vertical-align:top;
}

.prose th{background:rgba(212,165,116,.32);font-weight:500}

.prose code{
  font-family:var(--mono);
  font-size:.9em;
  background:rgba(38,33,23,.08);
  padding:1px 5px;
  border-radius:5px;
}

.prose pre{
  overflow-x:auto;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper-2);
}

.prose pre code{background:none;padding:0}

.prose hr{border:0;border-top:1px dashed var(--line);margin:1.6em 0}

/* ---------- 收束 ---------- */
.closing{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(12px,4vw,40px) clamp(30px,6vw,58px);
}

.closing-h{
  margin:0 0 12px;
  font-family:var(--display);
  font-size:clamp(1rem,2.8vw,1.45rem);
  letter-spacing:.26em;
  color:var(--ink-soft);
}

.closing-h span{border-left:6px solid var(--amber);padding-left:12px}

.frame{
  position:relative;
  margin:0;
  height:clamp(150px,26vw,240px);
  padding:20px 12px;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background-color:var(--paper-2);
  background-image:
    repeating-linear-gradient(90deg,var(--ink) 0 9px,transparent 9px 21px),
    repeating-linear-gradient(90deg,var(--ink) 0 9px,transparent 9px 21px),
    linear-gradient(120deg,rgba(212,165,116,.55),rgba(245,230,200,.35) 46%,rgba(212,165,116,.5));
  background-size:100% 13px,100% 13px,100% 100%;
  background-position:top left,bottom left,center;
  background-repeat:no-repeat;
}

.frame-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
}

.frame-glow{
  position:absolute;
  inset:20px 12px;
  border-radius:8px;
  background:
    radial-gradient(50% 60% at 22% 40%,rgba(255,248,222,.95),rgba(255,248,222,0) 70%),
    radial-gradient(40% 50% at 78% 62%,rgba(212,165,116,.85),rgba(212,165,116,0) 72%);
}

/* ---------- 页脚 ---------- */
.foot{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(212,165,116,.3),rgba(245,230,200,0) 65%);
  padding:clamp(22px,5vw,48px) clamp(12px,4vw,40px) 16px;
}

.foot-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:76px;
  max-width:1080px;
  margin:0 auto;
  border:1px solid var(--ink);
  border-radius:var(--r);
  text-decoration:none;
  font-family:var(--display);
  font-size:clamp(1.05rem,3.6vw,1.85rem);
  letter-spacing:.22em;
  color:var(--ink);
  background:rgba(245,230,200,.55);
  transition:background .25s ease,color .25s ease,letter-spacing .35s ease;
}

.foot-cta:hover{background:var(--ink);color:var(--paper);letter-spacing:.3em}

.foot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 18px;
  max-width:1080px;
  margin:clamp(22px,4vw,38px) auto;
}

.foot-grid dl{margin:0}

.foot-grid dt{
  font-size:.78rem;
  letter-spacing:.26em;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
  margin-bottom:6px;
}

.foot-grid dd{margin:0}

.foot-grid dd a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:2px 0;
  text-decoration:none;
  color:var(--ink-soft);
  font-size:.92rem;
  transition:color .2s ease,transform .2s ease;
}

.foot-grid dd a:hover{color:var(--ink);transform:translateX(3px)}

.foot-mark{
  display:flex;
  align-items:center;
  gap:10px;
  align-self:start;
}

.aperture{
  width:34px;
  height:34px;
  flex:0 0 auto;
  border-radius:50%;
  border:2px solid var(--ink);
  background:conic-gradient(from 45deg,var(--amber) 0 18%,transparent 0 50%,var(--amber) 0 68%,transparent 0);
  animation:spin 14s linear infinite;
}

.foot-brand{
  font-family:var(--display);
  font-size:.88rem;
  letter-spacing:.16em;
  color:var(--ink-soft);
}

.foot-copy{
  margin:0;
  padding-top:14px;
  border-top:1px dashed var(--line);
  text-align:center;
  font-size:.85rem;
  letter-spacing:.12em;
  color:var(--ink-faint);
}

/* ---------- 动效 ---------- */
@keyframes spin{to{transform:rotate(360deg)}}

@keyframes track{
  0%{transform:translateX(0) skewX(0);text-shadow:none}
  30%{transform:translateX(-3px) skewX(-.7deg);text-shadow:2px 0 var(--amber),-2px 0 rgba(38,33,23,.4)}
  62%{transform:translateX(2px) skewX(.5deg);text-shadow:-2px 0 var(--amber),2px 0 rgba(38,33,23,.3)}
  100%{transform:none;text-shadow:none}
}

.js [data-reveal]{opacity:0;transform:translateY(16px)}

.js [data-reveal].in{
  opacity:1;
  transform:none;
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion:no-preference){
  .billboard h1:hover{animation:track .62s steps(3) 1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none}
  .aperture{animation:none}
  .billboard h1:hover{animation:none}
}

/* ---------- 断点 ---------- */
@media (min-width:560px){
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:820px){
  .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prose h2{letter-spacing:-.005em}
}

@media (min-width:900px){
  .stage{grid-template-columns:236px minmax(0,1fr);align-items:start}
  .rail{position:sticky;top:140px}
  .prose article[id]{scroll-margin-top:150px}
}

@media (max-width:420px){
  body{font-size:16px}
  .menu a{padding:8px 10px;font-size:.85rem}
  .mast-cta{padding:8px 12px;font-size:.8rem;letter-spacing:.08em}
  .billboard{min-height:42vh}
}

@media print{
  .masthead,.foot-cta,.rail{position:static}
  body::before,body::after{display:none}
}

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