/* Korjin — article (single blog post) page. Long-form editorial layout:
   reading-progress bar, post header, the article's cover image, narrow reading
   column for the article's own content, inline promo card, and a "Keep
   reading" row. Tokens/spacing/typography come from tokens.css + base.css +
   components.css; .crumbs, .title-xl/.title-lg, .label--accent and .eyebrow
   are already global, so this file only adds the .readbar + .art__* layer. */

/* Reading-progress bar — 2px sticky line pinned below the header. Fill grows
   0→100% with scroll position (driven natively in the korjin bundle). */
.readbar {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 1);
  height: 2px;
  background: transparent;
}
.readbar__fill {
  height: 100%;
  width: 0;
  background: var(--accent-surface);
}

/* Post header — breadcrumb + meta label + display title + byline. Same
   measure as .art__body, so the title and the text share a left edge (at
   780px the header sat 16px left of the text at 1440). */
.art__head {
  max-width: 68ch;
  padding-block: var(--sp-6) var(--sp-7);
}
.art__meta {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block: var(--sp-5) var(--sp-4);
  font-size: var(--label-xs);
}
.art__byline {
  margin-top: var(--sp-4);
}

/* The article's cover image, full width. */
.art__hero {
  margin-bottom: var(--sp-8);
}
.art__hero img {
  width: 100%;
  height: clamp(260px, 52vh, 560px);
  object-fit: cover;
  background: var(--ground-sunken);
}

/* Narrow long-form reading column. */
.art__body {
  max-width: 68ch;
  padding-bottom: var(--sp-8);
}
.art__body > * + * {
  margin-top: var(--sp-4);
}
.art__body p {
  color: var(--ink-muted);
}
.art__body strong {
  color: var(--ink);
  font-weight: 500;
}

/* The article's own content (article-body prints article.content), written
   in Admin as plain HTML: h2/h3, p, lists, quotes, links, a closing <small>
   for the FDA disclaimer. Link rules go through two classes because Shopline's
   base sheet colours `a:not(.button)` and its :hover at 0,2,1. */
.art__prose h2,
.art__prose h3 {
  margin-top: var(--sp-7);
  color: var(--ink);
}
.art__prose h2 {
  font-size: var(--step-3);
}
.art__prose h3 {
  font-size: var(--step-2);
}
.art__prose h2 + *,
.art__prose h3 + * {
  margin-top: var(--sp-3);
}
.art__prose ul,
.art__prose ol {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.art__prose li {
  color: var(--ink-muted);
}
.art__prose li::marker {
  color: var(--accent-text);
}
.art__prose blockquote {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--gold-line);
  margin-block: var(--sp-7);
}
.art__prose blockquote p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-wrap: balance;
  color: var(--ink);
}
.art__body.art__prose a:not(.button) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.2em;
}
.art__body.art__prose a:not(.button):hover {
  color: var(--gold-text);
}
.art__prose small {
  display: block;
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
}

/* Inline promo card. */
.art__cta {
  max-width: 880px;
  padding-bottom: var(--sp-8);
}
/* The photograph is a landscape Hanji packshot (3:2) since 22 Oct; the old
   portrait frame cut the open tray off. */
.art__cta-in {
  display: grid;
  grid-template-columns: 192px 1fr;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  background: var(--ground-sunken);
  border: 1px solid var(--rule);
}
.art__cta-in img {
  width: 192px;
  height: 128px;
  object-fit: cover;
  background: var(--ground);
}
.art__cta-in .title {
  margin-block: var(--sp-2) var(--sp-2);
}
.art__cta-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

/* "Keep reading" related row. The cards are Journal cards
   (components/korjin-article-card.html), styled by journal.css. */
.art__related {
  border-top: 1px solid var(--rule);
}
.art__related-h {
  margin-bottom: var(--sp-6);
}
.art__related-row {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

@media (max-width: 860px) {
  .art__cta-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .art__related-row {
    grid-template-columns: minmax(0, 1fr);
  }
}