/* Blog article — DESKTOP additions (1024 px and wider). OWNER: ARTICLE-UX. css/article.mobile.css is the base for every width.
   Type: h1 44 · h2 30 · h3 22 · body 19/1.7. Reading column 700 px. From 1280 px the table of contents becomes a sticky rail. */

.art { padding-bottom: 104px; }
.art .xp { top: calc(var(--header-h) + 12px); left: 50%; right: auto; width: 560px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: translate(-50%, -10px); }
.art .xp.is-on { transform: translate(-50%, 0); }
.art .xp-pill { padding: 9px 16px 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--edge-tint); box-shadow: var(--highlight), var(--depth-2); }
.art .xp-mira { width: 36px; left: -18px; top: -19px; }

.art-hero { padding: 36px 0 12px; text-align: center; }
.art-hero .art-col { max-width: 900px; }
.art-crumbs ol { justify-content: center; font-size: 15px; }
.art-kicker { margin-top: 18px; font-size: 15px; }
.art-meta { justify-content: center; }
.art-title { margin: 18px auto 0; max-width: 18ch; font-size: 44px; line-height: 1.1; letter-spacing: -0.028em; }
.art-meta { justify-content: center; margin-top: 22px; font-size: 15px; }
.art-thumb { width: min(920px, calc(100% - var(--pad) * 2)); margin-top: 34px; border-radius: 34px; max-width: 760px; }

.art-lead { margin-top: 44px; }
.art-answer { padding: 26px 30px 28px; border-radius: 28px; }
.art-answer p { font-size: 19px; line-height: 1.7; }

.art-toc { margin-top: 24px; padding: 22px 16px 18px; }
.art-toc ol { grid-template-columns: 1fr 1fr; column-gap: 8px; }
.art-toc a { font-size: 16px; }

.art-body { margin-top: 64px; }
.art-sec + .art-sec { margin-top: 80px; }
.art-body p, .art-body li { font-size: 19px; line-height: 1.7; }
.art-body p + p { margin-top: 20px; }
.art-sec > h2 { gap: 16px; margin-bottom: 22px; font-size: 30px; line-height: 1.2; }
.art-sec > h2::before { width: 42px; height: 42px; border-radius: 14px; font-size: 20px; margin-top: -3px; }
.art-body h3 { margin: 38px 0 12px; font-size: 22px; gap: 12px; }
.art-body h3::before { width: 18px; height: 18px; margin-top: 5px; }

.callout { margin: 32px 0; padding: 24px 28px 26px; border-radius: 26px; }
.art-body .callout-label { font-size: 16px; }
.art-fig { margin: 40px 0; padding: 44px 24px 24px; border-radius: 34px; }
.art-fig .phone { --w: 290px !important; }
.art-fig-stage::after { width: 250px; }
.art-body .art-fig figcaption { font-size: 16px; margin-top: 30px; }

.moment { margin: 40px 0; padding: 28px 30px; border-radius: 32px; }
.art-body .moment-title { font-size: 24px; }
.art-body .moment-sub { font-size: 16px; }
.mood-faces { justify-content: center; gap: 12px; }
.mood-face { flex: 0 1 104px; padding: 12px 0 10px; font-size: 14.5px; }
.mood-face img { width: 68px; }
.mira-says img { width: 70px; }
.art-body .mira-bubble { font-size: 16.5px; padding: 12px 18px; }
.prompt-groups { grid-template-columns: 1fr 1fr; gap: 14px; }
.prompt-group:last-child { grid-column: 1 / -1; }
.art-body .prompt-group li { font-size: 17px; }
.line-save { width: auto; min-width: 200px; }
.line-input { font-size: 19px; }
.quiz-opts { gap: 10px; }
.quiz-opt { min-height: 56px; font-size: 17px; }
.art-body .quiz-ask { font-size: 20px; }
.moment-busy { padding: 18px; }
.busy-toggle { font-size: 17px; min-height: 60px; }
.busy-steps { grid-template-columns: repeat(3, 1fr); }
.busy-step { flex-direction: column; align-items: flex-start; min-height: 104px; padding: 14px; }
.busy-full { padding: 20px 10px 4px; }

.faq-q { min-height: 66px; padding: 16px 18px 16px 24px; font-size: 18.5px; }
.faq-a { padding: 0 24px 22px; }
.art-body .faq-a p { font-size: 18px; }

.art-finish { margin-top: 88px; padding: 44px 44px 40px; border-radius: 38px; }
.finish-art { width: 190px; }
.finish-title { font-size: 34px; }
.finish-line { font-size: 18.5px; }
.shelf { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 8px; padding: 22px 14px; }
.shelf-item img { width: 56px; height: 56px; }
.shelf-name { font-size: 12.5px; }
.art-related { margin-top: 64px; }
.related-title { font-size: 30px; margin-bottom: 18px; }
.art-related ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rel-card { padding: 18px 16px 20px; }

.art-toast { bottom: 28px; font-size: 15.5px; }

/* wide screens: the table of contents rides beside the column */
@media (min-width: 1280px) {
  .art-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--col) + var(--pad) * 2)) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .art-layout > .art-col { grid-column: 2; max-width: none; }
  .art-lead { grid-row: 1; }
  .art-body { grid-row: 2; }
  .art-layout > .art-col:last-child { grid-row: 3; }
  .art-toc { grid-column: 1; grid-row: 1 / 3; position: sticky; top: calc(var(--header-h) + 84px); justify-self: end; width: min(270px, 100%); margin: 44px 0 0;
    padding: 18px 10px 14px; }
  .art-toc ol { grid-template-columns: 1fr; }
  .art-toc a { font-size: 15px; min-height: 40px; gap: 10px; }
  .art-toc .toc-n { width: 26px; height: 26px; font-size: 12.5px; }
}

/* SEO-BLOG: topic tags and pager on wide screens */
.art-body .art-tags { margin-top: 48px; }
.art-pager { margin-top: 18px; gap: 14px; }