/* site.css — shared foundation for hundredyearchair.com
   Phase 0 of the Mandarin (Simplified Chinese) edition.
   Holds the design tokens (single source of truth for colour and type),
   the CJK typography switch, and the one shared nav component.
   Linked from every page; per-page <style> blocks still carry each page's
   bespoke layout until the generator refactor moves the common rules here. */

:root {
  --paper:#FDF8EF; --paper-alt:#F6EFE2; --card:#FDFBF7;
  --ink:#1A1613; --ink-soft:#6B6258; --muted:#5A5147; --faint:#8A8177;
  --rule:#E6DCC8; --rule-strong:#C9BEAC;
  --brown:#8A5A2B;
  /* De Stijl signature palette (Rietveld / Mondrian): the site's five colours,
     mapped to the chair's five members — keel red, back blue, seat yellow,
     front green, tie black (=ink). Replaces the earlier teal/purple/orange set. */
  --red:#E02B20; --blue:#1E43B8; --yellow:#F2C200; --green:#12A150; --black:#1A1613;
  --orange:#F2C200; --teal:#12A150;  /* legacy aliases so old var() refs read De Stijl: orange->yellow, teal->green */
  --font-sans:Helvetica, Arial, sans-serif;
  --font-cjk:"PingFang SC","Microsoft YaHei","Noto Sans SC", var(--font-sans);
  --measure:720px; --measure-wide:960px;
}

/* Simplified-Chinese pages set <html lang="zh-Hans">; the sans stack becomes
   the CJK stack and the line spacing opens up for Han characters.
   No Google Fonts link anywhere: it is blocked inside the PRC. */
[lang="zh-Hans"] { --font-sans:var(--font-cjk); line-height:1.78; }

/* ---- the one shared nav ------------------------------------------------ */
.sitenav {
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  font-family:var(--font-sans);
}
.sitenav-in {
  display:flex; align-items:center; gap:16px;
  max-width:var(--measure-wide); margin:0 auto;
  padding:11px 24px; font-size:14px;
}
.sitenav-home {
  display:flex; align-items:center; gap:9px;
  color:var(--ink); text-decoration:none; border:none;
}
.sitenav-home img { width:20px; height:20px; display:block; border:none; margin:0; }
.sitenav-home:hover { color:var(--brown); }
.sitenav-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.sitenav-contents { color:var(--brown); text-decoration:none; border:none; white-space:nowrap; }
.sitenav-contents:hover { color:var(--ink); }
.sitenav-lang {
  display:inline-flex; align-items:center; gap:8px;
  padding-left:14px; border-left:1px solid var(--rule-strong);
}
.sitenav-lang a { color:var(--faint); text-decoration:none; border:none; }
.sitenav-lang a:hover { color:var(--brown); }
.sitenav-lang .on { color:var(--ink); font-weight:bold; cursor:default; }
.sitenav-lang .sep { color:var(--rule-strong); }
.sitenav-lang a[lang="zh-Hans"] { font-family:var(--font-cjk); }
