/* histrend.hk — layered over site.css, never replacing it.
 *
 * DENSER THAN THE OTHER THREE, on purpose. Hong Kong reads compact: the local
 * sites this competes with put more on a screen than a European site would, and
 * a layout tuned for a 38rem English measure reads as padded and slow to that
 * audience. So a tighter measure, a smaller step between heading sizes, and
 * less air between rows.
 *
 * CHINESE TYPE IS NOT LATIN TYPE, and this is the part most Western themes get
 * wrong. Han characters are dense, square, and have no ascenders or descenders
 * to create the visual line spacing Latin text gets for free, so the same
 * line-height that looks generous in English looks cramped in Chinese. Body
 * copy is set at 1.85 rather than the 1.6 the shared stylesheet uses, and the
 * font stack puts the platform Chinese faces ahead of any Latin face so a
 * character never falls back to a synthesised glyph.
 *
 * The palette is neon signage at dusk, restrained to what a long article can
 * carry: deep ink blue for the chrome and a single hot magenta accent used
 * sparingly. Not the red-and-gold that Western sites reach for when they want
 * to look Chinese, which reads as festival decoration rather than as a shop.
 */

:root[data-site="histrend"] {
  --paper: #ffffff;
  --paper-alt: #f5f6f8;

  --ink: #14161c;
  --ink-soft: #454a55;
  --ink-faint: #656b78;

  /* Signage magenta, darkened until white sits on it at 5.1:1. The bright neon
     it is derived from carries nothing legibly. */
  --accent: #a81f5e;
  --accent-ink: #ffffff;
  --accent-soft: #fbe9f1;

  --line: #e0e3e8;
  --radius: 5px;
  /* Shorter than the others: denser column, and Han characters carry more
     content per centimetre than Latin ones. */
  --measure: 32rem;

  /* Platform Chinese faces first. A Latin-first stack lets the browser
     synthesise Han glyphs, which looks broken to anyone who reads them. */
  --font: -apple-system, BlinkMacSystemFont, "PingFang HK", "PingFang TC",
          "Noto Sans HK", "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
  --serif: "Songti TC", "Noto Serif HK", Georgia, serif;
}

:root[data-site="histrend"] {
  --header-bg: #14161c;
  --header-line: #262a34;
  --brand-word-ink: #ffffff;
  --subbar-bg: #1d212a;
  --subbar-line: #2b303b;
  --subbar-ink: #ffffff;
  --subbar-label: #f06ba8;

  --hero-bg: #f5f6f8;
  --rail-surface: #ffffff;
  --rail-line: #e0e3e8;
  --rail-head: #1d212a;
  --rail-head-ink: #ffffff;
  --tile-ink: #14161c;
  --drawer-bg: #ffffff;
  --drawer-line: #e0e3e8;
  --drawer-field: #f5f6f8;
  --share-bg: #f5f6f8;
}

/* The line-height that Chinese body copy actually needs. Applied to the article
   body only, so headings and chrome keep their own rhythm. */
:root[data-site="histrend"] .article-body p,
:root[data-site="histrend"] .article-body li {
  line-height: 1.85;
}

/* Han text does not need letter-spacing and is harmed by it: the characters are
   already on a fixed em square, so added tracking opens gaps inside words. */
:root[data-site="histrend"] .article-body {
  letter-spacing: 0;
}

/* A Latin technical term inside Chinese prose - USB-C, Wi-Fi 6, MagSafe - sits
   on a different baseline and reads small beside the surrounding characters.
   Nudging it up is the standard fix in CJK typesetting. */
:root[data-site="histrend"] .article-body :lang(en) {
  font-size: 0.96em;
}

/* Prices are never shown on this network, so the specification table's job here
   is the trade-off, and the source line carries the weight. */
:root[data-site="histrend"] .spec-table .source,
:root[data-site="histrend"] .spec-source {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

@media (prefers-color-scheme: dark) {
  :root[data-site="histrend"] {
    --paper: #0f1116;
    --paper-alt: #171a21;
    --ink: #e9ebef;
    --ink-soft: #b2b7c1;
    --ink-faint: #8a909c;
    --accent: #f06ba8;           /* lifted: #a81f5e on this ground is 2.7:1 */
    --accent-ink: #14161c;
    --accent-soft: #2a1520;
    --line: #262a34;
    --header-bg: #0b0d11;
    --header-line: #1d212a;
    --subbar-bg: #14161c;
    --subbar-line: #262a34;
    --hero-bg: #171a21;
    --rail-surface: #171a21;
    --rail-line: #262a34;
    --rail-head: #1d212a;
    --tile-ink: #e9ebef;
    --drawer-bg: #171a21;
    --drawer-line: #262a34;
    --drawer-field: #0f1116;
    --share-bg: #171a21;
  }
}