/* ==========================================================================
   MDLC Industry Research — shared stylesheet
   One file for every page. Sections:
   1. Tokens   2. Base   3. Layout & chrome   4. Page header & metadata
   5. Progression strip   6. Prose   7. Callouts & evidence   8. Tables
   9. Benchmark matrix   10. Frameworks (maturity, capability map, timeline)
   11. Figures & diagrams   12. References   13. Index lists & filter   14. Print
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --bg: #f6f1ec;            /* warm off-white canvas */
  --surface: #fffdfb;       /* document surface */
  --surface-2: #f1ebe5;     /* inset / table header */
  --ink: #1d1c1a;           /* body text */
  --ink-2: #4a4641;         /* secondary text */
  --ink-3: #7a746d;         /* metadata */
  --heading: #1f3550;       /* dark navy headings */
  --rule: #dcd3ca;          /* thin dividers */
  --rule-strong: #b9aea3;
  --link: #1f5f86;

  /* Semantic colours — shared with the SVG diagram system */
  --human: #1f7a99;
  --ai: #c25a50;
  --data: #d3c3a3;
  --system: #8c8582;
  --external: #bdb8b2;
  --policy: #2e3b4e;
  --knowledge: #b9a57f;
  --skill: #c25a50;

  /* Callout accents */
  --c-fact: #1f7a99;
  --c-observation: #5d7a52;
  --c-interpretation: #8a6a2e;
  --c-hypothesis: #c25a50;
  --c-question: #6b5b8a;
  --c-decision: #1f3550;

  --good: #e3ecdc;
  --bad: #f4dcd8;
  --neutral: #ece7e1;

  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Noto Sans SC", monospace;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", serif;

  --measure: 46rem;         /* prose width */
  --wide: 76rem;            /* tables / figures */
  --radius: 4px;
}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15.5px/1.6 var(--font-sans);
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--heading); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.88em; }
code { background: var(--surface-2); padding: 0.05em 0.3em; border-radius: 3px; }
pre { background: var(--surface-2); padding: 0.9rem 1rem; border-radius: var(--radius); overflow-x: auto; border: 1px solid var(--rule); }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
img { max-width: 100%; }

/* 3. Layout & chrome ---------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.site-header .inner {
  max-width: var(--wide); margin: 0 auto; padding: 0.8rem 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.6rem;
}
.site-title {
  font: 600 0.95rem var(--font-mono); color: var(--heading);
  text-decoration: none; letter-spacing: 0.01em;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; font-size: 0.86rem; }
.site-nav a { color: var(--ink-2); text-decoration: none; padding: 0.1rem 0; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--heading); border-bottom-color: var(--rule-strong); }
.site-nav a[aria-current="page"] { color: var(--heading); border-bottom-color: var(--heading); }

.page {
  max-width: var(--wide); margin: 0 auto; padding: 1.6rem 1rem 4rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem;
}
@media (min-width: 1180px) {
  .page.has-toc { grid-template-columns: minmax(0, 1fr) 13rem; }
}
.doc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2rem 2.4rem 2.6rem;
  min-width: 0;
}
@media (max-width: 640px) { .doc { padding: 1.3rem 1rem 1.8rem; } }

.toc { display: none; font-size: 0.82rem; }
@media (min-width: 1180px) { .page.has-toc .toc { display: block; } }
.toc nav { position: sticky; top: 1.2rem; }
.toc h2 { font: 600 0.7rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0 0 0.6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc li a { display: block; padding: 0.18rem 0 0.18rem 0.8rem; color: var(--ink-2); text-decoration: none; }
.toc li a:hover { color: var(--heading); }

.site-footer { max-width: var(--wide); margin: 0 auto; padding: 1.2rem 1rem 2.4rem; border-top: 1px solid var(--rule); font-size: 0.8rem; color: var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.site-footer a { color: var(--ink-3); }

/* 4. Page header & metadata --------------------------------------------- */
.breadcrumb { font: 0.75rem var(--font-mono); color: var(--ink-3); margin-bottom: 0.6rem; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.doc-header { border-bottom: 1px solid var(--rule); padding-bottom: 1.1rem; margin-bottom: 1.6rem; }
.doc-header h1 {
  font: 600 2rem/1.2 var(--font-sans); color: var(--heading);
  margin: 0 0 0.4rem; letter-spacing: -0.01em;
}
.doc-header .subtitle { font-size: 1.05rem; color: var(--ink-2); margin: 0 0 0.9rem; max-width: var(--measure); }
.meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; font: 0.76rem var(--font-mono); color: var(--ink-3); align-items: center; }
.meta dt { display: inline; text-transform: uppercase; letter-spacing: 0.06em; }
.meta dd { display: inline; margin: 0 0 0 0.3rem; color: var(--ink-2); }
.meta > div { white-space: nowrap; }

.pill, .tag {
  display: inline-block; font: 500 0.7rem/1.5 var(--font-mono);
  padding: 0.05rem 0.55rem; border-radius: 999px; border: 1px solid var(--rule-strong);
  color: var(--ink-2); background: var(--surface); white-space: nowrap; letter-spacing: 0.02em;
}
.tag { border-color: var(--rule); background: var(--surface-2); }
.pill.status-draft      { border-color: #c9b48a; background: #f6eedc; color: #6b5420; }
.pill.status-active     { border-color: #8db0c1; background: #e3eef3; color: #1d5a72; }
.pill.status-researching { border-color: #c9b48a; background: #f6eedc; color: #6b5420; }
.pill.status-stable     { border-color: #9fbb93; background: #e6efe1; color: #3e5a34; }
.pill.status-placeholder{ border-color: var(--rule-strong); background: var(--neutral); color: var(--ink-3); }
.pill.status-stale      { border-color: #d3a39c; background: #f6e3e0; color: #8a3a31; }
.pill.status-template   { border-color: #a9a0bf; background: #ece8f3; color: #4f4570; }
.pill.illustrative      { border-color: var(--ai); background: #f8e7e4; color: #8a3a31; font-weight: 600; }

/* 5. Progression strip -------------------------------------------------- */
.progression { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1.4rem; font: 0.68rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.progression a, .progression span {
  padding: 0.25rem 0.6rem; color: var(--ink-3); text-decoration: none;
  border: 1px solid var(--rule); margin-right: -1px; background: var(--surface);
}
.progression a:hover { color: var(--heading); }
.progression .current { background: var(--heading); color: #fff; border-color: var(--heading); }
.progression .arrow { border: 0; padding: 0.25rem 0.15rem; background: none; }

/* 6. Prose -------------------------------------------------------------- */
.doc h2 { font: 600 1.3rem/1.3 var(--font-sans); color: var(--heading); margin: 2.4rem 0 0.7rem; padding-top: 0.2rem; scroll-margin-top: 1rem; }
.doc h3 { font: 600 1.02rem/1.35 var(--font-sans); color: var(--heading); margin: 1.6rem 0 0.4rem; }
.doc h4 { font: 600 0.75rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin: 1.4rem 0 0.4rem; }
.doc p, .doc ul, .doc ol, .doc dl, .doc blockquote { max-width: var(--measure); }
.doc li { margin: 0.2rem 0; }
.doc blockquote { margin: 1rem 0; padding: 0 1rem; border-left: 2px solid var(--rule-strong); color: var(--ink-2); font-family: var(--font-serif); font-size: 1.05rem; }
.lede { font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.55; color: var(--ink); }
.muted { color: var(--ink-3); }
.small { font-size: 0.85rem; }
.placeholder { color: var(--ink-3); font-style: italic; }
.placeholder::before { content: "[placeholder] "; font: normal 0.72rem var(--font-mono); color: var(--ink-3); }
.section-label { font: 600 0.7rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); margin: 0 0 0.3rem; }

/* Key-value spec list (benchmark config, note metadata) */
.kv { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; border-top: 1px solid var(--rule); max-width: var(--wide) !important; margin: 1rem 0; }
.kv dt, .kv dd { margin: 0; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); font-size: 0.9rem; }
.kv dt { font: 500 0.74rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); background: var(--surface-2); }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; } }

/* 7. Callouts & evidence ------------------------------------------------ */
.callout {
  --accent: var(--ink-3);
  max-width: var(--measure); margin: 1rem 0; padding: 0.7rem 1rem 0.75rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
}
.callout::before {
  display: block; font: 600 0.68rem var(--font-mono); letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: 0.25rem;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout.fact           { --accent: var(--c-fact); }           .callout.fact::before { content: "FACT"; }
.callout.observation    { --accent: var(--c-observation); }    .callout.observation::before { content: "OBSERVATION"; }
.callout.interpretation { --accent: var(--c-interpretation); } .callout.interpretation::before { content: "INTERPRETATION"; }
.callout.hypothesis     { --accent: var(--c-hypothesis); }     .callout.hypothesis::before { content: "HYPOTHESIS"; }
.callout.question       { --accent: var(--c-question); }       .callout.question::before { content: "OPEN QUESTION"; }
.callout.decision       { --accent: var(--c-decision); background: #f3f5f8; } .callout.decision::before { content: "DECISION"; }
.callout[data-label]::before { content: attr(data-label); }

.evidence {
  max-width: var(--measure); margin: 1rem 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2);
  font-size: 0.9rem;
}
.evidence header { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--rule); font: 0.72rem var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.evidence .body { padding: 0.6rem 0.8rem; }
.evidence .body > :first-child { margin-top: 0; } .evidence .body > :last-child { margin-bottom: 0; }
.evidence blockquote { font-size: 0.95rem; }

a.cite { font: 0.72em var(--font-mono); vertical-align: super; line-height: 0; text-decoration: none; margin-left: 0.1em; }
.confidence { font: 0.7rem var(--font-mono); color: var(--ink-3); margin-left: 0.4rem; }

/* 8. Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 1.1rem 0 1.4rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.data caption { caption-side: top; text-align: left; font: 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule); }
table.data th, table.data td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
table.data thead th { background: var(--surface-2); font: 600 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); white-space: nowrap; }
table.data tbody th { font-weight: 600; color: var(--heading); white-space: nowrap; }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data .group-row th { background: var(--bg); font: 600 0.7rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }

/* Coverage marks for vendor / capability comparisons */
.mark { font: 600 0.78rem var(--font-mono); display: inline-block; min-width: 1.6rem; text-align: center; border-radius: 3px; padding: 0 0.25rem; }
.mark.full    { background: var(--good); color: #3e5a34; }
.mark.partial { background: #f6eedc; color: #6b5420; }
.mark.none    { background: var(--neutral); color: var(--ink-3); }
.mark.unknown { background: transparent; color: var(--ink-3); border: 1px dashed var(--rule-strong); }

/* Decision table */
table.decision td.choice { font-weight: 600; color: var(--heading); }
table.decision tr.chosen > * { background: #f3f5f8; }

/* 9. Benchmark matrix --------------------------------------------------- */
.variable-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: var(--wide); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 1rem 0; font-size: 0.88rem; }
.variable-diff > div { padding: 0.8rem 1rem; }
.variable-diff .baseline { background: var(--surface); border-right: 1px solid var(--rule); }
.variable-diff .treatment { background: var(--surface); }
.variable-diff h4 { margin: 0 0 0.5rem; }
table.data tr.var-changed > *, table.data td.var-changed { background: #fbefd9; }
table.data tr.var-changed th::after { content: "changed"; margin-left: 0.5rem; font: 600 0.62rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: #8a5a10; border: 1px solid #d9b675; border-radius: 999px; padding: 0 0.4rem; }
td.delta-better { background: var(--good); }
td.delta-worse { background: var(--bad); }
td.delta-same { background: var(--neutral); }

/* 10. Frameworks -------------------------------------------------------- */
.maturity { display: grid; grid-template-columns: 10rem repeat(5, minmax(8rem, 1fr)); border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; font-size: 0.82rem; background: var(--surface); margin: 1.1rem 0; }
.maturity > div { padding: 0.55rem 0.65rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.maturity .hdr { background: var(--surface-2); font: 600 0.7rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.maturity .dim { font-weight: 600; color: var(--heading); background: var(--surface-2); }
.maturity .current { outline: 2px solid var(--heading); outline-offset: -2px; background: #f3f5f8; }
@media (max-width: 760px) { .maturity { grid-template-columns: 8rem repeat(5, 9rem); } }

.capability-map { display: grid; gap: 0.6rem; margin: 1.1rem 0; }
.capability-map .row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.6rem; align-items: stretch; }
.capability-map .row-label { font: 600 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); padding: 0.55rem 0.6rem; background: var(--surface-2); border-radius: var(--radius); }
.capability-map .cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.4rem; }
.capability { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.45rem 0.6rem; font-size: 0.82rem; background: var(--surface); }
.capability small { display: block; font: 0.66rem var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.capability.lvl-0 { background: var(--surface); border-style: dashed; color: var(--ink-3); }
.capability.lvl-1 { background: #f6eedc; }
.capability.lvl-2 { background: #e9eedf; }
.capability.lvl-3 { background: #dbe7d2; }
@media (max-width: 640px) { .capability-map .row { grid-template-columns: 1fr; } }

.timeline { list-style: none; margin: 1.1rem 0; padding: 0; border-left: 1px solid var(--rule-strong); max-width: var(--measure); }
.timeline li { position: relative; padding: 0 0 1rem 1.2rem; }
.timeline li::before { content: ""; position: absolute; left: -4px; top: 0.5rem; width: 7px; height: 7px; background: var(--surface); border: 1px solid var(--heading); border-radius: 50%; }
.timeline time { display: block; font: 0.72rem var(--font-mono); color: var(--ink-3); }

/* 11. Figures & diagrams ------------------------------------------------ */
figure.diagram { margin: 1.4rem 0 1.8rem; max-width: var(--wide); }
figure.diagram .frame { border: 1px solid var(--rule); border-radius: var(--radius); background: #f6eeea; overflow: hidden; }
figure.diagram img { display: block; width: 100%; height: auto; }
figure.diagram figcaption { font-size: 0.82rem; color: var(--ink-2); margin-top: 0.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
figure.diagram figcaption .fig-id { font: 600 0.72rem var(--font-mono); color: var(--ink-3); margin-right: 0.4rem; }

.legend-inline { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--ink-2); margin: 0.6rem 0; }
.legend-inline span::before { content: ""; display: inline-block; width: 0.9rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: 0; }
.legend-inline .human::before { background: var(--human); }
.legend-inline .ai::before { background: var(--ai); }
.legend-inline .data::before { background: var(--data); }
.legend-inline .system::before { border: 1px dashed var(--system); }
.legend-inline .external::before { background: var(--external); }
.legend-inline .policy::before { border: 1.5px solid var(--policy); background: #fff; }
.legend-inline .knowledge::before { background: #efe6d3; border: 1px solid var(--knowledge); }

/* 12. References -------------------------------------------------------- */
.references { font-size: 0.86rem; max-width: var(--measure); padding-left: 0; list-style: none; counter-reset: ref; }
.references li { counter-increment: ref; display: grid; grid-template-columns: 2.4rem 1fr; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
.references li::before { content: "[" counter(ref) "]"; font-family: var(--font-mono); color: var(--ink-3); }
.references li:target { background: #fbefd9; }
.references li.placeholder { display: block; }
.references li.placeholder::before { margin-right: 0.8rem; }
.references .src-type { font: 0.66rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-left: 0.4rem; }
.references .accessed { color: var(--ink-3); }

/* 13. Index lists & filter ---------------------------------------------- */
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 2.4rem; }
.index-list { list-style: none; padding: 0; margin: 0.6rem 0 1.2rem; max-width: none !important; }
.index-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.index-list li:first-child { border-top: 1px solid var(--rule); }
.index-list .row1 { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.index-list a.title { font-weight: 600; color: var(--heading); text-decoration: none; }
.index-list a.title:hover { text-decoration: underline; }
.index-list .summary { font-size: 0.85rem; color: var(--ink-2); margin-top: 0.1rem; }
.index-list .date { font: 0.72rem var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.index-list .tags { margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0; align-items: center; }
.filter-bar input, .filter-bar select {
  font: 0.86rem var(--font-sans); padding: 0.4rem 0.6rem; border: 1px solid var(--rule-strong);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.filter-bar input { flex: 1 1 16rem; }
.filter-bar .count { font: 0.75rem var(--font-mono); color: var(--ink-3); }

/* 13b. Bilingual pages ---------------------------------------------------
   Mark each block with lang="en" / lang="zh". <body data-bilingual> adds an
   EN / 中文 / EN + 中文 toggle; <html data-lang> holds the mode. */
html[data-lang="en"] [lang="zh"]:not(html),
html[data-lang="zh"] [lang="en"]:not(html) { display: none !important; }
.doc :is(p, li)[lang="zh"], .doc :is(p, ul, ol)[lang="zh"] li { line-height: 1.75; }
.doc p[lang="zh"], .doc li[lang="zh"] { color: var(--ink); }
html[data-lang="both"] .doc p[lang="en"] + p[lang="zh"] { margin-top: -0.4rem; color: var(--ink-2); }
html[data-lang="both"] .doc :is(h1, h2, h3) span[lang="zh"]::before { content: " · "; color: var(--ink-3); }
html[data-lang="both"] .doc :is(td, th, dd) span[lang="zh"] { display: block; color: var(--ink-2); font-size: 0.92em; }
html[data-lang="both"] .doc .callout p[lang="zh"] { color: var(--ink-2); }
.lang-toggle { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 999px; overflow: hidden; margin-top: 0.8rem; font: 500 0.72rem var(--font-mono); }
.lang-toggle button { font: inherit; background: var(--surface); color: var(--ink-2); border: 0; padding: 0.2rem 0.75rem; cursor: pointer; }
.lang-toggle button + button { border-left: 1px solid var(--rule-strong); }
.lang-toggle button[aria-pressed="true"] { background: var(--heading); color: #fff; }

/* 14. Print ------------------------------------------------------------- */
@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; font-size: 10.5pt; }
  .site-header, .site-footer, .toc, .filter-bar, .lang-toggle, .no-print { display: none !important; }
  .page { display: block; padding: 0; max-width: none; }
  .doc { border: 0; padding: 0; background: #fff; }
  .doc h2 { break-after: avoid; }
  figure, table, .callout, .evidence, .maturity { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  a.cite { color: var(--ink-3); }
  .doc a[href^="http"]:not(.cite)::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--ink-3); word-break: break-all; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}