/* The sites' one stylesheet. The look follows the WordPress sites it replaced (Astra theme, the Home
   and Topics pages built with Spectra, Site Layout's phone rules, the reading-tools chips of Reader
   Challenges), with the owner's changes of 28 October 2026: articles in one column, what the sidebar
   held after them, a search button in the header, boxes and cards that rise under the pointer, the
   device's own font. Widths as the theme's: up to 921px is a tablet, up to 544px a phone. Colours are
   variables, so dark mode only swaps them. */

:root {
  --accent: #0170b9;
  --accent-hover: #015a94;
  --link-hover: #3a3a3a;
  --on-accent: #ffffff;
  --text: #3a3a3a;
  --heading: #3a3a3a;
  --strong: #000000;
  --muted: #5f6b7a;
  --bg: #ffffff;
  --soft: #f5f5f5;
  --band: #eeeeee;
  --border: #e1e6eb;
  --rule: #dddddd;
  --card: #ffffff;
  --note-bg: #f0f7fd;
  --note-border: #b9d8f0;
  --topic-bg: #f1f1f1;
  --topic-border: #ffd936;
  --badge: #c2410c;
  --box-text: #4b4f58;
  /* The device's own font, nothing to download: Segoe UI on Windows, San Francisco on Apple's, Roboto on
     Android. (The WordPress sites asked for DM Sans and never loaded it, so readers saw Arial.) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --accent: #5aa9dc;
  --accent-hover: #86c1e8;
  --link-hover: #e8edf2;
  --on-accent: #0b1a26;
  --text: #c9d2db;
  --heading: #e8edf2;
  --strong: #f2f5f8;
  --muted: #9cb2c6;
  --bg: #15171c;
  --soft: #1b1e24;
  --band: #1d2127;
  --border: #333a44;
  --rule: #333a44;
  --card: #1d2127;
  --note-bg: #16283a;
  --note-border: #2c5578;
  --topic-bg: #1d2127;
  --topic-border: #a88f24;
  --badge: #f0844a;
  --box-text: #c9d2db;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 var(--font);
  overflow-wrap: break-word;
}
a { color: var(--accent); text-decoration: none; }
/* A link turns dark under the pointer, as the theme's; lists of titles turn blue instead (the theme leaves them as they are). */
a:hover, a:focus-visible { color: var(--link-hover); }
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { color: var(--heading); font-weight: 400; line-height: 1.3; margin: 0 0 0.6em; }
strong, b { color: var(--strong); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.screen-reader-text, .skip-link:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 14px; background: var(--card); }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 860px; }
.center { text-align: center; }

/* Header: the site name on the left, the menu on the right; a link turns blue under the pointer. Over
   the Home's hero and the Topics band it lies on the page's own top, in white, and the page's own
   item is marked: underlined in white on the Home, blue on Topics (as the WordPress sites). */
.site-header { position: relative; border-bottom: 1px solid var(--border); background: var(--bg); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 90px; }
.site-nav { margin-left: auto; }
.site-name { color: var(--strong); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.site-name:hover, .site-name:focus-visible { color: var(--strong); text-decoration: none; }
.site-nav ul { display: flex; gap: 6px 26px; margin: 0; padding: 0; list-style: none; }
.site-nav a { color: var(--strong); font-size: 16px; padding: 6px 0; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--accent); text-decoration: none; }
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 10; border: 0; background: transparent; }
.site-header--overlay .site-name, .site-header--overlay .site-nav a { color: #f5f5f5; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.site-header--overlay .site-nav a:hover, .site-header--overlay .site-nav a:focus-visible,
.site-header--overlay .site-nav a[aria-current="page"] { color: var(--accent); }
.home .site-header--overlay .site-nav a[aria-current="page"] {
  color: #ffffff; text-decoration: underline 2px; text-underline-offset: 6px;
}
/* Up to 921px the menu hides behind a round button and drops down under the header when opened. */
.menu-toggle { display: none; }
/* The search button, right of the menu: a search box drops down under the header. */
.search-toggle {
  display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--strong); cursor: pointer;
}
.search-toggle:hover, .search-toggle:focus-visible, .search-toggle[aria-expanded="true"] { color: var(--accent); }
.search-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.site-header--overlay .search-toggle { color: #f5f5f5; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.site-header--overlay .search-toggle:hover, .site-header--overlay .search-toggle[aria-expanded="true"] { color: var(--accent); }
.header-search { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; padding: 16px 0; background: var(--bg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); }
.header-search[hidden] { display: none; }
.header-search__row { display: flex; gap: 10px; max-width: 760px; }
.header-search input { flex: 1; min-width: 0; background: var(--bg); }
.header-search button { border-radius: 4px; padding: 11px 18px; line-height: 1; }

/* Footer */
.site-footer { margin-top: 64px; padding: 30px 0; color: var(--box-text); font-size: 15px; }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 30px; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--accent); }
.site-footer__text p { margin: 0; }
.home .site-footer, .topics .site-footer { margin-top: 0; }

/* Buttons and forms */
.button, button[type="submit"] {
  display: inline-block; padding: 10px 26px; border: 0; border-radius: 30px;
  background: var(--accent); color: var(--on-accent); font: 600 16px/1.3 var(--font); cursor: pointer;
}
.button:hover, button[type="submit"]:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
input[type="search"], input[type="text"], input[type="email"], textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--soft); color: var(--text); font: 16px/1.4 var(--font);
}
.search-form input[type="search"] { background: var(--bg); }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-form label { display: block; margin-bottom: 6px; color: var(--heading); }
.search-form__row { display: flex; gap: 10px; }
.search-form__row button { border-radius: 4px; padding: 11px 16px; font-weight: 400; line-height: 1; }

/* Home: the hero, half the screen on a desktop, with the search box. */
.hero {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 50vh;
  padding: 96px 20px 48px; background: #333333 var(--hero-image, none) var(--hero-position, center) / cover no-repeat; color: #ffffff; text-align: center;
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__inner { position: relative; width: 100%; max-width: 580px; }
.hero__title { margin: 0 0 12px; color: #ffffff; font-size: 64px; letter-spacing: -2px; line-height: 1.1; }
.hero__tagline { margin: 0 0 24px; font-size: 20px; }
.hero__search { display: flex; padding: 5px; border-radius: 32px; background: #ffffff; }
.hero__search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #3a3a3a; padding: 10px 18px; }
.hero__search input:focus-visible { outline: none; }
.hero__search:focus-within { box-shadow: 0 0 0 3px rgba(1, 112, 185, 0.5); }
.hero__search button { padding: 10px 26px; background: #0170b9; color: #ffffff; }

.home-section { padding: 40px 0 8px; }
.section-title { margin: 0 0 34px; font-size: 32px; letter-spacing: -1px; text-align: center; }
.section-title::after { content: ""; display: block; width: 96px; margin: 18px auto 0; border-top: 3px solid var(--accent); }
.section-title--light { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }

/* The reading tools of the Home: the chips, and Challenge's badge and "i" with its links. (The box above each
   article is Reader Challenges', in challenge.css.) */
.chip {
  display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px;
  border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--on-accent);
  font: 500 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap;
}
.tools-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 8px; margin: 0; padding: 0; list-style: none; text-align: center; }
.tools-list li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tools-list__text { font-size: 15px; line-height: 1.45; }
.tools-list__name { display: flex; align-items: center; gap: 8px; }
.tools-list__badge {
  display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--badge); color: #ffffff;
  font: 700 11px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}
.tools-list__info { position: relative; margin: 0; padding: 0; }
.tools-list__info > summary {
  display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--muted); border-radius: 50%; color: var(--muted);
  font: italic 700 13px/1 Georgia, "Times New Roman", serif; list-style: none; cursor: pointer; user-select: none;
}
.tools-list__info > summary::-webkit-details-marker { display: none; }
.tools-list__info > summary:hover, .tools-list__info[open] > summary { border-color: var(--accent); color: var(--accent); }
.tools-list__pop {
  position: absolute; bottom: calc(100% + 8px); right: -8px; z-index: 20; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 14px; line-height: 1.4; text-align: left; white-space: nowrap;
}
.tools-list__pop a { color: var(--accent); font-weight: 600; text-decoration: none; }
.tools-list__pop a:hover, .tools-list__pop a:focus-visible { text-decoration: underline; }

/* Topic boxes (Home, Topics). Under the pointer, or the keyboard's focus, a box rises and its title turns
   blue (not on touch screens, where a tap opens it at once). The Topics page's boxes are as tall as their
   row's longest text and say how many articles the topic holds. */
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.topic-box {
  display: block; padding: 22px 20px; border: 2px solid var(--topic-border); background: var(--topic-bg);
  color: var(--text); text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.topic-box h2, .topic-box h3 { margin: 0 0 6px; font-size: 20px; transition: color 0.2s ease; }
.topic-box p { margin: 0; font-size: 15px; line-height: 1.5; }
.topic-box:focus-visible { transform: translateY(-4px); background: var(--card); color: var(--text); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); }
.topic-box:focus-visible h2, .topic-box:focus-visible h3 { color: var(--accent); }
@media (hover: hover) {
  .topic-box:hover { transform: translateY(-4px); background: var(--card); color: var(--text); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); }
  .topic-box:hover h2, .topic-box:hover h3 { color: var(--accent); }
}
.topic-grid--tall { gap: 20px 30px; }
.topic-grid--tall .topic-box { display: flex; flex-direction: column; padding: 24px 20px 22px; }
.topic-grid--tall .topic-box h2 { margin-bottom: 8px; }
.topic-grid--tall .topic-box p { color: var(--box-text); font-size: 16px; line-height: 1.6; }
.topic-grid--tall .topic-box .topic-box__count { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 14px; }
.home-section .center { margin: 26px 0 0; }
.topics-band { padding: 48px 0 56px; background: var(--topics-bg); }
.topics-band--plain { background: var(--bg); }  /* a Topics page without its band of colour */
.topics-band .section-title { margin-top: 0; font-size: 40px; letter-spacing: -2px; }
.topics-band .section-title::after { border-top-color: #2f6fb5; }
.topics-more { padding: 64px 0; background: var(--soft); }
.topics-more h2 { font-size: 35px; line-height: 1.25; }
.topics-more p { color: var(--box-text); font-size: 18px; }

/* Post cards (the Home's latest posts, "You may also like" after an article): the whole card opens the post (its
   title's link covers it), and rises under the pointer as the topic boxes. */
.post-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.post-card {
  position: relative; padding: 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card__title { display: block; color: var(--heading); font-size: 18px; font-weight: 700; line-height: 1.4; }
.post-card__title::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.post-card__title:hover { color: var(--accent); }
@media (hover: hover) {
  .post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }
  .post-card:hover .post-card__title { color: var(--accent); }
}
.post-card time { display: block; margin: 10px 0; color: var(--muted); font-size: 14px; }
.post-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.home-feedback { margin: 40px 0 0; text-align: center; }
.home-feedback a { font-weight: 700; }

/* Articles: one column, centred, the space on each side half what a 640px column leaves (the owner's choice), up
   to the header's width. */
.single-wrap { max-width: min(1240px, calc(50vw + 360px)); padding-top: 56px; }
.entry-title { font-size: 34px; line-height: 1.2; margin-bottom: 10px; }
.entry-meta { margin-bottom: 26px; font-size: 14px; line-height: 1.8; }
.entry-meta > span { display: block; }
.entry-dates { color: var(--accent); }
.entry-content { font-size: 16px; line-height: 1.75; }
.single .entry-content { font-size: 19px; line-height: 1.7; }
.single .entry-content table { font-size: 16px; line-height: 1.55; }
/* Centred: the title with its categories and dates, and each section's heading with its buttons. The text, and the
   sub-headings that lead into it, stay on the left, easier to read. */
.single .entry-header, .single .entry-content h2 { text-align: center; }
.single .entry-content .interactive-controls { justify-content: center; }
.entry-content > * { max-width: 100%; }
.entry-content p { margin: 0 0 1.4em; }
.entry-content h2 { margin-top: 1.4em; font-size: 28px; }
.entry-content h3 { margin-top: 1.2em; font-size: 22px; }
.entry-content ul, .entry-content ol { margin: 0 0 1.4em 2em; padding: 0; }
.entry-content li { margin-bottom: 0; }
.entry-content li > ul { list-style-type: disc; }
.entry-content li > ul, .entry-content li > ol { margin-top: 0.3em; margin-bottom: 0.3em; }
.entry-content table { border-collapse: collapse; margin: 0 0 1.5em; width: 100%; }
.entry-content th, .entry-content td { padding: 8px 10px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.entry-content figure { margin: 0 0 1.5em; }
.entry-content blockquote { margin: 1.5em 0; padding: 0.4em 1.2em; border-left: 4px solid var(--rule); }
.entry-content code, .entry-content pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; }
.entry-content pre { overflow-x: auto; padding: 12px; background: var(--soft); }
.ai-disclaimer-box { margin: 0 0 1.6em; padding: 14px 16px; border: 1px solid var(--note-border); border-radius: 8px; background: var(--note-bg); font-size: 14px; line-height: 1.6; }
.ai-disclaimer-box p { margin: 0; }
.ai-disclaimer-box strong { color: var(--accent); }

/* The article's own Simplify / Summarize / FAQ buttons (its script writes them) look like the chips. */
.entry-content .interactive-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0.4em 0 1.2em; }
.entry-content .interactive-controls .interactive-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; margin: 0; padding: 6px 12px;
  border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--on-accent);
  font: 500 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.entry-content .interactive-controls .interactive-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--on-accent); }
.entry-content .interactive-controls .interactive-button.active,
.entry-content .interactive-controls .interactive-button.faq-toggle.active { background: transparent; color: var(--accent); }
.entry-content .faq-container-inline, .entry-content .faq-container { color: var(--text); }

/* An ad position. It takes no space until AdSense fills it; the label is drawn above a filled one. */
.sl-ad { display: flex; flex-direction: column-reverse; align-items: center; clear: both; margin: 0; }
.sl-ad ins.adsbygoogle { width: 100%; max-width: 100%; margin: 0; }
.sl-ad ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.sl-ad ins.adsbygoogle[data-ad-status="filled"] { margin: 6px 0 32px; }
.sl-ad ins.adsbygoogle[data-ad-status="filled"] + .sl-ad-label::before {
  content: "Advertisement"; display: block; margin-top: 28px; color: #6b7280;
  font: 11px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}
/* A test copy shows where the ads go, as grey boxes of a filled ad's height. */
.sl-ad--preview { justify-content: center; height: 280px; margin: 28px 0 32px; border: 1px dashed #9aa4ae; background: repeating-linear-gradient(45deg, rgba(127, 127, 127, 0.08) 0 12px, rgba(127, 127, 127, 0.14) 12px 24px); }
.sl-ad--preview span { color: #6b7280; font: 600 13px/1 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }

.post-navigation { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }
.post-navigation__next { margin-left: auto; }

/* After an article, on a band of its own: "You may also like" as cards, then the latest posts beside every
   category. */
.more { margin-top: 56px; padding: 48px 0 56px; background: var(--soft); }
.single .site-footer { margin-top: 0; }
.more__title { margin: 0 0 20px; font-size: 24px; }
.more-related + .more__lists { margin-top: 48px; }
.more__lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; }
.more-recent ul { margin: 0; padding: 0; list-style: none; }
.more-recent li { margin-bottom: 10px; line-height: 1.5; }
.category-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.category-chips a {
  display: inline-block; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--text); font-size: 14px; line-height: 1.4;
}
.category-chips a:hover, .category-chips a:focus-visible { border-color: var(--accent); color: var(--accent); }

/* Category and author pages */
.archive-band { padding: 56px 0; background: var(--band); text-align: center; }
.archive-band__title { margin: 0; font-size: 34px; }
.archive-band__text { margin: 8px 0 0; font-size: 15px; }
.archive-list { padding-top: 30px; }
.archive-item { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.no-results { max-width: 600px; padding: 30px 0; }
.archive-item__title { margin-bottom: 4px; font-size: 26px; }
.archive-item__title a { color: var(--heading); }
.archive-item__title a:hover { color: var(--accent); }
.archive-item .entry-meta { margin-bottom: 14px; }
.archive-item .entry-meta > span { display: inline; }
.archive-item .entry-terms::after { content: " / "; color: var(--accent); }
.archive-item__excerpt { font-size: 16px; line-height: 1.7; color: var(--text); }
.archive-item__excerpt p { margin: 0 0 1.5em; }
/* Pages of a list: Previous on the left, the numbers in the middle, Next on the right. */
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 40px 0 0; padding: 0 12px; }
.pagination__next { text-align: right; }
.pagination__numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pagination__numbers > * { min-width: 30px; padding: 0 6px; line-height: 30px; text-align: center; }
.pagination__current { background: var(--accent); color: var(--on-accent); }

/* Pages: their text in black, as the WordPress pages show it. */
.page-main { padding-top: 40px; }
.page-content, .page-content h1, .page-content h2, .page-content h3 { color: var(--strong); }
.page-content table th, .page-content table td { border-color: var(--strong); }
.page-content table th { font-weight: 600; text-align: center; }
.page-title { font-size: 40px; text-align: center; }
.page-content .has-text-align-center { text-align: center; }
.page-content .wp-block-separator { width: 100px; margin: 2em auto; border-top: 2px solid var(--rule); }
.page-content .wp-block-table table { width: 100%; }
.page-content h1 { font-size: 64px; line-height: 1.4; text-align: center; }
.page-content h2 { margin-top: 1.2em; }
.contact-main .entry-content p { margin-bottom: 1em; }
.contact-form { max-width: 500px; margin: 30px auto 0; }
.contact-form label { display: block; margin-bottom: 4px; }
.contact-form button { border-radius: 2px; padding: 14px 40px; }
.contact-form__trap { position: absolute; left: -9999px; }
.contact-form__status:empty { display: none; }
.contact-form__status { padding: 10px 14px; border: 1px solid var(--note-border); background: var(--note-bg); }
.not-found { padding: 64px 20px 70px; background: var(--soft); text-align: center; }
.not-found__title { margin: 0 0 22px; color: var(--accent); font-size: 56px; line-height: 1.2; }
.not-found__text { margin: 0 0 26px; color: var(--heading); font-size: 20px; font-weight: 700; }
.not-found__search { display: flex; max-width: 370px; margin: 0 auto; border: 1px solid var(--rule); background: var(--bg); }
.not-found__search input { border: 0; background: transparent; }
.not-found__search button { display: grid; place-items: center; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--heading); }
.not-found__search button:hover { background: transparent; color: var(--accent); }
.not-found__search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.search-page { min-height: 50vh; padding-top: 40px; }
.search .archive-band { padding: 10px 0 14px; }
.search .archive-band__title { font-size: 64px; line-height: 1.2; }
.search-ui { --pagefind-ui-primary: var(--accent); --pagefind-ui-text: var(--text); --pagefind-ui-background: var(--bg); --pagefind-ui-border: var(--rule); --pagefind-ui-tag: var(--soft); --pagefind-ui-font: var(--font); }

/* Dark mode switch: a round button in the corner, like WP Dark Mode's. */
.theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--heading);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); cursor: pointer;
}
.theme-toggle:hover { box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3); }
.theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__moon { fill: currentColor !important; stroke: none !important; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
.test-badge { position: fixed; left: 12px; bottom: 12px; z-index: 50; padding: 4px 10px; border-radius: 4px; background: #b42318; color: #ffffff; font: 700 12px/1.4 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }

/* The consent banner, as Complianz's on the WordPress sites: a card in the bottom right corner (across the
   bottom on a phone), its switches orange when off and blue when on; after a choice its "Manage consent"
   tab peeks out of the bottom edge, left of the dark mode switch, and rises under the pointer. */
.consent {
  position: fixed; right: 10px; bottom: 10px; z-index: 99999; display: grid; gap: 10px;
  width: 526px; max-width: calc(100% - 20px); max-height: calc(100vh - 20px); overflow-y: auto; padding: 15px 20px;
  border-radius: 12px; background: #ffffff; color: #222222; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  font-size: 12px; line-height: 18px;
}
.consent:focus { outline: none; }
.consent[hidden], .consent [hidden], .consent-manage[hidden] { display: none !important; }
.consent__head { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; }
.consent__title { grid-column: 2; margin: 0; font-size: 15px; font-weight: 500; text-align: center; }
.consent__close { grid-column: 3; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.consent__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.consent__message { margin: 0; }
.consent__buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.consent__buttons button {
  height: 45px; padding: 0 10px; border: 1px solid #f2f2f2; border-radius: 6px; background: #f9f9f9; color: #222222;
  font: 500 15px/1.2 var(--font); cursor: pointer;
}
.consent__buttons button:hover { border-color: #dddddd; }
.consent__buttons .consent__accept { border-color: #1e73be; background: #1e73be; color: #ffffff; }
.consent__buttons .consent__accept:hover { border-color: #1a65a6; background: #1a65a6; }
.consent__links { margin: 0; text-align: center; }
.consent__links a { margin: 0 5px; color: #1e73be; text-decoration: underline; }
.consent__categories { display: grid; gap: 10px; }
.consent__category { border-radius: 6px; background: #f5f5f5; }
.consent__category summary {
  display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 12px; padding: 12px 10px;
  font-size: 14px; list-style: none; cursor: pointer;
}
.consent__category summary::-webkit-details-marker { display: none; }
.consent__always { color: #008000; font-size: 12px; }
.consent__switch { appearance: none; position: relative; width: 28px; height: 15px; margin: 0; border-radius: 10px; background: #f56e28; cursor: pointer; }
.consent__switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #ffffff; transition: transform 0.15s ease; }
.consent__switch:checked { background: #21759b; }
.consent__switch:checked::before { transform: translateX(13px); }
.consent__chevron { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.consent__category[open] .consent__chevron { transform: rotate(180deg); }
.consent__description { margin: 0; padding: 0 10px 12px; font-size: 12px; line-height: 18px; }
.consent-manage {
  position: fixed; right: 76px; bottom: 0; z-index: 49; padding: 10px 18px 14px; border: 0; border-radius: 6px 6px 0 0;
  background: #ffffff; color: #222222; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); font: 500 14px/1.2 var(--font); cursor: pointer;
  transform: translateY(calc(100% - 12px)); transition: transform 0.2s ease;
}
.consent-manage:hover, .consent-manage:focus-visible { transform: none; }
/* The Cookie Policy page: its place for the choices, and its list of cookies (Complianz's markup, from the
   export) as grey bars that open, the cookies of each in a table. */
.page-content .consent__categories { margin: 0 0 1.4em; color: var(--text); text-align: left; }
.cmplz-hidden, .cmplz_consent_per_service_label { display: none !important; }
.cmplz-subtitle { font-size: 14px; font-weight: 700; }
.cmplz-dropdown { margin: 0 0 10px; background: rgba(239, 239, 239, 0.25); }
.cmplz-dropdown summary { display: block; padding: 5px 10px 5px 15px; background: rgba(239, 239, 239, 0.5); list-style: none; cursor: pointer; }
.cmplz-dropdown summary::-webkit-details-marker { display: none; }
.cmplz-dropdown summary > div { display: grid; grid-template-columns: 1fr auto 25px; align-items: center; gap: 10px; }
.cmplz-dropdown summary > div::after {
  content: ""; justify-self: center; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg);
}
.cmplz-dropdown[open] summary > div::after { margin-top: 5px; transform: rotate(-135deg); }
.page-content .cmplz-dropdown h3 { margin: 0; font-size: 18px; }
.cmplz-dropdown summary p { margin: 0; font-size: 14px; text-align: right; }
.cmplz-service-description, .cmplz-sharing-data { padding: 10px 15px 0; }
.page-content .cmplz-dropdown h4 { margin: 0 0 4px; font-size: 16px; }
.cookies-per-purpose { display: grid; grid-template-columns: 2fr 1fr 2fr; margin: 15px; border: 1px solid var(--rule); background: var(--bg); font-size: 14px; }
.cookies-per-purpose > div { padding: 10px 15px; border-top: 1px solid var(--rule); }
.cookies-per-purpose .purpose { order: -2; grid-column: 1 / -1; border-top: 0; }
.cookies-per-purpose [class$="-header"] { order: -1; background: var(--soft); }
.cookies-per-purpose .name-header ~ .name-header, .cookies-per-purpose .retention-header ~ .retention-header,
.cookies-per-purpose .function-header ~ .function-header { display: none; }
.page-content .cookies-per-purpose h4, .page-content .cookies-per-purpose h5 { margin: 0; font-size: 15px; font-weight: 400; }
[data-theme="dark"] .consent, [data-theme="dark"] .consent-manage { background: #1d2127; color: #e8edf2; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .consent__buttons button { border-color: #3a414c; background: #262b33; color: #e8edf2; }
[data-theme="dark"] .consent__buttons button:hover { border-color: #56606e; }
[data-theme="dark"] .consent__buttons .consent__accept { border-color: #1e73be; background: #1e73be; color: #ffffff; }
[data-theme="dark"] .consent__category { background: #262b33; }
[data-theme="dark"] .consent__links a { color: var(--accent); }
[data-theme="dark"] .consent__always { color: #5cc96b; }
[data-theme="dark"] .cmplz-dropdown summary { background: var(--band); }

/* Dark mode for what the articles bring with their own colours: tables, FAQ boxes, charts. */
[data-theme="dark"] .entry-content .bot-table,
[data-theme="dark"] .entry-content table { background: var(--soft) !important; color: var(--text); }
[data-theme="dark"] .entry-content .bot-table caption { color: var(--heading); }
[data-theme="dark"] .entry-content .bot-table th,
[data-theme="dark"] .entry-content .bot-table td { border-color: var(--border) !important; }
[data-theme="dark"] .entry-content .faq-container-inline,
[data-theme="dark"] .entry-content .faq-container { background: var(--soft) !important; }
[data-theme="dark"] .entry-content .faq-item { background: var(--band) !important; box-shadow: none !important; }
[data-theme="dark"] .entry-content .visual-svg svg { border-radius: 6px; background: #f4f6f8; }

/* Skins (a site's theme.skin, build.py): its colours redefine the variables above, in both modes; these rules add what
   only a skinned site has: the accent along the header's top, a footer and a Topics band in the deep colour, and the
   subject's line drawings, faint, on the bands and the footer (never behind an article's text). */
body.skin .site-header:not(.site-header--overlay) { border-top: 3px solid var(--accent); }
body.skin .site-header--overlay .site-nav a:hover, body.skin .site-header--overlay .site-nav a:focus-visible,
body.skin.topics .site-header--overlay .site-nav a[aria-current="page"],
body.skin .site-header--overlay .search-toggle:hover, body.skin .site-header--overlay .search-toggle[aria-expanded="true"] { color: var(--accent-on-deep); }
body.skin .hero__search button, body.skin .menu-toggle { background: var(--accent); color: var(--on-accent); }
body.skin .hero__search button:hover, body.skin .menu-toggle:hover { background: var(--accent-hover); }
body.skin .hero__search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent); }
body.skin .topics-band .section-title::after { border-top-color: var(--accent-on-deep); }
body.skin .site-footer { padding: 36px 0; background: var(--deep); color: color-mix(in srgb, var(--on-deep) 78%, transparent); }
body.skin .site-footer a { color: var(--on-deep); }
body.skin .site-footer a:hover, body.skin .site-footer a:focus-visible { color: var(--accent-on-deep); }
body.skin .more, body.skin .archive-band, body.skin .topics-band, body.skin .site-footer, body.skin .not-found { position: relative; isolation: isolate; }
body.skin .more::before, body.skin .archive-band::before, body.skin .topics-band::before, body.skin .site-footer::before,
body.skin .not-found::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--accent); opacity: 0.08;
  -webkit-mask: var(--pattern) 0 0 / 300px 300px repeat; mask: var(--pattern) 0 0 / 300px 300px repeat;
}
body.skin .topics-band::before, body.skin .site-footer::before { background: var(--on-deep); opacity: 0.07; }
body.skin .consent__buttons .consent__accept { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
body.skin .consent__buttons .consent__accept:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
body.skin .consent__switch:checked { background: var(--accent); }
body.skin .consent__links a { color: var(--accent); }
/* Reader Challenges' colours (challenge.css, loaded after this file: hence the longer selectors). */
:root body.skin .rc-tools, :root body.skin .interactive-controls, :root body.skin .rc-bar {
  --rt-accent: var(--accent); --rt-accent-hover: var(--accent-hover); --rt-on-accent: var(--on-accent);
  --rt-tint: color-mix(in srgb, var(--accent) 8%, transparent);
}
:root body.skin .rc-ui, :root body.skin .rc-pick {
  --rc-accent: var(--accent); --rc-accent-hover: var(--accent-hover); --rc-on-accent: var(--on-accent);
  --rc-tint: color-mix(in srgb, var(--accent) 7%, transparent); --rc-tint-strong: color-mix(in srgb, var(--accent) 15%, transparent);
}

@media (max-width: 921px) {
  .site-header__row { min-height: 56px; }
  /* The search button left of the menu's. */
  .search-toggle { order: 1; margin: 0 0 0 auto; }
  .menu-toggle {
    display: grid; place-items: center; order: 2; width: 44px; height: 44px; margin-left: 4px; padding: 0; border: 0;
    border-radius: 50%; background: #0170b9; color: #ffffff; cursor: pointer;
  }
  .menu-toggle:hover { background: #015a94; }
  .menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--bg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); }
  .site-header--open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--border); }
  .site-nav a, .site-header--overlay .site-nav a { display: block; padding: 12px 20px; color: var(--strong); text-shadow: none; }
  .home .site-header--overlay .site-nav a[aria-current="page"] { color: var(--accent); text-decoration: none; }
  .archive-item__title { font-size: 27.4px; }
  .archive-item__excerpt, .archive-item__more { font-size: 14.6px; }
  .single-wrap { padding-top: 26px; }
  /* After the article only "You may also like" (Site Layout kept only it, and the search box, under the article). */
  .more { margin-top: 40px; padding: 36px 0 40px; }
  .more__lists { display: none; }
  .topic-grid, .post-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-content .visual-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .entry-content > table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 544px) {
  .hero { min-height: 0; padding: 78px 16px 28px; }
  .hero__title { margin-bottom: 8px; font-size: 39px; letter-spacing: -1px; }
  .hero__tagline { margin-bottom: 16px; font-size: 15px; }
  /* The Home's topics: two columns of names, the last one alone across both. */
  .home .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home .topic-box { display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 8px; }
  .home .topic-box:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .home .topic-box h3 { margin: 0; font-size: 16px; }
  .home .topic-box p { display: none; }
  .hero__search button { padding: 10px 18px; }
  .section-title { font-size: 28px; }
  .topic-grid, .post-cards { grid-template-columns: minmax(0, 1fr); }
  .topic-grid--tall { gap: 20px; }
  .tools-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The latest posts show their title and date only; the footer stacks, centred. */
  .post-card p { display: none; }
  .post-card time { margin-bottom: 0; }
  .site-footer__row, .site-footer ul { flex-direction: column; justify-content: center; text-align: center; }
  .site-footer ul { gap: 8px; }
  .entry-title { font-size: 27.4px; }
  .entry-content, .single .entry-content { font-size: 17px; line-height: 1.65; }
  .entry-content h2 { font-size: 24px; }
  .entry-content ul, .entry-content ol { margin-left: 1.3em; }
  .entry-content table, .single .entry-content table { font-size: 15px; line-height: 1.5; }
  .entry-content .bot-table th, .entry-content .bot-table td { padding: 9px 10px; }
  .entry-content .bot-table:has(tr > :nth-child(4)) { min-width: 480px; }
  .entry-content .bot-table:has(tr > :nth-child(5)) { min-width: 600px; }
  .entry-content .visual-svg > div { max-width: min(100%, 280px) !important; }
  .page-title { font-size: 32px; }
  .not-found__title { font-size: 36px; }
  .search .archive-band__title { font-size: 36px; }
  .page-content h1 { font-size: 30px; }
  .archive-band__title { font-size: 34px; }
  .theme-toggle { width: 38px; height: 38px; right: 12px; bottom: 12px; }
  /* The banner across the bottom, without its title (as Complianz's on a phone); the cookies of the
     Cookie Policy one under the other. */
  .consent { right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 85vh; padding: 12px 16px 14px; border-radius: 12px 12px 0 0; }
  .consent__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .consent__buttons { gap: 8px; }
  .consent__buttons button { height: 42px; padding: 0 6px; font-size: 14px; }
  .consent-manage { right: 62px; }
  .cookies-per-purpose { grid-template-columns: minmax(0, 1fr); margin: 15px 0; }
  .cookies-per-purpose > div { order: 0 !important; }
  .cookies-per-purpose .name-header ~ .name-header, .cookies-per-purpose .retention-header ~ .retention-header,
  .cookies-per-purpose .function-header ~ .function-header { display: block; }
}
/* A reader who asks the device for less motion: the boxes and cards light up without rising. */
@media (prefers-reduced-motion: reduce) {
  .topic-box, .post-card { transition: none; }
  .topic-box:hover, .topic-box:focus-visible, .post-card:hover { transform: none; }
}