:root {
  --color-primary: #3a7bd5;
  --color-primary-dark: #1f56a8;
  --color-primary-deep: #133a78;
  --color-accent: #fcd93b;
  --color-heading: #172a45;
  --color-text: #33415a;
  --color-muted: #5a6780;
  --color-border: #e3e9f1;
  --color-surface: #f4f7fb;
  --ground: #e9f0f9;
  --tint: linear-gradient(135deg, #f3f8ff, #dceafb);
  --content-width: 75rem;
  --gutter: 1.5rem;
  --bleed: max(var(--gutter), (100% - var(--content-width)) / 2);
  --radius: 0.75rem;
  --shadow: 0 0.5rem 1.75rem rgb(19 58 120 / 9%);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-latin: "Helvetica Neue", Helvetica, Arial, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei",
    sans-serif;
  --font-chinese: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: var(--color-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* :lang() would also match every descendant and beat element rules. */
[lang|="zh"] {
  font-family: var(--font-chinese);
  line-height: 1.9;
}

[lang|="en"] {
  font-family: var(--font-latin);
  line-height: 1.75;
}

main {
  flex: 1;
  overflow-x: clip;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}

p {
  margin: 0 0 1em;
}

.prose:lang(zh) p {
  text-align: justify;
}

a {
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5.5rem;
  color: #fff;
}

.brand-name {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.brand-other {
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.8;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

img {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}