/* Article kit — styles shared by every article layout. Only design-system tokens, no fixed colours or fonts. */
.ar-page { display: block; }
.ar-muted { color: var(--ink-muted); }

/* Column widths */
.ar-narrow { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.ar-wide { max-width: calc(var(--measure) + 360px); margin-left: auto; margin-right: auto; }
.ar-grid { display: grid; grid-template-columns: minmax(0, var(--main-column, 860px)) minmax(260px, 320px); column-gap: var(--space-5xl, 48px); justify-content: space-between; align-items: start; }
.ar-grid.no-rail { grid-template-columns: minmax(0, var(--main-column, 860px)); }
.ar-column > * + * { margin-top: var(--space-lg); }
.ar-column .nw-prose, .ar-column .ar-head { max-width: var(--measure); }

/* Breadcrumb */
.ar-breadcrumb ol { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); color: var(--ink-muted); }
.ar-breadcrumb li + li::before { content: "›"; margin-right: var(--space-xs); color: var(--ink-muted); }
.ar-breadcrumb a { color: var(--link); text-decoration: none; }
.ar-breadcrumb a:hover { text-decoration: underline; }
.ar-breadcrumb li:last-child { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-breadcrumb.is-center ol { justify-content: center; }

/* Header */
.ar-head .nw-cat { margin-bottom: var(--space-sm); }
.ar-head .nw-article-title { margin: 0 0 var(--space-md); text-wrap: balance; }
.ar-head .nw-standfirst { margin: 0 0 var(--space-lg); text-wrap: pretty; }
.ar-head.is-center { text-align: center; margin-left: auto; margin-right: auto; }
.ar-head.is-center .nw-cat { justify-content: center; }

/* Byline */
.ar-byline { color: var(--ink); }
.ar-byline.is-line { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); padding-top: var(--space-sm); }
.ar-byline.is-line.is-center { justify-content: center; }
.ar-byline-name { color: var(--ink); text-decoration: none; font-weight: 600; }
.ar-byline-name:hover { text-decoration: underline; }
.ar-byline.is-card { border-top: var(--border-hairline) solid var(--line-soft); border-bottom: var(--border-hairline) solid var(--line-soft); padding: var(--space-md) 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.ar-byline-person { display: flex; align-items: center; gap: var(--space-md); }
.ar-byline-text { flex: 1; min-width: 0; }
.ar-follow { color: var(--link); text-decoration: none; white-space: nowrap; }
.ar-follow:hover { text-decoration: underline; }
.ar-avatar { display: inline-grid; place-items: center; }
.ar-avatar.is-large { width: 72px; height: 72px; }
.ar-initials { font: var(--type-section-label); color: var(--ink-soft); }

/* Figures */
.ar-figure { margin: 0; }
.ar-figure-media { width: 100%; }
.ar-caption { display: block; margin-top: var(--space-xs); color: var(--ink-caption); }
.nw-prose .ar-figure { margin: var(--space-lg) 0 var(--space-xl); }
.nw-prose .ar-figure.is-float-left, .nw-prose .ar-figure.is-float-right { width: 46%; margin-top: .35em; margin-bottom: var(--space-md); }
.nw-prose .ar-figure.is-float-left { float: left; margin-right: var(--space-xl); margin-left: calc(-1 * var(--ar-float-pull, 0px)); }
.nw-prose .ar-figure.is-float-right { float: right; margin-left: var(--space-xl); margin-right: calc(-1 * var(--ar-float-pull, 0px)); }
.ar-centered-body { --ar-float-pull: 120px; }
.ar-clear { clear: both; }

/* Body */
.ar-body { max-width: var(--measure); }
.ar-body > p { text-wrap: pretty; }
.ar-body.has-dropcap > p:first-of-type::first-letter {
  float: left; font: var(--type-article-title); font-size: 4.2em; line-height: .82;
  margin: .06em .1em 0 0; color: var(--dropcap-ink, var(--ink));
}
.ar-quote { margin: var(--space-xl) 0; }
.ar-quote cite { display: block; margin-top: var(--space-sm); font-style: normal; color: var(--ink-muted); }
.ar-list { margin: 0 0 1.2em; padding-left: 1.2em; }
.ar-list li { margin-bottom: .4em; }
.ar-facts { margin: var(--space-xl) 0; padding: var(--space-lg); background: var(--surface-alt); border-radius: var(--panel-radius, var(--radius-md)); }
.ar-facts .ar-facts-title { margin: 0 0 var(--space-sm); }
.ar-facts-list { margin: 0; padding-left: 1.1em; color: var(--ink); font: var(--type-ui); letter-spacing: var(--type-ui-tracking); }
.ar-facts-list li + li { margin-top: var(--space-xs); }

/* After the text */
.ar-after { max-width: var(--measure); }
.ar-tags.is-center { justify-content: center; }
.ar-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.ar-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); padding: var(--space-md) 0; border-top: var(--border-hairline) solid var(--line-soft); border-bottom: var(--border-hairline) solid var(--line-soft); }
.ar-share.is-center { justify-content: center; }
.ar-share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ar-share-label { color: var(--ink-muted); margin-right: var(--space-xs); }
.ar-share-btn { display: inline-block; padding: var(--space-2xs) var(--space-sm); border: var(--border-hairline) solid var(--line); border-radius: var(--tag-radius, 999px); color: var(--ink); text-decoration: none; }
.ar-share-btn:hover { border-color: var(--ink); }
.ar-authorbox { display: flex; gap: var(--space-lg); align-items: flex-start; margin-top: var(--space-xl); padding: var(--space-lg); background: var(--surface-raised, var(--surface-alt)); border-radius: var(--panel-radius, var(--radius-md)); }
.ar-authorbox-name { display: block; color: var(--ink); text-decoration: none; margin: 2px 0 var(--space-xs); }
.ar-authorbox-bio { margin: 0; color: var(--ink-soft); }

/* Rail */
.ar-rail-inner { position: sticky; top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-2xl); }
.ar-toc ol { margin: var(--space-sm) 0 0; padding-left: 1.2em; }
.ar-toc a { color: var(--ink-soft); text-decoration: none; }
.ar-toc a:hover { color: var(--ink); text-decoration: underline; }

/* Related */
.ar-related > * + * { margin-top: var(--space-lg); }

@media (max-width: 1100px) {
  .ar-grid, .ar-grid.no-rail { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3xl); }
  .ar-rail-inner { position: static; }
  .ar-centered-body { --ar-float-pull: 0px; }
}
@media (max-width: 760px) {
  .ar-head .nw-article-title { font-size: clamp(28px, 7.4vw, 40px); line-height: 1.12; }
  .nw-prose .ar-figure.is-float-left, .nw-prose .ar-figure.is-float-right { float: none; width: 100%; margin-left: 0; margin-right: 0; }
  .ar-authorbox { flex-direction: column; }
  .ar-rail .nw-ad { display: none; }
}

/* A subheading never sits beside a floated picture */
.ar-body h2 { clear: both; }

/* Shared extras */
.ar-body.has-boxquotes .ar-quote { border-left: 0; padding: var(--space-xl); background: var(--surface-alt); border-radius: var(--panel-radius, var(--radius-md)); text-align: center; }
.ar-storylist ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.ar-storylist li { padding: var(--space-md) 0; border-bottom: var(--border-hairline) solid var(--line-soft); }
.ar-storylist-cat { display: inline-block; margin-bottom: var(--space-2xs); color: var(--ink-muted); }
.ar-storylist a { display: block; color: var(--ink); text-decoration: none; }
.ar-storylist a:hover { text-decoration: underline; }
.ar-comments { margin-top: var(--space-2xl); }
.ar-comment-row { display: flex; gap: var(--space-md); align-items: flex-start; margin-top: var(--space-md); }
.ar-comment-input { flex: 1; min-height: 88px; height: auto; padding: var(--space-sm) var(--space-md); resize: vertical; }
.ar-markets > * + * { margin-top: var(--space-sm); }

/* C · guide */
.ar-guide { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--space-5xl, 48px); align-items: start; }
.ar-guide-main { max-width: calc(var(--measure) + 120px); }
.ar-guide-main > * + * { margin-top: var(--space-xl); }
.ar-guide-main .ar-head { max-width: none; }
.ar-guide-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.ar-guide-split .ar-facts { margin: 0; }
.ar-guide .ar-toc { border-left: var(--border-hairline) solid var(--line-soft); padding-left: var(--space-md); }
.ar-guide .ar-toc ol { list-style: none; padding: 0; }
.ar-guide .ar-toc li + li { margin-top: var(--space-sm); }

/* D · magazine */
.ar-mag-head .ar-head { max-width: calc(var(--measure) + 160px); }
.ar-mag { display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; column-gap: var(--space-2xl); align-items: start; }
.ar-mag-main { border-left: var(--border-hairline) solid var(--line-soft); border-right: var(--border-hairline) solid var(--line-soft); padding: 0 var(--space-2xl); }
.ar-mag-main > * + * { margin-top: var(--space-xl); }
.ar-mag-main .nw-prose { margin-left: auto; margin-right: auto; }
.ar-mag-about { display: flex; flex-direction: column; gap: var(--space-sm); }
.ar-mag-about .ar-share { flex-direction: column; align-items: flex-start; border: 0; padding: 0; }
.ar-narrow-plus { max-width: calc(var(--measure) + 240px); margin: 0 auto; }

/* E · minimal */
.ar-minimal-head { text-align: center; }
.ar-minimal-date { margin-bottom: var(--space-md); }
.ar-rounded .nw-thumb { border-radius: var(--ar-round, 16px); }
.ar-minimal-body .nw-prose { margin: 0 auto; }
.ar-minimal-body > .ar-byline { margin-top: var(--space-xl); }

/* F · feature */
.ar-feature { overflow-x: clip; }
.ar-standfirst-italic { font-style: italic; color: var(--standfirst-ink, var(--ink-soft)); max-width: var(--measure); margin: var(--space-lg) 0 0; }
.ar-feature-share .ar-share { flex-direction: column; align-items: flex-start; border: 0; padding: 0; margin: 0; }
.ar-bleed-left { margin-left: calc((100vw - min(100vw, var(--container-width))) / -2 - var(--container-gutter, 0px)); }
.ar-bleed-left .nw-thumb { border-radius: 0; }
.ar-feature-caption { padding-top: var(--space-md); border-top: var(--border-hairline) solid var(--line-soft); }
.ar-feature-caption > * + * { margin-top: var(--space-sm); }
.ar-feature-captext { font-style: italic; color: var(--ink-soft); }
.ar-feature article .nw-prose { max-width: var(--measure); }

@media (max-width: 1100px) {
  .ar-guide { grid-template-columns: minmax(0, 1fr); }
  .ar-guide-side { display: none; }
  .ar-mag { grid-template-columns: minmax(0, 1fr) 240px; }
  .ar-mag-left { display: none; }
  .ar-mag-main { border-left: 0; padding-left: 0; }
  .ar-bleed-left { margin-left: 0; }
}
@media (max-width: 760px) {
  .ar-guide-split { grid-template-columns: 1fr; }
  .ar-mag { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .ar-mag-main { border: 0; padding: 0; }
  .ar-bleed-left { margin-left: calc(-1 * var(--container-gutter, 0px)); margin-right: calc(-1 * var(--container-gutter, 0px)); }
}

/* Review-only layout switch */
.ar-preview { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; gap: 2px; padding: 4px; background: var(--inverse); border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.ar-preview a { color: var(--on-inverse); text-decoration: none; padding: 6px 12px; border-radius: 999px; opacity: .75; }
.ar-preview a:hover { opacity: 1; }
.ar-preview a.is-active { background: var(--canvas); color: var(--ink); opacity: 1; }