:root {
  color-scheme: dark;
  --paper: #151b1a;
  --raised: #1d2522;
  --ink: #eee4cf;
  --muted: #aaa18e;
  --line: rgba(238, 228, 207, .15);
  --seal: #d64a32;
  --gold: #d6a24f;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 4%, rgba(214, 74, 50, .16), transparent 30rem),
    radial-gradient(circle at 88% 80%, rgba(92, 168, 140, .09), transparent 35rem),
    var(--paper);
  font: 17px/1.7 "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}

header,
main,
footer { width: min(100% - 2rem, 780px); margin-inline: auto; }

header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 2rem 1.3rem;
  border-bottom: 1px solid var(--line);
}

header img { width: 58px; height: 58px; border-radius: 13px; }
header strong { display: block; font: 700 1.45rem "Noto Serif CJK SC", Georgia, serif; }
header span { color: var(--muted); font-size: .85rem; }

main {
  margin-block: 2rem;
  padding: clamp(1.2rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%), var(--raised);
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
}

h1, h2 { font-family: "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif; line-height: 1.2; }
h1 { margin-top: 0; font-size: clamp(2.2rem, 8vw, 4rem); }
h2 { margin-top: 2rem; color: var(--gold); }
p, li { color: color-mix(in srgb, var(--ink) 84%, var(--muted)); }
a { color: #ef8b6e; }
.lede { color: var(--ink); font-size: 1.15rem; }
.notice { padding: 1rem; border-left: 3px solid var(--seal); background: rgba(214,74,50,.08); }
footer { padding-bottom: 2rem; color: var(--muted); font-size: .86rem; }
footer a { margin-right: 1rem; }