/* ASI Brief - one stylesheet, no webfonts, no external requests.
   System fonts keep the site fast and avoid a third-party request that would
   otherwise need disclosing. Dark mode follows the reader's setting. */

:root {
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #5a6069;
  --rule: #e3e6ea;
  --accent: #0b5cd5;
  --accent-soft: #eef4fe;
  --warn-bg: #fff8e6;
  --warn-rule: #e8c86a;
  --max: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --fg: #e7e9ec;
    --muted: #9aa1ab;
    --rule: #2a2e35;
    --accent: #7fb0ff;
    --accent-soft: #1b2230;
    --warn-bg: #272013;
    --warn-rule: #6b5a2a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; background: var(--accent); color: #fff;
  padding: .5rem .75rem; border-radius: 4px; z-index: 10;
}

/* ---- header / footer ---- */

header.site {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}
header.site .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  align-items: baseline; padding-top: 1rem; padding-bottom: 1rem;
}
.brand {
  font-size: 1.125rem; text-decoration: none; color: var(--fg);
  letter-spacing: -.01em; margin-right: auto;
}
.brand strong { color: var(--accent); }

header.site nav, footer.site nav {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem;
  font-size: .9375rem;
}
header.site nav a, footer.site nav a {
  color: var(--muted); text-decoration: none;
}
header.site nav a:hover, footer.site nav a:hover { color: var(--accent); }
header.site nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }

footer.site {
  margin-top: 4rem; border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem; color: var(--muted); font-size: .9375rem;
}
footer.site p { margin: 0 0 .75rem; }
footer.site .disclaim { font-size: .875rem; }
footer.site nav { margin-top: 1rem; }

/* ---- breadcrumb ---- */
/* The visible trail that the BreadcrumbList in each page's JSON-LD describes.
   Google asks for the markup to match something a reader can see. */

.crumbs { margin: -1rem 0 1.25rem; font-size: .875rem; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; }
.crumbs li { display: inline; }
.crumbs li + li::before { content: "\203a"; margin: 0 .4rem; color: var(--rule); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }

/* ---- article ---- */

article h1 {
  font-size: 2.125rem; line-height: 1.2; letter-spacing: -.02em;
  margin: 0 0 .75rem;
}
.standfirst {
  font-size: 1.1875rem; color: var(--muted); line-height: 1.55;
  margin: 0 0 2rem;
}

article h2 {
  font-size: 1.4375rem; line-height: 1.3; letter-spacing: -.01em;
  margin: 2.75rem 0 .75rem; padding-top: .25rem;
}
article h3 {
  font-size: 1.125rem; margin: 2rem 0 .5rem;
}
article h4 {
  font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--muted);
}

p, ul, ol { margin: 0 0 1.125rem; }
li { margin-bottom: .375rem; }
ul, ol { padding-left: 1.5rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.125rem;
  border-left: 3px solid var(--rule); color: var(--muted);
}
blockquote p { margin: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; background: var(--accent-soft); padding: .1em .35em;
  border-radius: 3px;
}

/* ---- table of contents ---- */

.toc {
  background: var(--accent-soft); border-radius: 8px;
  padding: 1rem 1.25rem .25rem; margin: 0 0 2rem;
}
.toc h2 {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 .5rem;
}
.toc ol { margin: 0 0 1rem; padding-left: 1.25rem; font-size: .9375rem; }
.toc li { margin-bottom: .25rem; }

/* ---- callouts ---- */

.callout {
  margin: 1.75rem 0; padding: 1rem 1.25rem; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--rule);
  font-size: .9375rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout.warning { background: var(--warn-bg); border-color: var(--warn-rule); }
.callout h3, .callout h4 { margin-top: 0; }

/* ---- tables ---- */

.table-wrap { overflow-x: auto; margin: 1.75rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td {
  text-align: left; padding: .5rem .75rem;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
th { font-weight: 600; white-space: nowrap; }

/* ---- Ark7 / sponsored links ---- */

a.ark7 { font-weight: 600; }

/* ---- page meta ---- */

footer.meta {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .875rem;
}
footer.meta p { margin: 0; }

@media (max-width: 34rem) {
  article h1 { font-size: 1.75rem; }
  .standfirst { font-size: 1.0625rem; }
  article h2 { font-size: 1.25rem; }
}

/* ---- dateline ---- */

.dateline {
  margin: -.25rem 0 1.25rem; font-size: .9375rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}

/* ---- the brief list (home page and archive) ---- */

.brief-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.brief-entry {
  margin: 0 0 1.75rem; padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.brief-entry:last-child { border-bottom: 0; }
.brief-when {
  margin: 0 0 .5rem; font-size: .875rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.brief-when a { color: var(--fg); text-decoration: none; font-weight: 600; }
.brief-when a:hover { color: var(--accent); }
.brief-items { list-style: none; margin: 0; padding: 0; }
.brief-items li { margin: 0 0 .5rem; line-height: 1.45; }
.brief-items a { color: var(--fg); text-decoration-color: var(--rule); }
.brief-items a:hover { color: var(--accent); text-decoration-color: currentColor; }
.brief-sum { margin: 0; color: var(--muted); font-size: .9375rem; }

/* ---- the Ark7 display unit ----
   Styled and labelled the way a reader already recognises an ad block: a
   ruled box standing outside the prose, the word "Ad" above it, and the
   advertiser named inside it. The point is that nobody can mistake it for an
   item, which is the whole reason the label is required. */

.ad-unit {
  margin: 2.5rem 0; padding: 0;
  font-size: .9375rem;
}
.ad-label {
  margin: 0 0 .25rem; font-size: .6875rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.ad-label span {
  display: inline-block; padding: .25rem .4rem;
  border: 1px solid var(--rule); border-radius: 2px;
}
.ad-body {
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 1rem 1.125rem; background: var(--bg);
}
.ad-head {
  margin: 0 0 .375rem; font-weight: 600; font-size: 1.0625rem;
  line-height: 1.3;
}
.ad-text { margin: 0 0 .75rem; color: var(--fg); }
.ad-cta { margin: 0 0 .75rem; }
.ad-cta a {
  font-weight: 600; text-decoration: none;
}
.ad-cta a:hover { text-decoration: underline; }
.ad-who {
  margin: 0; font-size: .8125rem; color: var(--muted);
}
.ad-who a { color: var(--muted); }

/* ---- Ark7 links in the prose ---- */

a.ark7-native { font-weight: 600; }

@media (max-width: 34rem) {
  .ad-body { padding: .875rem 1rem; }
}