/* yiyiii.com 公司官网 · 方向 A「刊物」 · 2026-09 重做
   纸底 + 宋体标题 + 细线分栏；无渐变、无卡片阴影。 */
@import url('https://fonts.loli.net/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --paper: #faf8f3;
  --paper-2: #f3f0e9;
  --ink: #16202a;
  --ink-soft: #3b4652;
  --ink-mute: #6b7783;
  --ink-faint: #b8b0a3;
  --rule: #16202a;
  --rule-fine: rgba(22, 32, 42, 0.14);
  --link: #0052bf;
  --link-hover: #003a8a;

  --font-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --font-sans: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --max-w: 1248px;
  --gutter: clamp(20px, 6vw, 96px);
  --section-gap: clamp(72px, 10vw, 128px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
img { max-width: 100%; display: block; }
h1, h2, h3, .serif { font-family: var(--font-serif); font-weight: 600; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding-left: 1.4em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.rule { height: 1px; background: var(--rule); }
.rule-fine { height: 1px; background: var(--rule-fine); }
.wrap { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--gutter); }

/* ─── Header ─── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand img { width: 28px; height: 28px; }
.brand span { font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: 0.06em; }
.nav { display: flex; gap: clamp(18px, 3vw, 40px); font-size: 14px; }
.nav a { color: var(--ink-soft); }
.nav a:hover { color: var(--ink); }
.nav-toggle { display: none; }

/* ─── Hero ─── */
.hero { padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 8vw, 104px); }
.hero-grid { display: grid; grid-template-columns: 2fr 8fr 2fr; gap: 24px; }
.hero-meta { display: flex; flex-direction: column; gap: 10px; }
.hero h1 {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.hero p {
  margin-top: clamp(24px, 3vw, 40px);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 680px;
}

/* ─── Index (三条业务) ─── */
.index-head { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 0 8px; }
.index-row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr 160px;
  gap: 32px;
  padding: 40px 0;
  border-top: 1px solid var(--rule-fine);
  align-items: baseline;
}
.index-row:last-child { border-bottom: 1px solid var(--rule); }
.index-num { font-family: var(--font-serif); font-size: 40px; color: var(--ink-faint); line-height: 1; }
.index-name { font-family: var(--font-serif); font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.3; }
.index-tag { margin-top: 10px; }
.index-desc { color: var(--ink-soft); line-height: 1.75; }
.index-link { text-align: right; }
.index-link a { font-family: var(--font-serif); font-size: 16px; border-bottom: 1px solid var(--link); white-space: nowrap; }

/* ─── 通用两栏节 ─── */
.section { padding-top: var(--section-gap); }
.two-col { display: grid; grid-template-columns: 3fr 9fr; gap: 24px; }
.section-title { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.3; margin-top: 16px; }

.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; }
.belief h3 { font-size: 20px; }
.belief p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }

.research { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.research-item { border-top: 1px solid var(--rule-fine); padding-top: 20px; }
.research-item h3 { font-size: 20px; margin-top: 12px; }
.research-item p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }

/* ─── 创始人信 ─── */
.letter { grid-column: span 7; }
.letter p { font-family: var(--font-serif); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.9; }
.letter p + p { margin-top: 1.2em; }
.letter .first { font-size: clamp(22px, 2vw, 26px); line-height: 1.7; }
.letter .sig { margin-top: 32px; }

/* ─── 大事记 + 联系 ─── */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 32px 0; }
.timeline div > div:last-child { margin-top: 8px; font-size: 15px; }

.contact { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding: 40px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.contact .company { font-family: var(--font-serif); font-size: 18px; color: var(--ink); }
.contact .company small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); margin-top: 6px; }
.contact a { color: var(--ink-soft); border-bottom: 1px solid var(--rule-fine); }
.contact a:hover { color: var(--ink); border-color: var(--ink); }

.site-footer { padding-block: 56px 40px; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); }
.footer-row a { color: var(--ink-mute); }
.footer-row a:hover { color: var(--ink); }
.footer-row button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-mute); cursor: pointer; letter-spacing: inherit; }
.footer-row button:hover { color: var(--ink); }
.footer-links { display: flex; gap: 20px; }

/* ─── 法务弹窗（原生 dialog） ─── */
dialog.legal {
  width: min(720px, calc(100vw - 32px));
  max-height: 84vh;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  padding: clamp(28px, 4vw, 48px);
  font-size: 14.5px;
  line-height: 1.8;
}
dialog.legal::backdrop { background: rgba(22, 32, 42, 0.5); backdrop-filter: blur(6px); }
dialog.legal h2 { font-size: 28px; color: var(--ink); }
dialog.legal .updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute); margin: 8px 0 28px; }
dialog.legal h3 { font-size: 18px; color: var(--ink); margin: 28px 0 10px; }
dialog.legal h4 { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); margin: 18px 0 6px; }
dialog.legal p { margin-bottom: 12px; }
dialog.legal ul { margin-bottom: 12px; }
dialog.legal .note { border-left: 2px solid var(--ink); padding: 8px 0 8px 16px; margin: 20px 0; font-size: 13.5px; background: rgba(22, 32, 42, 0.03); }
dialog.legal code { background: rgba(22, 32, 42, 0.05); padding: 1px 5px; font-family: var(--font-mono); font-size: 0.92em; }
dialog.legal .close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-mute);
}
dialog.legal .close:hover { color: var(--ink); }

/* ─── 响应式 ─── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-meta { flex-direction: row; gap: 24px; margin-bottom: 24px; }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .index-row { grid-template-columns: 72px 1fr; gap: 16px 24px; }
  .index-desc { grid-column: 2; }
  .index-link { grid-column: 2; text-align: left; }
  .research { grid-template-columns: 1fr; gap: 28px; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .site-header .wrap { height: 64px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-top: 1px solid var(--rule-fine); font-size: 16px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--ink); }
  .beliefs { grid-template-columns: 1fr; gap: 28px; }
  .index-num { font-size: 28px; }
  .timeline { grid-template-columns: 1fr; gap: 16px; }
  .contact { grid-template-columns: 1fr; }
  .footer-row { flex-direction: column; }
}