/* Life in the UK Explained / 輕鬆讀懂英國 — "heritage guidebook" styles.
   One bold element: the embroidered tapestry strip at the top of a page.
   Everything else stays quiet: white page, navy ink, heritage-plaque blue for
   things to memorise, moss green for side stories, an amber correction slip
   for "exam vs today", and red only for wrong answers. */

:root {
  --page: #ffffff;
  --ink: #1d2433;
  --ink-soft: #545b6a;
  --rule: #d9d9d2;
  --rule-soft: #ebeae4;
  --plaque: #1f4e8c;
  --plaque-tint: #edf2f9;
  --moss: #3d6b4f;
  --amber: #8a5a00;
  --amber-line: #d9a63a;
  --amber-tint: #fff8e6;
  --ok: #2e7d4f;
  --ok-tint: #e8f4ec;
  --bad: #b3262e;
  --bad-tint: #fbeced;
  --focus: #f2b705;
  --linen: #efe5cf; /* ground colour of the drawn illustrations */

  /* Text cut for headings: the Display cut's hairlines vanish on phones and at
     small sizes. Display is kept for big h1s on wider screens (see h1 below). */
  --head: "Libre Caslon Text", Georgia, serif;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --body: "Source Sans 3", -apple-system, "Segoe UI", system-ui, sans-serif;
  --latin: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  --measure: 36rem;
  --wide: 62rem;

  /* old names still used by inline styles in the chapter pages */
  --en: var(--serif);
  --line: var(--rule);
  --muted: var(--ink-soft);
  --paper: var(--page);
  --sage: var(--moss);
  --accent: var(--plaque);
}

html[lang^="zh"] {
  --head: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --serif: "Noto Serif TC", "Songti TC", serif;
  --body: "Source Sans 3", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --en: "Libre Caslon Text", Georgia, serif;
  --measure: 35em;
}
/* Simplified Chinese: same layout rules as zh-TW (html[lang^="zh"]), Simplified fonts. */
html[lang="zh-Hans-CN"] {
  --head: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --body: "Source Sans 3", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #15191f;
    --ink: #e6e8ed;
    --ink-soft: #a7adb9;
    --rule: #343b47;
    --rule-soft: #262c36;
    --plaque: #93b6ea;
    --plaque-tint: #1b2535;
    --moss: #9cc4a8;
    --amber: #e8c06b;
    --amber-line: #a5812f;
    --amber-tint: #262116;
    --ok: #86d0a2;
    --ok-tint: #16281d;
    --bad: #f0969b;
    --bad-tint: #33191b;
    color-scheme: dark;
  }
}
/* Chosen with the theme button (assets/theme.js); overrides the system setting. */
:root[data-theme="dark"] {
  --page: #15191f;
  --ink: #e6e8ed;
  --ink-soft: #a7adb9;
  --rule: #343b47;
  --rule-soft: #262c36;
  --plaque: #93b6ea;
  --plaque-tint: #1b2535;
  --moss: #9cc4a8;
  --amber: #e8c06b;
  --amber-line: #a5812f;
  --amber-tint: #262116;
  --ok: #86d0a2;
  --ok-tint: #16281d;
  --bad: #f0969b;
  --bad-tint: #33191b;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.68;
}
html[lang^="zh"] body { font-size: 17px; line-height: 1.85; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--plaque); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  font-family: var(--head);
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
html[lang^="zh"] .brand { font-weight: 700; font-size: 19px; }
.brand small { display: none; }
.brand-test { font-family: var(--latin); font-weight: 700; font-size: 0.85em; color: var(--plaque); }
html[lang^="zh"] .brand-test { font-family: inherit; }
.brand-sep { color: var(--ink-soft); font-weight: 400; }
.brand-test, .brand-name { white-space: nowrap; }
.site-header .inner { flex-wrap: wrap; row-gap: 6px; }
.site-header .brand { flex: none; max-width: 100%; }
@media (max-width: 1000px) {
  .brand:has(.brand-test) { display: flex; flex-direction: column; line-height: 1.25; }
  .brand-test { font-size: 12.5px; }
  .brand-sep { display: none; }
}
.site-nav { display: flex; gap: 20px; align-items: center; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 15px; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.site-nav a.lang-link { color: var(--ink-soft); }

.breadcrumb {
  max-width: var(--measure);
  margin: 22px auto 0;
  padding: 0 20px;
  font-size: 14px;
  color: var(--ink-soft);
  box-sizing: content-box;
}
.breadcrumb a { color: var(--ink-soft); }

/* ---------- Layout ---------- */
main { padding: 0 0 64px; }
.article {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
  overflow-wrap: anywhere;
}
.page-plain { padding-top: 44px; }
.lede .choose { display: block; }
.article::after { content: ""; display: block; clear: both; }

/* The tapestry strip: edge to edge up to 1200px, the page's one bold element. */
.hero, .home-hero { max-width: 1200px; margin: 0 auto; }
.hero-banner {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 3;
  background: var(--linen);
}

h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; color: var(--ink); }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] h4 { font-weight: 700; }
h1 { font-size: clamp(34px, 5vw, 46px); line-height: 1.12; margin: 8px 0 20px; letter-spacing: -0.01em; text-wrap: balance; }
@media (min-width: 700px) { html[lang="en-GB"] h1, html[lang="it"] h1, html[lang="ro"] h1, html[lang="pl"] h1, html[lang="tr"] h1, html[lang="pt"] h1, html[lang="es"] h1 { font-family: var(--display); } }
html[lang^="zh"] h1 { font-size: clamp(28px, 4.4vw, 38px); line-height: 1.35; letter-spacing: 0; }
h2 { font-size: 27px; line-height: 1.25; margin: 64px 0 14px; text-wrap: balance; }
html[lang^="zh"] h2 { font-size: 21px; line-height: 1.5; text-wrap: pretty; }
html[lang^="zh"] h3 { text-wrap: pretty; }
h2 .nb, h3 .nb { white-space: nowrap; }
/* On wide screens a section heading may run past the text column so it stays on one line. */
@media (min-width: 1100px) { .article > h2 { margin-inline-end: -12rem; } }
h3 { font-size: 21px; line-height: 1.35; margin: 36px 0 8px; }
html[lang^="zh"] h3 { font-size: 19px; }
.lede { font-size: 1.15em; line-height: 1.62; }
html[lang^="zh"] .lede { font-size: 1.1em; line-height: 1.8; }
/* "Title: subtitle" headings (tools/restyle_markup.py) */
.h1-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h1-sub { display: block; margin-top: 0.3em; font-size: 0.56em; line-height: 1.4; color: var(--ink-soft); }
html[lang^="zh"] .h1-sub { font-size: 0.6em; line-height: 1.5; }
html[lang="ur"] .h1-sub { font-size: 0.62em; line-height: 1.9; }
/* Avoid a single word or character stranded on the last line. */
p, li, figcaption, td { text-wrap: pretty; }
p { margin: 0 0 1em; }
ul, ol { padding-inline-start: 1.3em; }
li { margin: 0.3em 0; }

.term { font-weight: 600; }
em.en { font-style: italic; }

/* Chapter details above the title: a small definition list. */
.chapter-meta {
  margin: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.chapter-meta div { display: flex; gap: 6px; }
.chapter-meta dt::after { content: ""; }
.chapter-meta dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

.updated { margin: -10px 0 20px; font-size: 14px; color: var(--ink-soft); }
.handbook-title { margin: -12px 0 18px; font-family: var(--en); font-style: italic; color: var(--ink-soft); }

/* ---------- Labels, shared by notes and the key ---------- */
.tag {
  display: inline-block;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  padding: 1px 7px;
  border-radius: 3px;
  margin-inline-end: 8px;
  vertical-align: 3px;
  color: var(--page);
  background: var(--plaque);
  white-space: nowrap;
}
.tag-fun { background: var(--moss); }
.tag-diff { background: var(--amber-tint); color: var(--amber); box-shadow: inset 0 0 0 1.5px var(--amber-line); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 30px;
}
.legend .key-item { display: inline-flex; align-items: baseline; }
.legend .tag { vertical-align: 0; margin-inline-end: 6px; }

/* ---------- Notes ---------- */
.callout { margin: 30px 0; font-size: 0.95em; }
.callout h4 { font-size: 19px; line-height: 1.4; margin: 0 0 8px; }
html[lang^="zh"] .callout h4 { font-size: 17px; }
.callout > :last-child { margin-bottom: 0; }
.callout ul { margin: 6px 0; }

/* Key facts: a plaque-blue panel. This is the part to memorise. */
.callout.exam {
  background: var(--plaque-tint);
  border-radius: 6px;
  padding: 18px 22px 20px;
}
.callout.exam li::marker { color: var(--plaque); }

/* Side stories: a quiet aside, folded to its heading (tools/restyle_markup.py). */
.callout.fun {
  border-inline-start: 3px solid var(--moss);
  padding-block: 2px;
  padding-inline: 18px 0;
}

details.callout.fun > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
details.callout.fun > summary::-webkit-details-marker { display: none; }
details.callout.fun > summary h4 { flex: 1; margin: 0; }
details.callout.fun > summary::after { content: "+"; font-family: var(--latin); font-size: 20px; line-height: 1; color: var(--moss); }
details.callout.fun[open] > summary::after { content: "\2212"; }
details.callout.fun[open] > summary { margin-bottom: 8px; }
.fun-hint { font-weight: 400; color: var(--ink-soft); font-size: 0.9em; }

/* Exam vs today: an amber correction slip. */
.callout.diff {
  background: var(--amber-tint);
  border: 1.5px dashed var(--amber-line);
  border-radius: 4px;
  padding: 16px 20px 18px;
}
/* Folded by default (tools/restyle_markup.py): one line until the reader opens it. */
details.callout.diff { padding: 8px 16px; background: transparent; border: 1px dashed var(--rule); }
details.callout.diff[open] { padding-bottom: 18px; }
details.callout.diff > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
details.callout.diff > summary::-webkit-details-marker { display: none; }
details.callout.diff > summary h4 { flex: 1; margin: 0; font-size: 16px; }
html[lang^="zh"] details.callout.diff > summary h4 { font-size: 15px; }
details.callout.diff > summary::after { content: "+"; font-family: var(--latin); font-size: 20px; line-height: 1; color: var(--amber); }
details.callout.diff[open] > summary::after { content: "\2212"; }
details.callout.diff[open] > summary { margin-bottom: 8px; }
.diff-hint { font-weight: 400; color: var(--ink-soft); font-size: 0.9em; }
details.callout.diff > summary h4 { color: var(--ink-soft); font-weight: 400; }
details.callout.diff > summary .tag-diff { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--rule); }
details.callout.diff > summary::after { color: var(--ink-soft); }
details.callout.diff[open] { color: var(--ink); }

/* ---------- Figures ---------- */
figure.fig { margin: 36px 0; }
/* Maps and diagrams may run wider than the text column on large screens. */
@media (min-width: 960px) {
  figure.fig.wide {
    width: min(50rem, calc(100vw - 64px));
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%);
    clear: inline-end;
  }
  html[dir="rtl"] figure.fig.wide {
    margin-left: 0 !important;
    margin-right: 50% !important;
    transform: translateX(50%);
  }
}
figure.fig img, figure.fig > svg { display: block; width: 100%; background: var(--linen); }
figure.fig.photo img { background: transparent; }
figcaption { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin-top: 10px; }
figcaption .credit { display: block; font-size: 12px; margin-top: 3px; }
figcaption .credit a { color: inherit; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 28px 0; padding: 0; border-inline-start: 2px solid var(--rule); }
.timeline li {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 14px;
  padding-block: 6px;
  padding-inline: 18px 0;
  position: relative;
  margin: 0;
}
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  top: 0.95em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--page);
  border: 2px solid var(--ink-soft);
}
.timeline li.key::before { background: var(--plaque); border-color: var(--plaque); }
.timeline .when { font-family: var(--latin); font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.timeline li.key .when { color: var(--plaque); }

/* ---------- Word board (cow / beef) ---------- */
.word-board { margin: 30px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.word-board .head, .word-board .row { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; }
.word-board .head { font-size: 14px; color: var(--ink-soft); padding: 10px 4px; text-align: center; }
.word-board .row { padding: 12px 4px; border-top: 1px solid var(--rule-soft); }
.word-board .cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.word-board .cell svg { width: 60px; height: 46px; flex: none; }
.word-board .wb-art { display: block; width: 100%; max-width: 220px; height: auto; }
.word-board .word { font-family: var(--en); font-size: 23px; font-weight: 700; }
.word-board .root { display: block; font-family: var(--latin); font-size: 13px; font-weight: 400; color: var(--ink-soft); font-style: italic; }
.word-board .arrow { text-align: center; color: var(--ink-soft); }

/* ---------- Icon row ---------- */
.icon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 16px; margin: 26px 0; }
.icon-row .item { text-align: center; font-size: 15px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.icon-row svg { width: 54px; height: 54px; display: block; margin: 0 auto 6px; }
.icon-row img.ic { width: 92px; height: 92px; display: block; margin: 0 auto 8px; }
.icon-row .term { white-space: normal; }
.icon-row .num { display: block; font-family: var(--head); font-size: 28px; line-height: 1.1; color: var(--plaque); }
@media (max-width: 560px) { .icon-row { grid-template-columns: repeat(2, 1fr) !important; } .icon-row img.ic { width: 84px; height: 84px; } }

/* ---------- Quiz ---------- */
.quiz {
  margin: 44px 0;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
.quiz-label { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.quiz-q { margin: 0 0 6px; font-family: var(--latin); font-size: 19px; line-height: 1.5; }
.quiz-q .stmt { display: block; margin-top: 8px; padding-inline-start: 14px; border-inline-start: 3px solid var(--rule); font-style: italic; }
.quiz details.gloss { font-size: 14.5px; color: var(--ink-soft); margin: 2px 0 12px; }
.quiz details.gloss summary { cursor: pointer; width: fit-content; }
.quiz-options { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.quiz-options li { margin: 0; }
.quiz-options button {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-align: start;
  font: inherit;
  font-family: var(--latin);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--page);
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  padding: 11px 14px;
  cursor: pointer;
}
.quiz-options button .key {
  flex: none;
  min-width: 1.65em;
  height: 1.65em;
  line-height: 1.65em;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.quiz-options button:hover:not(:disabled) { border-color: var(--ink-soft); }
.quiz-options button.selected { border-color: var(--plaque); background: var(--plaque-tint); }
.quiz-options button.selected .key { color: var(--plaque); box-shadow: inset 0 0 0 1.5px var(--plaque); }
.quiz-options button.correct { border-color: var(--ok); background: var(--ok-tint); }
.quiz-options button.wrong { border-color: var(--bad); background: var(--bad-tint); }
.quiz-options button.correct .key { color: var(--page); background: var(--ok); box-shadow: none; }
.quiz-options button.wrong .key { color: var(--page); background: var(--bad); box-shadow: none; }
.quiz-options button:disabled { cursor: default; }
.quiz-hint { font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; }
.quiz-check {
  margin-top: 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 4px;
  border: none;
  background: var(--plaque);
  color: var(--page);
  cursor: pointer;
}
.quiz-check:disabled { opacity: 0.4; cursor: default; }
.quiz-feedback { margin-top: 14px; padding: 12px 16px; border-radius: 6px; font-size: 16px; }
.quiz-feedback.ok { background: var(--ok-tint); }
.quiz-feedback.bad { background: var(--bad-tint); }
.quiz-feedback .verdict { font-weight: 700; margin: 0 0 4px; }
.quiz-feedback.ok .verdict { color: var(--ok); }
.quiz-feedback.bad .verdict { color: var(--bad); }
.quiz-feedback p { margin: 4px 0; }

/* ---------- Summary, score, chapter links ---------- */
.summary-table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 16px 0; border-top: 2px solid var(--ink); }
.summary-table th, .summary-table td { text-align: start; vertical-align: top; padding-block: 10px; padding-inline: 0 14px; border-bottom: 1px solid var(--rule); }
.summary-table th { font-weight: 700; width: 36%; }
.summary-table td { overflow-wrap: anywhere; }

.score-card {
  margin: 52px 0 0;
  padding: 18px 0 20px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  align-items: baseline;
}
.score-card > div:first-child { font-family: var(--head); font-size: 21px; }
html[lang^="zh"] .score-card > div:first-child { font-weight: 700; font-size: 18px; }
.score-card .big { font-family: var(--head); font-size: 40px; line-height: 1.1; color: var(--plaque); grid-row: 1 / span 2; grid-column: 2; font-variant-numeric: tabular-nums; }
.score-card .note { color: var(--ink-soft); font-size: 15px; }
.score-card button {
  justify-self: start;
  font: inherit;
  font-size: 15px;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--plaque);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0 0; }
.chapter-nav a, .chapter-nav > span { display: block; font-family: var(--head); font-size: 19px; line-height: 1.35; color: var(--ink); text-decoration: none; }
html[lang^="zh"] .chapter-nav a, html[lang^="zh"] .chapter-nav > span { font-weight: 700; font-size: 16.5px; }
.chapter-nav a:hover { color: var(--plaque); text-decoration: underline; text-decoration-thickness: 1px; }
.chapter-nav small { display: block; font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--ink-soft); margin-bottom: 3px; }
.chapter-nav .next { text-align: end; grid-column: 2; }
.chapter-nav > span { color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  padding: 12px 22px;
  border-radius: 4px;
  border: 1.5px solid var(--plaque);
  background: var(--page);
  color: var(--plaque);
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--plaque); color: var(--page); }
.btn:hover { text-decoration: none; background: var(--plaque-tint); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 24px 0 12px; }

/* ---------- Contents lists ---------- */
.chapters, .topic-grid { list-style: none; margin: 26px 0; padding: 0; border-top: 2px solid var(--ink); }
.chapters > li, .topic-grid > li { margin: 0; border-bottom: 1px solid var(--rule); }
.chapters li a, .chapters li .soon {
  display: grid;
  grid-template-columns: 7.2em 1fr auto;
  gap: 2px 18px;
  align-items: baseline;
  padding: 16px 0;
  color: var(--ink);
  text-decoration: none;
}
.chapters .era { font-family: var(--latin); color: var(--plaque); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.chapters .title { display: block; font-family: var(--head); font-size: 21px; line-height: 1.3; }
html[lang^="zh"] .chapters .title { font-weight: 700; font-size: 18px; line-height: 1.5; }
.chapters .desc { display: block; font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin-top: 3px; }
.chapters .progress { font-size: 14px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chapters li a:hover .title { color: var(--plaque); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.chapters li .soon { opacity: 0.55; }

.topic-grid a, .topic-grid .soon {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 2px 20px;
  align-items: center;
  padding: 20px 0;
  color: var(--ink);
  text-decoration: none;
}
.topic-grid svg { width: 48px; height: 48px; }
.topic-grid .title { display: block; font-family: var(--head); font-size: 23px; line-height: 1.3; }
html[lang^="zh"] .topic-grid .title { font-weight: 700; font-size: 20px; }
.topic-grid .en { display: block; font-family: var(--en); font-style: italic; font-size: 14.5px; color: var(--ink-soft); }
.topic-grid .desc { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 4px; line-height: 1.55; }
.topic-grid .status { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.topic-grid a:hover .title { color: var(--plaque); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.topic-grid .soon { opacity: 0.55; }
@media (max-width: 600px) {
  .chapters li a, .chapters li .soon { grid-template-columns: 1fr; gap: 1px; }
  .topic-grid a, .topic-grid .soon { grid-template-columns: 40px 1fr; gap: 2px 14px; align-items: start; }
  .topic-grid svg { width: 38px; height: 38px; margin-top: 4px; }
  .topic-grid .status { grid-column: 2; }
}

/* ---------- Home ---------- */
.home-intro {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 44px 20px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: start;
  box-sizing: content-box;
}
.home-intro h1 { font-size: clamp(36px, 5.2vw, 54px); margin-top: 0; }
html[lang^="zh"] .home-intro h1 { font-size: clamp(30px, 4.4vw, 44px); }
.home-intro .rules { font-size: 15px; color: var(--ink-soft); margin: 4px 0 0; }
.try-question { border: 1.5px solid var(--rule); border-radius: 6px; padding: 18px 20px 20px; }
.try-question .try-intro { margin: 0 0 4px; font-family: var(--head); font-size: 21px; line-height: 1.35; }
html[lang^="zh"] .try-question .try-intro { font-weight: 700; font-size: 18px; }
.try-question .quiz { margin: 10px 0 0; padding: 0; border: none; }
.try-question .quiz-label { display: none; }
.try-question .read-on { margin: 14px 0 0; font-size: 15px; }
.question-list { list-style: none; padding: 0; margin: 18px 0 8px; border-top: 1px solid var(--rule); }
.question-list li { margin: 0; border-bottom: 1px solid var(--rule); }
.question-list a { display: block; padding: 14px 0; text-decoration: none; color: var(--ink); }
.question-list .q { display: block; font-family: var(--head); font-size: 21px; line-height: 1.35; }
html[lang^="zh"] .question-list .q { font-weight: 700; font-size: 18px; line-height: 1.5; }
.question-list .where { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 3px; }
.question-list a:hover .q { color: var(--plaque); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.steps li { margin: 0.5em 0; }
.home-article { max-width: var(--wide); }
.home-article > * { max-width: var(--measure); }
@media (max-width: 860px) { .home-intro { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 32px; } }

/* ---------- Mock test ---------- */
.mock-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  margin: 16px 0;
  background: var(--page);
  border-bottom: 2px solid var(--ink);
  font-size: 15px;
}
.mock-timer { font-family: var(--latin); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.mock-timer.low { color: var(--bad); }
#mock-question.quiz { border-top: none; padding-top: 4px; margin-top: 8px; }
.mock-nav { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0; }
.mock-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 18px 0; }
.mock-grid a { text-decoration: none; display: block; text-align: center; }
.mock-grid button, .mock-grid a {
  width: 100%;
  font: inherit;
  font-family: var(--latin);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 6px 0;
  border-radius: 4px;
  border: 1.5px solid var(--rule);
  background: var(--page);
  color: var(--ink);
  cursor: pointer;
}
.mock-grid button.answered { background: var(--plaque-tint); border-color: var(--plaque); }
.mock-grid button.current { outline: 2px solid var(--ink); outline-offset: 1px; }
.mock-grid .right { background: var(--ok-tint); border-color: var(--ok); }
.mock-grid .wrong { background: var(--bad-tint); border-color: var(--bad); }
@media (max-width: 560px) { .mock-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.result-card { padding: 22px 0; margin: 16px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.result-card .big { font-family: var(--head); font-size: 56px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.result-card.pass .big { color: var(--ok); }
.result-card.fail .big { color: var(--bad); }
.review-item { border-top: 1px solid var(--rule); padding: 18px 0; }
.review-item .mark { font-weight: 700; margin-inline-start: 10px; }
.review-item .mark.ok { color: var(--ok); }
.review-item .mark.bad { color: var(--bad); }
.review-item .qtext { font-family: var(--latin); font-size: 17px; margin: 0 0 6px; }
.review-item .stmt { display: block; font-style: italic; margin-top: 4px; }
.review-item .ans { font-size: 15px; margin: 2px 0; }
.review-item .ans.bad { color: var(--bad); }
.review-item .ans.ok { color: var(--ok); }
.review-item .explain { font-size: 15px; color: var(--ink-soft); }
.review-item .read-more { font-size: 15px; }
.weak-list { padding-inline-start: 1.3em; }

/* ---------- Footer ---------- */
.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 20px 56px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
  box-sizing: content-box;
}
.site-footer::before { content: ""; display: block; border-top: 1px solid var(--rule); margin-bottom: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; }
.footer-links a { color: var(--ink-soft); }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  body { font-size: 17px; }
  html[lang^="zh"] body { font-size: 16px; }
  .term, .legend .key-item { white-space: normal; }
  h2 { font-size: 25px; margin-top: 52px; }
  html[lang^="zh"] h2 { font-size: 19px; }
  .site-header .inner { padding: 12px 16px; gap: 10px; align-items: center; }
  .brand { font-size: 17px; }
  html[lang^="zh"] .brand { font-size: 16px; }
  .site-nav { gap: 13px; }
  .site-nav a { font-size: 14px; }
  .article, .breadcrumb, .home-intro, .site-footer { padding-left: 16px; padding-right: 16px; }
  .timeline li { grid-template-columns: 4.4em 1fr; gap: 10px; }
  .word-board .cell { flex-direction: column; gap: 2px; text-align: center; }
  .word-board .word { font-size: 20px; }
  .summary-table th { width: 40%; }
  .chapter-nav { gap: 14px; }
  .chapter-nav a, .chapter-nav > span { font-size: 16px; }
  .score-card .big { font-size: 32px; }
}

/* ---------- Language menu ---------- */
.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex; /* inline-flex left a taller line box under it, so the label sat higher than the nav links */
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 15px;
  white-space: nowrap;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary .globe { width: 15px; height: 15px; flex: none; }
.lang-menu ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 10px);
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-width: 11rem;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.lang-menu li { margin: 0; }
.site-nav .lang-menu a { display: block; padding: 6px 16px; color: var(--ink); font-size: 16px; line-height: 1.6; text-align: left; }
html[dir="rtl"] .site-nav .lang-menu a { text-align: right; }
.site-nav .lang-menu a:hover { background: var(--plaque-tint); text-decoration: none; }
.site-nav .lang-menu a[aria-current] { font-weight: 700; color: var(--plaque); }

/* A link to a page that is only available in another language. */
.in-english { white-space: nowrap; margin-inline-start: 0.35em; font-size: 0.85em; font-weight: 400; color: var(--ink-soft); }
.mt-note, .diff-note { margin: 10px 0 0; }
.tel { white-space: nowrap; }

/* ---------- Right-to-left pages ---------- */
html[dir="rtl"] span[lang|="en"], html[dir="rtl"] em[lang|="en"], html[dir="rtl"] a[lang|="en"], html[dir="rtl"] bdi {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] [lang|="en"] { font-family: var(--latin); }
html[dir="rtl"] .word-board .arrow { transform: scaleX(-1); }
/* Scores like "3 / 7" must not be reordered as "7 / 3". */
.score-card .big, .result-card .big, .mock-timer { direction: ltr; unicode-bidi: isolate; }
/* English lines that sit under Urdu titles should line up with them. */
html[dir="rtl"] .topic-grid .en, html[dir="rtl"] .handbook-title { text-align: right; }
html[dir="rtl"] h1, html[dir="rtl"] .tag { letter-spacing: 0; }

/* ---------- Urdu: Nastaliq needs room above and below each line ---------- */
html[lang="ur"] {
  --head: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Naskh Arabic", "Geeza Pro", serif;
  --serif: var(--head);
  --body: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  --measure: 38rem;
}
html[lang="ur"] body { font-size: 18px; line-height: 2.3; }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4 { font-weight: 700; }
html[lang="ur"] h1 { font-size: clamp(27px, 4vw, 36px); line-height: 2; }
html[lang="ur"] h2 { font-size: 24px; line-height: 2; }
html[lang="ur"] h3 { font-size: 20px; line-height: 2; }
html[lang="ur"] .lede { line-height: 2.2; }
html[lang="ur"] .brand, html[lang="ar"] .brand, html[lang="fa"] .brand, html[lang="hi"] .brand, html[lang="bn"] .brand { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 400; }
html[lang="ur"] .brand-test { font-family: var(--body); font-size: 0.9em; line-height: 2; }
@media (max-width: 600px) {
  html[lang="ur"] .brand { font-size: 15px; }
  html[lang="ur"] .brand-test { font-size: 13px; line-height: 1.9; }
  html[lang="ur"] .site-nav { gap: 10px; }
}
html[lang="ur"] .brand-test span[lang], html[lang="ar"] .brand-test span[lang], html[lang="fa"] .brand-test span[lang] { font-family: var(--latin); }
/* Arabic script (and Devanagari, Bengali) has no true italics: emphasis is bold instead. */
html[lang="ur"] em:not(:lang(en)), html[lang="ar"] em:not(:lang(en)), html[lang="fa"] em:not(:lang(en)),
html[lang="hi"] em:not(:lang(en)), html[lang="bn"] em:not(:lang(en)) { font-style: normal; font-weight: 700; }
html[lang="ur"] .tag { font-size: 14px; line-height: 2; padding: 0 8px; vertical-align: 0; }
html[lang="ur"] .callout h4 { font-size: 17px; line-height: 2.1; }
html[lang="ur"] .callout { line-height: 2.2; }
html[lang="ur"] .legend, html[lang="ur"] .chapter-meta, html[lang="ur"] .breadcrumb,
html[lang="ur"] figcaption, html[lang="ur"] .quiz-hint, html[lang="ur"] .chapters .desc,
html[lang="ur"] .topic-grid .desc, html[lang="ur"] .question-list .where, html[lang="ur"] .site-footer { font-size: 15px; line-height: 2.1; }
html[lang="ur"] .quiz details.gloss { font-size: 16px; line-height: 2.2; }
html[lang="ur"] .icon-row .item, html[lang="ur"] .btn, html[lang="ur"] .summary-table { line-height: 2; }
html[lang="ur"] .timeline .when, html[lang="ur"] .chapters .era,
html[lang="ar"] .timeline .when, html[lang="ar"] .chapters .era,
html[lang="fa"] .timeline .when, html[lang="fa"] .chapters .era,
html[lang="hi"] .timeline .when, html[lang="hi"] .chapters .era,
html[lang="bn"] .timeline .when, html[lang="bn"] .chapters .era { font-family: var(--body); }
html[lang="ur"] .site-nav a, html[lang="ur"] .lang-menu summary { font-size: 15px; }
html[lang="ur"] .chapters .title, html[lang="ur"] .topic-grid .title, html[lang="ur"] .question-list .q,
html[lang="ur"] .chapter-nav a, html[lang="ur"] .try-question .try-intro, html[lang="ur"] .score-card > div:first-child { font-weight: 700; font-size: 18px; line-height: 2; }

/* ---------- Arabic (Naskh): taller lines than Latin, no italics or letter-spacing ---------- */
html[lang="ar"] {
  --head: "Noto Naskh Arabic", "Geeza Pro", "Arabic Typesetting", "Traditional Arabic", serif;
  --serif: var(--head);
  --body: "Noto Naskh Arabic", "Geeza Pro", "Arabic Typesetting", "Traditional Arabic", serif;
  --measure: 37rem;
}
html[lang="ar"] body { font-size: 18px; line-height: 1.9; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { font-weight: 700; letter-spacing: 0; }
html[lang="ar"] h1 { font-size: clamp(28px, 4.2vw, 38px); line-height: 1.6; }
html[lang="ar"] h2 { font-size: 24px; line-height: 1.6; }
html[lang="ar"] h3 { font-size: 20px; line-height: 1.6; }
html[lang="ar"] .lede { line-height: 1.9; }
html[lang="ar"] .h1-sub { font-size: 0.62em; line-height: 1.7; }
html[lang="ar"] .brand-test { font-family: var(--body); font-size: 0.9em; line-height: 1.7; }
@media (max-width: 600px) {
  html[lang="ar"] .brand { font-size: 15px; }
  html[lang="ar"] .brand-test { font-size: 13px; }
  html[lang="ar"] .site-nav { gap: 10px; }
}
html[lang="ar"] .tag { font-size: 14px; line-height: 1.7; padding: 0 8px; vertical-align: 1px; letter-spacing: 0; }
html[lang="ar"] .callout h4 { font-size: 17px; line-height: 1.8; }
html[lang="ar"] .callout { line-height: 1.9; }
html[lang="ar"] .chapter-meta, html[lang="ar"] .breadcrumb,
html[lang="ar"] figcaption, html[lang="ar"] .quiz-hint, html[lang="ar"] .chapters .desc,
html[lang="ar"] .topic-grid .desc, html[lang="ar"] .question-list .where, html[lang="ar"] .site-footer { font-size: 15px; line-height: 1.85; }
html[lang="ar"] .quiz details.gloss { font-size: 16px; line-height: 1.9; }
html[lang="ar"] .site-nav a, html[lang="ar"] .lang-menu summary { font-size: 15px; }
html[lang="ar"] .chapters .title, html[lang="ar"] .topic-grid .title, html[lang="ar"] .question-list .q,
html[lang="ar"] .chapter-nav a, html[lang="ar"] .try-question .try-intro, html[lang="ar"] .score-card > div:first-child { font-weight: 700; font-size: 18px; line-height: 1.7; }

/* ---------- Persian: like Arabic, taller lines, no italics or letter-spacing ---------- */
html[lang="fa"] {
  --head: "Vazirmatn", "Noto Naskh Arabic", "Geeza Pro", "Tahoma", sans-serif;
  --serif: var(--head);
  --body: "Vazirmatn", "Noto Naskh Arabic", "Geeza Pro", "Tahoma", sans-serif;
  --measure: 37rem;
}
html[lang="fa"] body { font-size: 18px; line-height: 1.9; }
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4 { font-weight: 700; letter-spacing: 0; }
html[lang="fa"] h1 { font-size: clamp(28px, 4.2vw, 38px); line-height: 1.6; }
html[lang="fa"] h2 { font-size: 24px; line-height: 1.6; }
html[lang="fa"] h3 { font-size: 20px; line-height: 1.6; }
html[lang="fa"] .lede { line-height: 1.9; }
html[lang="fa"] .h1-sub { font-size: 0.62em; line-height: 1.7; }
html[lang="fa"] .brand-test { font-family: var(--body); font-size: 0.9em; line-height: 1.7; }
@media (max-width: 600px) {
  html[lang="fa"] .brand { font-size: 15px; }
  html[lang="fa"] .brand-test { font-size: 13px; }
  html[lang="fa"] .site-nav { gap: 10px; }
}
html[lang="fa"] .tag { font-size: 14px; line-height: 1.7; padding: 0 8px; vertical-align: 1px; letter-spacing: 0; }
html[lang="fa"] .callout h4 { font-size: 17px; line-height: 1.8; }
html[lang="fa"] .callout { line-height: 1.9; }
html[lang="fa"] .chapter-meta, html[lang="fa"] .breadcrumb,
html[lang="fa"] figcaption, html[lang="fa"] .quiz-hint, html[lang="fa"] .chapters .desc,
html[lang="fa"] .topic-grid .desc, html[lang="fa"] .question-list .where, html[lang="fa"] .site-footer { font-size: 15px; line-height: 1.85; }
html[lang="fa"] .quiz details.gloss { font-size: 16px; line-height: 1.9; }
html[lang="fa"] .site-nav a, html[lang="fa"] .lang-menu summary { font-size: 15px; }
html[lang="fa"] .chapters .title, html[lang="fa"] .topic-grid .title, html[lang="fa"] .question-list .q,
html[lang="fa"] .chapter-nav a, html[lang="fa"] .try-question .try-intro, html[lang="fa"] .score-card > div:first-child { font-weight: 700; font-size: 18px; line-height: 1.7; }

/* ---------- Hindi (Devanagari): the headline bar and matras need extra line height ----------
   Latin runs (exam terms in brackets) keep Source Sans 3, whose files only cover Latin. */
html[lang="hi"] {
  --head: "Source Sans 3", "Noto Sans Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", "Mangal", sans-serif;
  --body: "Source Sans 3", "Noto Sans Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", "Mangal", sans-serif;
  --measure: 37rem;
}
html[lang="hi"] body { line-height: 1.8; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4 { font-weight: 700; letter-spacing: 0; }
html[lang="hi"] h1 { font-size: clamp(28px, 4.4vw, 38px); line-height: 1.45; }
html[lang="hi"] h2 { font-size: 23px; line-height: 1.5; }
html[lang="hi"] h3 { font-size: 20px; line-height: 1.5; }
html[lang="hi"] .lede { line-height: 1.8; }
html[lang="hi"] .h1-sub { font-size: 0.6em; line-height: 1.6; }
html[lang="hi"] .brand-test { font-family: var(--body); }
html[lang="hi"] .tag { letter-spacing: 0; line-height: 1.6; }
html[lang="hi"] .callout h4 { line-height: 1.6; }
html[lang="hi"] .chapters .title, html[lang="hi"] .topic-grid .title, html[lang="hi"] .question-list .q,
html[lang="hi"] .chapter-nav a, html[lang="hi"] .try-question .try-intro, html[lang="hi"] .score-card > div:first-child { font-weight: 700; font-size: 18px; line-height: 1.6; }

/* ---------- Bengali: conjuncts and vowel signs need extra line height ----------
   Latin runs keep Source Sans 3, whose files only cover Latin. */
html[lang="bn"] {
  --head: "Source Sans 3", "Noto Sans Bengali", "Kohinoor Bangla", "Bangla Sangam MN", "Vrinda", sans-serif;
  --body: "Source Sans 3", "Noto Sans Bengali", "Kohinoor Bangla", "Bangla Sangam MN", "Vrinda", sans-serif;
  --measure: 37rem;
}
html[lang="bn"] body { line-height: 1.8; }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4 { font-weight: 700; letter-spacing: 0; }
html[lang="bn"] h1 { font-size: clamp(28px, 4.4vw, 38px); line-height: 1.45; }
html[lang="bn"] h2 { font-size: 23px; line-height: 1.5; }
html[lang="bn"] h3 { font-size: 20px; line-height: 1.5; }
html[lang="bn"] .lede { line-height: 1.8; }
html[lang="bn"] .h1-sub { font-size: 0.6em; line-height: 1.6; }
html[lang="bn"] .brand-test { font-family: var(--body); }
html[lang="bn"] .tag { letter-spacing: 0; line-height: 1.6; }
html[lang="bn"] .callout h4 { line-height: 1.6; }
html[lang="bn"] .chapters .title, html[lang="bn"] .topic-grid .title, html[lang="bn"] .question-list .q,
html[lang="bn"] .chapter-nav a, html[lang="bn"] .try-question .try-intro, html[lang="bn"] .score-card > div:first-child { font-weight: 700; font-size: 18px; line-height: 1.6; }

/* ---------- Russian: the self-hosted Libre Caslon and Source Sans 3 files only cover Latin ----------
   Cyrillic and the Latin runs inside it use the same system faces, so a word never switches font
   halfway through a line. The wide-screen Display h1 rule above is for Latin editions only. */
html[lang="ru"] {
  --head: Georgia, "Times New Roman", serif;
  --display: var(--head);
  --serif: Georgia, "Times New Roman", serif;
  --en: Georgia, "Times New Roman", serif;
  --body: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --latin: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* ---------- Home: the tapestry frieze, the history journey, numbered steps ---------- */
.frieze {
  display: flex;
  height: clamp(92px, 12vw, 168px);
  overflow: hidden;
  background: var(--linen);
}
.frieze a { flex: none; height: 100%; }
.frieze img { display: block; height: 100%; width: auto; aspect-ratio: 10 / 3; }
.home-demo { margin-top: 8px; }
.home-demo .word-board { margin: 20px 0 8px; }
.journey { list-style: none; margin: 22px 0 14px; padding: 0; border-top: 2px solid var(--ink); }
.journey li { margin: 0; border-bottom: 1px solid var(--rule); }
.journey a {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 4px 20px;
  align-items: center;
  padding: 14px 0;
  color: var(--ink);
  text-decoration: none;
}
.journey-art { width: 100%; aspect-ratio: 10 / 3; object-fit: cover; display: block; background: var(--linen); }
.journey-text { display: block; }
.journey .era { display: block; font-family: var(--latin); font-weight: 700; font-size: 14px; color: var(--plaque); font-variant-numeric: tabular-nums; }
.journey .title { display: block; font-family: var(--head); font-size: 21px; line-height: 1.3; }
html[lang^="zh"] .journey .title { font-weight: 700; font-size: 18px; line-height: 1.5; }
html[lang="ur"] .journey .title { font-weight: 700; font-size: 18px; line-height: 2; }
html[lang="ar"] .journey .title, html[lang="fa"] .journey .title,
html[lang="hi"] .journey .title, html[lang="bn"] .journey .title { font-weight: 700; font-size: 18px; line-height: 1.7; }
.journey .hook { display: block; font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin-top: 2px; }
.journey a:hover .title { color: var(--plaque); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.journey-more { font-size: 15px; color: var(--ink-soft); }
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 18px 0 24px; }
.steps li { counter-increment: step; margin: 0; padding-top: 6px; border-top: 2px solid var(--rule); }
.steps li::before { content: counter(step); display: block; font-family: var(--head); font-size: 34px; line-height: 1.2; color: var(--plaque); }
@media (max-width: 600px) {
  .journey a { grid-template-columns: 7.5rem 1fr; gap: 2px 14px; }
  .journey .title { font-size: 18px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Theme button (added by assets/theme.js) ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin: 0;
  border: 1px solid var(--rule); border-radius: 50%;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  align-self: center;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .moon { display: none; }
:root[data-theme-now="dark"] .theme-toggle .sun { display: none; }
:root[data-theme-now="dark"] .theme-toggle .moon { display: block; }