/* Article page, every variant (template/blocks/main-article): heading, meta line, cover, contents, the text from the program,
   products, tags, author, read also; the "sidebar" layout. Reading width: --et-measure (72ch until the token is in the dictionary). Tokens only. */
[data-section="main-article"] .et-article { max-width: var(--et-measure, 72ch); margin-inline: auto; }
[data-section="main-article"] .et-article__head { display: grid; gap: calc(var(--et-grid-gap) * 0.5); margin-bottom: var(--et-grid-gap); }
[data-section="main-article"] .et-article__type {
  justify-self: start;
  padding: 0.2em 0.7em;
  border-radius: var(--et-chip-radius);
  background: var(--et-accent-ghost);
  color: var(--et-accent-text);
  font-size: var(--et-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-section="main-article"] .et-article__title {
  margin: 0;
  font-family: var(--et-font-display);
  font-size: var(--et-text-4xl);
  font-weight: var(--et-heading-weight);
  line-height: var(--et-heading-leading);
}
[data-section="main-article"] .et-article__meta { display: flex; flex-wrap: wrap; gap: 0.35em 1em; margin: 0; color: var(--et-text-muted); font-size: var(--et-text-sm); }
[data-section="main-article"] .et-article__category { color: var(--et-accent-text); font-weight: 600; text-decoration: none; }
[data-section="main-article"] .et-article__lead { margin: 0; font-size: var(--et-text-lg); color: var(--et-text-secondary); line-height: var(--et-body-leading); }
[data-section="main-article"] .et-article__cover { margin: 0 0 var(--et-grid-gap); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--et-media-radius); background: var(--et-surface-2); }
[data-section="main-article"] .et-article__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

[data-section="main-article"] .et-toc { margin-bottom: var(--et-grid-gap); padding: var(--et-card-pad); border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-card-radius); background: var(--et-surface); }
[data-section="main-article"] .et-toc__title { cursor: pointer; font-weight: 600; }
[data-section="main-article"] .et-toc__list { margin: 0.75em 0 0; padding-left: 1.25em; display: grid; gap: 0.35em; font-size: var(--et-text-sm); }
[data-section="main-article"] .et-toc__item--3 { margin-left: 1em; list-style-type: circle; }
[data-section="main-article"] .et-toc__list a { color: var(--et-text-secondary); text-decoration: none; }
[data-section="main-article"] .et-toc__list a:hover { color: var(--et-accent-text); }

/* The text from the program: plain HTML, styled by element */
[data-section="main-article"] .et-article__body { font-size: var(--et-text-md); line-height: var(--et-body-leading); overflow-wrap: break-word; }
[data-section="main-article"] .et-article__body :is(h2, h3) { scroll-margin-top: calc(var(--et-grid-gap) * 4); font-family: var(--et-font-display); font-weight: var(--et-heading-weight); line-height: var(--et-heading-leading); }
[data-section="main-article"] .et-article__body h2 { margin: 1.6em 0 0.6em; font-size: var(--et-text-2xl); }
[data-section="main-article"] .et-article__body h3 { margin: 1.4em 0 0.5em; font-size: var(--et-text-xl); }
[data-section="main-article"] .et-article__body :is(p, ul, ol) { margin: 0 0 1em; }
[data-section="main-article"] .et-article__body li + li { margin-top: 0.35em; }
[data-section="main-article"] .et-article__body a { color: var(--et-accent-text); text-decoration: underline; text-underline-offset: 0.15em; }
[data-section="main-article"] .et-article__body img { max-width: 100%; height: auto; border-radius: var(--et-media-radius); }
[data-section="main-article"] .et-article__body figure { margin: 1.5em 0; }
[data-section="main-article"] .et-article__body figcaption { margin-top: 0.5em; color: var(--et-text-muted); font-size: var(--et-text-sm); }
[data-section="main-article"] .et-article__body blockquote { margin: 1.5em 0; padding: 0.25em 0 0.25em 1em; border-left: 3px solid var(--et-accent); color: var(--et-text-secondary); font-size: var(--et-text-lg); }
[data-section="main-article"] .et-article__body iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--et-media-radius); }
[data-section="main-article"] .et-article__table { margin: 1.5em 0; overflow-x: auto; }
[data-section="main-article"] .et-article__table table { width: 100%; border-collapse: collapse; font-size: var(--et-text-sm); }
[data-section="main-article"] .et-article__table :is(th, td) { padding: 0.5em 0.75em; border: var(--et-border-width) solid var(--et-border); text-align: left; vertical-align: top; }
[data-section="main-article"] .et-article__table th { background: var(--et-surface-2); }

[data-section="main-article"] .et-article__products { margin-top: calc(var(--et-grid-gap) * 2); }
[data-section="main-article"] .et-article__tags { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: calc(var(--et-grid-gap) * 1.5); }
[data-section="main-article"] .et-article__author { display: flex; gap: var(--et-grid-gap); align-items: flex-start; margin-top: calc(var(--et-grid-gap) * 1.5); padding: var(--et-card-pad); border-radius: var(--et-card-radius); background: var(--et-surface-2); }
[data-section="main-article"] .et-article__author-photo { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--et-radius-full); object-fit: cover; }
[data-section="main-article"] .et-article__author p { margin: 0; }
[data-section="main-article"] .et-article__author-label { color: var(--et-text-muted); font-size: var(--et-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
[data-section="main-article"] .et-article__author-name { font-weight: 600; }
[data-section="main-article"] .et-article__author .et-article__author-bio { margin-top: 0.35em; color: var(--et-text-secondary); font-size: var(--et-text-sm); }
[data-section="main-article"] .et-article__related { margin-top: calc(var(--et-grid-gap) * 2); }

/* Variant "sidebar": contents | text | products; the foot (tags, author, read also) under the text column */
[data-section="main-article"] .et-article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--et-grid-gap) * 1.5); }
[data-section="main-article"] .et-article-layout__main { max-width: none; margin: 0; }
[data-section="main-article"] .et-article-layout__cards { display: grid; gap: var(--et-grid-gap); }
[data-section="main-article"][data-variant="sidebar"] .et-article__head { max-width: none; }
@media (min-width: 1200px) {
  [data-section="main-article"] .et-article-layout { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 17rem); align-items: start; }
  [data-section="main-article"] .et-article-layout--no-toc { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
  [data-section="main-article"] .et-article-layout--no-products { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
  [data-section="main-article"] .et-article-layout--no-toc.et-article-layout--no-products { grid-template-columns: minmax(0, 1fr); }
  [data-section="main-article"] :is(.et-article-layout__toc, .et-article-layout__products) { position: sticky; top: calc(var(--et-grid-gap) * 2); }
  [data-section="main-article"] .et-article-layout__products .et-article__products { margin-top: 0; }
}