/* ============================================================
   我的计算机史 — 基础层
   字体、变量、排版、公共零件
   ============================================================ */

@font-face{
  font-family:"Noto Serif SC";
  src:url("../fonts/noto-serif-sc.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Noto Sans SC";
  src:url("../fonts/noto-sans-sc.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Fusion Pixel";
  src:url("../fonts/fusion-pixel.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#0A0908;
  --ink-2:#111010;
  --bone:#EFE7DA;
  --bone-2:#C9BFB0;
  --bone-3:#8C8175;
  --amber:#D9A05B;
  --amber-2:#E2A03F;
  --seal:#C4442E;
  --line:rgba(239,231,218,.14);
  --line-soft:rgba(239,231,218,.07);

  --f-serif:"Noto Serif SC","Songti SC","STSong","Noto Serif CJK SC",serif;
  --f-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --f-mono:"JetBrains Mono","Noto Sans SC","SFMono-Regular",Consolas,"Microsoft YaHei",monospace;
  --f-pixel:"Fusion Pixel","Noto Sans SC","Microsoft YaHei",monospace;
  --f-display:"Instrument Serif","Noto Serif SC",Georgia,serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --ease-out:cubic-bezier(.22,.9,.28,1);

  --maxw:1280px;
  --pad:clamp(20px,4.6vw,80px);
  --scene-top:clamp(84px,10vh,132px);
  --scene-bottom:clamp(90px,12vh,160px);

  --chrome-fg:#EFE7DA;
  --chrome-dim:rgba(239,231,218,.55);
  --chrome-line:rgba(239,231,218,.16);
  --era:#D9A05B;
}

/* 每个时代，给固定在页面上的界面一层新的皮 */
body[data-era="hero"]{--era:#D9A05B;--chrome-fg:#EFE7DA;--chrome-dim:rgba(239,231,218,.5);--chrome-line:rgba(239,231,218,.16)}
body[data-era="win7"]{--era:#7EC3E8;--chrome-fg:#EAF5FB;--chrome-dim:rgba(234,245,251,.6);--chrome-line:rgba(234,245,251,.2)}
body[data-era="scratch"]{--era:#FF8C1A;--chrome-fg:#2B2B2B;--chrome-dim:rgba(43,43,43,.55);--chrome-line:rgba(43,43,43,.14)}
body[data-era="code"]{--era:#7F9CF5;--chrome-fg:#E6E8EE;--chrome-dim:rgba(230,232,238,.5);--chrome-line:rgba(230,232,238,.14)}
body[data-era="minecraft"]{--era:#8BC34A;--chrome-fg:#1E2A16;--chrome-dim:rgba(30,42,22,.6);--chrome-line:rgba(30,42,22,.16)}
body[data-era="web"]{--era:#C97B2E;--chrome-fg:#171310;--chrome-dim:rgba(23,19,16,.55);--chrome-line:rgba(23,19,16,.14)}
body[data-era="ai"]{--era:#A88BFF;--chrome-fg:#EDEAF6;--chrome-dim:rgba(237,234,246,.5);--chrome-line:rgba(237,234,246,.14)}
body[data-era="outro"]{--era:#D9A05B;--chrome-fg:#EFE7DA;--chrome-dim:rgba(239,231,218,.5);--chrome-line:rgba(239,231,218,.16)}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:#0A0908;
}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-serif);
  font-weight:300;
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.92;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color .9s var(--ease);
}

::selection{background:var(--era);color:#0A0908}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#080706}
::-webkit-scrollbar-thumb{background:#2c2721;border:3px solid #080706;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#3f382f}
:focus-visible{outline:1px solid var(--era);outline-offset:5px}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
em,i{font-style:normal}
b,strong{font-weight:500}

.sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* 统一线性图标 */
svg:not(.mc-px):not(.sprite){
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.skip{
  position:fixed;top:-100px;left:20px;z-index:300;
  background:var(--era);color:#0A0908;
  padding:10px 18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;
  transition:top .3s var(--ease);
}
.skip:focus{top:20px}

/* 纸张颗粒 */
.grain{
  position:fixed;inset:0;z-index:120;pointer-events:none;
  opacity:.22;
  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='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(5) infinite;
  mix-blend-mode:overlay;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-3%,2%,0)}
  40%{transform:translate3d(2%,-3%,0)}
  60%{transform:translate3d(-2%,1%,0)}
  80%{transform:translate3d(3%,-2%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* 布局 */
.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);position:relative;
}
.scene{
  position:relative;
  padding-top:var(--scene-top);
  padding-bottom:var(--scene-bottom);
  overflow:clip;
  isolation:isolate;
}

/* 章节标题：位置固定，字体统一；时代感来自周围 */
.scene-head{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:clamp(14px,2vw,30px);
  align-items:start;
  padding-top:22px;
  border-top:1px solid var(--sh-line,var(--line));
  position:relative;
  z-index:3;
}
.sh-num{
  font-family:var(--f-mono);
  font-size:12px;line-height:1;
  letter-spacing:.08em;
  padding-top:8px;
  color:var(--sh-num,var(--amber));
}
.sh-main{min-width:0}
.sh-kicker{
  font-family:var(--f-mono);
  font-size:10px;line-height:1.4;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--sh-dim,var(--bone-3));
  margin-bottom:14px;
}
.sh-title{
  font-family:var(--f-serif);
  font-weight:300;
  font-size:clamp(38px,5.4vw,74px);
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--sh-title,var(--bone));
}
.sh-meta{
  display:flex;flex-direction:column;gap:6px;align-items:flex-end;
  padding-top:6px;
  font-family:var(--f-mono);
  font-size:9.5px;line-height:1.6;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sh-dim,var(--bone-3));
  text-align:right;
}

/* 标题入场（由 JS 加 js-head，避免无脚本时不可见） */
.js-head .sh-kicker,
.js-head .sh-num,
.js-head .sh-meta{
  opacity:0;transform:translateY(8px);
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
.js-head .sh-title{
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);
  transition-delay:.06s;
}
.js-head.in .sh-kicker,
.js-head.in .sh-num,
.js-head.in .sh-meta,
.js-head.in .sh-title{opacity:1;transform:none}
.js-head.in .sh-num{transition-delay:.16s}
.js-head.in .sh-meta{transition-delay:.22s}

/* 正文 */
.prose{max-width:34em}
.prose p{margin-bottom:1.4em}
.prose p:last-child{margin-bottom:0}
.prose .lead{
  font-size:clamp(19px,1.62vw,23px);
  line-height:1.82;
  color:var(--prose-lead,var(--bone));
  margin-bottom:1.5em;
}
.em{
  color:var(--prose-em,var(--amber));
  background:linear-gradient(transparent 72%,var(--prose-hl,rgba(217,160,91,.13)) 72%);
  padding-bottom:.02em;
}

.label{
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.6;
  color:inherit;
}
.label i{opacity:.45;padding-inline:.4em}

/* 入场 */
.rv{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.rv.in{opacity:1;transform:none}

/* 固定界面 */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:150;
  background:rgba(255,255,255,.06);
}
.progress i{
  display:block;height:100%;width:0;
  background:var(--era);
  box-shadow:0 0 16px var(--era);
  transition:width .12s linear,background-color .6s var(--ease);
}

.brand{
  position:fixed;top:clamp(18px,2.6vh,30px);left:var(--pad);z-index:110;
  display:flex;align-items:center;gap:11px;
  color:var(--chrome-fg);
  transition:color .6s var(--ease),opacity .5s var(--ease),transform .6s var(--ease);
}
body.is-scrolled .brand{opacity:0;transform:translateY(-10px);pointer-events:none;visibility:hidden;transition:color .6s var(--ease),opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .5s}
.brand .seal{
  width:26px;height:26px;flex:none;
  display:grid;place-items:center;
  background:var(--seal);color:#F4E9D8;
  font-family:var(--f-serif);font-size:14px;line-height:1;
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.25);
  transform:rotate(-1.5deg);
}
.brand-txt{
  display:flex;flex-direction:column;gap:2px;
  font-family:var(--f-serif);font-size:12px;letter-spacing:.14em;line-height:1.2;
}
.brand-txt em{
  font-family:var(--f-mono);font-size:8px;letter-spacing:.26em;
  color:var(--chrome-dim);
}
.brand:hover .seal{transform:rotate(1deg) scale(1.04)}

.rail{
  position:fixed;left:clamp(12px,2.2vw,30px);top:50%;transform:translateY(-50%);
  z-index:110;display:flex;flex-direction:column;gap:2px;
  color:var(--chrome-fg);
  transition:color .6s var(--ease);
}
.rail a{
  display:flex;align-items:center;gap:0;
  height:26px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;
  color:var(--chrome-dim);
  position:relative;
}
.rail i{
  display:block;width:14px;height:1px;background:currentColor;
  opacity:.45;transition:width .45s var(--ease),opacity .3s;
}
.rail span{
  position:absolute;left:26px;white-space:nowrap;
  opacity:0;transform:translateX(-4px);
  transition:opacity .3s var(--ease),transform .4s var(--ease);
  pointer-events:none;
  color:#EFE7DA;
  background:rgba(8,7,6,.86);
  border:1px solid rgba(255,255,255,.13);
  padding:4px 8px;border-radius:2px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:8.5px;
}
.rail span b{
  font-weight:400;color:var(--era);margin-right:.7em;
}
.rail a:hover i,.rail a.on i{width:26px;opacity:1}
.rail a.on i{background:var(--era)}
.rail a:hover span{opacity:1;transform:none}
.rail a:hover{color:var(--chrome-fg)}


/* 自绘光标 */
.cursor{
  position:fixed;left:0;top:0;z-index:200;pointer-events:none;
  width:30px;height:30px;margin:-15px 0 0 -15px;
  border:1px solid var(--chrome-fg);border-radius:50%;
  opacity:0;
  transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),opacity .3s,background-color .25s;
  mix-blend-mode:difference;
  display:none;
}
.cursor i{
  position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  background:currentColor;border-radius:50%;
}
body.has-cursor .cursor{display:block;opacity:1}
body.has-cursor .cursor.is-hot{
  width:54px;height:54px;margin:-27px 0 0 -27px;
  background:rgba(255,255,255,.12);
}
body.has-cursor,
body.has-cursor a,
body.has-cursor button{cursor:none}

/* 通用图片 */
figure{margin:0}
.cap{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
  color:var(--sh-dim,var(--bone-3));
  line-height:1.8;
}

/* 可访问性 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1;transform:none}
}

/* 响应式 */
@media (max-width:1100px){
  .rail{display:none}
}
@media (max-width:760px){
  :root{--pad:20px}
  body{font-size:16px;line-height:1.9}
  .scene-head{grid-template-columns:40px 1fr;gap:10px}
  .sh-meta{display:none}
  .sh-title{font-size:clamp(34px,10vw,54px)}
  .sh-kicker{font-size:9px;letter-spacing:.16em}
  .brand-txt{display:none}
  .prose{max-width:100%}
  .grain{opacity:.16}
}
@media (hover:none){
  .cursor{display:none !important}
}