/* ==========================================================================
   Single news article — the prototype's article page (SBI.route('article') in
   ref/sbi-frontend-v1.3.0.html), as a scoped stylesheet.

   Why scoped rather than a link to /sbi-blocks/sbi.css:

   The design system is a whole-document stylesheet. It sets `html body
   { background: #fbfaf6 !important; color: #121412 !important }`, restyles
   every h1–h4 and strips the underline off every `a` on the page. This view
   still renders inside user.layouts.app, next to Bootstrap, header.css and
   footer.css, so loading it here would repaint the site header and footer
   along with the article.

   Every rule below is therefore the same rule, taken from sbi.css unchanged
   and given a `.sbi-art` ancestor — which also puts it above Bootstrap's
   `.badge` and `.btn` on specificity, so no !important is needed anywhere.

   The tokens hang off `.sbi-art` rather than `:root` for the same reason: the
   rest of the page keeps the site's own palette.

   Re-extract from sbi.css when the design system moves; do not drift.
   ========================================================================== */

.sbi-art {
  /* cloth — SBI jacket green (v1.3.0), sampled from the SBI waistcoat */
  --jacket: #2c4349;
  --baize: #1a3a3d;
  --baize-2: #274c4f;
  --baize-3: #39676a;
  --deep: #0c1e20;
  --deep-2: #112729;

  /* paper */
  --paper: #fbfaf6;
  --ivory: #f4f0e6;
  --cream: #ece6d6;
  --line: #e2dccd;
  --line-soft: #eee9dd;

  /* ink */
  --ink: #121412;
  --ink-2: #2c302c;
  --ink-soft: #545a54;
  --ink-mute: #7c827b;
  --on-dark: #f4f0e6;
  --on-dark-soft: rgba(244, 240, 230, .72);
  --on-dark-mute: rgba(244, 240, 230, .5);

  /* accents */
  --gold: #b8860b;
  --gold-2: #d6a93a;
  --gold-soft: #f3e6c4;
  --err: #b42318;
  --ok: #1b7a45;

  /* ball colours — the category markers */
  --ball-red: #c81e1e;
  --ball-yellow: #e8b817;
  --ball-green: #1b8a4a;
  --ball-brown: #7a4a22;
  --ball-blue: #1d4ed8;
  --ball-pink: #e27aa0;
  --ball-black: #141414;

  /* type */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-lg: clamp(19px, 1.4vw, 22px);
  --t-h4: clamp(20px, 1.6vw, 24px);
  --t-h3: clamp(24px, 2.2vw, 32px);
  --t-h2: clamp(32px, 3.8vw, 54px);

  /* space + shape */
  --gutter: clamp(16px, 4vw, 48px);
  --wrap: 1320px;
  --section: clamp(56px, 7vw, 96px);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --pill: 999px;

  --shadow-1: 0 1px 2px rgba(18, 20, 18, .05), 0 4px 16px rgba(18, 20, 18, .05);

  /* How far down the page the sticky site header ends — where the reading
     progress hairline sits and where the sticky share rail parks. Written
     inline on .sbi-art by the view, from the same Appearance settings the
     header itself is drawn from; this is only the fallback for the shipped
     header height. */
  --header-h: 80px;

  --ease: cubic-bezier(.22, .8, .24, 1);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.sbi-art *, .sbi-art *::before, .sbi-art *::after { box-sizing: border-box; }
.sbi-art img, .sbi-art svg { display: block; max-width: 100%; }
.sbi-art svg { flex-shrink: 0; }
.sbi-art a { color: inherit; text-decoration: none; }
.sbi-art button { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.sbi-art :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sbi-art ::selection { background: var(--gold-soft); color: var(--ink); }

.sbi-art h1, .sbi-art h2, .sbi-art h3, .sbi-art h4 {
  font-family: var(--f-display); font-weight: 400; margin: 0;
  letter-spacing: -.02em; line-height: 1.04; text-wrap: balance;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.sbi-art h2 { font-size: var(--t-h2); letter-spacing: -.03em; }
.sbi-art h3 { font-size: var(--t-h3); }
.sbi-art h4 { font-size: var(--t-h4); line-height: 1.15; }
.sbi-art h1 em, .sbi-art h2 em, .sbi-art h3 em { font-style: italic; font-weight: 300; color: var(--baize-3); }
.sbi-art p { margin: 0; text-wrap: pretty; }
.sbi-art .lead { font-size: var(--t-lg); line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.sbi-art .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.sbi-art .eyebrow {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px;
}
.sbi-art .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }

.sbi-art .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sbi-art .section { padding-block: var(--section); }
.sbi-art .on-ivory { background: var(--ivory); }

.sbi-art .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap; }
.sbi-art .sec-head .sec-title { display: grid; gap: 16px; max-width: 760px; }

/* ---------- buttons ---------- */

.sbi-art .btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: var(--pill);
  background: var(--bg); color: var(--fg); font-weight: 600; font-size: 14.5px; letter-spacing: -.005em;
  transition: transform .25s var(--ease), background .2s, box-shadow .25s, color .2s;
  white-space: nowrap; border: 1px solid transparent;
}
.sbi-art .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(12, 30, 32, .18); }
.sbi-art .btn:active { transform: translateY(0); }
.sbi-art .btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.sbi-art .btn:hover svg.arrow { transform: translateX(3px); }
.sbi-art .btn-baize { --bg: var(--baize); --fg: var(--on-dark); }
.sbi-art .btn-baize:hover { --bg: var(--baize-2); }
.sbi-art .btn-ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line); }
.sbi-art .btn-ghost:hover { border-color: var(--ink); box-shadow: none; }
.sbi-art .btn-gold { --bg: var(--gold-2); --fg: var(--deep); }
.sbi-art .btn-gold:hover { --bg: #e2b64a; }
.sbi-art .btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; }

.sbi-art .link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.sbi-art .link-arrow svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.sbi-art .link-arrow:hover svg { transform: translateX(3px); }

.sbi-art .icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.sbi-art .icon-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sbi-art .icon-btn svg { width: 18px; height: 18px; }

/* ---------- badges, ball markers ---------- */

.sbi-art .badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--pill); font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--ivory); color: var(--ink-2); white-space: nowrap;
  font-family: var(--f-body); text-transform: none; vertical-align: baseline;
}
.sbi-art .badge svg { width: 12px; height: 12px; }
.sbi-art .badge .ball { width: 8px; height: 8px; }

.sbi-art .ball {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .75) 0 12%, transparent 30%), var(--c, var(--ball-red));
  box-shadow: inset -1px -2px 3px rgba(0, 0, 0, .25);
}

/* ---------- media ---------- */

.sbi-art .media { position: relative; overflow: hidden; background: var(--cream); border-radius: var(--r-lg); }
.sbi-art .media img, .sbi-art .media > svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sbi-art .hover-zoom:hover .media img, .sbi-art .hover-zoom:hover .media > svg { transform: scale(1.05); }

/* ---------- crumbs, back link, avatar ---------- */

.sbi-art .crumbs {
  display: flex; gap: 8px; align-items: center; font-size: 12.5px;
  font-family: var(--f-mono); letter-spacing: .04em; flex-wrap: wrap; color: var(--ink-mute);
}
.sbi-art .crumbs i { opacity: .5; font-style: normal; }
.sbi-art .crumbs a:hover { color: var(--ink); }

.sbi-art .back { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); width: fit-content; }
.sbi-art .back svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.sbi-art .back:hover svg { transform: translateX(-3px); }
.sbi-art .back:hover { color: var(--ink); }

.sbi-art .mono-av {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 18px; color: var(--on-dark); background: var(--baize);
  flex-shrink: 0; letter-spacing: -.02em; overflow: hidden;
}
.sbi-art .mono-av img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   The article itself.

   `.ar-*` are the prototype's own class names, rule for rule from
   SBI.route('article'). `.art-*` are this site's additions — the editor's
   preview bar, the "where it came from" box, the author card — which the
   prototype had no equivalent of, kept apart by name so a re-extract from
   sbi.css never has to guess which is which.
   ========================================================================== */

/* ---------- reading progress ---------- */

/* Fixed under the site header rather than at the very top of the window: the
   header is sticky and z-index 100, so a hairline at top 0 would spend the
   whole article behind it. --header-h is written on .sbi-art by the view. */
.sbi-art .ar-prog { position: fixed; inset: var(--header-h) 0 auto; height: 3px; z-index: 90; pointer-events: none; }
.sbi-art .ar-prog i {
  display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .12s linear;
}

/* ---------- the head ---------- */

.sbi-art .ar-head { padding-block: clamp(18px, 2.4vw, 32px) clamp(24px, 3vw, 40px); }
.sbi-art .ar-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 40px); }
.sbi-art .ar-hin { max-width: 920px; margin-inline: auto; display: grid; gap: 18px; justify-items: center; text-align: center; }
.sbi-art .ar-kick { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.sbi-art .ar-kick .mono { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-mute); }
.sbi-art .ar-kick .mono svg { width: 14px; height: 14px; }
.sbi-art .ar-head h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; max-width: 30ch; }
.sbi-art .ar-stand { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-soft); max-width: 58ch; text-wrap: pretty; }

.sbi-art .ar-by {
  display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 10px 10px 10px 12px;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--paper);
  text-align: left; flex-wrap: wrap; justify-content: center;
}
.sbi-art .ar-by .mono-av { width: 40px; height: 40px; font-size: 14px; }
.sbi-art .ar-by-t { display: grid; line-height: 1.3; padding-right: 8px; }
.sbi-art .ar-by-t b { font-weight: 600; font-size: 14px; }
.sbi-art .ar-by-t span { font-size: 12.5px; color: var(--ink-mute); }
.sbi-art .ar-by-t a:hover b { color: var(--baize); }

/* "From the archive", as the news index prints it. */
.sbi-art .nx-arch {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--line); font: 500 10px var(--f-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* ---------- share ---------- */

.sbi-art .ar-share { display: flex; gap: 6px; }
.sbi-art .ar-share-by { padding-left: 14px; border-left: 1px solid var(--line); }
.sbi-art .ar-sh {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-2); background: var(--ivory); border: 0; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.sbi-art .ar-sh svg { width: 17px; height: 17px; }
.sbi-art .ar-sh:hover { background: var(--baize); color: var(--on-dark); transform: translateY(-2px); }

/* ---------- the hero ---------- */

.sbi-art .ar-fig { margin-block: 0; }
.sbi-art .ar-img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 21 / 9; background: var(--ivory); }
.sbi-art .ar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbi-art .ar-fig figcaption { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 4px 0; font-size: 13px; color: var(--ink-soft); }
.sbi-art .ar-fig figcaption .mono { font-size: 11.5px; color: var(--ink-mute); margin-left: auto; }

/* ---------- the reading grid ---------- */

.sbi-art .ar-grid {
  display: grid; grid-template-columns: 52px minmax(0, 680px) 300px; justify-content: center;
  gap: clamp(32px, 4vw, 64px); padding-block: clamp(36px, 4.4vw, 56px) clamp(48px, 6vw, 88px); align-items: start;
}
.sbi-art .ar-rail { position: sticky; top: calc(var(--header-h) + 28px); display: grid; justify-items: center; gap: 10px; }
.sbi-art .ar-rail-l { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.sbi-art .ar-share-rail { flex-direction: column; }
.sbi-art .ar-main { min-width: 0; }

/* ---------- the body ----------
   The prototype's body was three shapes: paragraphs, subheads and lists. This
   one is whatever the editor wrote, so everything else a rich-text field can
   produce — images, quotes, tables, embeds — is given the same treatment. */

.sbi-art .ar-body { font-size: 18.5px; line-height: 1.75; color: var(--ink-2); }
.sbi-art .ar-body > * { margin: 0; }
.sbi-art .ar-body > * + * { margin-top: 1.1em; }
.sbi-art .ar-body > p:first-child::first-letter {
  font-family: var(--f-display); font-size: 4.2em; float: left; line-height: .82;
  margin: 6px 12px 0 0; color: var(--baize); font-weight: 300;
}
.sbi-art .ar-body a { color: var(--baize); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sbi-art .ar-body a:hover { color: var(--baize-3); }
.sbi-art .ar-body h2 {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15; letter-spacing: -.015em; color: var(--ink); margin-top: 1.6em;
}
.sbi-art .ar-body h3 { font-size: clamp(21px, 2vw, 26px); margin-top: 1.4em; }
.sbi-art .ar-body h4 { font-size: 19px; margin-top: 1.2em; }

/* A red ball for a bullet — the prototype's list marker. Ordered lists keep
   their numbers: a numbered list is numbered for a reason. */
.sbi-art .ar-body ul { padding: 0; list-style: none; display: grid; gap: .55em; }
.sbi-art .ar-body ul li { position: relative; padding-left: 26px; }
.sbi-art .ar-body ul li::before {
  content: ""; position: absolute; left: 4px; top: .7em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--ball-red); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .18);
}
.sbi-art .ar-body ol { padding-left: 1.3em; display: grid; gap: .55em; }
.sbi-art .ar-body ol li::marker { color: var(--baize-3); }
.sbi-art .ar-body li ul, .sbi-art .ar-body li ol { margin-top: .4em; }

.sbi-art .ar-body img { width: 100%; height: auto; border-radius: var(--r); }
.sbi-art .ar-body figure { display: grid; gap: 10px; }
.sbi-art .ar-body figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--ink-mute); }
.sbi-art .ar-body blockquote {
  padding: 4px 0 4px 22px; border-left: 3px solid var(--gold-2);
  font-family: var(--f-display); font-size: 1.15em; line-height: 1.4; color: var(--ink);
}
.sbi-art .ar-body blockquote p + p { margin-top: 12px; }
.sbi-art .ar-body hr { border: 0; border-top: 1px solid var(--line); }
.sbi-art .ar-body iframe, .sbi-art .ar-body video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r); }
.sbi-art .ar-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sbi-art .ar-body th, .sbi-art .ar-body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.sbi-art .ar-body th { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------- filed under ---------- */

.sbi-art .ar-tags {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 40px;
  padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-mute);
}
.sbi-art .ar-tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--paper); font: 600 12px var(--f-body); color: var(--ink-2);
}
.sbi-art a.ar-tag:hover { border-color: var(--baize-3); color: var(--baize); }

/* ---------- corrections ---------- */

.sbi-art .ar-note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px;
  border-radius: var(--r); background: var(--ivory); font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.sbi-art .ar-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--baize-3); }
.sbi-art .ar-note a { color: var(--baize); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- newer / older ---------- */

.sbi-art .ar-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.sbi-art .ar-nx {
  display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--paper); text-align: left; min-width: 0;
  transition: border-color .2s, box-shadow .3s var(--ease);
}
.sbi-art .ar-nx:hover { border-color: var(--baize-3); box-shadow: var(--shadow-1); }
.sbi-art .ar-nx.older { flex-direction: row-reverse; text-align: right; }
.sbi-art .ar-nx.empty { border: 0; background: none; }
.sbi-art .ar-nx-img { width: 76px; height: 76px; border-radius: var(--r); overflow: hidden; flex: none; background: var(--cream); }
.sbi-art .ar-nx-img img { width: 100%; height: 100%; object-fit: cover; }
.sbi-art .ar-nx-t { display: grid; gap: 4px; min-width: 0; }
.sbi-art .ar-nx-t em {
  font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--baize-3);
}
.sbi-art .ar-nx.older .ar-nx-t em { justify-content: flex-end; }
.sbi-art .ar-nx-t em svg { width: 14px; height: 14px; }
.sbi-art .ar-nx-t b {
  font-family: var(--f-display); font-weight: 400; font-size: 17px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sbi-art .ar-nx-t .mono { font-size: 11.5px; color: var(--ink-mute); }

/* ---------- the sidebar ---------- */

.sbi-art .ar-side { display: grid; gap: 16px; }
.sbi-art .ar-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.sbi-art .ar-card h3 { font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.2; margin-bottom: 12px; }

.sbi-art .ar-facts { display: grid; gap: 0; margin: 0; }
.sbi-art .ar-facts dt {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.sbi-art .ar-facts dt:first-child { border-top: 0; padding-top: 0; }
.sbi-art .ar-facts dd { margin: 2px 0 10px; font-weight: 600; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.sbi-art .ar-facts dd:last-child { margin-bottom: 0; }

.sbi-art .ar-cta { background: var(--baize); border-color: var(--baize); color: var(--on-dark); display: grid; gap: 8px; justify-items: start; }
.sbi-art .ar-cta .eyebrow { color: var(--on-dark-mute); }
.sbi-art .ar-cta h3 { margin: 0; color: var(--on-dark); }
.sbi-art .ar-cta p { font-size: 14px; line-height: 1.5; color: var(--on-dark-soft); margin-bottom: 6px; }

.sbi-art .ar-latest { list-style: none; padding: 0; margin: 0; display: grid; }
.sbi-art .ar-latest li + li { border-top: 1px solid var(--line-soft); }
.sbi-art .ar-latest a { display: grid; gap: 3px; width: 100%; padding: 10px 0; }
.sbi-art .ar-latest .mono { font-size: 11px; color: var(--ink-mute); }
.sbi-art .ar-latest b { font-weight: 600; font-size: 14px; line-height: 1.35; }
.sbi-art .ar-latest a:hover b { color: var(--baize-3); text-decoration: underline; text-underline-offset: 2px; }
.sbi-art .ar-more { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--f-body); color: var(--baize); }
.sbi-art .ar-more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.sbi-art .ar-more:hover svg { transform: translateX(3px); }

/* ---------- where it came from ---------- */

.sbi-art .art-src {
  display: flex; gap: 14px; margin-bottom: 28px; padding: 18px 20px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold-2);
  border-radius: 0 var(--r) var(--r) 0; background: var(--ivory);
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
}
.sbi-art .art-src__mark { font-family: var(--f-display); font-size: 42px; line-height: .8; color: var(--gold); }
.sbi-art .art-src strong { color: var(--ink); font-weight: 600; }
.sbi-art .art-src p + p { margin-top: 4px; }
.sbi-art .art-src__note { font-style: italic; }
.sbi-art .art-src a { color: var(--baize); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- who wrote it ---------- */

.sbi-art .art-auth {
  display: flex; gap: 18px; margin-top: 28px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ivory);
}
.sbi-art .art-auth .mono-av { width: 76px; height: 76px; font-size: 26px; }
.sbi-art .art-auth__body { min-width: 0; display: grid; gap: 4px; align-content: start; }
.sbi-art .art-auth__kick { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.sbi-art .art-auth h3 { font-size: 22px; }
.sbi-art .art-auth h3 a:hover { color: var(--baize); }
.sbi-art .art-auth__role { font-size: 13px; color: var(--ink-mute); }
.sbi-art .art-auth__bio { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 4px; }
.sbi-art .art-auth__links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.sbi-art .art-auth__links a { color: var(--ink-mute); }
.sbi-art .art-auth__links a:hover { color: var(--baize); }
.sbi-art .art-auth__more { font-size: 13px; font-weight: 600; color: var(--baize); text-decoration: underline; text-underline-offset: 3px; }
.sbi-art .art-auth__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- keep reading ---------- */

.sbi-art .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.sbi-art .ncard { display: grid; gap: 16px; align-content: start; }
.sbi-art .ncard .media { aspect-ratio: 4 / 3; }
.sbi-art .ncard .nc-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-mute); }
.sbi-art .ncard h4 { font-size: 21px; line-height: 1.2; transition: color .2s; }
.sbi-art .ncard:hover h4 { color: var(--baize); }
.sbi-art .ncard p { font-size: 14px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- the editor's preview bar ---------- */

.sbi-art .art-preview {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px; background: var(--deep); color: var(--on-dark);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-align: center;
}
.sbi-art .art-preview svg { width: 16px; height: 16px; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  /* The rail goes first: the byline pill carries the same five buttons, so
     nothing is lost with it. */
  .sbi-art .ar-grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .sbi-art .ar-rail { display: none; }
}
@media (max-width: 960px) {
  .sbi-art .news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sbi-art .ar-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
  .sbi-art .ar-img { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  .sbi-art .ar-top .crumbs { display: none; }
  .sbi-art .ar-top { margin-bottom: 18px; }
  .sbi-art .ar-hin { justify-items: start; text-align: left; }
  .sbi-art .ar-kick { justify-content: flex-start; }
  .sbi-art .ar-by { border-radius: var(--r-lg); width: 100%; justify-content: flex-start; }
  .sbi-art .ar-share-by { border-left: 0; padding-left: 0; width: 100%; padding-top: 10px; border-top: 1px solid var(--line); }
  .sbi-art .ar-img { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
  .sbi-art .ar-body { font-size: 17.5px; }
  .sbi-art .ar-nav { grid-template-columns: 1fr; }
  .sbi-art .ar-nx.older { flex-direction: row; text-align: left; }
  .sbi-art .ar-nx.older .ar-nx-t em { justify-content: flex-start; }
  .sbi-art .ar-nx.empty { display: none; }
  .sbi-art .news-grid { grid-template-columns: 1fr; }
  .sbi-art .art-auth { flex-direction: column; }
}

/* High-contrast mode repaints `#sbi-page *`, but a `*` selector never reaches
   a ::first-letter, so the drop cap would keep the baize green given above and
   be the one thing left on the page failing contrast. It gives up the flourish
   and takes the mode's own colour instead. */
html.sbi-mode-high .sbi-art .ar-body > p:first-child::first-letter {
  font-size: inherit; float: none; margin: 0; font-family: inherit; color: inherit; font-weight: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .sbi-art *, .sbi-art *::before, .sbi-art *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}