/* HKFai · 基础与氛围（DESIGN.md 第 5 / 6 / 7 节） */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink-900);
  color:var(--text-1);
  font-family:var(--font-sans);
  font-size:16px;line-height:1.75;font-weight:400;
  letter-spacing:.01em;
  min-height:100vh;
  overflow-x:hidden;
  overflow-x:clip; /* clip 不破坏 position:sticky（移动端顶栏） */
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
a,button,input,textarea,select,label{touch-action:manipulation}
/* 全站颗粒：3% 噪点，只做质感，不参与交互 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
/* 聚光灯：金 + 鸢尾，18s 极慢漂移 */
body::after{
  content:"";position:fixed;inset:-10% -10% auto -10%;height:120vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 18% 8%,rgba(228,193,119,.13),transparent 62%),
    radial-gradient(760px 520px at 88% 4%,rgba(110,92,230,.10),transparent 60%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-1.6%,1%,0)}to{transform:translate3d(1.6%,-1.4%,0)}}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:rgba(228,193,119,.32);color:#FFFDF7}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:99px;border:3px solid var(--ink-900)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-500)}

/* 布局骨架 */
.shell{position:relative;z-index:1;width:100%;max-width:var(--shell);margin:0 auto;padding:0 32px}
.shell-wide{max-width:var(--shell-wide)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wrap-gap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 字阶（DESIGN.md 4.2） */
.t-display{font-family:var(--font-display);font-size:clamp(36px,5.2vw,56px);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.t-h1{font-family:var(--font-display);font-size:clamp(28px,3.4vw,36px);line-height:1.25;letter-spacing:-.01em;font-weight:600}
.t-h2{font-family:var(--font-display);font-size:clamp(22px,2.4vw,26px);line-height:1.35;font-weight:600}
.t-h3{font-family:var(--font-display);font-size:20px;line-height:1.4;font-weight:600}
.t-body{font-size:16px;line-height:1.75}
.t-script{font-family:var(--font-display);font-size:17px;line-height:1.9;letter-spacing:.01em}
.t-small{font-size:14px;line-height:1.6}
.t-tiny{font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.06em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.gold{color:var(--gold-400)}
.max-read{max-width:38em}

/* 入场动效 */
.enter{animation:enter var(--t-enter) var(--e-out) both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stagger>*{animation:enter var(--t-enter) var(--e-out) both}
.stagger>*:nth-child(1){animation-delay:0ms}
.stagger>*:nth-child(2){animation-delay:40ms}
.stagger>*:nth-child(3){animation-delay:80ms}
.stagger>*:nth-child(4){animation-delay:120ms}
.stagger>*:nth-child(5){animation-delay:160ms}
.stagger>*:nth-child(6){animation-delay:200ms}

@media (max-width:768px){
  .shell{padding:0 16px}
}
@media (max-width:1024px) and (min-width:769px){
  .shell{padding:0 24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  body::after{animation:none}
}