/* ===========================================================
   缓慢发光 SLOW GLOW · 双主题设计系统
   -----------------------------------------------------------
   唯一的设计主张：字重就是温度。
   重要的东西重且深，次要的东西轻且淡，交互 = 被点亮（字重上升 + 墨色加深），
   而不是变色、加框或位移。全站没有强调色、没有圆角、没有卡片。

   第二主张：微光 = 纸上的余温，也是暗处的余烬。浅色像一张晒过太阳的纸，
   深色像一间只留一盏灯的工作室。光只从被点亮的东西发出来，没有独立背景光。
   两套主题共用同一套层级、结构与节奏，只改变环境光。
   两个时间尺度叠在一起才活：20 秒的呼吸（稳），和不规则的明灭（噼啪）。
   =========================================================== */

/* ---------- 字体（自托管可变字体，只含 latin / latin-ext）---------- */
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geistmono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geistmono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 令牌 ---------- */
:root{
  /* 暖纸上的墨色阶：重要性越高，字重越重、墨色越深 */
  --bg:#F3EFE6;
  --hot:#171411;        /* 被点亮 */
  --ink:#24201C;        /* 正常 */
  --ink-2:#464038;      /* 次要 */
  /* 下面两档按用途命名，不按亮度命名：
     text  = 要读完才明白的字（中文正文、大句子、产品一句话）  7.7:1
     label = 眼睛扫过就够的字（标签、状态、图注、导航未选中）   5.6:1
     亮度表达重要性，但不能以牺牲可读为代价；再往下只剩故意藏起来的东西 */
  --text:#5D564D;
  --label:#6F675D;
  --dim:var(--text);    /* 旧名，等于 text */
  --dim-2:var(--label); /* 旧名，等于 label */
  --faint:#AAA195;      /* 故意不让人一眼看见的：页脚入口、「也接项目」那一行 */
  --dormant:#92887D;    /* 未点亮的大字，保留 3:1 大字对比度 */
  --hair:rgba(36,32,28,.14);
  /* 余烬：全站唯一允许偏离暖灰的颜色 */
  --ember:#B64928;
  --bloom:0 0 .04em rgba(165,65,31,.22),0 0 .34em rgba(201,92,44,.12);
  --warmth:0 0 .5em rgba(182,72,33,.16);
  --nav-solid:rgba(243,239,230,.97);
  --nav-fade:rgba(243,239,230,.72);
  --inline-border:rgba(36,32,28,.28);
  --grain-opacity:.045;
  --grain-blend:multiply;
  --fire-core:radial-gradient(ellipse at 50% 50%,rgba(182,73,40,.9),rgba(215,115,66,.34) 48%,transparent 78%);
  --fire-heat:radial-gradient(ellipse 50% 50% at 50% 76%,rgba(190,72,31,.14),rgba(208,103,54,.045) 44%,transparent 72%);
  --ember-shadow:0 0 5px rgba(185,73,35,.48),0 0 13px rgba(202,86,42,.18);
  --crackle-rest:0 0 .04em rgba(163,60,28,.08),0 0 .3em rgba(193,77,35,.03);
  --crackle-a:0 0 .05em rgba(163,60,28,.28),0 0 .46em rgba(193,77,35,.13);
  --crackle-b:0 0 .045em rgba(163,60,28,.2),0 0 .4em rgba(193,77,35,.09);
  --crackle-c:0 0 .06em rgba(163,60,28,.38),0 0 .58em rgba(193,77,35,.16);

  --sans:Geist,system-ui,-apple-system,sans-serif;
  /* 回退链里不放 Geist：它本身也是 swap 的网络字体且没被 preload，
     留着的话冷加载最坏是 system-ui → Geist → Archivo 跳两次 */
  --disp:Archivo,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --zh:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(22px,5vw,80px);
  --gap-s:clamp(100px,15vw,220px);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08080A;
  --hot:#FFF6E4;
  --ink:#F2EFE9;
  --ink-2:#CFCBC4;
  --text:#A4A099;
  --label:#8A8781;
  --dim:var(--text);
  --dim-2:var(--label);
  --faint:#4C4945;
  --dormant:#625E58;
  --hair:rgba(242,239,233,.1);
  --ember:#FFE9C2;
  --bloom:0 0 .04em rgba(255,246,228,.42),0 0 .34em rgba(255,226,170,.2);
  --warmth:0 0 .5em rgba(255,232,190,.26);
  --nav-solid:rgba(8,8,10,.94);
  --nav-fade:rgba(8,8,10,.55);
  --inline-border:rgba(242,239,233,.24);
  --grain-opacity:.28;
  --grain-blend:overlay;
  --fire-core:radial-gradient(ellipse at 50% 50%,rgba(255,238,200,.9),rgba(255,198,124,.34) 48%,transparent 78%);
  --fire-heat:radial-gradient(ellipse 50% 50% at 50% 76%,rgba(255,226,175,.155),rgba(255,214,150,.05) 44%,transparent 72%);
  --ember-shadow:0 0 5px rgba(255,226,175,.6),0 0 13px rgba(255,210,140,.26);
  --crackle-rest:0 0 .04em rgba(255,246,228,.14),0 0 .3em rgba(255,228,180,.05);
  --crackle-a:0 0 .05em rgba(255,246,228,.6),0 0 .46em rgba(255,224,168,.28);
  --crackle-b:0 0 .045em rgba(255,246,228,.42),0 0 .4em rgba(255,224,168,.2);
  --crackle-c:0 0 .06em rgba(255,246,228,.8),0 0 .58em rgba(255,220,158,.36);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light;scrollbar-color:var(--label) var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;caret-color:var(--ember)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--hot);outline-offset:4px}
::selection{background:var(--hot);color:var(--bg)}
img{max-width:100%;height:auto}

.wrap{width:100%;max-width:1600px;margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 跳转链接是键盘用户在每个页面按下的第一个 Tab，所以它瞬时出现，没有过渡。
   藏起来用自身高度的百分比，不写死像素：字号放大到 200% 也依然藏得住 */
.skip{position:absolute;left:var(--pad);top:14px;z-index:99;background:var(--ink);color:var(--bg);
  padding:10px 16px;font:500 12px/1 var(--mono);transform:translateY(calc(-100% - 14px))}
.skip:focus{transform:none}

/* 颗粒：让大面积暖纸不显得像纯色网页背景，由 site.js 注入贴图 */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-repeat:repeat;background-size:120px 120px}

/* ---------- 导航 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:26px 0;
  background:linear-gradient(to bottom,var(--nav-solid),var(--nav-fade) 62%,transparent)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav .home{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;height:48px;
  margin-block:-19px;color:var(--ink);white-space:nowrap}
.nav .home-mark{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px}
.nav .home-name{font:600 17px/1 var(--disp);font-variation-settings:"wdth" 105,"wght" 600;
  letter-spacing:.035em;font-kerning:normal}
.nav .home img{display:block;width:44px;height:44px}
/* 深色品牌与主标题共用暖白墨色。 */
html[data-theme="dark"] .nav .home img{visibility:hidden}
html[data-theme="dark"] .nav .home-mark::after{content:"";position:absolute;width:44px;height:44px;
  background:var(--ink);pointer-events:none;
  -webkit-mask:url(slow-glow-icon-black-all-cutout.svg) no-repeat center/contain;
  mask:url(slow-glow-icon-black-all-cutout.svg) no-repeat center/contain}
.nav ul{display:flex;gap:clamp(15px,2.2vw,30px);list-style:none;margin:0;padding:0}
.nav a.n{font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim-2);
  transition:color .4s var(--ease)}
.nav a.n:hover{color:var(--ink)}
.nav a.n[aria-current="page"]{color:var(--ink)}
.theme-toggle{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  margin-block:-17px;padding-inline:4px;cursor:pointer;font:500 10px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim-2);transition:color .4s var(--ease)}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle .is-dark{display:none}
html[data-theme="dark"] .theme-toggle .is-light{display:none}
html[data-theme="dark"] .theme-toggle .is-dark{display:inline}

/* ---------- 呼吸：本站唯一的动效 ----------
   可变字体的字重在 20 秒里从 240 涨到 760 再落回来，
   每个字母错开 2.2 秒，于是"亮"像一道慢波扫过整个词。 */
.breathe{margin:0;font-family:var(--disp);text-transform:uppercase;line-height:.82;
  letter-spacing:-.028em;white-space:nowrap;
  font-size:clamp(52px,min(21vw,30vh),300px);font-variation-settings:'wdth' 102,'wght' 500}
.breathe span{display:inline-block;will-change:font-variation-settings;
  animation:breathe 20s ease-in-out infinite,crackle 23s ease-in-out infinite}
@keyframes breathe{
  0%,100%{font-variation-settings:'wdth' 99,'wght' 240;opacity:.5}
  50%    {font-variation-settings:'wdth' 106,'wght' 760;opacity:1}
}
.breathe.sm{font-size:clamp(44px,min(15vw,24vh),200px)}

.hero{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:118px 0 84px}
.hero-foot{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--hair)}
.hero-foot .zh{font-family:var(--zh);font-size:14px;letter-spacing:.5em;color:var(--ink-2)}
.hero-foot .en{font-size:15px;line-height:1.62;color:var(--dim);max-width:46ch}
.hero-foot .en b{font-weight:500;color:var(--ink-2)}

/* ---------- 区块 ---------- */
section{padding:var(--gap-s) 0}
.shead{font:500 10px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--dim-2);
  margin:0 0 clamp(40px,6vw,88px)}
.shead i{font-style:normal;font-family:var(--zh);letter-spacing:.3em;color:var(--label);margin-left:14px}

/* 大段落：句子里被"点亮"的词就是重点，不用加粗色块也不用高亮。
   中文按 em 控行宽（ch 在中文里等于半个字，会把行压得太窄）。 */
.say{margin:0;max-width:20em;font-size:clamp(20px,2.6vw,34px);line-height:1.68;color:var(--text);
  font-family:var(--zh);font-weight:400;letter-spacing:.02em}
.say b{font-weight:500;color:var(--hot)}
.say.wide{max-width:28em}
.say.tight{max-width:14em}
.say.sub{margin-top:clamp(30px,3.6vw,52px);font-size:clamp(15px,1.5vw,20px);line-height:2;color:var(--dim);max-width:30em}

/* ---------- 巨型列表：作品 / 文章共用 ---------- */
.lines .row{display:block;padding:clamp(14px,2vw,26px) 0}
.lines .nm{display:block;font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(34px,7.6vw,124px);line-height:.94;letter-spacing:-.03em;color:var(--dormant);
  font-variation-settings:'wdth' 104,'wght' 380;
  transition:color .55s var(--ease),font-variation-settings .55s var(--ease)}
.lines .row:hover .nm,.lines .row:focus-visible .nm{color:var(--hot);font-variation-settings:'wdth' 108,'wght' 800}
.lines .dsc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 220px;gap:28px;margin-top:14px;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .5s var(--ease),max-height .5s var(--ease)}
/* 展开是布局变化，触屏上点一下会触发假 hover 并卡住，所以只给真鼠标 */
@media (hover:hover) and (pointer:fine){
  .lines .row:hover .dsc{opacity:1;max-height:220px}
}
.lines .row:focus-visible .dsc{opacity:1;max-height:220px}
/* 220px 是拍出来的上限，内容通常远低于它，于是曲线的尾段在动一个看不见的盒子。
   支持 interpolate-size 的浏览器改用内容自己的高度，终点是对的；其余浏览器留在上面那条路上 */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .lines .dsc{max-height:none;height:0;transition:opacity .5s var(--ease),height .5s var(--ease)}
  @media (hover:hover) and (pointer:fine){
    .lines .row:hover .dsc{height:auto;max-height:none}
  }
  .lines .row:focus-visible .dsc{height:auto;max-height:none}
}
.lines .dsc b{font-weight:500;font-size:15px;line-height:1.55;color:var(--ink-2)}
.lines .dsc p{margin:0;font-family:var(--zh);font-size:12.5px;line-height:1.95;color:var(--dim)}
.lines .dsc s{text-decoration:none;font:400 10.5px/1.8 var(--mono);color:var(--dim-2);text-align:right}

/* ---------- 元数据行 ---------- */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;
  font:400 10.5px/1.85 var(--mono);color:var(--dim-2);letter-spacing:.04em}
.meta b{display:block;font-weight:500;letter-spacing:.2em;font-size:9px;color:var(--label);margin-bottom:7px}
.meta span{color:var(--ink-2)}

/* ---------- 链接 ---------- */
.lk{font:400 11.5px/2.1 var(--mono);color:var(--dim-2);letter-spacing:.04em}
.lk a{transition:color .4s var(--ease)}
.lk a:hover{color:var(--ink)}
.inline{border-bottom:1px solid var(--inline-border);padding-bottom:2px;text-underline-offset:.2em;
  transition:color .4s var(--ease),border-color .4s var(--ease)}
.inline:hover{color:var(--hot);border-color:var(--hot)}

/* 主要动作：不是按钮，是一行会被点亮的大字 */
.go{display:inline-block;font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(19px,2.6vw,34px);letter-spacing:-.015em;color:var(--label);
  font-variation-settings:'wdth' 104,'wght' 420;
  transition:color .5s var(--ease),font-variation-settings .5s var(--ease)}
.go:hover,.go:focus-visible{color:var(--hot);font-variation-settings:'wdth' 108,'wght' 780}
.go::after{content:" →";font-family:var(--sans)}

/* ---------- 页脚 ---------- */
.foot{position:relative;padding:64px 0 96px;border-top:1px solid var(--hair)}
.foot .fire{left:var(--pad)}
.foot .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot .footer-mark{width:44px;height:44px;background:var(--ink);display:block;
  -webkit-mask:url(slow-glow-icon-black-all-cutout.svg) no-repeat center/contain;
  mask:url(slow-glow-icon-black-all-cutout.svg) no-repeat center/contain}
.foot .cp{margin:14px 0 0;font:400 10px/1.9 var(--mono);color:var(--label);letter-spacing:.08em}
/* 故事只留这一行，放在全站最暗的位置。看见的人自然会看见 */
.foot .cp .path{font-family:var(--zh);letter-spacing:.3em;color:var(--faint);transition:color .4s var(--ease)}
.foot .cp .path:hover,.foot .cp .path:focus-visible{color:var(--hot)}
.foot nav{display:flex;gap:22px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.foot nav a:hover{color:var(--ink)}


/* ================= 微光 · 余烬 =================
   这个网站是一堆炭火。烧得不旺，但一直亮着，而且偶尔会爆一下。

   规则：光只从被点亮的东西发出来，没有独立光源，也没有背景光。
   火堆永远坐在一条发丝线上：线是地平线，火在上面。
   两个时间尺度叠在一起才活：20 秒的呼吸（稳），和不规则的明灭（噼啪）。
   三层炭的周期 7.3 / 11.7 / 17.3 秒互不整除，所以肉眼看不出循环。 */

.fire{position:absolute;left:0;bottom:100%;z-index:1;pointer-events:none;
  --w:92px;--h:28px;
  width:var(--w);height:var(--h);color:var(--ember)}
.fire.lg{--w:176px;--h:46px}

/* 炭：一排疏密不同的发丝线，底部实、四周化掉，就是一小堆火 */
.fire .coal{position:absolute;bottom:0;left:50%;translate:-50% 0;
  width:100%;height:100%;transform-origin:50% 100%;
  background-repeat:no-repeat;background-position:bottom left;
  -webkit-mask:radial-gradient(ellipse 52% 104% at 50% 100%,#000 0%,rgba(0,0,0,.86) 28%,rgba(0,0,0,.3) 62%,transparent 92%);
  mask:radial-gradient(ellipse 52% 104% at 50% 100%,#000 0%,rgba(0,0,0,.86) 28%,rgba(0,0,0,.3) 62%,transparent 92%)}
/* 每层炭是三把梳子叠出来的：齿距 11 / 13 / 17 互质，高度 100% / 58% / 34%，
   于是火苗的高低永远对不齐，看着才不像音频波形。 */
.fire .c1{--a:11px;--b:13px;--c:17px;animation:ember-a 7.3s linear infinite}
.fire .c2{--a:9px;--b:14px;--c:19px;width:76%;height:124%;opacity:.78;animation:ember-b 11.7s linear infinite}
.fire .c3{--a:7px;--b:11px;--c:23px;width:48%;height:74%;animation:ember-c 17.3s linear infinite}
.fire .coal{background-image:
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px var(--a)),
  repeating-linear-gradient(90deg,transparent 0 3px,currentColor 3px 4px,transparent 4px var(--b)),
  repeating-linear-gradient(90deg,transparent 0 6px,currentColor 6px 7px,transparent 7px var(--c));
  background-size:100% 100%,100% 58%,100% 34%}

/* 热芯：炭火最亮的是根部，不是尖 */
.fire::after{content:'';position:absolute;left:50%;bottom:-1px;translate:-50% 0;
  width:54%;height:5px;border-radius:50%;
  background:var(--fire-core);
  animation:ember-c 17.3s linear infinite}

/* 热：火上方那片说不清边界的暖，跟全站同一次呼吸 */
.fire .heat{position:absolute;left:50%;bottom:-18%;translate:-50% 0;
  width:calc(var(--w)*3);height:calc(var(--h)*4.2);
  background:var(--fire-heat);
  animation:heat 20s ease-in-out infinite}

/* 火星：稀疏到你会怀疑自己看错了 */
.fire .spark{position:absolute;left:50%;bottom:22%;width:2px;height:2px;border-radius:50%;
  background:currentColor;opacity:0;
  animation:spark var(--d,13s) linear infinite}

@keyframes ember-a{
  0%{opacity:.5;transform:scaleY(1)}      7%{opacity:.86;transform:scaleY(1.1)}
  12%{opacity:.6;transform:scaleY(.97)}   21%{opacity:.97;transform:scaleY(1.14)}
  27%{opacity:.56;transform:scaleY(.95)}  36%{opacity:.74;transform:scaleY(1.04)}
  44%{opacity:1;transform:scaleY(1.17)}   51%{opacity:.58;transform:scaleY(.96)}
  62%{opacity:.9;transform:scaleY(1.09)}  69%{opacity:.62;transform:scaleY(.99)}
  79%{opacity:.98;transform:scaleY(1.12)} 88%{opacity:.57;transform:scaleY(.95)}
  100%{opacity:.5;transform:scaleY(1)}}
@keyframes ember-b{
  0%{opacity:.62;transform:scaleY(1)}     9%{opacity:.34;transform:scaleY(.9)}
  17%{opacity:.8;transform:scaleY(1.12)}  29%{opacity:.45;transform:scaleY(.94)}
  41%{opacity:.9;transform:scaleY(1.2)}   53%{opacity:.4;transform:scaleY(.9)}
  66%{opacity:.72;transform:scaleY(1.06)} 78%{opacity:.36;transform:scaleY(.92)}
  90%{opacity:.84;transform:scaleY(1.14)} 100%{opacity:.62;transform:scaleY(1)}}
@keyframes ember-c{
  0%{opacity:.85}   13%{opacity:1}   22%{opacity:.6}   34%{opacity:.95}
  47%{opacity:.66}  58%{opacity:1}   71%{opacity:.7}   83%{opacity:.92}
  100%{opacity:.85}}
@keyframes heat{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
@keyframes spark{
  0%{transform:translate(0,0) scale(1);opacity:0}
  3%{opacity:.95}
  20%{transform:translate(calc(var(--dx,10px)*.4),calc(var(--rise,64px)*-.42)) scale(.8);opacity:.6}
  40%{transform:translate(var(--dx,10px),calc(var(--rise,64px)*-1)) scale(.3);opacity:0}
  100%{transform:translate(var(--dx,10px),calc(var(--rise,64px)*-1)) scale(.3);opacity:0}}

/* 噼啪：字母偶尔被吹旺一下再落回去。三次一个周期，每次约 1 秒涨、2 秒落。
   不是 100 毫秒的闪：闪是接触不良的霓虹灯，这个站叫缓慢发光，不能闪。
   每个字母的周期和相位都不同（见 site.js），八个字母合起来大约每秒一个开始亮，
   任何时刻都有两三个正在涨或落，于是一直有东西在慢慢亮，但从来没有东西在闪。 */
@keyframes crackle{
  0%,22%,30%,55%,63%,83%,92%,100%{text-shadow:var(--crackle-rest)}
  25%  {text-shadow:var(--crackle-a)}
  57.5%{text-shadow:var(--crackle-b)}
  86%  {text-shadow:var(--crackle-c)}}

/* 触光：被点亮的东西会渗出光，像被吹旺了一下 */
.say b{text-shadow:var(--warmth)}
.lines .row:hover .nm,.lines .row:focus-visible .nm,
.go:hover,.go:focus-visible{text-shadow:var(--bloom)}

/* ---------- 跨页过渡 ----------
   五个页面共用这一张样式表，所以这条声明在新旧两个文档里同时成立。
   只做交叉淡出，只动 opacity。导航栏单独提出来：它在五页上位置完全一致，
   这层形变是空操作，于是换页时火种不再熄灭一次。 */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:220ms;animation-timing-function:var(--ease)}
.nav{view-transition-name:nav}

/* ---------- 入场 ---------- */
[data-rv]{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-rv].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-rv]{opacity:1!important;transform:none!important}
  .breathe span{font-variation-settings:'wdth' 104,'wght' 620;opacity:1}
  .lines .dsc{opacity:1;max-height:none;height:auto}
  .fire .spark{display:none}
  .fire .coal{opacity:.8}
  .fire .heat{opacity:1}
  /* 上面的 * 选择器管不到 view transition 伪元素（它们不在 DOM 树里），必须单独关 */
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* 窄屏：保留完整图形标识，只收紧导航文字的字距 */
@media(max-width:720px){
  .nav{padding:20px 0}
  .nav .wrap{gap:12px}
  .nav ul{gap:10px}
  .nav a.n,.theme-toggle{font-size:9px;letter-spacing:.08em}
  /* 热气比屏幕还宽会顶出横向溢出。窄屏收一点，反正它本来就是看不清的那层 */
  .fire .heat{width:calc(var(--w)*1.8)}
}

/* 手机端分两行，品牌名和全部导航入口都完整保留。 */
@media(max-width:480px){
  .nav .wrap{flex-wrap:wrap;row-gap:24px}
  .nav .wrap>nav{flex-basis:100%}
  .nav ul{justify-content:space-between}
}

@media(max-width:900px){
  .lines .dsc{grid-template-columns:1fr;gap:10px;opacity:1;max-height:none;height:auto}
  .lines .dsc s{text-align:left}
  .lines .nm{color:var(--ink-2)}
  .hero{min-height:auto;padding:120px 0 60px}
  .say{max-width:none}
}