/* Static guide pages (server/build-pages.mjs). Same palette and type as the app, no JavaScript needed. */
:root {
  --ink: #0a1428;
  --ink-65: #0a1428a6;
  --ink-45: #0a142873;
  --ink-12: #0a14281f;
  --navy: #14306b;
  --mist: #f4f3f0;
  --white: #fff;
  --serif: 'Newsreader', 'Times New Roman', Times, serif;
  --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--white); line-height: 1.6; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.site-header, main, .site-footer { width: min(760px, 100% - 32px); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; letter-spacing: -0.035em; text-decoration: none; }
.brand span { color: var(--ink-45); }
.brand-mark { width: 28px; height: 28px; }
.languages { display: flex; padding: 3px; border-radius: 999px; background: var(--mist); }
.languages a { padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-65); text-decoration: none; }
.languages a[aria-current] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px #0a142826; }

.crumbs { margin: 24px 0 40px; font-size: 13px; color: var(--ink-45); }
.crumbs a { color: var(--ink-65); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-45); }
h1 { margin: 10px 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.8vw, 48px); line-height: 1.05; letter-spacing: -0.045em; text-wrap: balance; }
:lang(vi) h1 { line-height: 1.12; }
.lead { margin: 0; font-size: 17.5px; line-height: 1.5; color: var(--ink-65); }
.meta { margin: 16px 0 0; font-size: 13px; color: var(--ink-45); }
.draft { padding: 2px 8px; border-radius: 999px; background: #f8ecd0; color: #7a5412; }

.body { margin-top: 40px; font-size: 17px; }
.body h2 { margin: 40px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.body p { margin: 0 0 14px; }
.body ul, .body ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 8px; }
.body li::marker { color: var(--navy); }
.cite { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin: 0 1px; padding: 0 5px; border-radius: 999px; background: var(--mist); font-size: 11px; font-weight: 600; line-height: 1; color: var(--navy); text-decoration: none; vertical-align: 0.15em; }
.cite:hover { background: var(--navy); color: var(--white); }

.sources { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--ink-12); }
.sources h2, .directory h2 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-45); }
.sources ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: source; }
.sources li { counter-increment: source; }
.sources a { position: relative; display: grid; gap: 1px; padding: 14px 18px 14px 56px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--ink-12); text-decoration: none; }
.sources a::before { content: counter(source); position: absolute; left: 14px; top: 50%; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); font-family: var(--serif); font-size: 15px; transform: translateY(-50%); }
.sources a:hover { background: var(--mist); }
.sources span { font-size: 12px; color: var(--ink-45); }
.sources strong { font-size: 15px; font-weight: 500; }
.sources li:target a { box-shadow: inset 0 0 0 2px var(--navy); }

.directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 48px; }
.directory ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.directory a { text-decoration: none; }
.directory a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ask { margin: 56px 0 0; padding: 28px; border-radius: 28px; background: var(--mist); }
.ask label { display: block; margin-bottom: 14px; font-family: var(--serif); font-size: 26px; letter-spacing: -0.03em; }
.ask div { display: flex; gap: 6px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--ink-12); }
.ask input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; }
.ask button { padding: 0 20px; border: 0; border-radius: 999px; background: var(--navy); font: inherit; font-weight: 500; color: var(--white); cursor: pointer; }

.site-footer { margin-top: 72px; padding: 32px 0 48px; border-top: 1px solid var(--ink-12); font-size: 13px; color: var(--ink-65); }
.site-footer p { margin: 0 0 8px; }