/* Hallmark: poe-preview.html kept. Only the changes named in drafts/decision.md. */
html{overflow-x:clip;color-scheme:dark}
:root{
  --ink:#090e0d;
  --paper:#dedacb;
  --dim:#8c9189;
  --line:rgba(222,218,203,.13);
  --patina:#7db3a1;
  --cinnabar:#d24a33;
  --serif:"Xuanlan Serif","Songti SC","STSong","SimSun",serif;
  --latin:"Cormorant Garamond","Xuanlan Serif","Songti SC",serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Xuanlan Serif","Songti SC",monospace;
  --pad:clamp(24px,6vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-size:16px;font-weight:400;line-height:1.9;letter-spacing:.02em;text-autospace:normal;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* 纸面颗粒 */
body::after{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--cinnabar);color:var(--paper)}
a{color:inherit}
:focus-visible{outline:1px solid var(--patina);outline-offset:4px}

/* ───── 导航 ───── */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  padding:28px var(--pad);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:16px;height:19px;fill:currentColor}
.brand span{font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:var(--dim)}
.nav nav{display:flex;gap:clamp(20px,3vw,40px)}
.nav nav a{font-size:14px;letter-spacing:.24em;color:var(--dim);text-decoration:none;transition:color .3s}
.nav nav a:hover{color:var(--paper)}

/* ───── 首屏 ───── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;
  gap:clamp(24px,4vw,64px);
  padding:100px var(--pad) 44px;
  background:radial-gradient(60% 70% at 70% 46%,rgba(125,179,161,.09),transparent 70%);
}
#sky{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent);
}
.masthead{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(28px,5vh,48px)}
.vertical{writing-mode:vertical-rl}
.vertical h1{
  margin:0;font-weight:200;font-size:clamp(84px,12vw,168px);line-height:1.04;letter-spacing:.1em;
}
.vertical h1 span{display:inline-block;animation:emerge 1.8s cubic-bezier(.2,.7,.2,1) both}
.vertical h1 span:nth-child(1){animation-delay:.15s}
.vertical h1 span:nth-child(2){animation-delay:.5s}
.epigraph{
  margin:0;margin-block-start:clamp(18px,2.4vw,34px);
  font-size:15px;letter-spacing:.62em;color:var(--paper);opacity:.82;
  animation:emerge 1.5s 1s both;
}
.source{
  margin:0;margin-block-start:14px;
  font-size:12px;letter-spacing:.4em;color:var(--dim);
  animation:emerge 1.5s 1.25s both;
}
.seal{
  display:inline-block;margin-inline-start:16px;padding:6px 3px 4px;
  background:var(--cinnabar);color:#f3ece0;border-radius:2px;
  font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1.35;
}
.lede{
  margin:0;max-width:24em;font-size:clamp(16px,1.25vw,18px);line-height:2;color:rgba(222,218,203,.86);
  animation:rise 1.1s 1.4s both;
}
.cta{
  font-size:14px;letter-spacing:.3em;text-decoration:none;
  padding-bottom:6px;border-bottom:1px solid rgba(222,218,203,.35);
  transition:border-color .3s,color .3s;animation:rise 1.1s 1.6s both;
}
.cta:hover{border-color:var(--cinnabar);color:#fff}

.observatory{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
#astrolabe{
  width:min(100%,56vh,580px);aspect-ratio:1;height:auto;display:block;overflow:visible;
  animation:bloom 2.4s .3s cubic-bezier(.2,.7,.2,1) both;
}
#astrolabe .spin{transform-origin:0 0}
#ring-xiu{animation:spin 420s linear infinite}
#ring-gua{animation:spin 300s linear infinite reverse}
#ring-xiu text{
  font-family:var(--serif);font-size:12px;fill:var(--paper);fill-opacity:.5;
  text-anchor:middle;dominant-baseline:central;
}
.ticks{fill:none;stroke:var(--patina);stroke-opacity:.55;stroke-width:6;stroke-dasharray:.14 .86}
.ticks-major{fill:none;stroke:var(--patina);stroke-opacity:.45;stroke-width:30;stroke-dasharray:.012 .988;stroke-dashoffset:.5}
.hair{fill:none;stroke:var(--paper);stroke-opacity:.16;stroke-width:1;vector-effect:non-scaling-stroke}
#ring-gua rect{fill:var(--paper);opacity:.5;transition:fill .8s,opacity .8s}
#ring-gua g.on rect{fill:var(--cinnabar);opacity:1}
.gyro{
  fill:none;stroke:var(--patina);stroke-opacity:.38;stroke-width:1;vector-effect:non-scaling-stroke;
  transform-origin:0 0;animation:gyro 19s ease-in-out infinite alternate;
}
.gyro.g1{--r:18deg}
.gyro.g2{--r:78deg;animation-duration:27s;animation-delay:-8s}
.gyro.g3{--r:-42deg;animation-duration:33s;animation-delay:-15s}
#center{filter:drop-shadow(0 0 7px rgba(125,179,161,.45))}
#center rect{fill:var(--paper);transition:fill 1.4s ease}
#center.casting rect{fill:var(--cinnabar)}
#center .yao{
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
  transform-box:fill-box;transform-origin:center;
}
#center .yao.hide{opacity:0;transform:scaleX(.3)}

.console{width:min(100%,440px);animation:rise 1.1s 1.7s both}
.reading{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.reading-name{display:flex;align-items:baseline;gap:14px;min-width:0}
#guaName{font-size:18px;letter-spacing:.3em;white-space:nowrap}
#guaBits{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--patina)}
#cast{
  flex:none;appearance:none;background:none;cursor:pointer;
  border:1px solid rgba(222,218,203,.32);border-radius:999px;
  color:var(--paper);font-family:var(--serif);font-size:14px;letter-spacing:.34em;
  padding:8px 16px 8px 22px;transition:border-color .3s,color .3s,opacity .3s;
}
#cast:hover{border-color:var(--cinnabar);color:#fff}
#cast:disabled{opacity:.4;cursor:default}
.trace{
  list-style:none;margin:12px 0 0;padding:0;min-height:7.8em;
  font-family:var(--mono);font-size:12.5px;font-weight:300;line-height:1.95;color:var(--dim);
}
.trace li{display:grid;grid-template-columns:2.2em 1fr;animation:rise .5s both}
.trace b{font-family:var(--serif);font-weight:400;color:var(--patina)}
.trace code{font-family:inherit;color:var(--paper)}
.trace a{color:var(--paper);text-underline-offset:4px;text-decoration-color:var(--cinnabar)}

/* ───── 正文区块 ───── */
.section{max-width:1180px;margin:0 auto;padding:clamp(72px,10vw,136px) var(--pad) 0;scroll-margin-top:0}
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.section-head h2{margin:0;font-weight:400;font-size:clamp(24px,2.8vw,34px);letter-spacing:.34em}
.section-head h2 i{
  font-family:var(--latin);font-style:italic;font-size:.72em;letter-spacing:.02em;color:var(--dim);margin-left:.5em;
}
.section-head small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dim)}

.posts{list-style:none;margin:0;padding:0}
.post{scroll-margin-top:32vh}
.post a{
  display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,3vw,40px);
  margin:0 -14px;padding:30px 14px;border-bottom:1px solid var(--line);
  text-decoration:none;transition:background .5s;
}
.post-gua{display:flex;align-items:center;gap:12px;color:var(--dim);transition:color .4s}
.post-gua svg{width:24px;height:28px;fill:currentColor;flex:none}
.post-gua b{writing-mode:vertical-rl;font-weight:400;font-size:13px;letter-spacing:.3em}
.post h3{
  margin:0 0 4px;font-weight:400;font-size:clamp(18px,1.9vw,23px);letter-spacing:.08em;line-height:1.5;
  transition:color .3s;
}
.post p{margin:0;font-size:15px;line-height:1.8;color:var(--dim)}
.post time{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim);white-space:nowrap}
.post a:hover{background:linear-gradient(90deg,rgba(222,218,203,.045),transparent 70%)}
.post a:hover .post-gua{color:var(--cinnabar)}
.post a:hover h3{color:#fff}
.post:target a{background:linear-gradient(90deg,rgba(210,74,51,.13),transparent 72%)}
.post:target .post-gua{color:var(--cinnabar)}

.about-grid{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,7vw,110px);
  padding-top:44px;
}
.about-text p{margin:0 0 1.5em;max-width:33em;color:rgba(222,218,203,.86)}
.about-text strong{font-weight:600;color:var(--paper)}
.method{list-style:none;margin:0;padding:0}
.method-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dim);margin:0 0 10px}
.method li{
  display:grid;grid-template-columns:56px 1fr;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.method b{font-weight:200;font-size:34px;line-height:1.2}
.method span{font-family:var(--latin);font-style:italic;font-size:17px;color:var(--patina);letter-spacing:.02em}
.method p{grid-column:2;margin:2px 0 0;font-size:15px;color:var(--dim)}

footer{
  max-width:1180px;margin:clamp(80px,11vw,150px) auto 0;padding:26px var(--pad) 44px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dim);
}
footer nav{display:flex;gap:24px}
footer a{text-decoration:none;transition:color .3s}
footer a:hover{color:var(--paper)}

/* ───── 动效 ───── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes gyro{from{transform:rotate(var(--r)) scaleY(1)}to{transform:rotate(var(--r)) scaleY(-1)}}
@keyframes emerge{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bloom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:108px;gap:44px}
  #astrolabe{width:min(100%,440px)}
  .about-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .brand span{display:none}
  .post a{grid-template-columns:56px minmax(0,1fr);row-gap:8px}
  .post time{grid-column:2}
  .section-head small{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 文章页。首页版心不动，正文行长只加在这里。 */
.essay{max-width:53ic;margin:0 auto;padding:140px var(--pad) 96px}
.essay .kicker{margin:0 0 18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dim)}
.essay h1{margin:0 0 10px;font-weight:400;font-size:clamp(28px,4vw,44px);letter-spacing:.08em;line-height:1.45}
.essay .meta{margin:0 0 36px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dim)}
.essay p{margin:0 0 1.2em}
.essay .back{font-size:14px;letter-spacing:.24em;color:var(--dim);text-decoration:none}