/* How to Live Better: editorial layout after Lovable's "Stone Paper" template
   (stone-grey paper, Literata headlines, Inter text, taupe accent).
   Self-hosted fonts, no external requests. */

@font-face {
  font-family: "Literata";
  src: url("fonts/literata-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  src: url("fonts/literata-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens
   Template values (HSL) kept as written; --muted is darkened from 45% to 38% lightness so small
   text reaches 4.5:1 on the paper. Grade ramp: one warm hue, lightness falls A > B > C in contrast
   with the paper; letters on each stamp >= 4.5:1. */
:root {
  color-scheme: light;
  --bg: hsl(0 5% 91%);
  --fg: hsl(40 10% 6%);
  --card: hsl(0 5% 95%);
  --band: hsl(0 3% 85%);
  --primary: hsl(36 10% 38%);
  --primary-strong: hsl(36 10% 30%);
  --on-primary: hsl(0 5% 93%);
  --muted: hsl(36 8% 38%);
  --border: hsl(36 8% 75%);
  --rule: hsl(36 10% 38%);
  --foot-bg: hsl(40 10% 6%);
  --foot-fg: hsl(30 6% 66%);
  --grade-a: hsl(30 14% 15%);
  --grade-b: hsl(34 12% 37%);
  --grade-c: hsl(36 14% 60%);
  --on-grade-a: hsl(0 5% 95%);
  --on-grade-b: hsl(0 5% 97%);
  --on-grade-c: hsl(40 10% 6%);
  --flag-fg: hsl(28 70% 26%);
  --flag-bg: hsl(38 55% 86%);
  --flag-rule: hsl(34 50% 58%);
  --photo-filter: saturate(0.72) sepia(0.12) contrast(0.97);
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --container: 80rem;
  --radius: 0.25rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: hsl(40 10% 6%);
    --fg: hsl(0 5% 91%);
    --card: hsl(40 10% 10%);
    --band: hsl(40 8% 13%);
    --primary: hsl(36 14% 64%);
    --primary-strong: hsl(36 18% 76%);
    --on-primary: hsl(40 10% 6%);
    --muted: hsl(30 6% 66%);
    --border: hsl(36 8% 25%);
    --rule: hsl(36 10% 50%);
    --foot-bg: hsl(40 10% 3%);
    --foot-fg: hsl(30 6% 62%);
    --grade-a: hsl(36 20% 86%);
    --grade-b: hsl(36 12% 58%);
    --grade-c: hsl(36 10% 34%);
    --on-grade-a: hsl(40 10% 6%);
    --on-grade-b: hsl(40 10% 6%);
    --on-grade-c: hsl(0 5% 91%);
    --flag-fg: hsl(38 70% 72%);
    --flag-bg: hsl(34 30% 14%);
    --flag-rule: hsl(34 40% 40%);
    --photo-filter: saturate(0.65) sepia(0.12) brightness(0.88) contrast(0.98);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: hsl(40 10% 6%);
  --fg: hsl(0 5% 91%);
  --card: hsl(40 10% 10%);
  --band: hsl(40 8% 13%);
  --primary: hsl(36 14% 64%);
  --primary-strong: hsl(36 18% 76%);
  --on-primary: hsl(40 10% 6%);
  --muted: hsl(30 6% 66%);
  --border: hsl(36 8% 25%);
  --rule: hsl(36 10% 50%);
  --foot-bg: hsl(40 10% 3%);
  --foot-fg: hsl(30 6% 62%);
  --grade-a: hsl(36 20% 86%);
  --grade-b: hsl(36 12% 58%);
  --grade-c: hsl(36 10% 34%);
  --on-grade-a: hsl(40 10% 6%);
  --on-grade-b: hsl(40 10% 6%);
  --on-grade-c: hsl(0 5% 91%);
  --flag-fg: hsl(38 70% 72%);
  --flag-bg: hsl(34 30% 14%);
  --flag-rule: hsl(34 40% 40%);
  --photo-filter: saturate(0.65) sepia(0.12) brightness(0.88) contrast(0.98);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.5 var(--sans);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  /* Chinese quotations inside English text: Chromium's default trimming lets a closing bracket
     after 。 run past the line end on narrow screens. */
  text-spacing-trim: space-all;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.25; margin: 0; }
p { margin: 0 0 1em; }
cite { font-style: normal; }
code { font-size: 0.9em; overflow-wrap: anywhere; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--card); padding: 0.5rem 1rem; }
.skip:focus { left: 1rem; }

/* Running text: links are visible inside prose. */
.prose a, .entry a, .lede a, .notice a, .doc a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.prose a:hover, .entry a:hover, .lede a:hover, .notice a:hover, .doc a:hover { color: var(--primary); text-decoration-thickness: 2px; }
a.zh-only::after { content: " (in Chinese)"; font: 500 0.8em/1 var(--sans); color: var(--muted); }

/* Labels: the template's small uppercase kickers and bylines. */
.kicker { font: 700 0.75rem/1.4 var(--sans); letter-spacing: 0.025em; text-transform: uppercase; color: var(--primary); }
.kicker-sm { font: 700 0.625rem/1.4 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); }
.meta { font: 400 0.6875rem/1.5 var(--sans); letter-spacing: 0.025em; color: var(--muted); }
.meta b, .meta strong { font-weight: 700; color: var(--primary); text-transform: uppercase; }
.dot { padding: 0 0.3em; }

/* ------------------------------------------------------------------ header */
.site-head { background: var(--bg); }
.topbar { border-bottom: 1px solid var(--border); }
.topbar .wrap {
  height: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font: 400 0.6875rem/1 var(--sans); letter-spacing: 0.025em; color: var(--muted);
}
.topbar nav { display: none; gap: 1.25rem; }
.topbar nav a { font-weight: 600; text-transform: uppercase; }
@media (min-width: 48rem) { .topbar nav { display: flex; } }

.masthead { padding: 1.25rem 1rem; text-align: center; border-bottom: 1px solid var(--border); }
.masthead a { display: inline-block; color: var(--fg); }
.masthead a:hover { color: var(--fg); }
.masthead .over {
  display: block; margin-bottom: -2px;
  font: italic 400 0.6875rem/1.4 var(--serif); letter-spacing: 0.3em; color: var(--muted);
}
.masthead .name {
  display: block; text-transform: uppercase;
  font: 900 2.5rem/0.9 var(--serif); letter-spacing: -0.025em; font-variation-settings: "opsz" 72;
}
@media (min-width: 48rem) { .masthead .name { font-size: 3.2rem; } }

.navbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
.navbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
.nav-desk { display: none; }
.nav-desk a, .nav-mob a {
  position: relative; display: block; padding: 0.75rem 1rem;
  font: 600 0.75rem/1.5 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg);
}
.nav-desk a:hover, .nav-mob a:hover { color: var(--primary); }
.nav-desk a[aria-current="page"] { color: var(--primary); }
.nav-desk a[aria-current="page"]::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 2px; background: var(--primary);
}
.tools { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; padding: 0.375rem 0; }
.menu { position: static; }
.menu summary {
  list-style: none; cursor: pointer; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: grid; place-items: center; color: var(--fg);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--band); }
.menu summary svg { width: 1.25rem; height: 1.25rem; }
.menu .close { display: none; }
.menu[open] .open { display: none; }
.menu[open] .close { display: block; }
.nav-mob {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--bg);
  border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.25);
  padding: 0.25rem 0 0.75rem;
}
.nav-mob a { padding: 0.7rem 1rem; border-top: 1px solid var(--border); }
.nav-mob a:first-child { border-top: 0; }
.nav-mob a[aria-current="page"] { color: var(--primary); }
@media (min-width: 64rem) {
  .nav-desk { display: flex; }
  .menu { display: none; }
}

/* ------------------------------------------------------------------ page heads */
.title-band { background: var(--band); border-bottom: 1px solid var(--border); }
.title-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 2rem; padding-bottom: 2rem; }
.title-band h1 {
  font: 900 1.875rem/1.2 var(--serif); letter-spacing: -0.025em; text-transform: uppercase;
  font-variation-settings: "opsz" 72;
}
.title-band .standfirst { order: 3; flex: 0 0 100%; max-width: none; padding-right: max(0px, calc(100% - 46rem)); margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.crumbs { font: 400 0.6875rem/1.5 var(--sans); letter-spacing: 0.025em; text-transform: uppercase; color: var(--primary-strong); }
.crumbs a:hover { color: var(--fg); }
.crumbs span[aria-current] { color: var(--fg); font-weight: 600; }
.crumbs .sep { padding: 0 0.4em; color: var(--muted); }
.title-band .crumbs { order: 2; }

.block-title {
  font: 700 1.5rem/1.33 var(--serif); text-transform: uppercase;
  padding-bottom: 0.5rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--rule);
}
.block-title.sm { font-size: 1.25rem; margin-bottom: 1rem; }

/* ------------------------------------------------------------------ home */
.strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--border);
}
@media (min-width: 64rem) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.strip a { display: block; }
.strip h3 { font-size: 0.875rem; line-height: 1.25; margin-top: 0.25rem; }
.strip a:hover h3 { color: var(--primary); }

.front { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding: 2rem 0; }
@media (min-width: 64rem) { .front { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.lead-figure { margin: 0 0 1.5rem; }
.lead-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: var(--photo-filter); background: var(--band); }
.lead h3 { font-size: 1.25rem; line-height: 1.25; margin: 0.375rem 0 0.5rem; }
@media (min-width: 48rem) { .lead h3 { font-size: 1.5rem; } }
.lead .lede { font-size: 0.9375rem; line-height: 1.65; color: var(--muted); }
.lead .lede p { margin-bottom: 0.75em; }
.lead .second { border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 0.5rem; }
.lead .second h3 { font-size: 1.125rem; line-height: 1.375; }
.lead .second p { font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin: 0; }

.feed { display: flex; flex-direction: column; }
.feed > div { padding: 1rem 0; border-top: 1px solid var(--border); }
.feed > div:first-child { padding-top: 0; border-top: 0; }
.feed h4 { font-size: 0.875rem; line-height: 1.375; margin-top: 0.25rem; }
.feed p, .feed li { font-size: 0.75rem; line-height: 1.6; color: var(--muted); }
.feed p { margin: 0.25rem 0 0; }
.feed ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.feed li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; }
.feed li b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.feed .more { display: inline-block; margin-top: 0.6rem; font: 700 0.6875rem/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg); }
.feed .more:hover { color: var(--primary); }
.feed .gbar { margin-top: 0.6rem; }
.notice { border-left: 3px solid var(--flag-rule); background: var(--flag-bg); padding: 0.75rem 0.9rem; }
.notice p { color: var(--fg) !important; font-size: 0.75rem; line-height: 1.6; margin: 0; }
.notice strong { font-weight: 700; }

.home-section { padding: 2rem 0; border-top: 1px solid var(--border); }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; }
@media (min-width: 48rem) { .qlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .qlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qlist li { border-bottom: 1px solid var(--border); }
.qlist a { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; align-items: start; }
.qlist .thumb { width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--radius); filter: var(--photo-filter); background: var(--band); }
.qlist h3 { font-size: 0.875rem; line-height: 1.3; margin: 0.25rem 0 0.3rem; }
.qlist a:hover h3 { color: var(--primary); }
.qlist .q { font-size: 0.75rem; line-height: 1.55; color: var(--muted); margin: 0; }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 64rem) { .how-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.how-list { font-size: 0.9375rem; line-height: 1.7; }
.how-list ul { margin: 0; padding-left: 1.1rem; }
.how-list li { margin-bottom: 0.75rem; }
.how-list li::marker { color: var(--primary); }
.home-credits { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ grade marks */
.gbar { display: flex; gap: 2px; height: 6px; }
.gbar span { display: block; min-width: 2px; }
.g-A { background: var(--grade-a); color: var(--on-grade-a); }
.g-B { background: var(--grade-b); color: var(--on-grade-b); }
.g-C { background: var(--grade-c); color: var(--on-grade-c); }
.gcounts { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin-top: 0.4rem; font: 500 0.75rem/1.5 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.gcounts .key, .legend .key { display: inline-block; width: 0.65rem; height: 0.65rem; vertical-align: -0.05rem; margin-right: 0.3rem; }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font: 500 0.75rem/1.5 var(--sans); color: var(--muted); margin: 0 0 1rem; }
.stamp {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  font: 900 1.375rem/1 var(--serif); font-variation-settings: "opsz" 72;
}
.mini { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; font: 800 0.75rem/1 var(--serif); }

/* ------------------------------------------------------------------ section (article) page */
.hero { margin: 0; }
.hero img { width: 100%; height: clamp(13rem, 36vw, 31.25rem); object-fit: cover; filter: var(--photo-filter); background: var(--band); }
.credit { max-width: var(--container); margin: 0 auto; padding: 0.4rem 1rem 0; font: 400 0.6875rem/1.5 var(--sans); color: var(--muted); text-align: right; }
.credit a { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 0.15em; }
.credit a:hover { color: var(--fg); }

.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-top: 2rem; padding-bottom: 3rem; }
@media (min-width: 64rem) { .article-grid { grid-template-columns: minmax(0, 1fr) 22rem; } }
@media (min-width: 80rem) { .article-grid { grid-template-columns: minmax(0, 1fr) 24rem; } }
.article-main { min-width: 0; }
.article-main > * { max-width: 47rem; }
.art-crumbs { font: 400 0.875rem/1.5 var(--sans); color: var(--muted); margin-bottom: 0.75rem; }
.art-crumbs a:hover { color: var(--fg); }
.art-crumbs span[aria-current] { color: var(--primary-strong); font-weight: 600; }
.art-crumbs .sep { padding: 0 0.5em; }
.art-head h1 { font-size: 1.875rem; line-height: 1.15; margin: 0.6rem 0 1rem; }
@media (min-width: 48rem) { .art-head h1 { font-size: 2.25rem; line-height: 1.11; } }
.art-head .summary { font-size: 1rem; line-height: 1.65; color: var(--muted); margin: 0 0 1.25rem; }
.art-head .summary::first-letter { text-transform: uppercase; }
.factrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem;
  padding: 0 0 1.25rem; border-bottom: 1px solid var(--border); font: 500 0.8125rem/1.4 var(--sans); color: var(--muted);
}
.factrow .gwrap { flex: 1 1 14rem; max-width: 20rem; }
.factrow .gcounts { margin-top: 0.35rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; border-radius: 999px;
  background: var(--band); color: var(--fg); font: 500 0.75rem/1.3 var(--sans);
}
.tag b { font-weight: 700; }
.tag.flag { background: var(--flag-bg); color: var(--flag-fg); box-shadow: inset 0 0 0 1px var(--flag-rule); }
.tag.flag::before { content: ""; width: 0.5rem; height: 0.5rem; border: 2px solid currentColor; transform: rotate(45deg); }
.tag[title] { cursor: help; }
.prose { font-size: 1rem; line-height: 1.625; }
.intro { padding: 1.75rem 0 0.5rem; }
.intro p { margin-bottom: 1.1em; }
.src-note a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 0.15em; }
.src-note a:hover { color: var(--fg); }
.src-note { font-size: 0.8125rem; line-height: 1.55; color: var(--muted); border-left: 2px solid var(--border); padding: 0.1rem 0 0.1rem 0.75rem; margin: 0.5rem 0 0.5rem; }

/* Mobile item index */
.index-phone { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 1.5rem 0 0; }
.index-phone summary { cursor: pointer; padding: 0.85rem 0; font: 700 0.75rem/1.4 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; }
.index-phone summary::marker { color: var(--primary); }
@media (min-width: 64rem) { .index-phone { display: none; } }

/* Entries (items): text-led */
.entry { padding: 2.25rem 0 1.75rem; border-top: 1px solid var(--border); scroll-margin-top: 4rem; }
.entries > .entry:first-child { border-top: 2px solid var(--rule); margin-top: 1.5rem; }
.entry-top { display: flex; gap: 1rem; align-items: flex-start; }
.entry-top .meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0; font: 400 0.6875rem/1.6 var(--sans); letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.entry-top .meta-line a:hover { color: var(--fg); }
.entry-top .meta-line b { color: var(--primary); font-weight: 700; }
.entry h2 { font-size: 1.25rem; line-height: 1.3; margin: 0.3rem 0 0; }
@media (min-width: 48rem) { .entry h2 { font-size: 1.5rem; } }
.entry .tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.9rem 0 0; }
.plain { margin: 1.25rem 0 0; padding: 0 0 0 1rem; border-left: 3px solid var(--rule); }
.plain .label, .fields dt {
  display: block; font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary);
}
.plain p { margin: 0.25rem 0 0; font: 400 1.125rem/1.6 var(--serif); }
@media (min-width: 48rem) { .plain p { font-size: 1.1875rem; } }
.fields { margin: 1.25rem 0 0; }
.fields > div { padding: 0.8rem 0; border-top: 1px solid var(--border); }
.fields > div:first-child { border-top: 0; }
.fields dd { margin: 0.25rem 0 0; font-size: 0.9375rem; line-height: 1.65; overflow-wrap: anywhere; }
.fields dd.grade-dd { font-weight: 600; }
.fields dd.sources { font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
.fields dd.sources a { word-break: break-all; color: var(--muted); }
.fields .costline { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.fields .costline .tag { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
@media (min-width: 48rem) {
  .fields > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; }
  .fields dt { padding-top: 0.2rem; }
  .fields dd { margin: 0; }
}

/* Aside: like the template's "Latest articles" column, grade stamps in place of thumbnails. */
.aside { display: none; }
@media (min-width: 64rem) {
  .aside { display: block; position: sticky; top: 4rem; align-self: start; max-height: calc(100vh - 5rem); overflow-y: auto; padding-right: 0.25rem; scrollbar-width: thin; }
}
.ilist { list-style: none; margin: 0; padding: 0; }
.ilist li { border-bottom: 1px solid var(--border); }
.ilist a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.55rem 0; }
.ilist .n { display: block; font: 700 0.625rem/1.3 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); }
.ilist .t { display: block; font: 700 0.8125rem/1.35 var(--serif); color: var(--fg); }
.ilist a:hover .t { color: var(--primary); }
.factbox { background: var(--band); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.75rem; }
.factbox h2 { font: 700 1.125rem/1.3 var(--serif); text-transform: uppercase; margin-bottom: 0.5rem; }
.factbox p, .factbox li { font-size: 0.8125rem; line-height: 1.55; color: var(--muted); }
.factbox ul { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.factbox li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; }
.factbox li b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.factbox .big { font: 700 1.5rem/1.1 var(--serif); color: var(--fg); margin: 0.25rem 0 0.6rem; }

.outro { padding-top: 1.5rem; border-top: 1px solid var(--border); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--rule); }
.pager a { display: block; }
.pager .next { text-align: right; grid-column: 2; }
.pager .dir { display: block; font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); }
.pager .t { display: block; margin-top: 0.3rem; font: 700 1rem/1.35 var(--serif); }
.pager a:hover .t { color: var(--primary); }

/* ------------------------------------------------------------------ sections index (category page) */
.cat { padding-top: 2rem; padding-bottom: 1rem; }
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; }
@media (min-width: 48rem) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-grid > li { padding: 1.25rem 0 1.4rem; border-bottom: 1px solid var(--border); }
.cat-grid h2 { font-size: 1.0625rem; line-height: 1.3; margin: 0.25rem 0 0.4rem; }
.cat-grid h2 a:hover { color: var(--primary); }
.cat-grid p { font-size: 0.8125rem; line-height: 1.6; color: var(--muted); margin: 0 0 0.75rem; }
.cat-grid p::first-letter { text-transform: uppercase; }
.cat-grid .gbar { max-width: 100%; }
.cat-after { max-width: 47rem; padding: 1.5rem 0 1rem; font-size: 0.9375rem; line-height: 1.7; }

/* ------------------------------------------------------------------ all items */
.allitems section { padding: 1.75rem 0 0.5rem; }
.allitems h2 { font: 700 1.25rem/1.3 var(--serif); text-transform: uppercase; padding-bottom: 0.5rem; margin-bottom: 0.75rem; border-bottom: 2px solid var(--rule); }
.allitems h2 a:hover { color: var(--primary); }
.allitems h2 .num { color: var(--primary); }
.allitems ol { list-style: none; margin: 0; padding: 0; columns: 3 18rem; column-gap: 2.5rem; }
.allitems li { break-inside: avoid; border-bottom: 1px solid var(--border); }
.allitems li a { display: grid; grid-template-columns: 1.75rem 1.5rem minmax(0, 1fr); gap: 0.5rem; align-items: start; padding: 0.45rem 0; font: 700 0.8125rem/1.4 var(--serif); }
.allitems li a:hover span:last-child { color: var(--primary); }
.allitems .n { font: 600 0.6875rem/1.5rem var(--sans); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ long documents (evidence, glossary, about) */
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-top: 2rem; padding-bottom: 3rem; }
@media (min-width: 64rem) { .doc-grid { grid-template-columns: minmax(0, 1fr) 20rem; } }
.doc { max-width: 47rem; font-size: 1rem; line-height: 1.65; }
.doc h2 { font: 700 1.5rem/1.3 var(--serif); text-transform: uppercase; padding-bottom: 0.5rem; margin: 2.5rem 0 1.25rem; border-bottom: 2px solid var(--rule); }
.doc > h2:first-child, .doc > .first { margin-top: 0; }
.doc h3 { font: 700 1.125rem/1.35 var(--serif); margin: 2rem 0 0.75rem; }
.doc ul, .doc ol { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.55rem; }
.doc li::marker { color: var(--primary); }
.doc blockquote { margin: 1.25rem 0; padding: 0.25rem 0 0.25rem 1.1rem; border-left: 3px solid var(--rule); color: var(--muted); font-size: 0.9375rem; }
.doc blockquote p { margin: 0.4rem 0; }
.doc .lede { font: 400 1.1875rem/1.6 var(--serif); color: var(--fg); }
.doc strong { font-weight: 650; }
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; line-height: 1.55; }
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: 1px solid var(--border); }
th { font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); border-bottom: 2px solid var(--rule); }
td { font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; margin: 0 0 1.25rem; }
.table-scroll table { min-width: 32rem; }
.doc table td:first-child { font-weight: 600; }
.doc.glossary table td:first-child { min-width: 8rem; font-family: var(--serif); font-weight: 700; }
.toc-box { position: sticky; top: 4rem; align-self: start; }
.toc-box ol { list-style: none; margin: 0; padding: 0; }
.toc-box li { border-bottom: 1px solid var(--border); }
.toc-box a { display: block; padding: 0.6rem 0; font: 700 0.875rem/1.35 var(--serif); }
.toc-box a:hover { color: var(--primary); }
@media (max-width: 63.99rem) { .toc-box { display: none; } }

.chart { margin: 2rem 0; max-width: 60rem; }
.chart h3 { font: 700 1.125rem/1.35 var(--serif); margin: 0 0 0.3rem; }
.chart .desc { font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.75rem; }
.chart ol { list-style: none; margin: 0; padding: 0; }
.chart li { display: grid; grid-template-columns: minmax(8rem, 17rem) 1fr; gap: 0.75rem; align-items: center; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.chart .lbl { font: 600 0.8125rem/1.3 var(--sans); }
.chart .lbl:hover { color: var(--primary); }
.chart .row { display: flex; align-items: center; gap: 0.5rem; }
.chart .gbar { height: 12px; }
.chart .tot { font: 600 0.75rem/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.chart details { margin-top: 0.75rem; }
.chart summary { cursor: pointer; font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); padding: 0.4rem 0; }
@media (max-width: 34rem) { .chart li { grid-template-columns: 1fr; gap: 0.2rem; } }

.table-scroll table.compact, .table-scroll table.credits-table { min-width: 0; }
table.compact th, table.compact td { padding-right: 0.6rem; }
.credits-table td { font-size: 0.8125rem; }
@media (max-width: 40rem) { .credits-table .thumbcell, .credits-table th:nth-child(2) { display: none; } }
.credits-table td:first-child { white-space: nowrap; }
.credits-table .thumbcell img { width: 4.5rem; height: 3rem; object-fit: cover; filter: var(--photo-filter); }

/* ------------------------------------------------------------------ footer */
.prefoot { border-top: 1px solid var(--border); padding: 2.5rem 1rem; text-align: center; }
.prefoot h2 { font: 700 1rem/1.5 var(--serif); margin: 0 0 0.5rem; }
.prefoot p { max-width: 40rem; margin: 0 auto 1rem; font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
.btn {
  display: inline-block; padding: 0.7rem 1.5rem; background: var(--primary); color: var(--on-primary);
  font: 700 0.75rem/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; border-radius: 2px;
}
.btn:hover { background: var(--primary-strong); color: var(--on-primary); }
.site-foot { background: var(--foot-bg); color: var(--foot-fg); }
.site-foot .wrap { padding-top: 1.5rem; padding-bottom: 1.75rem; display: grid; gap: 0.5rem; font: 400 0.6875rem/1.6 var(--sans); letter-spacing: 0.02em; }
.site-foot p { margin: 0; max-width: 64rem; }
.site-foot a { color: hsl(30 8% 82%); text-decoration: underline; text-decoration-color: hsl(30 6% 40%); text-underline-offset: 0.15em; }
.site-foot a:hover { color: #fff; }

@media print {
  .site-head .topbar, .navbar, .aside, .index-phone, .pager, .prefoot { display: none; }
  .entry { break-inside: avoid; }
  .hero img { height: 8rem; }
}
.entry .meta-line a { text-decoration: none; color: inherit; }
.entry .meta-line a:hover { color: var(--fg); text-decoration: underline; }