/* File: /css/article-components.css | Version: 1.1.3 | 2026-10-27: the dark preview's article box keeps a side margin and grows by it, so its text no longer touches the box's edges; the text column is unchanged; inline images still run edge to edge (Steve).
   1.1.2 | 2026-10-27: one column: the inner prose section adds no second frame, and the preview's article is the public page's centred column (Steve: the hero centred, the text in a left-aligned box).
   1.1.1 | 2026-10-27: .cms-article-hero centres the hero's caption under the centred poster (Steve).
   1.1.0 | 2026-10-20: natural-ratio media sizing; explicit wide and crop variants. */
/* Article-only module. Colours and typography values are owned by site.css. */
.cms-article-root {
  color: var(--ox-ink);
  background: var(--ox-bg);
}

.cms-article-root[data-ox-article-theme="dark"],
.cms-article-root.cms-article-theme-dark {
  --ox-bg: var(--ox-article-paper-dark);
  --ox-surface: var(--ox-article-surface-dark);
  --ox-ink: var(--ox-article-ink-dark);
  --ox-ink-dim: var(--ox-article-muted-dark);
  --ox-accent: var(--ox-article-link-dark);
  --ox-accent-bg: var(--ox-article-link-soft-dark);
  --ox-rule: var(--ox-article-rule-dark);
}

.cms-article-layout-longform {
  --ox-article-local-measure: var(--ox-article-reading-measure);
  max-width: var(--ox-wrap);
  margin: 0 auto;
  padding: 1.4rem clamp(1rem, 3vw, 2.2rem) 3rem;
}
.cms-article-layout-compact { --ox-article-local-measure: 54ch; max-width: 54rem; margin: 0 auto; padding: 1rem; }
/* 1.1.2: the prose renderer wraps the text in a section carrying the layout class. Inside an
   article it sets the measure only and adds no second frame; it was indenting the text
   35px past the title, on the public page and in the preview. */
.cms-article-root .cms-article-layout-longform,
.cms-article-root .cms-article-layout-compact { max-width: none; margin: 0; padding: 0; }
/* 1.1.2: the preview's article is the public page's column (site.css .article: the measure,
   centred), so the hero, title and text share one column. The editor's canvas keeps its pane. */
.cms-article-root.cms-article-layout-longform:not(.cms-edit-canvas) { max-width: var(--ox-measure); padding-inline: 0; }
/* 1.1.3: in the dark theme that column is a dark box on the light page, and with no inner
   margin the text ran to its edges (Steve). The box keeps the longform side margin and grows
   by it on both sides, so the text column is exactly as wide as in the light theme. */
.cms-article-root.cms-article-layout-longform.cms-article-theme-dark:not(.cms-edit-canvas) {
  max-width: calc(var(--ox-measure) + 2 * clamp(1rem, 3vw, 2.2rem));
  padding-inline: clamp(1rem, 3vw, 2.2rem);
}
/* An inline image still runs to the box's edges (Steve); its caption keeps the text's margin. A
   portrait image is held by max-height and centred, so it stays inside; the hero is not moved. */
.cms-article-root.cms-article-layout-longform.cms-article-theme-dark:not(.cms-edit-canvas) .cms-article-figure:not(.cms-article-hero) {
  margin-inline: calc(-1 * clamp(1rem, 3vw, 2.2rem));
}
.cms-article-root.cms-article-layout-longform.cms-article-theme-dark:not(.cms-edit-canvas) .cms-article-figure:not(.cms-article-hero) .cms-article-caption {
  padding-inline: clamp(1rem, 3vw, 2.2rem);
}

.cms-article-root :where(.cms-article-header, .cms-article-lead, .cms-article-figure,
  .cms-article-callout, .cms-article-quote, .cms-article-sources, .cms-article-related,
  .cms-article-gallery, .cms-article-offer) {
  min-width: 0;
}

.cms-article-header { padding: 0.7rem 0 1.25rem; }
.cms-article-kicker {
  margin: 0 0 0.45rem;
  color: var(--ox-accent);
  font-family: var(--ox-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cms-article-title {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 3.35rem);
  line-height: 1.04;
  text-wrap: balance;
}
.cms-article-subtitle {
  max-width: 62ch;
  margin: 0.75rem 0 0;
  color: var(--ox-ink-dim);
  font-size: clamp(1.08rem, 2.1vw, 1.35rem);
  line-height: 1.4;
}
.cms-article-lead {
  max-width: var(--ox-article-local-measure, var(--ox-article-reading-measure));
  margin: 0 0 1.5rem;
  font-size: 1.22rem;
  line-height: 1.52;
}
.cms-article-prose {
  max-width: var(--ox-article-local-measure, var(--ox-article-reading-measure));
  font-size: var(--ox-article-reading-size);
  line-height: var(--ox-article-reading-leading);
}
.cms-article-prose p { margin: 0 0 1.15em; }
.cms-article-prose h2 {
  margin: 2.35em 0 0.55em;
  font-size: clamp(1.45rem, 3.4vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
}
.cms-article-prose h3 { margin: 1.8em 0 0.45em; font-size: 1.22em; line-height: 1.3; }
.cms-article-prose ul,
.cms-article-prose ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.cms-article-prose li { margin: 0 0 0.45em; }
.cms-article-prose blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 3px solid var(--ox-rule);
  color: var(--ox-ink-dim);
}
.cms-article-prose img { max-width: 100%; height: auto; }
.cms-article-prose table { display: block; max-width: 100%; overflow-x: auto; }

.cms-article-figure { margin: 1.5rem 0; }
.cms-article-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  background: var(--ox-surface);
  margin-inline: auto;
}
.cms-article-image-wide { width: 100%; aspect-ratio: 16 / 9; }
.cms-article-image-portrait { aspect-ratio: 2 / 3; }
.cms-article-image-crop { width: 100%; object-fit: cover; }
.cms-article-caption {
  margin: 0.5rem 0 0;
  color: var(--ox-ink-dim);
  font-size: var(--ox-article-caption-size);
  line-height: 1.45;
}
.cms-article-credit { display: block; margin-top: 0.2rem; }
/* The hero poster is narrower than the column (max-height 72vh), centred; its caption follows it. */
.cms-article-hero .cms-article-caption { text-align: center; }
.cms-article-media-missing,
.cms-article-media-unavailable {
  display: grid;
  min-height: 8rem;
  place-items: center;
  border: 1px dashed var(--ox-rule);
  background: var(--ox-surface);
  color: var(--ox-ink-dim);
  text-align: center;
  padding: 1rem;
}

.cms-article-gallery { margin: 1.5rem 0; }
.cms-article-gallery.cms-article-slider { position: relative; }
.cms-article-gallery-track { display: grid; gap: 1rem; }
.cms-article-gallery-slide.cms-article-state-active { visibility: visible; }
.cms-article-gallery-slide[hidden] { display: none; }
.cms-article-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.8rem;
}
.cms-article-gallery-button {
  min-width: 44px;
  min-height: 44px;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--ox-rule);
  border-radius: 0.2rem;
  background: var(--ox-surface);
  color: var(--ox-ink);
  font: inherit;
  cursor: pointer;
}
.cms-article-gallery-button:focus-visible { outline: 3px solid var(--ox-accent); outline-offset: 2px; }
.cms-article-gallery-button:disabled { cursor: not-allowed; opacity: 0.58; }
.cms-article-gallery-button.cms-article-state-disabled { cursor: not-allowed; opacity: 0.58; }
.cms-article-gallery-status { margin: 0; color: var(--ox-ink-dim); font-size: 0.9rem; }
.cms-article-control-hidden[hidden] { display: none; }

.cms-article-callout {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--ox-accent);
  background: var(--ox-surface);
}
.cms-article-callout h2,
.cms-article-callout h3 { margin-top: 0; }
.cms-article-callout p:last-child { margin-bottom: 0; }
.cms-article-callout-question { border-left-color: var(--ox-accent); }
.cms-article-callout-caution { border-left-style: double; }
.cms-article-quote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.15rem;
  border-left: 2px solid var(--ox-rule);
  font-size: 1.2rem;
  line-height: 1.55;
}
.cms-article-quote-attribution { display: block; margin-top: 0.6rem; font-size: 0.9rem; color: var(--ox-ink-dim); }

.cms-article-sources,
.cms-article-related,
.cms-article-offer {
  margin-top: var(--ox-article-section-space);
  padding-top: 1.1rem;
  border-top: 1px solid var(--ox-rule);
}
.cms-article-source-list,
.cms-article-related-list { padding-left: 1.3rem; }
.cms-article-source-list li,
.cms-article-related-item { margin: 0.65rem 0; }
.cms-article-related-item { min-width: 0; }
.cms-article-related-item p { margin: 0.3rem 0 0; color: var(--ox-ink-dim); }
.cms-article-sources-empty,
.cms-article-offer-unavailable,
.cms-article-offer-absent { color: var(--ox-ink-dim); }
.cms-article-offer-available { border-left: 3px solid var(--ox-accent); padding-left: 1rem; }
.cms-article-previewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ox-rule);
  background: var(--ox-surface);
  color: var(--ox-ink);
  font-family: var(--ox-sans);
  font-size: 0.9rem;
}
.cms-article-theme-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cms-article-theme-link,
.cms-article-theme-current { min-height: 44px; padding: 0.6rem 0.75rem; }
.cms-article-theme-current { border: 1px solid var(--ox-rule); border-radius: 0.2rem; color: var(--ox-ink-dim); }

.cms-article-root :where(p, li, blockquote) {
  overflow-wrap: anywhere;
}
.cms-article-root :where(a) { color: var(--ox-accent); }
.cms-article-root :where(a:focus-visible) { outline: 3px solid var(--ox-accent); outline-offset: 3px; }

@media (max-width: 40rem) {
  .cms-article-title { max-width: 15ch; font-size: clamp(1.9rem, 9vw, 2.55rem); }
  .cms-article-lead { font-size: 1.1rem; }
  .cms-article-image { max-height: none; }
  .cms-article-gallery-controls { align-items: stretch; }
  .cms-article-gallery-button { flex: 1 1 auto; }
  .cms-article-previewbar { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .cms-article-root *, .cms-article-root *::before, .cms-article-root *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}