/* Shared by every page */
:root {
  --paper: #0B0B0B;
  --ink: #EDEDED;
  --soft: #9A9A9A;
  --line: #262626;
  --ochre: #D2AE55;
  /* Latin glyphs from Bricolage, Chinese from Noto Sans SC / PingFang */
  --font: "Bricolage Grotesque", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 56px; }

header { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 28px 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; letter-spacing: -0.03em; text-decoration: none; }
.logo img { width: 28px; height: 28px; }
/* one font and a fixed box height so Latin and Chinese labels line up */
nav { display: flex; align-items: center; gap: 8px; font-family: "Noto Sans SC", "PingFang SC", sans-serif; font-size: 15px; line-height: 1; }
nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; text-decoration: none; border-radius: 999px; white-space: nowrap; }
nav a:hover { background: #1E1E1E; }
nav a.pill { background: var(--ink); color: var(--paper); }

/* headings fade from bright to soft grey, like Proximal */
h1, h2 {
  background: linear-gradient(170deg, #F2F2F2 20%, #9B9B9B 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 900;
  letter-spacing: 0.01em;
}
/* The build wraps each multi-character Chinese word in .w (scripts/segment.py),
   so lines break between words, never inside one like 训练. */
.w { white-space: nowrap; }

/* body copy: same serif as the hero intro */
p { font-family: "Newsreader", "Noto Serif SC", "Songti SC", serif; line-height: 1.8; letter-spacing: 0.02em; color: #B4B4B4; }
.ctas { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn { padding: 14px 24px; border-radius: 999px; text-decoration: none; font-size: 16px; font-weight: 500; border: 1px solid var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--ink); color: var(--paper); }

footer { display: flex; justify-content: space-between; padding: 28px 0 40px; margin-top: 24px; font-size: 14px; color: var(--soft); border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  nav { gap: 2px; }
  nav a { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* smallest phones: keep logo and menu on one line */
@media (max-width: 360px) {
  .logo { font-size: 18px; gap: 8px; }
  .logo img { width: 24px; height: 24px; }
  nav a { padding: 0 8px; font-size: 14px; }
}