/* ==========================================================================
   Ajankohta Signal - shared article presentation (n24 contract)
   One authoritative stylesheet for all generated n8n components, current
   and future, plus older class aliases found in the live inventory.
   Loaded after style.css on singular views.
   ========================================================================== */

.aj-article {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.72;
  color: #16191F;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  container-type: inline-size;
}

/* Nested wrappers from earlier workflow versions: keep flow, drop chrome. */
.aj-article :where(article, section, div, aside, span) { max-width: 100%; min-width: 0; }
.aj-article :where(.n24-wrap, .n24-article, .n24-article-wrap, .n24-section, .scl-article, .n24-container) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  grid-template-columns: none;
}

/* --------------------------------------------------------------------------
   Headings and text
   -------------------------------------------------------------------------- */
.aj-article h2 {
  font-family: var(--display);
  font-size: clamp(25px, 2.4vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 1.65em 0 .7em;
  scroll-margin-top: 90px;
}
.aj-article h3 {
  font-family: var(--display);
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.022em;
  font-weight: 700;
  margin: 1.4em 0 .6em;
  scroll-margin-top: 90px;
}
.aj-article h4 { font-family: var(--display); font-size: 19px; line-height: 1.35; margin: 1.3em 0 .5em; }
.aj-article :where(.n24-h2) { font-size: clamp(25px, 2.4vw, 32px); }
.aj-article :where(.n24-h3) { font-size: 23px; }

.aj-article p,
.aj-article :where(.n24-p, .n24-kappale, .n16-p) { margin: 0 0 1.15em; }
.aj-article > :first-child, .aj-article .n24-wrap > :first-child { margin-top: 0; }
.aj-article :where(strong, b) { font-weight: 640; }
.aj-article :where(em, i) { font-style: italic; }
.aj-article a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.aj-article a:hover { text-decoration-thickness: 2px; }
.aj-article :where(ul, ol) { margin: 0 0 1.25em; padding-left: 1.3em; }
.aj-article :where(.n24-list, .n24-ul, .n24-ol, .n24-ordered-list, .n24-list-numbered, .n24-steps, .n24-list-steps) { margin: 0 0 1.25em; padding-left: 1.3em; }
.aj-article li { margin: .4em 0; }
.aj-article li > ul, .aj-article li > ol { margin: .4em 0 .2em; }
.aj-article :where(.n24-list-tight, .n24-list-tihgt) { padding-left: 1.2em; }
.aj-article :where(.n24-list-tight, .n24-list-tihgt) li { margin: .28em 0; }
.aj-article :where(.n24-checks, .n24-cheks) { list-style: none; padding-left: 0; }
.aj-article :where(.n24-checks, .n24-cheks) li { position: relative; padding-left: 26px; }
.aj-article :where(.n24-checks, .n24-cheks) li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.aj-article .n24-x { list-style: none; padding-left: 0; }
.aj-article .n24-x li { position: relative; padding-left: 26px; }
.aj-article .n24-x li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .9em;
  width: 12px;
  height: 2px;
  background: var(--muted);
}
.aj-article :where(.n24-analysis, .n24-column, .n24-col) { min-width: 0; }
.aj-article hr { border: 0; border-top: var(--line-hair) solid var(--line); margin: 30px 0; }
.aj-article :where(pre, code) { font-family: var(--mono); font-size: 14.5px; }
.aj-article pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 18px; background: var(--surface); border: var(--line-hair) solid var(--line); }
.aj-article :where(iframe, video) { max-width: 100%; border: 0; }
.aj-article :where(figure, img) { max-width: 100%; height: auto; }
.aj-article figure { margin: 26px 0; }
.aj-article figcaption, .aj-article :where(.n24-caption) { font: 400 13.5px/1.6 var(--sans); color: var(--muted); margin-top: 8px; }

/* --------------------------------------------------------------------------
   Intro / lead
   -------------------------------------------------------------------------- */
.aj-article :where(.scl-lead, .n24-lead) {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.6;
  color: #232A35;
  border-left: 3px solid var(--signal);
  padding-left: 18px;
  margin: 0 0 1.3em;
}
/* --------------------------------------------------------------------------
   TLDR / summary / takeaway / notes / tips / warnings / callouts
   -------------------------------------------------------------------------- */
.aj-article :where(.n24-tldr, .n24-summary, .n24-takeaway, .n24-key-facts, .scl-def, .scl-key) {
  display: block;
  position: relative;
  margin: 28px 0;
  padding: 20px 22px;
  background: var(--surface);
  border: var(--line-hair) solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 17px;
  line-height: 1.68;
}
.aj-article :where(.n24-tldr, .n24-summary, .n24-takeaway) > :first-child { margin-top: 0; }
.aj-article :where(.n24-tldr, .n24-summary, .n24-takeaway) > :last-child { margin-bottom: 0; }
.aj-article :where(.n24-tldr-label, .n24-summary-label, .n24-takeaway-label) {
  display: block;
  margin: 0 0 8px;
  font: 700 11px/1.4 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}
.aj-article .n24-tldr-body { min-width: 0; }

.aj-article :where(.n24-note, .n24-tip, .n24-warning, .n24-callout, .scl-note, .scl-disclosure, .compliance) {
  display: block;
  position: relative;
  margin: 26px 0;
  padding: 18px 22px;
  background: #F1F5FF;
  border: var(--line-hair) solid #C9D8FF;
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 16.5px;
  line-height: 1.66;
}
.aj-article .n24-tip { background: #F1FBF7; border-color: #BFE7D8; border-left-color: #0E7A5F; }
.aj-article .n24-warning { background: #FFF7EC; border-color: #F2DCB4; border-left-color: #B26A00; }
.aj-article .n24-callout { background: #F4F6F8; border-color: var(--line); border-left-color: var(--ink); }
.aj-article :where(.n24-note, .n24-tip, .n24-warning, .n24-callout) > :first-child { margin-top: 0; }
.aj-article :where(.n24-note, .n24-tip, .n24-warning, .n24-callout) > :last-child { margin-bottom: 0; }
.aj-article :where(.n24-note-label, .n24-tip-label, .n24-warning-label, .n24-callout-label) {
  display: block;
  margin: 0 0 8px;
  font: 700 11px/1.4 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2E3A50;
}
.aj-article .n24-tip .n24-tip-label { color: #0E7A5F; }
.aj-article .n24-warning .n24-warning-label { color: #B26A00; }

/* --------------------------------------------------------------------------
   Stats line and snapshot cards
   -------------------------------------------------------------------------- */
.aj-article .n24-stats-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0 20px;
  padding: 6px 0;
  margin: 24px 0 30px;
  border-top: var(--line-hair) solid var(--line);
  border-bottom: var(--line-hair) solid var(--line);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
}
.aj-article .n24-stats-line > * { min-width: 0; }
.aj-article .n24-stats-line .aj-stat { display: block; padding: 8px 0; }

.aj-article :where(.n24-snapshot-block, .n24-clarity-section, .n24-clarity-block, .n24-clarity-wrap, .n24-quotes-section, .n24-quotes, .n24-timeline-section, .n24-faq-section, .n24-faq-block, .n24-faq-container, .n24-comparison-section, .n24-key-insights, .n24-insights, .n24-insights-list, .n24-grid-container, .n24-grid-overview, .n24-overview-grid, .n24-two-column, .n24-columns, .n24-article-body) {
  display: block;
  grid-template-columns: none;
  width: 100%;
  min-width: 0;
  margin: 30px 0;
  padding: 0;
}
.aj-article .n24-grid-wrap { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; }
.aj-article :where(.n24-grid-heading, .n24-faq-heading, .n24-related-heading, .n24-grid-title) {
  grid-column: 1 / -1;
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(23px, 2.2vw, 29px);
  line-height: 1.18;
}

/* Only the element whose direct children are cards becomes a grid. */
.aj-article :where(.n24-grid, .n24-card-grid, .n24-grid-4, .n24-grid-2, .n24-gird, .n24-grid-rap, .n24-gird-rap) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 18px;
  width: 100%;
  min-width: 0;
  margin: 0;
  align-items: start;
}
.aj-article :where(.n24-grid, .n24-card-grid) > :where(.n24-grid-heading, .n24-faq-heading) { grid-column: 1 / -1; margin-bottom: 0; }

.aj-article :where(.n24-card, .n24-grid-item, .n24-overview-item, .n24-clarity-col, .n24-insight-item, .n24-comparison-column) {
  min-width: 0;
  width: auto;
  max-width: 100%;
  margin: 0;
  background: var(--paper);
  border: var(--line-hair) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.aj-article .n24-card { display: flex; flex-direction: column; }
.aj-article .n24-card-header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: var(--line-hair) solid var(--line);
}
.aj-article .n24-card-header:not(:has(.n24-card-num)) { grid-template-columns: minmax(0, 1fr); }
.aj-article .n24-card:nth-child(2) .n24-card-header { background: #EFF4FB; }
.aj-article .n24-card:nth-child(3) .n24-card-header { background: #F2F8F6; }
.aj-article .n24-card:nth-child(4) .n24-card-header { background: #FFF8EC; }
.aj-article :where(.n24-card-num, .n24-crd-num, .n24-card-num-1, .n24-card-num-2, .n24-card-num-3, .n24-card-num-4) {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font: 700 12px/1 var(--display);
}
.aj-article :where(.n24-card-title, .n24-crd-title) {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: break-word;
}
.aj-article .n24-card-title:only-child { grid-column: 1 / -1; }
.aj-article :where(.n24-card-body, .n24-crd-body) { padding: 16px 18px 18px; font-size: 15.5px; line-height: 1.66; min-width: 0; }
.aj-article :where(.n24-card-body, .n24-crd-body) > :first-child { margin-top: 0; }
.aj-article :where(.n24-card-body, .n24-crd-body) > :last-child { margin-bottom: 0; }
.aj-article :where(.n24-card-body, .n24-crd-body) :where(ul, ol) { margin: 0; padding-left: 1.15em; }
.aj-article :where(.n24-card-body, .n24-crd-body) li { margin: 0 0 8px; }
.aj-article :where(.n24-card-body, .n24-crd-body) li:last-child { margin-bottom: 0; }

.aj-article :where(.n24-grid-item, .n24-overview-item, .n24-clarity-col, .n24-insight-item) { padding: 18px; }
.aj-article :where(.n24-grid-item, .n24-overview-item, .n24-clarity-col, .n24-insight-item) > :first-child { margin-top: 0; }
.aj-article :where(.n24-grid-item, .n24-overview-item, .n24-clarity-col, .n24-insight-item) > :last-child { margin-bottom: 0; }
.aj-article :where(.n24-grid-label, .n24-overview-label, .n24-clarity-label) {
  display: block;
  margin-bottom: 7px;
  font: 700 11.5px/1.4 var(--display);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.aj-article :where(.n24-grid-value, .n24-overview-value) { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.aj-article :where(.n24-grid-content, .n24-grid-cell, .n24-grid-change) { min-width: 0; }

/* Clarity cols: the wrapper becomes a grid only when its children are cols. */
.aj-article .n24-clarity:has(> .n24-clarity-col),
.aj-article :where(.n24-clarity-cols, .n24-clarity-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 18px;
  width: 100%;
  margin: 0;
  align-items: start;
}
.aj-article .n24-clarity:not(:has(> .n24-clarity-col)) { display: block; }
.aj-article :where(.n24-clarity-upside, .n24-clarity-upsides, .n24-clarity-downside, .n24-clarity-downsides, .n24-clarity-established, .n24-clarity-confirmed, .n24-clarity-unclear, .n24-clarity-uncertain, .n24-certainty-col, .n24-column-established, .n24-column-unclear) { min-width: 0; }
/* --------------------------------------------------------------------------
   Quote / blockquote / cite / pullquote
   -------------------------------------------------------------------------- */
.aj-article :where(blockquote, .n24-blockquote, .n24-quote, .n24-pullquote) {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.55;
  color: #1B1F27;
  background: none;
}
.aj-article :where(blockquote, .n24-blockquote, .n24-quote, .n24-pullquote) p:last-child { margin-bottom: 0; }
.aj-article :where(cite, .n24-cite) {
  display: block;
  margin-top: 10px;
  font: 600 13.5px/1.5 var(--sans);
  font-style: normal;
  letter-spacing: .02em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Network / source lines
   -------------------------------------------------------------------------- */
.aj-article .n24-network-source,
.aj-article :where(.n24-source, .scl-ref-byline, .scl-checked, .scl-method, .scl-rel) {
  display: block;
  margin: 22px 0;
  padding: 12px 16px;
  background: var(--surface);
  border-left: 3px solid var(--signal);
  font: 400 13.5px/1.6 var(--sans);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Tables: always contained in an accessible horizontal scroller
   -------------------------------------------------------------------------- */
.aj-article .aj-table-scroll {
  max-width: 100%;
  min-width: 0;
  margin: 26px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: var(--line-hair) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.aj-article .aj-table-scroll:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.aj-article :where(.n24-table-scroll, .n24-table-overview, .n24-table, .n24-tbody, .n24-thead) { max-width: 100%; min-width: 0; }
.aj-article table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  background: var(--paper);
}
.aj-article .aj-table-scroll > table { min-width: 560px; }
.aj-article table :where(th, td) { padding: 10px 13px; text-align: left; vertical-align: top; border-bottom: var(--line-hair) solid var(--line); overflow-wrap: anywhere; }
.aj-article table th { background: var(--surface); font-family: var(--display); font-weight: 700; }
.aj-article table tbody tr:last-child :where(th, td) { border-bottom: 0; }
.aj-article table :where(.n24-th, .n24-td) { min-width: 0; }
.aj-article :where(.n24-comparison-table, .n24-data-table, .n24-certainty-table, .n24-clarity-table, .n24-fact-table, .n24-overview-table) { width: 100%; }
.aj-article caption, .aj-article :where(.n24-table-caption, .n24-caption) {
  padding: 9px 12px;
  font: 400 12.5px/1.55 var(--sans);
  color: var(--muted);
  text-align: left;
  caption-side: bottom;
}

/* Layout tables (two 50% cells, no header) stack instead of scrolling. */
.aj-article .aj-layout-table { display: block; max-width: 100%; }
.aj-article .aj-layout-table > table { display: block; width: 100%; min-width: 0; }
.aj-article .aj-layout-table > table > tbody { display: block; width: 100%; }
.aj-article .aj-layout-table > table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.aj-article .aj-layout-table > table > tbody > tr > td { display: block; width: auto !important; min-width: 0; }

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.aj-article :where(.n24-timeline, .n24-timeline-list, .n24-timeline-section) { margin: 28px 0; min-width: 0; }
.aj-article :where(.n24-timeline, .n24-timeline-list) > ol,
.aj-article :where(.n24-timeline, .n24-timeline-list) > ul { list-style: none; padding-left: 0; margin: 0; border-left: 2px solid var(--line); }
.aj-article :where(.n24-timeline, .n24-timeline-list) li,
.aj-article .n24-timeline-item { position: relative; padding: 0 0 18px 22px; margin: 0; }
.aj-article :where(.n24-timeline, .n24-timeline-list) li::before,
.aj-article .n24-timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: .55em;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border: 2px solid var(--brand);
}
.aj-article .n24-timeline-date { display: block; font: 700 12.5px/1.4 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--brand); }
.aj-article .n24-timeline-text { display: block; }

/* --------------------------------------------------------------------------
   Comparison blocks
   -------------------------------------------------------------------------- */
.aj-article :where(.n24-comparison, .n24-comparison-section, .n24-comparison-column, .n24-comparison-header) { min-width: 0; }
.aj-article .n24-comparison-header {
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  font: 700 15px/1.35 var(--display);
  border-radius: var(--radius) var(--radius) 0 0;
}
.aj-article .n24-comparison-column { padding: 16px 18px; }
.aj-article .n24-comparison-column > :first-child { margin-top: 0; }
.aj-article .n24-comparison-column > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Charts and trend bars: preserve proportions, never overflow
   -------------------------------------------------------------------------- */
.aj-article :where(.trend-visual, .bar-wrap, .trend-item, .trend-bar) { min-width: 0; max-width: 100%; }
.aj-article .trend-visual { display: grid; gap: 12px; margin: 24px 0; }
.aj-article .trend-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.aj-article .trend-label { font: 600 13.5px/1.4 var(--sans); }
.aj-article .bar-wrap { display: block; height: 12px; background: var(--surface); border: var(--line-hair) solid var(--line); }
.aj-article :where(.bar, .trend-bar, .trend-fill, .fill1, .fill2, .fill3) { display: block; height: 100%; background: var(--brand); }
.aj-article .trend-note { font-size: 13px; color: var(--muted); }
/* --------------------------------------------------------------------------
   FAQ via native details/summary (works without JavaScript)
   -------------------------------------------------------------------------- */
.aj-article :where(.n24-faq, .n24-details, .n24-faq-item, .n24-faq-question) { min-width: 0; }
.aj-article details {
  margin: 0 0 10px;
  border: var(--line-hair) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.aj-article details:last-child { margin-bottom: 0; }
.aj-article details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  background: var(--surface);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.aj-article details > summary::-webkit-details-marker { display: none; }
.aj-article details > summary::marker { content: ""; }
.aj-article details > summary:hover { background: #E9EEF4; }
.aj-article details > summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--ease);
}
.aj-article details[open] > summary { background: var(--paper); border-bottom: var(--line-hair) solid var(--line); }
.aj-article details[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.aj-article details > :not(summary) { padding: 14px 18px; margin: 0; }
.aj-article details > :not(summary) > :first-child { margin-top: 0; }
.aj-article details > :not(summary) > :last-child { margin-bottom: 0; }
.aj-article :where(.n24-faq-answer, .n24-faq-body, .n24-answer) { font-size: 16.5px; line-height: 1.68; }
.aj-article :where(.n24-faq-answer, .n24-faq-body, .n24-answer) p:last-child { margin-bottom: 0; }
/* Non-details FAQ wrappers keep normal flow. */
.aj-article .n24-faq-question { display: block; background: var(--surface); border: var(--line-hair) solid var(--line); padding: 13px 18px; }

/* --------------------------------------------------------------------------
   Closing sections, related reading, licence notes
   -------------------------------------------------------------------------- */
.aj-article :where(.n24-section-close, .n24-section-closer, .n24-section-outro, .n24-closing, .n24-closer, .n24-editorial-closer) {
  font-size: 16.5px;
  line-height: 1.68;
  color: #2C333F;
  border-top: var(--line-hair) solid var(--line);
  margin-top: 30px;
  padding-top: 18px;
}
.aj-article :where(.n24-related, .n24-related-reading) { font-size: 16px; }
.aj-article .n24-related { border-top: 3px solid var(--ink); margin-top: 34px; padding-top: 14px; }
.aj-article .n24-related ul { margin-bottom: 0; }
.aj-article .license { font-size: 13px; color: var(--muted); }
.aj-article .n24-closer:last-child { margin-bottom: 0; }

/* Generated screen-reader leftovers stay visually hidden. */
.aj-article :where(.sr-only, .screen-reader-text) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Article chrome: heading block, byline, rails, signature, sources
   -------------------------------------------------------------------------- */
.article-heading { min-width: 0; }
.article-heading h1 { max-width: 1000px; margin: 0 0 14px; }
.article-heading .standfirst {
  max-width: 68ch;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  color: #2C333F;
  margin: 0 0 18px;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  padding: 14px 0;
  border-top: var(--line-hair) solid var(--line);
  border-bottom: var(--line-hair) solid var(--line);
}
.byline .byline-person {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}
.byline .byline-person img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); border: var(--line-hair) solid var(--line); display: block; }
.byline .byline-person small { display: block; font: 700 10.5px/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.byline .byline-person strong { font: 700 15px/1.3 var(--display); }
.byline .byline-dates { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 600 13px/1.5 var(--display); color: var(--muted); }
.byline .share-button {
  min-height: 44px;
  padding: 9px 15px;
  background: var(--paper);
  border: var(--line-hair) solid var(--line);
  border-radius: var(--radius);
  font: 700 13px/1.3 var(--display);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.byline .share-button:hover { border-color: var(--brand); color: var(--brand); }

.article-utility { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 0 0; font: 600 13px/1.4 var(--display); }
.article-utility a { display: inline-flex; align-items: center; min-height: 40px; color: var(--brand); text-decoration: none; }
.article-utility a:hover { text-decoration: underline; }
.article-utility .utility-count { margin-left: 7px; padding: 1px 7px; background: var(--surface); border: var(--line-hair) solid var(--line); border-radius: 20px; font-size: 11.5px; color: var(--muted); }

.article-image { margin: 22px 0 6px; border: var(--line-hair) solid var(--line); background: var(--surface); }
.article-image img { display: block; width: 100%; height: auto; }
.article-image figcaption { padding: 10px 14px; font: 400 13px/1.55 var(--sans); color: var(--muted); border-top: var(--line-hair) solid var(--line); }

/* Reading layout: 728px measure with a wider breakout for data blocks. */
.reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 728px) minmax(210px, 268px);
  gap: 52px;
  align-items: start;
  margin-top: 30px;
}
.reading-layout > .reading-rail { grid-column: 2; grid-row: 1; min-width: 0; }
.reading-layout > .aj-article { grid-column: 1; grid-row: 1; }
.aj-article :where(.aj-breakout, .n24-comparison, .n24-comparison-section) { max-width: var(--breakout); }

.reading-rail .rail-block { border-top: 3px solid var(--ink); padding-top: 14px; margin-bottom: 26px; }
.reading-rail .rail-block h2 { font-size: 19px; margin: 8px 0 10px; }
.reading-rail .rail-block p { font-size: 13.5px; line-height: 1.65; color: #333A47; }
.reading-rail .rail-person a.rail-person-link { display: flex; align-items: center; gap: 11px; min-height: 44px; text-decoration: none; color: var(--ink); }
.reading-rail .rail-person img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--radius); border: var(--line-hair) solid var(--line); display: block; }
.reading-rail .rail-person small { display: block; font: 700 10.5px/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.reading-rail .rail-person strong { font: 700 14.5px/1.3 var(--display); }

.toc { border: 0; margin: 0 0 24px; }
.toc > summary { background: var(--paper); border: 0; border-bottom: var(--line-hair) solid var(--line); padding: 8px 0 10px; font-size: 15px; min-height: 44px; }
.toc > summary::after { border-color: var(--ink); }
.toc nav { display: grid; margin-top: 10px; max-height: 58vh; overflow-y: auto; }
.toc nav a {
  display: block;
  padding: 9px 4px 9px 0;
  border-bottom: var(--line-hair) solid var(--line);
  font: 600 13.5px/1.5 var(--display);
  color: var(--ink);
  text-decoration: none;
}
.toc nav a:hover { color: var(--brand); }
.toc nav a[aria-current="location"] { color: var(--brand); border-left: 3px solid var(--brand); padding-left: 9px; }

.article-finish { margin-top: 40px; border-top: 3px solid var(--ink); padding-top: 24px; }
.article-finish h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 8px 0 12px; }
.article-finish p { font-family: var(--serif); font-size: 16.5px; line-height: 1.68; }

.author-signature { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; padding-bottom: 22px; }
.author-signature img { width: 92px; height: 92px; object-fit: cover; border: var(--line-hair) solid var(--line); border-top: 3px solid var(--signal); border-radius: var(--radius); display: block; }
.author-signature h2 { font-size: 24px; margin: 2px 0 8px; }
.author-signature h2 a { color: var(--ink); text-decoration: none; }
.author-signature h2 a:hover { color: var(--brand); text-decoration: underline; }
.author-signature .signature-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font: 700 13px/1.4 var(--display); }

.source-directory { border: var(--line-hair) solid var(--line); border-top: 3px solid var(--signal); background: var(--surface); padding: 18px 20px; margin-bottom: 26px; }
.source-directory details { border: 0; margin: 0; }
.source-directory details > summary { background: none; border: 0; padding: 0 30px 0 0; font-size: 17px; }
.source-directory details > summary:hover { background: none; }
.source-directory details[open] > summary { border-bottom: 0; }
.source-directory details > :not(summary) { padding: 14px 0 0; }
.source-directory .sources-note { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.source-directory ol { display: grid; gap: 10px; padding-left: 20px; margin: 0; }
.source-directory li { margin: 0; font-size: 14px; line-height: 1.55; }
.source-directory li small { display: block; font-size: 12px; color: var(--muted); }

.correction-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 22px;
  padding: 15px 0;
  border-top: var(--line-hair) solid var(--line);
}
.correction-line p { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: #333A47; max-width: 52ch; }
.correction-line > a { font: 700 13.5px/1.4 var(--display); white-space: nowrap; }

.article-trust-note {
  margin: 20px 0;
  padding: 13px 18px;
  background: var(--surface);
  border-left: 3px solid var(--signal);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  max-width: var(--measure);
}
.article-trust-note p { margin: 0; }

.reading-progress { position: fixed; inset: 0 0 auto; z-index: 80; height: 3px; pointer-events: none; background: transparent; }
.reading-progress span { display: block; width: 100%; height: 100%; background: var(--brand); transform-origin: 0 50%; transform: scaleX(var(--reading-progress, 0)); }

/* --------------------------------------------------------------------------
   Contact and trust page surfaces
   -------------------------------------------------------------------------- */
.notice-block {
  border: var(--line-hair) solid var(--line);
  border-left: 4px solid var(--signal);
  background: var(--surface);
  padding: 18px 20px;
  margin: 22px 0;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: var(--measure);
}
.notice-block p:last-child { margin-bottom: 0; }
.notice-block strong { font-family: var(--display); }

.trust-list { display: grid; gap: 0; margin: 26px 0; border-top: var(--line-hair) solid var(--line); }
.trust-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 10px 2px;
  border-bottom: var(--line-hair) solid var(--line);
  font: 700 16px/1.3 var(--display);
  color: var(--ink);
  text-decoration: none;
}
.trust-list a:hover { color: var(--brand); }
.trust-list span { font: 400 13px/1.4 var(--sans); color: var(--muted); }

.page-facts { display: grid; gap: 12px; margin: 24px 0; padding: 20px 22px; background: var(--surface); border: var(--line-hair) solid var(--line); border-left: 4px solid var(--brand); max-width: var(--measure); }
.page-facts dt { font: 700 11.5px/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.page-facts dd { margin: 2px 0 0; font-size: 15px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Article responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .reading-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .reading-layout > .reading-rail { grid-column: 1; grid-row: auto; }
  .reading-layout > .aj-article { grid-column: 1; grid-row: auto; }
  .aj-article :where(.aj-breakout, .n24-comparison, .n24-comparison-section) { max-width: 100%; }
}

@media (max-width: 720px) {
  .aj-article { font-size: 17px; line-height: 1.7; }
  .aj-article h2 { margin-top: 1.45em; }
  .aj-article :where(.n24-grid, .n24-card-grid, .n24-grid-4, .n24-grid-2) { grid-template-columns: minmax(0, 1fr); }
  .aj-article .n24-stats-line { grid-template-columns: minmax(0, 1fr); }
  .aj-article .aj-table-scroll > table { min-width: 460px; }
  .article-heading .standfirst { font-size: 18px; }
  .author-signature { grid-template-columns: 74px minmax(0, 1fr); gap: 15px; }
  .author-signature img { width: 74px; height: 74px; }
  .byline { gap: 12px 18px; }
  .byline .byline-dates { font-size: 12.5px; }
}

@media (max-width: 420px) {
  .aj-article { font-size: 16.5px; }
  .aj-article :where(blockquote, .n24-blockquote, .n24-quote, .n24-pullquote) { font-size: 18px; }
  .aj-article .aj-table-scroll > table { min-width: 380px; font-size: 13.5px; }
  .article-heading h1 { font-size: 27px; }
  .author-signature { grid-template-columns: minmax(0, 1fr); }
}