:root {
  color-scheme: dark;
  --ink: #0e0c0b;
  --abyss: #171412;
  --surface: #211c19;
  --raised: #2a2420;
  --pearl: #f0e6d8;
  --muted: #b7ab9c;
  --faint: #8a7f72;
  --champagne: #c4b49a;
  --ok: #8cab99;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Hiragino Sans", "Noto Sans CJK TC", sans-serif;
  background: var(--ink);
  color: var(--pearl);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--ink); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgb(196 180 154 / 18%), transparent 36rem),
    linear-gradient(135deg, #17100f 0%, var(--ink) 54%, #1e1114 100%);
  color: var(--pearl);
  line-height: 1.75;
}

a { color: var(--champagne); text-underline-offset: 0.2em; }
a:hover { color: var(--pearl); }

.site-shell { width: min(100% - 2rem, 56rem); margin: 0 auto; padding: 2rem 0 4rem; }
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--pearl); text-decoration: none; font-family: Georgia, "Songti TC", serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
.brand img { width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; box-shadow: 0 0 0 1px rgb(240 230 216 / 25%), 0 10px 26px rgb(0 0 0 / 35%); }
.nav-links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; }
.nav-links a { color: var(--muted); }
.nav-links a[aria-current="page"] { color: var(--pearl); }

.eyebrow { margin: 0 0 0.75rem; color: var(--champagne); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; }
h1, h2, h3 { font-family: Georgia, "Songti TC", "Hiragino Mincho ProN", serif; line-height: 1.2; letter-spacing: -0.025em; }
h1 { max-width: 13ch; margin: 0; font-size: clamp(2.4rem, 8vw, 4.8rem); }
h2 { margin: 0 0 0.8rem; font-size: clamp(1.35rem, 3vw, 1.8rem); }
h3 { margin: 0 0 0.45rem; font-size: 1.05rem; }
.lede { max-width: 42rem; margin: 1.25rem 0 0; color: var(--muted); font-size: 1.08rem; }
.updated { margin: 1rem 0 0; color: var(--faint); font-size: 0.85rem; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.card { border: 1px solid rgb(240 230 216 / 13%); border-radius: 1rem; padding: 1.35rem; background: rgb(33 28 25 / 78%); box-shadow: 0 1rem 3rem rgb(0 0 0 / 20%); }
.card p, .card ul { margin: 0; color: var(--muted); }
.card ul { padding-left: 1.2rem; }
.content { margin-top: 3rem; }
.content section + section { margin-top: 2.5rem; }
.content p, .content ul { max-width: 47rem; color: var(--muted); }
.content li + li { margin-top: 0.55rem; }
.callout { border-left: 2px solid var(--champagne); padding: 1rem 1.1rem; background: rgb(196 180 154 / 8%); color: var(--pearl); }
.callout p { margin: 0; color: inherit; }
.faq { display: grid; gap: 1rem; margin-top: 1.5rem; }
.faq details { border: 1px solid rgb(240 230 216 / 13%); border-radius: 0.85rem; padding: 1rem 1.1rem; background: rgb(33 28 25 / 78%); }
.faq summary { cursor: pointer; color: var(--pearl); font-weight: 600; }
.faq p { margin: 0.8rem 0 0; color: var(--muted); }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid rgb(240 230 216 / 13%); color: var(--faint); font-size: 0.82rem; }

@media (max-width: 640px) {
  .site-shell { width: min(100% - 1.25rem, 56rem); padding-top: 1.25rem; }
  .site-nav { align-items: flex-start; margin-bottom: 2.5rem; }
  .nav-links { justify-content: flex-end; gap: 0.6rem 0.9rem; }
  .card-grid { grid-template-columns: 1fr; }
}