/* ============================================================
   Atween Overseas · site styles
   Hallmark · macrostructure: Long Document · genre: editorial · tone: austere
   theme: custom (anchored to Atween brand canon — 四瓣双场 / 之间白核)
   paper: dual (white / night indigo) · display: roman-serif · accent: cool teal + warm amber
   enrichment: none (typography only) · motion: ambient field drift only
   pre-emit critique: P5 H4 E4 S5 R5 V4

   颜色全部走 tokens.css 语义变量（WEB-29）；本文件零裸 hex。
   字体栈本地自声明，与 tokens 的 --serif/--sans/--lat 同义但独立。
   2026-08-12 海外适配：CJK 栈换拉丁栈，并按拉丁文重调字重与行高
   （原 300 字重 / 1.95 行高是为 Noto Sans SC 调的，拉丁文下过细过散）。
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --f-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-lat:"Jost","Avenir Next","Century Gothic",sans-serif;
  --measure:66ch;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-sans);font-weight:400;font-size:17px;line-height:1.68;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
[id]{scroll-margin-top:88px}
a{color:var(--ac-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible,.skip:focus{outline:2px solid var(--ac);outline-offset:3px}

/* Skip link: appears on keyboard focus only, no script */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--sf);color:var(--ink)}
.skip:focus{left:0}

.wrap{max-width:820px;margin:0 auto;padding:0 30px}
.sec{padding:88px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.page-body{padding:64px 0 96px}
.eyebrow{font-family:var(--f-lat);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}

/* Display type — roman serif, generous but not oversized (austere) */
h1{font-family:var(--f-serif);font-weight:400;font-size:clamp(32px,5vw,52px);line-height:1.14;letter-spacing:-.015em;margin-bottom:20px;overflow-wrap:anywhere;min-width:0}
h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(24px,3.2vw,34px);line-height:1.24;letter-spacing:-.01em;margin-bottom:18px;overflow-wrap:anywhere;min-width:0}
h3{font-family:var(--f-serif);font-weight:500;font-size:20px;line-height:1.35;margin-bottom:8px}
p{max-width:var(--measure)}
p+p{margin-top:1.1em}
p.lead{font-size:17.5px;color:var(--ink2)}
p.meta{font-size:13px;color:var(--ink3);margin-top:10px}

/* Masthead */
.site-head{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{max-width:1100px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-name{font-family:var(--f-serif);font-size:19px;letter-spacing:.06em}
.brand-lat{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.3em;color:var(--ink3)}
.nav-links{display:flex;gap:2px;list-style:none;flex-wrap:wrap}
.nav-links a,.nav-get,.nav-crisis{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:20px;font-size:14px;white-space:nowrap}
.nav-links a{color:var(--ink2)}
.nav-links a:hover{color:var(--ink);text-decoration:none;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.nav-get{color:var(--ac-text)}
.nav-crisis{color:var(--danger-text);border:1px solid color-mix(in srgb,var(--danger) 55%,transparent);margin-left:8px}
.nav-crisis:hover{text-decoration:none;background:color-mix(in srgb,var(--danger) 8%,transparent)}
/* Narrow screens: the nav wraps. WEB-21 forbids hiding content;
   WEB-01 forbids dropdowns. So we tighten spacing and let the same
   links reflow — native semantics, zero script. */
@media (max-width:760px){
  .nav{padding:8px 14px;gap:4px}
  .nav-links{width:100%;order:3;gap:0 2px}
  .nav-links a{padding:0 10px;font-size:13.5px}
  .nav-get,.nav-crisis{font-size:13.5px;padding:0 12px}
  .nav-crisis{margin-left:auto}
}

/* Hero — the brand mark rendered in CSS: two fields, a core between them.
   This is the product's thesis, not decoration (canon rule ②). */
.hero{
  position:relative;overflow:hidden;text-align:center;padding:96px 26px 82px;
  background:radial-gradient(130% 95% at 50% 0%,var(--field-1) 0%,var(--field-2) 52%,var(--field-3) 100%);
  color:var(--brand-core);
}
.hero::before,.hero::after{
  content:"";position:absolute;top:50%;width:320px;height:320px;margin-top:-160px;
  border-radius:50%;filter:blur(46px);mix-blend-mode:screen;pointer-events:none;
}
.hero::before{left:-4%;background:radial-gradient(circle,color-mix(in srgb,var(--brand-cyan) 60%,transparent),transparent 72%);animation:fieldDriftCyan 15s ease-in-out infinite}
.hero::after{right:-4%;background:radial-gradient(circle,color-mix(in srgb,var(--brand-warm) 48%,transparent),transparent 74%);animation:fieldDriftWarm 17s ease-in-out infinite}
.hero h1,.hero .eyebrow,.hero .sub{position:relative;z-index:2}
.hero h1{max-width:16ch;margin-left:auto;margin-right:auto}
.hero .eyebrow{color:color-mix(in srgb,var(--brand-core) 55%,transparent)}
.hero .sub{font-family:var(--f-serif);font-size:19px;line-height:1.62;max-width:44ch;margin:24px auto 0;color:color-mix(in srgb,var(--brand-core) 76%,transparent)}
@keyframes fieldDriftCyan{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-3%) scale(1.08)}}
@keyframes fieldDriftWarm{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,3%) scale(1.1)}}

/* Creed — five statements set as sentences, not pills.
   Latin sentences are too long for the CJK pill treatment. */
.creed-row{list-style:none;margin-top:22px;max-width:var(--measure)}
.creed-row li{
  font-family:var(--f-serif);font-size:19px;line-height:1.5;color:var(--ink2);
  padding:14px 0 14px 20px;border-left:2px solid color-mix(in srgb,var(--ac) 30%,transparent);
}
.creed-row li+li{margin-top:2px}

/* Boundaries — the six cards (WEB-08).
   The number stacks ABOVE the heading in one column; the hanging-header
   (number-left / heading-right) pattern is deliberately avoided. */
.boundary-list{list-style:none;counter-reset:boundary;margin-top:30px}
.boundary-list>li{
  counter-increment:boundary;max-width:var(--measure);
  padding:28px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.boundary-list>li::before{
  content:counter(boundary,decimal-leading-zero);
  display:block;font-family:var(--f-lat);font-size:11px;letter-spacing:.28em;
  color:var(--warm-text);margin-bottom:10px;
}
.boundary-list h3{color:var(--ink)}
.boundary-list p{color:var(--ink2)}

/* Steps */
.steps{margin:22px 0 24px;padding-left:22px;color:var(--ink2);max-width:var(--measure)}
.steps li{padding:9px 0}
.steps b{font-weight:600;color:var(--ink)}

/* Cards & registers */
.pending-card{
  margin-top:22px;max-width:var(--measure);padding:18px 22px;border-radius:0 12px 12px 0;
  border-left:2px solid color-mix(in srgb,var(--ac) 55%,transparent);background:var(--well);color:var(--ink2);
}
.state{display:inline-block;font-family:var(--f-lat);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--warm-text);border:1px solid color-mix(in srgb,var(--warm) 45%,transparent);border-radius:5px;padding:2px 9px;margin-right:10px;margin-bottom:8px}
.toc{display:flex;gap:20px;flex-wrap:wrap;margin:24px 0 8px}
.toc a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid color-mix(in srgb,var(--ac) 35%,transparent)}
.notice-ch,.faq h2{margin-top:38px}
.notice-ch{padding-top:28px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.faq h2{font-size:clamp(20px,2.4vw,25px)}
.store-list,.pending-list{margin-top:22px;max-width:var(--measure)}
.store-list dt,.pending-list dt{font-size:16px;color:var(--ink);margin-top:16px}
.store-list dd,.pending-list dd{font-size:14.5px;color:var(--ink3);margin-top:4px}
.quiet-link{border-bottom:1px solid color-mix(in srgb,var(--ac) 40%,transparent)}

/* Crisis page takes the canon's crisis field tone (desaturated neutral) */
[data-field="crisis"]{background:var(--bg);color:var(--ink)}
.calm .eyebrow{color:var(--danger-text)}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding:48px 0 88px;background:var(--sf2)}
.creed{font-family:var(--f-serif);font-size:16px;line-height:1.55;color:var(--ink2);margin-bottom:20px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap;list-style:none;margin-bottom:22px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink2)}
.legal,.static-pledge{font-size:13px;line-height:1.8;color:var(--ink3);max-width:var(--measure)}
.static-pledge{margin-top:18px}

/* No horizontal scroll at any width (Hallmark gates 36 / 62) */
html,body{overflow-x:clip}

/* WEB-26: reduced motion stops everything, pure CSS, no script */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}