/* GEI 官网 v3-jp · Main
   照 Mia v3-jp 设计稿实现 · 日式极简 washi/sumi/唯一朱 · 渐进增强 */

/* ============ 字体 · v5-EN 单家族编辑衬线 Newsreader (Latin 子集自托管) ============ */
/* display + body 同族 Newsreader, 两视觉光学角色。Latin 子集含弯引号/em-en dash/省略号码点
   (U+2018–201D / U+2013 / U+2014 / U+2026 显式打进, 不掉系统字)。
   400 + 500 首屏, font-display:swap, 一对 preload。合计 ~27KB woff2, 远低于 v4 CJK ~51KB。
   箭头 U+2192 Newsreader 无此字形 → CTA 箭头改 CSS ::after 画 (见 .cta-arrow), 不赌字体。 */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Newsreader-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Newsreader-500-latin.woff2") format("woff2");
}
/* Italic 400 — 仅案例引文用 (折叠下, 不 preload, 按需懒加载) */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Newsreader-i400-latin.woff2") format("woff2");
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-washi);
  color: var(--ink-sumi);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  /* Latin 编辑甜区: 行高 1.62, 字距 0 (替 v4 的 CJK 1.9 / 0.012em — 太松/不优雅) */
  line-height: 1.62;
  letter-spacing: 0;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 开口引号悬挂入边距 (优雅信号; 支持处生效) */
  hanging-punctuation: first allow-end;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--shu-ink);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ============ 排版基元 · Latin-tuned (大字负字距+紧行高 = 优雅核心) ============ */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;            /* 标题自然平衡折行 */
}
.display-xl { font-size: var(--fs-display-xl); line-height: 1.08; letter-spacing: -0.015em; }
.display-l  { font-size: var(--fs-display-l);  line-height: 1.12; letter-spacing: -0.01em; }
.heading    { font-size: var(--fs-heading);    line-height: 1.2;  letter-spacing: -0.005em; }
/* P2-25 · 长标题改 pretty 消末行孤字 (display-l 多为整句长标题; 单词能力名无折行不受影响)。
   短标题 display-xl(Hero)/heading/chapter__title 保 balance 走自然平衡折行。 */
.display-l { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink-nezumi);
  max-width: var(--measure-lead); /* lead 更短 54ch */
  margin: 0;
  text-wrap: pretty;
}
.prose {
  max-width: var(--measure);      /* 66ch */
  color: var(--ink-nezumi);
  margin: 0;
  text-wrap: pretty;
}
.small { font-size: var(--fs-small); line-height: 1.5; letter-spacing: 0.005em; }

/* 克制 label (无编号) — 用 nezumi 承载可读副标 */
.label {
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--ink-nezumi);
  margin: 0;
}

.shu { color: var(--shu); }   /* 唯一朱 — 仅 ≥24px / ≥18.66px bold 大字 */

/* ============ 布局容器 ============ */
.container { width: min(100% - 2.5rem, var(--w-wide)); margin-inline: auto; }
.content   { width: min(100% - 2.5rem, var(--w-content)); margin-inline: auto; }

section { padding-block: var(--section-y-base); }
section.loose { padding-block: var(--section-y-loose); }
.bg-kinari { background: var(--bg-kinari); }

/* whisper 细线 — 仅段尾收口/必要分区, 装饰性 */
.whisper {
  border: 0;
  height: 1px;
  background: var(--line-whisper);
  margin: var(--sp-6) 0 0;
  width: 100%;
}
.whisper.short { width: 4rem; }

/* ============ 文字链接 / InlineCTA ============ */
/* 朱字红线: 链接文字默认 nezumi, hover 转 shu-ink (5.76 ✓, 非 #C8472F) */
.text-link {
  display: inline-block;
  position: relative;
  font-family: var(--font-body);
  color: var(--ink-sumi);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color var(--d-fast) var(--ease-soft);
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--line-whisper);
}
/* sliding underline: 朱下划线右展 */
.text-link::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--shu);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-fast) var(--ease-soft);
}
.text-link:hover, .text-link:focus-visible { color: var(--shu-ink); }
.text-link:hover::before, .text-link:focus-visible::before { transform: scaleX(1); }

/* Hero 的 inline CTA — 常显可辨 (箭头默认在), 不靠 hover 才出现 */
.cta-inline {
  font-size: var(--fs-lead);
  letter-spacing: 0.01em;
}

/* CTA 箭头不赌字体 (Newsreader 无 U+2192) → CSS mask 画 SVG 箭头, 继承文字色。
   .arrow span 自身留空, 形状由 ::after 描出。 */
.arrow {
  display: inline-block;
  width: 0.85em;
  height: 0.72em;
  margin-left: 0.1em;
  vertical-align: -0.04em;
  background-color: currentColor;
  -webkit-mask: var(--cta-arrow-svg) center / contain no-repeat;
          mask: var(--cta-arrow-svg) center / contain no-repeat;
  transition: transform var(--d-base) var(--ease-calm);
}
:root {
  --cta-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h20M15 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cta-inline:hover .arrow, .cta-inline:focus-visible .arrow { transform: translateX(6px); }

/* 上斜箭头 (nav "Install ↗" / "Need Claude Code? ↗") — 同 mask 手法换 SVG, 不赌字体 */
.arrow--up {
  width: 0.78em;
  height: 0.78em;
  vertical-align: -0.02em;
  -webkit-mask: var(--cta-arrow-up-svg) center / contain no-repeat;
          mask: var(--cta-arrow-up-svg) center / contain no-repeat;
}
:root {
  --cta-arrow-up-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M9 6h9v9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 下箭头 (macOS app 下载) — 同 mask 手法, 同描边语言 (1.8 / round), 不赌字体 */
.arrow--down {
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.06em;
  -webkit-mask: var(--cta-arrow-down-svg) center / contain no-repeat;
          mask: var(--cta-arrow-down-svg) center / contain no-repeat;
}
:root {
  --cta-arrow-down-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11M7.5 10.5L12 15l4.5-4.5M4.5 20h15' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 下载按钮的箭头往下走, 不沿用横向 CTA 的 translateX */
.btn-cta:hover .arrow--down,
.btn-cta:focus-visible .arrow--down { transform: translateY(3px); }

/* ============ 主 CTA 按钮 (仅段7 暗底) ============ */
/* 朱底白字, 文字锁 ≥18px/600 */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 1.125rem;   /* 18px */
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-on-dark);
  background: var(--shu);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.9em 1.8em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-soft);
}
.btn-cta .arrow { transition: transform var(--d-base) var(--ease-calm); }
.btn-cta:hover, .btn-cta:focus-visible { background: var(--shu-ink); }
.btn-cta:hover .arrow, .btn-cta:focus-visible .arrow { transform: translateX(5px); }
.btn-cta:active { transform: translateY(1px); }

/* ============ 顶栏 SiteHeader ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-washi) 88%, transparent);
  backdrop-filter: saturate(120%) blur(6px);
  transition: box-shadow var(--d-base) var(--ease-soft), border-color var(--d-base) var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { border-bottom-color: var(--line-whisper); }
.site-header__inner {
  width: min(100% - 2.5rem, var(--w-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-sumi);
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}
/* 内联紧贴 "GEI" 字标的 I 标记 → aria-hidden, 不让读屏念两遍 (P0 #5) */
.brand .i-mark {
  width: 0.62em;
  height: 0.62em;
  color: var(--ink-sumi);
  align-self: center;
}
/* brand 的 "·" 是小字标点 → 用 sumi (朱红线: 小字禁 #C8472F); 朱预算留给大字/填充/CTA */
.brand .dot { color: var(--ink-nezumi); }

.nav { display: flex; flex-wrap: wrap; gap: clamp(0.7rem, 1.6vw, 1.6rem); }
.nav a {
  position: relative;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--ink-nezumi);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color var(--d-fast) var(--ease-soft);
}
.nav a::before {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--shu);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-fast) var(--ease-soft);
}
.nav a:hover, .nav a:focus-visible { color: var(--shu-ink); }
.nav a:hover::before, .nav a:focus-visible::before { transform: scaleX(1); }
/* scrollspy 当前段: 文字加深 + 下划线常显 (墨, 不耗朱预算) */
.nav a.is-current { color: var(--ink-sumi); }
.nav a.is-current::before { background: var(--ink-sumi); transform: scaleX(1); }

/* nav "Install ↗" — 升级末项为 install 入口 (墨字 + 上斜箭头, 不耗朱预算; 比普通 nav 项稍重) */
.nav__install {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  color: var(--ink-sumi);
  font-weight: 500;
}
.nav__install .arrow--up { transition: transform var(--d-base) var(--ease-calm); }
.nav__install:hover .arrow--up, .nav__install:focus-visible .arrow--up { transform: translate(2px, -2px); }

/* 移动端导航折叠 */
.nav-toggle { display: none; }
@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.5em;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-latin); font-size: var(--fs-label);
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-nezumi);
    padding: 0.4em 0;
  }
  .nav {
    display: none;
    position: absolute; top: 64px; right: 1.25rem; left: 1.25rem;
    flex-direction: column;
    background: var(--bg-washi);
    border: 1px solid var(--line-whisper);
    padding: var(--sp-3);
    gap: var(--sp-2);
  }
  .nav.open { display: flex; }
  .nav a { font-size: var(--fs-body); }
}

/* ============ Footer ============ */
.site-footer {
  background: var(--bg-washi);
  border-top: 1px solid var(--line-whisper);
  padding-block: var(--sp-8);
}
.site-footer__inner {
  width: min(100% - 2.5rem, var(--w-wide));
  margin-inline: auto;
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  color: var(--ink-nezumi);
  font-size: var(--fs-small);
}
.site-footer .brand { font-size: 1rem; }
/* 可验证信号 + 链接 · 仍承 nezumi, 不动朱, 不破版式 */
.site-footer__signal { color: var(--ink-nezumi); letter-spacing: 0.01em; }
.site-footer__links { display: inline-flex; gap: var(--sp-3); }

/* ============ Scroll reveal (改造自 transitions-dev texts-reveal)
   关键: 初始 opacity:1 (no-JS / 关动画时内容不消失), JS 标 .reveal-ready 后才下沉
   去 blur (设计禁发光/模糊), 仅 opacity + translateY ≤16px, calm 缓动 ============ */
.reveal { opacity: 1; }
.js .reveal.reveal-ready {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--d-base) var(--ease-calm),
    transform var(--d-base) var(--ease-calm);
  will-change: opacity, transform;
}
.js .reveal.reveal-ready.is-shown {
  opacity: 1;
  transform: translateY(0);
}
/* stagger 子项 (肖像/行) */
.js .reveal-stagger > .reveal-item.reveal-ready {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--d-base) var(--ease-calm),
    transform var(--d-base) var(--ease-calm);
}
.js .reveal-stagger.is-shown > .reveal-item.reveal-ready {
  opacity: 1; transform: translateY(0);
}
.js .reveal-stagger.is-shown > .reveal-item:nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger.is-shown > .reveal-item:nth-child(2) { transition-delay: calc(var(--reveal-stagger) * 1); }
.js .reveal-stagger.is-shown > .reveal-item:nth-child(3) { transition-delay: calc(var(--reveal-stagger) * 2); }
.js .reveal-stagger.is-shown > .reveal-item:nth-child(4) { transition-delay: calc(var(--reveal-stagger) * 3); }
.js .reveal-stagger.is-shown > .reveal-item:nth-child(5) { transition-delay: calc(var(--reveal-stagger) * 4); }
.js .reveal-stagger.is-shown > .reveal-item:nth-child(6) { transition-delay: calc(var(--reveal-stagger) * 5); }
.js .reveal-stagger.is-shown > .reveal-item:nth-child(7) { transition-delay: calc(var(--reveal-stagger) * 6); }
.js .reveal-stagger.is-shown > .reveal-item:nth-child(8) { transition-delay: calc(var(--reveal-stagger) * 7); }
.js .reveal-stagger.is-shown > .reveal-item:nth-child(9) { transition-delay: calc(var(--reveal-stagger) * 8); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal.reveal-ready,
  .js .reveal-stagger > .reveal-item.reveal-ready {
    transform: none !important;
    transition: opacity var(--d-fast) linear !important;
  }
  .js .reveal-stagger.is-shown > .reveal-item { transition-delay: 0ms !important; }
}

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip-link · 默认 sr-only(clip),:focus 时显形为 washi 实体按钮 (WCAG 2.4.1) */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
  z-index: 100; /* 高于 sticky header (z:50) */
  font-family: var(--font-display);
  font-size: 1rem; text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: var(--sp-2); top: var(--sp-2);
  width: auto; height: auto; overflow: visible;
  clip: auto; white-space: normal;
  padding: 0.6em 1em;
  background: var(--bg-washi);
  color: var(--ink-sumi);
  border-radius: 4px;
  box-shadow: 0 2px 10px #1C1A1726;
  outline: 2px solid var(--shu);
  outline-offset: 2px;
}