/* 单色，不加强调色 */
:root{
  --ink:#0f0f0f;
  --smoke:#e0e0e0;
  --ash:#8c8c8c;
  --paper:#ffffff;
  --line:rgba(224,224,224,.16);
  --serif:"Iowan Old Style","Palatino Linotype","Songti SC","Noto Serif CJK SC",serif;
  --sans:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  /* 首页立言那行大字的字族，各视图首行标题同样引用它 */
  --display:"Noto Sans SC","Source Han Sans CN","PingFang SC","Microsoft YaHei",sans-serif;
  --page-min:860px;
  --pad-x:clamp(24px,4vw,96px);
  --pad-y:clamp(48px,5vh,72px);
  --head-foot:107px;
  --fit-h:calc(max(100dvh,var(--page-min)) - var(--head-foot) - 2*var(--pad-y) - 4px);
  /* 首页的可用内容高：直接按当前视口算，不取 --page-min 的下限，矮窗口里也不许把
     整页顶出去。107 是页眉 50 加页脚 56.8，4px 是防一像素反弹的余量 */
  --intro-fit:calc(100dvh - var(--head-foot) - 2*var(--pad-y) - 4px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--smoke);
  font:16px/1.8 var(--sans);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  min-height:var(--page-min);min-height:max(100dvh,var(--page-min));
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(224,224,224,.055) 1px,transparent 1px);
  background-size:5px 5px;
}
/* 吾之诀的文字带：底图模糊与网点共用这一条带子，纵向铺满整屏，只在水平方向分界。
   左右两缘由 about-view.js 按正文实际墨迹写成像素，这里只留兜底；
   两端各羽化 --frost-fade，模糊与不模糊之间不留硬线 */
html{
  --frost-l:0px;--frost-r:42%;--frost-fade:56px;
  --frost-mask:linear-gradient(to right,
      transparent calc(var(--frost-l) - var(--frost-fade)),
      #000 var(--frost-l),#000 var(--frost-r),
      transparent calc(var(--frost-r) + var(--frost-fade)));
}
/* 本页网点只在文字带里铺，带外与底图一样干净 */
html[data-scene="about"] body::before{mask-image:var(--frost-mask)}
@media (max-width:860px){
  html{--frost-fade:36px}
}
.wrap{position:relative;z-index:1;max-width:2400px;margin:0 auto;padding:0 var(--pad-x)}
main{flex:1 0 auto;width:100%;display:flex;align-items:center}
a{color:var(--smoke);text-decoration:none}
a:hover{color:var(--paper)}

/* 曲目下拉要压在正文之上 */
.bar{position:relative;z-index:5;border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:11.5px;padding-bottom:11.5px}
.mark{display:inline-flex;align-items:center;color:var(--smoke)}
.mark-sig{display:block;opacity:0}
.mark-sig svg{display:block;height:26px;width:auto}
html:not(.boot-on) .mark-sig{opacity:1}
.mark-in{opacity:1}
.bar-lead{display:flex;align-items:center;gap:15px;min-width:0}
.page-name{
  margin:0;padding-left:15px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:5px;
  font-family:var(--sans);font-weight:400;font-size:10px;line-height:1;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ash);white-space:nowrap;
}
/* 更新日期另起一行，数字收窄字距，免得被页面名的字距拉开 */
.page-date{letter-spacing:.12em;color:rgba(140,140,140,.72)}

h2{
  margin:0 0 24px;font-family:var(--serif);font-weight:400;font-size:26px;
  letter-spacing:.06em;color:var(--paper);display:flex;align-items:baseline;gap:14px;
}

/* 立绘是透明底，直接落在网点底上 */
.intro{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(36px,4vw,72px);align-items:start;padding:var(--pad-y) 0}
/* 字面：金属打光 + 静态颗粒 + 一道冷光（位置由 creed.js 驱动），句下一条朱红剑痕 */
.creed{
  /* 冷光带停在字形之外，脚本接管后才扫进来 */
  --sx:92%;
  --metal:linear-gradient(180deg,#f4f4f4 0%,#fdfdfd 24%,#ebebeb 60%,#d3d3d3 92%,#e0e0e0 100%);
  --sheen:linear-gradient(100deg,
    rgba(255,255,255,0) 38%,
    rgba(214,240,252,.16) 44%,
    rgba(214,240,252,.62) 47.8%,
    rgba(255,255,255,1) 49.6% 50.4%,
    rgba(214,240,252,.58) 52.2%,
    rgba(214,240,252,.14) 56%,
    rgba(255,255,255,0) 62%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  margin:0;display:block;width:max-content;max-width:100%;position:relative;
  font-family:var(--display);
  font-weight:900;font-size:clamp(32px,4.4vw,72px);line-height:1.1;letter-spacing:0;
  color:transparent;-webkit-text-fill-color:transparent;
  background-image:var(--grain),var(--sheen),var(--metal);
  background-size:180px 180px,300% 100%,100% 100%;
  background-repeat:repeat,no-repeat,no-repeat;
  background-position:0 0,var(--sx) 50%,0 0;
  -webkit-background-clip:text;background-clip:text;
}
/* 选中时让字形恢复实色，否则透明字会整片消失 */
.creed::selection{background:rgba(224,224,224,.28);color:var(--ink);-webkit-text-fill-color:var(--ink)}
/* 剑痕：两端青、正中一段朱红，右端收尖 */
.creed::after{
  content:"";position:absolute;left:0;right:0;bottom:-15px;height:2px;
  background:linear-gradient(90deg,
    #59a5cb 0%,
    #59a5cb 41%,
    #de3546 45%,
    #de3546 55%,
    #59a5cb 59%,
    #59a5cb 100%);
  clip-path:polygon(0 0,93% 0,100% 50%,93% 100%,0 100%);
  transform:scaleX(0);transform-origin:left center;
}
html:not(.boot-on) .creed::after{animation:creed-rule .9s cubic-bezier(.22,.68,.16,1) .34s both}
@keyframes creed-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .creed::after{animation:none!important;transform:none}
}

.bio{margin-top:34px;max-width:40em;font-size:clamp(15px,1.1vw,16px);line-height:2.05;color:rgba(224,224,224,.84)}
.bio p{margin:0 0 1.1em}
.bio > *:last-child{margin-bottom:0}
.bio blockquote{
  margin:32px 0 0;padding:0 0 0 20px;border-left:1px solid var(--smoke);
  font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.95;letter-spacing:.02em;color:var(--smoke);
}
/* 功能板块的入口：点下去彩条从左往右灌满，不再回擦，等首页淡出时一起退场 */
.chapters{
  margin:40px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.chapters button{
  width:100%;padding:11px 6px;border:0;border-radius:0;background:var(--ink);
  font:12px/1 var(--sans);letter-spacing:.14em;color:rgba(140,140,140,.8);cursor:default;
}
.chapters button:not(:disabled){
  color:var(--smoke);cursor:pointer;
  transition:color .2s ease,background-color .2s ease;
}
.chapters button:not(:disabled):hover,
.chapters button:not(:disabled):focus-visible{color:var(--paper);background:rgba(224,224,224,.055)}
.chapters button:not(:disabled):focus-visible{outline:1px solid var(--smoke);outline-offset:-1px}
/* 全站「红-透蓝-红」三段彩条只有这一份定义：两端各 --sweep-band 宽的红，中间半透明的蓝。
   章节按钮、右栏五颗按钮、影像清单选中态、两颗模式按钮都引它，改带宽只改 --sweep-band
   一处；但引用它的那几处若有按两端彩条总宽算出的内距，要一并跟着改（写死的像素没法被
   变量带过去） */
:root{
  --sweep-band:8px;
  --sweep-bg:linear-gradient(90deg,
    #de3546 0 var(--sweep-band),
    rgba(89,165,203,.2) var(--sweep-band) calc(100% - var(--sweep-band)),
    #de3546 calc(100% - var(--sweep-band)) 100%);
}
/* 灌满由 scene.js 写行内 clip-path，底色与字色全程不变 */
.chapters button.is-sweep{position:relative;overflow:hidden}
.sweep-fill{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--sweep-bg);
  clip-path:inset(0 100% 0 0);
}
.chapters button.is-sweep > .sweep-label{position:relative;z-index:1}
.intro-art{margin:0;align-self:start}
.intro-art img{display:block;width:auto;max-width:100%;max-height:min(var(--fit-h),1200px);height:auto;margin-inline:auto}

/* 文字列外面这层只为给向下箭头一个定位基准：箭头落在列底与页脚之间的留白里，
   不压字。显示与否由 intro-scroll.js 按「还有没读完的内容」开关 */
.intro-copy-wrap{position:relative;min-width:0}
.intro-hint{
  position:absolute;left:0;right:0;top:calc(100% + 4px);
  display:flex;justify-content:center;pointer-events:none;
  opacity:0;transition:opacity .38s ease;
}
.intro-hint.is-on{opacity:1}
.intro-hint svg{
  display:block;width:18px;height:18px;color:#de3546;
  animation:intro-hint 2.2s ease-in-out infinite;
}
@keyframes intro-hint{
  0%,100%{transform:translateY(-3px);opacity:.3}
  50%{transform:translateY(3px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .intro-hint svg{animation:none;opacity:.55}
}

/* 首页左右两栏各自独立：立绘按窗口定高后留在原地，左侧文字列自己滚、不画竖条，
   整页于是不出滚动条。宽度不参与这套判断——两栏排不下时由下面的横向滚兜住，
   不再改成上下堆叠 */
.intro-art img{max-height:min(var(--intro-fit),1200px)}
.intro-copy{max-height:var(--intro-fit);overflow-y:auto;scrollbar-width:none}
.intro-copy::-webkit-scrollbar{width:0;height:0;display:none}
.intro-copy:focus-visible{outline:1px solid rgba(224,224,224,.28);outline-offset:-1px}

/* 窗口窄到放不下两栏时，横向滚落在内容区里：页眉页脚照旧定宽，立绘始终在文字右侧。
   780 是两栏还能各自放下正文的最小宽，比它更窄就交给横向滚 */
.view-intro > .wrap{overflow-x:auto;overflow-y:hidden}
.intro{min-width:calc(780px - 2 * var(--pad-x))}

/* 断点两侧栏宽连续 */
@media (min-width:1420px){
  .intro{grid-template-columns:40em minmax(0,auto);justify-content:center}
}


footer{border-top:1px solid var(--line);padding:9px 0 10px}
footer p{margin:0;font-size:12px;line-height:1.45;color:var(--ash);max-width:62em}
footer p + p{margin-top:2px}
footer .meta{letter-spacing:.06em}

@media (max-width:860px){
  .intro{gap:32px;padding:48px 0}
}

/* 页面名放不下两个词的宽度时，只留页面名，日期让位 */
@media (max-width:400px){
  .page-date{display:none}
}