@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&display=swap');

:root {
  --bg: #f4efe6;
  --bg-deep: #0f1720;
  --surface: rgba(255, 248, 239, 0.72);
  --surface-strong: rgba(255, 251, 245, 0.88);
  --line: rgba(15, 23, 32, 0.12);
  --line-strong: rgba(15, 23, 32, 0.28);
  --text: #111820;
  --text-soft: rgba(17, 24, 32, 0.72);
  --text-inverse: rgba(248, 241, 233, 0.92);
  --accent: #b3471f;
  --accent-soft: #e3b58d;
  --accent-deep: #7c2506;
  --gold: #d8b16c;
  --shadow: 0 30px 80px rgba(56, 32, 20, 0.14);
  --radius: 28px;
  --page-padding: clamp(1.2rem, 2.6vw, 2.6rem);
  --content-width: min(1200px, calc(100vw - 2 * var(--page-padding)));
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(227, 181, 141, 0.45), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(179, 71, 31, 0.24), transparent 22%),
    linear-gradient(180deg, #f8f1e9 0%, #f4efe6 42%, #efe7db 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17, 24, 32, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 32, 0.03) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 88%);
  opacity: 0.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: rgba(179, 71, 31, 0.18);
}