/* AndCo 官网 —— 方向 B「周日」：番茄红、奶油黄、深靛墨，贴纸语言（2px 墨边 + 硬阴影 + 轻微旋转）。
   只给没登录时的 / 用（server/http.mjs）；网页里面还是 app.css 的纸与墨，之后再换。设计见 docs/plans/2026-10-01-site-design.md */
:root {
  --tomato: #FF5A36; --butter: #FFE27A; --ink: #1B1035; --lilac: #D8CCFF; --cream: #FFF3D6; --white: #FFFFFF;
  --display: 'Bricolage Grotesque', 'Arial Black', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif; --body: 'Figtree', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased }
a { color: inherit }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; margin: 0; text-wrap: balance }
p { margin: 0 }
ul, ol { margin: 0; padding: 0; list-style: none }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px }
.center { text-align: center }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* & 贴纸：品牌记号，到处都是它 */
.amp { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--ink); color: var(--butter);
  font-family: var(--display); font-weight: 800; line-height: 1; transform: rotate(-8deg) }
.amp-h1 { width: 1em; height: 1em; font-size: .92em; vertical-align: -.1em }
.amp-sm { width: 1.15em; height: 1.15em; font-size: .8em; vertical-align: .02em }
.amp-xs { width: 1.15em; height: 1.15em; font-size: .78em; vertical-align: .05em }

/* 按钮：贴纸一样，按下去影子收回 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border: 2px solid var(--ink); border-radius: 999px;
  font: 700 18px/1 var(--body); text-decoration: none; box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink) }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink) }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px }
.btn-ink { background: var(--ink); color: var(--white); box-shadow: 4px 4px 0 var(--butter) }
.btn-ink:hover { box-shadow: 5px 5px 0 var(--butter) } .btn-ink:active { box-shadow: 1px 1px 0 var(--butter) }
.btn-white { background: var(--white) }
.btn-butter { background: var(--butter); color: var(--ink); border-color: var(--butter); box-shadow: 4px 4px 0 var(--tomato) }
.btn-butter:hover { box-shadow: 5px 5px 0 var(--tomato) } .btn-butter:active { box-shadow: 1px 1px 0 var(--tomato) }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 16px; box-shadow: 3px 3px 0 var(--ink) }
.soon { display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border: 2px dashed var(--ink); border-radius: 999px; font-weight: 600; font-size: 16px }

/* ---------- 首屏 ---------- */
.hero { background: var(--tomato); overflow: hidden }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 8px }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.03em }
.brand .amp { width: 46px; height: 46px; font-size: 28px }
.nav-links { display: flex; align-items: center; gap: 28px; font-weight: 600 }
.nav-links a:not(.btn) { text-decoration: none } .nav-links a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px }
/* 中英切换：一个小胶囊，手机上也留着 */
.nav-links a.lang-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 15px }
.nav-links a.lang-link:hover { text-decoration: none; background: var(--ink); color: var(--white) }

.hero-body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; padding-top: 96px; padding-bottom: 120px }
.kicker { font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-wrap: balance }
.hero h1 { font-size: clamp(52px, 9.2vw, 132px); line-height: .92; letter-spacing: -.045em; max-width: 12ch }
.lede { font-size: 21px; line-height: 1.5; font-weight: 500; max-width: 640px }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 4px }
.fine { font-size: 15px; font-weight: 500 }

/* 名字贴纸：大屏散在四周，小屏排成一行 */
.tags { position: absolute; inset: 0; z-index: 0; pointer-events: none }
.tag { position: absolute; border: 2px solid var(--ink); border-radius: 999px; padding: 12px 22px; font: 700 24px/1 var(--display); letter-spacing: -.02em;
  box-shadow: 4px 4px 0 var(--ink); white-space: nowrap; background: var(--white) }
.tag-1 { left: 2%; top: 150px; transform: rotate(-9deg) }
.tag-2 { right: 1%; top: 120px; transform: rotate(7deg); background: var(--butter) }
.tag-3 { left: 4%; bottom: 150px; transform: rotate(6deg); background: var(--lilac) }
.tag-4 { right: 3%; bottom: 190px; transform: rotate(-6deg); background: var(--ink); color: var(--white); box-shadow: 4px 4px 0 var(--butter) }
.hero-body > :not(.tags) { position: relative; z-index: 1 }

/* ---------- 段落 ---------- */
.band { padding: 112px 0 }
.band-cream { background: var(--cream) } .band-butter { background: var(--butter) } .band-tomato { background: var(--tomato) }
.band-ink { background: var(--ink); color: var(--cream) }
h2 { font-size: clamp(40px, 6vw, 76px); line-height: .98 }
.section-lede { font-size: 20px; line-height: 1.55; max-width: 640px; margin-top: 22px }
.center.section-lede { margin-left: auto; margin-right: auto }
.label { margin-top: 44px; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .75 }

/* 怎么玩 */
.how { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 80px; align-items: center }
.steps { display: flex; flex-direction: column; gap: 30px; margin-top: 44px }
.steps li { display: flex; gap: 18px; align-items: flex-start }
.num { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--tomato);
  font: 800 22px/1 var(--display); box-shadow: 3px 3px 0 var(--ink) }
.steps li:nth-child(2) .num { background: var(--butter) } .steps li:nth-child(3) .num { background: var(--lilac) }
.steps h3 { font-size: 26px; letter-spacing: -.02em }
.steps p { margin-top: 4px; max-width: 460px }

/* 群聊截图（静态） */
.phone { margin: 0; width: 100%; max-width: 400px; justify-self: center; background: var(--cream); border: 3px solid var(--ink); border-radius: 36px; overflow: hidden;
  box-shadow: 10px 10px 0 var(--ink); transform: rotate(2deg) }
.phone-head { background: var(--tomato); border-bottom: 2px solid var(--ink); padding: 22px 22px 16px }
.phone-title { font: 800 22px/1.1 var(--display); letter-spacing: -.02em } .phone-sub { font-size: 13px; font-weight: 600 }
.msgs { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px 26px }
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px }
.msg.right { align-items: flex-end }
.who { font-size: 13px; font-weight: 700 } .of { font-weight: 500 }
.ai-tag { display: inline-block; background: var(--ink); color: var(--white); border-radius: 6px; padding: 1px 6px; font-size: 11px; margin-left: 2px }
.bubble { max-width: 290px; background: var(--white); border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 16px; line-height: 1.4; box-shadow: 3px 3px 0 var(--ink); text-align: left }
.msg.right .bubble { border-radius: 18px 18px 4px 18px }
.msg.ai .bubble { background: var(--lilac) }
.react { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; background: var(--butter); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700 }
.react svg { fill: var(--tomato); stroke: var(--ink); stroke-width: 2 }

/* 还没有名字的关系 */
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 20px }
.pair { background: var(--white); border: 2px solid var(--ink); border-radius: 24px; padding: 26px 26px 24px; box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; gap: 12px }
.pair:nth-child(1) { transform: rotate(-1.6deg) } .pair:nth-child(2) { transform: rotate(1.2deg) } .pair:nth-child(3) { transform: rotate(-.8deg) }
.pair:nth-child(4) { transform: rotate(1.4deg) } .pair:nth-child(5) { transform: rotate(-1.2deg) } .pair:nth-child(6) { transform: rotate(.9deg) }
.pair:nth-child(4) { background: var(--lilac) } .pair:nth-child(6) { background: var(--tomato) }
.pair-names { font: 800 36px/1.05 var(--display); letter-spacing: -.035em }
.pair p { font-size: 17px; line-height: 1.45 }

/* 你的 AI 留在原来的地方 */
.ais { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center }
.ais h2 { color: var(--butter) }
.ais .btn { margin-top: 34px }
.hosts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start }
.hosts li { border: 2px solid var(--cream); border-radius: 999px; padding: 12px 22px; font: 700 22px/1 var(--display); letter-spacing: -.02em }
.hosts li:nth-child(odd) { transform: rotate(-2deg) } .hosts li:nth-child(even) { transform: rotate(2deg) }
.hosts li:last-child { background: var(--butter); color: var(--ink); border-color: var(--butter) }

/* 放心 */
.safe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 52px }
.safe li { background: var(--white); border: 2px solid var(--ink); border-radius: 22px; padding: 24px; box-shadow: 4px 4px 0 var(--ink) }
.safe h3 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 8px }
.safe p { font-size: 16px }
.more { margin-top: 36px; font-weight: 600 } .more a { text-underline-offset: 4px }

/* 结尾 */
.end { padding: 120px 0 128px }
.end-title { font-size: clamp(64px, 12vw, 168px); line-height: .9; letter-spacing: -.05em }
.cta-center { margin-top: 36px }

/* 页脚 */
.foot { background: var(--ink); color: var(--cream); padding: 44px 0 52px }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px }
.brand-foot .amp { background: var(--butter); color: var(--ink) }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 24px; font-weight: 600 }
.foot-links a { text-decoration: none } .foot-links a:hover { text-decoration: underline; text-underline-offset: 4px }
.foot-note { width: 100%; font-size: 14px; opacity: .8 }

/* ---------- 公开名片页 /card/:handle（server/routes/cards.mjs 出的 HTML） ---------- */
.card-page .hero { min-height: calc(100dvh - 140px) }
.card-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px }
.wrap.card-body { padding-top: 56px; padding-bottom: 96px }   /* 两个类：压过窄屏里 .wrap 的 padding */
.pair-card { width: min(560px, 100%); background: var(--butter); border: 3px solid var(--ink); border-radius: 32px; box-shadow: 10px 10px 0 var(--ink);
  padding: 40px 32px 34px; transform: rotate(-1.5deg); display: flex; flex-direction: column; align-items: center; gap: 18px }
.pc-kicker { font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase }
.pc-names { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 800 clamp(52px, 11vw, 92px)/.95 var(--display); letter-spacing: -.045em; overflow-wrap: anywhere; max-width: 100% }
.pc-amp { width: 1.15em; height: 1.15em; font-size: .62em; background: var(--tomato); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink) }
.pc-line { font: 600 22px/1.4 var(--body); max-width: 28ch; text-wrap: balance }
.pc-meta { font-size: 15px; font-weight: 500 }
.card-missing { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 40px 0 }
.card-missing h1 { font-size: clamp(44px, 7vw, 84px); line-height: .95 }

/* ---------- 窄屏 ---------- */
@media (max-width: 1180px) {
  .hero-body { padding-top: 64px; padding-bottom: 72px }
  .tags { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; margin-top: 10px }
  .tag { position: static; font-size: 18px; padding: 10px 16px; box-shadow: 3px 3px 0 var(--ink) }
  .tag-4 { box-shadow: 3px 3px 0 var(--butter) }
}
@media (max-width: 960px) {
  .how, .ais { grid-template-columns: minmax(0, 1fr); gap: 56px }
  .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .safe { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 600px) {
  body { font-size: 16px }
  .wrap { padding: 0 16px }
  .band { padding: 80px 0 }
  .hide-sm { display: none }
  .brand { font-size: 24px } .brand .amp { width: 40px; height: 40px; font-size: 24px }
  .hero-body { padding-top: 44px; padding-bottom: 56px; gap: 20px }
  .lede { font-size: 18px; text-wrap: pretty }
  .kicker { font-size: 13px; letter-spacing: .06em }
  .btn { width: 100%; max-width: 360px } .btn-sm { width: auto }
  .soon { width: 100%; max-width: 360px; justify-content: center }
  .pairs, .safe { grid-template-columns: minmax(0, 1fr) }
  .pair-names { font-size: 32px }
  .phone { transform: none; box-shadow: 6px 6px 0 var(--ink) }
  .hosts li { font-size: 18px; padding: 10px 16px }
  .end { padding: 88px 0 96px }
  .wrap.card-body { padding-top: 40px; padding-bottom: 64px }
  .pair-card { padding: 32px 20px 28px; box-shadow: 6px 6px 0 var(--ink) }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .btn { transition: none } }

/* 中文版（home.zh.html）：中文字落到系统字。方块字吃满一个字高，英文那套负字距和小于 1 的行高会挤在一起，这里放开 */
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing: 0 }
:lang(zh) .hero h1 { font-size: clamp(44px, 7.4vw, 108px); line-height: 1.1; letter-spacing: -.01em; max-width: none }
:lang(zh) h2 { line-height: 1.15 } :lang(zh) .end-title { line-height: 1.05 }
:lang(zh) .pair-names { line-height: 1.15; letter-spacing: -.01em }
:lang(zh) .lede, :lang(zh) .section-lede { line-height: 1.75 } :lang(zh) .steps p, :lang(zh) .safe p, :lang(zh) .pair p { line-height: 1.7 }
:lang(zh) .kicker { letter-spacing: .12em }
.nw { white-space: nowrap }   /* 中文标题里不许从词中间断开的那几段 */