/* Breath — 三个页面共用的地基。
   之前样式各写各的，结果 support / privacy 一直停在早期的紫色版本，
   跟首页整整差了一代。凡是「三处都该一样」的东西一律放这里。 */

:root{
  --ink:#0E1311;          /* 墨底，带一点绿调 */
  --paper:243 240 233;    /* 生成り，用于文字 */
  --measure:26rem;        /* 首页特性行的注解宽度 */
  --prose:34rem;          /* 正文页的可读宽度上限 */
  --breath:11s;           /* 产品的节律：一次呼吸 11 秒 */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Helvetica Neue",sans-serif;

  /* 字号标度。正文 17px 是 iOS 的 SF Text body，产品是 iPhone App，跟着它走。
     小字只留三档：再细分下去的差值（.78 与 .80 相差 0.32px）眼睛分不出来，
     只会让维护时无从判断该用哪个。 */
  --t-micro:.66rem;       /* 10.6px — 眼眉标签、dt、图注 */
  --t-small:.8rem;        /* 12.8px — CTA、引文、页脚 */
  --t-dd:.95rem;          /* 15.2px — 规格值 */
  --t-lead:clamp(1.1rem,2.2vw,1.4rem);
  --t-h2:clamp(1.7rem,3.4vw,2.5rem);
  --t-big:clamp(1.9rem,4.4vw,3rem);
  --t-h1:clamp(2.05rem,7.4vw,4.2rem);

  /* 纵向节奏。原来用 vh，段间距会跟着视口高度漂：横屏矮机 7vh=27px，
     桌面 7vh=75px，同一份设计在两台设备上疏密完全不同。改成跟字号同源的
     宽度 clamp，节奏就只跟版心宽度有关。 */
  --s-section:clamp(3.5rem,7vw,6.5rem);
  --s-row:clamp(2.5rem,5vw,5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:rgb(var(--paper)/.72);
  font:300 17px/1.65 var(--font-sans);
  overflow-x:hidden;
  /* 浅字压深底时，subpixel 抗锯齿会把细体渲染得偏胖、发虚。灰度抗锯齿才是这套配色该走的路。 */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ── 背景：液态金属 ──────────────────────────────────
   iOS Safari 跑不动 feTurbulence + feDisplacementMap 的链式滤镜，会直接放弃
   绘制、背景变成一片空。所以这里用预渲染好的同一套金属图，流动交给合成器：
   同一张图叠两层，一层正、一层镜像，各自以 52s 和 71s 的周期做极慢的缩放位移。
   两个周期接近互质，反射带便长时间不重复地互相穿过，读起来就是液面在动。
   全程只有 transform 和 opacity，跑在 GPU 合成层上。 */
.metal-still{position:fixed; inset:0; z-index:0; pointer-events:none;
             overflow:hidden; background:#080B0A;
             animation:breathe var(--breath) ease-in-out infinite}
.metal-still::before,.metal-still::after{
  content:""; position:absolute; inset:-16%;
  background:url("img/metal-portrait.jpg") center/cover no-repeat;
  transform:translateZ(0); backface-visibility:hidden}
.metal-still::before{animation:drift-a 52s ease-in-out infinite alternate}
.metal-still::after{opacity:.42; mix-blend-mode:lighten;
                    animation:drift-b 71s ease-in-out infinite alternate}
@keyframes drift-a{
  from{transform:scale(1.06) translate(-2.5%, 1.8%) rotate(-1.4deg)}
  to  {transform:scale(1.17) translate( 2.5%,-1.8%) rotate( 1.4deg)}}
@keyframes drift-b{
  from{transform:scaleX(-1) scale(1.15) translate(-2%,-2.2%) rotate( 1.1deg)}
  to  {transform:scaleX(-1) scale(1.05) translate( 2%, 2.2%) rotate(-1.1deg)}}
@keyframes breathe{0%,100%{transform:scale(1.02);opacity:.92} 50%{transform:scale(1.07);opacity:1}}

/* scrim 的强度是量出来的，不是调出来的：背景是 fixed 的，正文会滚过它的每一处，
   所以约束是「全屏最暗处」而不是「首屏观感」。轻 scrim 下手机 24%、桌面 18.7% 的
   背景面积让正文掉到 4.5:1 以下。这一档是两端同时归零的拐点（手机最低 5.18:1，
   桌面 4.67:1），再加只会把金属的明暗层次压平。 */
.scrim{position:fixed; inset:0; z-index:1; pointer-events:none;
       background:radial-gradient(120% 90% at 50% 40%, rgb(8 11 10/.62) 0%, rgb(8 11 10/.82) 70%, rgb(8 11 10/.90) 100%)}
/* 纸纹：极细颗粒，压掉数码渐变的塑料感 */
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>")}

/* ── 版式基座 ──────────────────────────────────────── */
.wrap{position:relative; z-index:2; max-width:70rem; margin-inline:auto; padding:0 max(6vw,1.5rem)}
.label{font-size:var(--t-micro); letter-spacing:.4em; text-transform:uppercase;
       color:rgb(var(--paper)/.7); margin:0}
h1,h2,.big,.tagline{text-wrap:balance}
p,li{text-wrap:pretty}
h1{margin:0 0 1rem; font-weight:200; line-height:1.05; letter-spacing:-.012em;
   font-size:var(--t-h1); color:rgb(var(--paper)/.97)}

/* 链接：默认就看得出可点（不靠 hover 才显形），四态齐全。
   过渡必须逐项列出——写成 transition:.3s ease 会把 visibility 这类离散属性
   也纳入过渡，元素被隐藏后还会在屏上滞留一帧以上。 */
a{color:rgb(var(--paper)/.74); text-decoration:none;
  border-bottom:1px solid rgb(var(--paper)/.2);
  transition:color .2s ease, border-bottom-color .2s ease}
a:hover{color:rgb(var(--paper)/.97); border-bottom-color:rgb(var(--paper)/.5)}
a:active{color:rgb(var(--paper)/1); border-bottom-color:rgb(var(--paper)/.7)}
a:focus-visible{outline:2px solid rgb(var(--paper)/.6); outline-offset:3px; border-radius:4px}

/* 返回链接：与眼眉标签同一套微字，不做成按钮 */
.back{display:inline-block; font-size:var(--t-micro); letter-spacing:.34em;
      text-transform:uppercase; color:rgb(var(--paper)/.7); border-bottom:0;
      margin:0 0 var(--s-row)}
.back:hover{color:rgb(var(--paper)/.97); border-bottom:0}

footer{border-top:1px solid rgb(var(--paper)/.11); padding:3rem 0 var(--s-section);
       display:flex; flex-wrap:wrap; align-items:baseline; gap:1.25rem 2.5rem;
       font-size:var(--t-small); color:rgb(var(--paper)/.7)}
footer .grow{flex:1 1 5rem}

@media (prefers-reduced-motion:reduce){
  .metal-still,.metal-still::before,.metal-still::after{animation:none}
  a{transition:none}
}