/* Long-form reading uses the landing's paper, lavender and connected artwork. */
.article-page { --reading-offset: 128px; --reading-nav: 86px; }
.article-header { padding-block: 30px 0; }
.article-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 44px; font-size: 13px; line-height: 1.6; }
.article-breadcrumb a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-2); }
.article-breadcrumb .article-topic { color: var(--brand-ink); }
.breadcrumb-divider { color: #aaa8b9; }
.article-hero { display: grid; grid-template-columns: minmax(0,1fr) 280px; align-items: center; gap: 64px; }
.article-eyebrow { display: block; color: #746887; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .12em; }
.article-head h1 { margin-top: 20px; font-size: clamp(34px,3.4vw,48px); font-weight: 650; line-height: 1.3; letter-spacing: -.045em; text-wrap: pretty; scroll-margin-top: calc(128px - var(--site-scroll-offset)); }
.article-deck { max-width: 700px; margin-top: 24px; color: var(--ink-2); font-size: 17px; line-height: 1.85; text-wrap: pretty; }
.article-page .article-cover { aspect-ratio: 1; border: 1px solid #e3def0; border-radius: 24px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 45%,#e4def9,#f2effa 75%); }
.article-cover .cover-art, .article-related-cover .cover-art { color: #7c6bb1; background: none; }
.article-cover .cover-art > svg { width: 135%; max-width: none; margin-left: -17.5%; opacity: .9; }
.article-cover .post-cover-grid { background-image: radial-gradient(#ada3c6 1px,transparent 1px); background-size: 20px 20px; opacity: .2; }
.article-cover .cover-art-label { font-size: 9px; top: 22px; left: 20px; }
.article-cover .cover-art-caption { font-size: 9px; bottom: 22px; right: 20px; }
.article-byline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; margin-top: 36px; padding-block: 22px; border-block: 1px solid var(--line); }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; color: #687086; font-size: 13px; line-height: 1.6; }
.article-author { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 550; }
.article-author img { padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 8px; width: 32px; height: 32px; }
.article-read-time { padding-left: 20px; border-left: 1px solid var(--line); }
.article-meta time, .article-read-time { white-space: nowrap; }
.article-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 100%; }
.article-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 550; }
.article-copy-status { font-size: 12px; color: var(--brand-ink); }
.article-copy-url { width: 100%; min-width: 0; flex-basis: 100%; padding: 12px; border: 1px solid var(--brand-line); border-radius: 8px; background: #fff; color: var(--ink-2); font-size: 16px; }
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 244px; gap: 72px; align-items: start; padding-block: 52px 80px; }
.article-content { min-width: 0; max-width: 800px; }
.article-contents-mobile { display: none; }
.article-rail { grid-column: 2; grid-row: 1; align-self: stretch; min-width: 0; }
.article-rail-sticky { position: sticky; top: 118px; }
.article-toc-heading { display: flex; justify-content: space-between; gap: 16px; padding: 0 0 16px; color: var(--ink); font-size: 13px; font-weight: 650; }
.article-toc-heading > span:last-child { color: #7f7498; font-family: var(--mono); font-size: 11px; }
.article-toc-list { margin: 0; padding: 0; list-style: none; }
.article-contents-desktop .article-toc-list { max-height: calc(100svh - 270px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d3cbe7 transparent; }
.article-toc-list li + li { margin-top: 3px; }
.article-toc-list a { display: flex; align-items: baseline; gap: 10px; padding: 11px 12px; min-height: 44px; border: 1px solid transparent; border-radius: 9px; color: #656e83; font-size: 13px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; text-decoration: none; transition: color .15s,background .15s; }
.toc-number { flex-shrink: 0; color: #94899e; font: 10px var(--mono); }
.article-toc-list a[aria-current] { color: #5c48bb; background: #eeebfa; border-color: #e4def5; font-weight: 550; }
.article-toc-list a[aria-current] .toc-number { color: #7964c5; }
.article-reading { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; }
.article-reading > div:first-child { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #7a738d; }
.reading-value { font-variant-numeric: tabular-nums; }
.reading-track { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: #e5e1ee; }
.reading-track > span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* Comfortable measure and distinct treatments for data, notes and pull quotes. */
.article-page .prose { color: var(--ink-2); font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
.article-page .prose > :first-child { margin-top: 0; }
.article-page .prose > * + * { margin-top: 24px; }
.article-page .prose > p:first-child { color: #454e67; font-size: 18px; }
.content-page .article-page .prose h2 { margin: 60px 0 24px; padding-top: 30px; border-top: 1px solid var(--line); color: var(--ink); font-size: 28px; font-weight: 620; line-height: 1.5; letter-spacing: -.035em; scroll-margin-top: calc(var(--reading-offset) - var(--site-scroll-offset)); text-wrap: pretty; }
.content-page .article-page .prose h3 { margin: 36px 0 18px; font-size: 22px; font-weight: 620; line-height: 1.5; color: var(--ink); scroll-margin-top: calc(var(--reading-offset) - var(--site-scroll-offset)); }
.article-page .prose p { color: inherit; }
.article-page .prose strong { color: var(--ink); font-weight: 650; }
.article-page .prose a { color: #604dba; text-decoration: underline; text-decoration-color: #c1b5e4; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.article-page .prose a:hover { text-decoration-color: currentColor; }
.article-page .prose :is(ul,ol) { padding-left: 24px; }
.article-page .prose li { padding-left: 5px; margin-top: 12px; }
.article-page .prose li::marker { color: #7b66ba; }
.article-page .prose :is(img,svg,video) { max-width: 100%; height: auto; }
.article-page .prose code { padding: 3px 7px; background: #efecf7; border: 1px solid #e2dcee; border-radius: 5px; font-size: .85em; color: #675388; font-family: var(--mono); }
.article-page .prose pre { overflow-x: auto; padding: 22px; background: #f0eef7; border: 1px solid var(--line); border-radius: 12px; }
.article-page .prose pre code { padding: 0; border: 0; background: none; }
.content-page .article-page .prose :is(.callout,blockquote) { position: relative; padding: 24px 28px; border: 1px solid #dfd8ef; border-left: 3px solid #9a87d4; border-radius: 0 14px 14px 0; background: #f1eef9; color: #55506b; font-size: 16px; line-height: 1.9; }
.article-page .prose .callout strong { color: #59469a; }
.article-page .prose .pquote { padding: 30px 32px; border: 1px solid #ded5f0; border-radius: 18px; background: linear-gradient(125deg,#ede7fa,#f7f4fc); color: #433553; font-size: 22px; font-weight: 550; line-height: 1.75; letter-spacing: -.025em; }
.article-page .prose .pquote strong { color: #694bad; }
.article-page .prose :is(blockquote,.callout,.pquote) > :first-child { margin-top: 0; }
.article-page .prose :is(blockquote,.callout,.pquote) > :last-child { margin-bottom: 0; }
.article-table-block { margin-block: 30px; min-width: 0; }
.article-table { width: 100%; max-width: 100%; overflow: auto; border: 1px solid #dde0ec; border-radius: 12px; background: #fff; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c7bddc #f5f3fa; }
.article-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.article-page .prose .article-table table { display: table; width: 100%; max-width: none; border-collapse: collapse; font-size: 14px; line-height: 1.8; overflow: visible; }
.article-page .prose :is(th,td) { min-width: 112px; padding: 14px 16px; text-align: left; vertical-align: top; }
.article-page .prose th { background: #eeebf6; border-bottom: 1px solid #ddd6eb; color: #514661; font-size: 12px; font-weight: 650; }
.article-page .prose td { border-bottom: 1px solid #ececf3; color: #5c6276; }
.article-page .prose tr:nth-child(even) td { background: #faf9fd; }
.article-page .prose tr:last-child td { border-bottom: 0; }
.article-page .prose .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.article-page .prose .article-table-hint { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: #7b728b; font-size: 12px; line-height: 1.6; }
.article-table-hint span { font-size: 17px; }
.article-end { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); }
.article-end a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #6c6281; font-size: 13px; }
.article-consult { margin-top: 40px; padding: 36px; border: 1px solid #dbd5ee; border-radius: 20px; background: radial-gradient(ellipse at top right,#e7e1fa80,transparent 65%),#fff; }
.article-consult h2 { margin-top: 16px; color: var(--ink); font-size: 28px; line-height: 1.45; font-weight: 600; letter-spacing: -.035em; text-wrap: pretty; }
.article-consult p { margin-top: 16px; color: #667086; font-size: 16px; line-height: 1.85; }
.article-consult .button { margin-top: 24px; gap: 18px; min-width: 160px; }
.article-related { padding-block: 72px 80px; border-top: 1px solid var(--line); background: #f0f2f8; }
.article-related-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
.article-related-heading h2 { margin-top: 14px; font-size: 32px; font-weight: 600; line-height: 1.4; letter-spacing: -.035em; }
.article-related-heading > a { display: inline-flex; gap: 14px; align-items: center; min-height: 44px; color: #635675; font-size: 14px; }
.article-related-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.article-related-card { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 24px; padding: 22px; border: 1px solid #dfe2ee; border-radius: 16px; background: #fff; box-shadow: var(--shadow-xs); transition: border-color .2s,box-shadow .2s; }
.article-related-cover { align-self: start; aspect-ratio: 1; position: relative; overflow: hidden; border: 1px solid #e6e1ef; border-radius: 10px; background: #eeebf8; }
.article-related-cover .cover-art > svg { width: 170%; margin-left: -35%; }
.article-related-cover .cover-art-label, .article-related-cover .cover-art-caption { display: none; }
.article-related-card:nth-child(even) .article-related-cover { background: #e9eef8; border-color: #dfe5ef; }
.article-related-card:nth-child(even) .cover-art { color: #6b85ad; }
.article-related-copy { display: flex; flex-direction: column; min-width: 0; }
.article-related-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: #776b8c; font-size: 11px; line-height: 1.6; }
.article-related-meta > span:last-child { white-space: nowrap; }
.article-related-card h3 { margin-block: 12px 18px; font-size: 19px; font-weight: 600; line-height: 1.55; letter-spacing: -.025em; text-wrap: pretty; }
.article-related-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; color: #6f58b1; font-size: 12px; }
@media (hover:hover) {
  .article-breadcrumb a:hover, .article-end a:hover, .article-related-heading > a:hover { color: var(--accent); }
  .article-copy:hover, .article-toc-list a:hover { background: #efebfa; color: #604cb1; }
  .article-related-card:hover { border-color: #c3b5e6; box-shadow: var(--shadow-sm); }
  .article-related-card:hover h3 { color: #6950aa; }
}
@media (max-width:1100px) { .article-hero { grid-template-columns: minmax(0,1fr) 230px; gap: 40px; } .article-layout { gap: 40px; grid-template-columns: minmax(0,1fr) 224px; } .article-related-card { gap: 18px; grid-template-columns: 90px minmax(0,1fr); } }
@media (max-width:1000px) {
  .article-page { --reading-offset: 180px; }
  .article-layout { display: block; padding-top: 28px; }
  .article-content { max-width: none; }
  .article-rail { display: none; }
  .article-contents-mobile { display: block; position: sticky; top: calc(var(--reading-nav) + 10px); z-index: 12; margin-bottom: 32px; border: 1px solid #ded9eb; border-radius: 12px; background: #fffffff5; box-shadow: 0 4px 18px #35244806; backdrop-filter: blur(12px); }
  .article-page:not(.article-ready) .article-contents-mobile { position: relative; top: 0; }
  .article-contents-mobile summary { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 15px 18px; list-style: none; cursor: pointer; color: #514968; font-size: 14px; font-weight: 600; }
  .article-contents-mobile summary::-webkit-details-marker { display: none; }
  .toc-count { margin-left: auto; font: 11px var(--mono); color: #8b7ca3; }
  .toc-chevron { width: 7px; height: 7px; margin: -4px 3px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
  .article-contents-mobile[open] .toc-chevron { transform: rotate(225deg); margin-top: 3px; }
  .article-contents-mobile nav { max-height: min(55svh,420px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 12px; border-top: 1px solid #ebe7f1; }
  .article-toc-list a { font-size: 14px; min-height: 48px; }
  .article-hero { grid-template-columns: minmax(0,1fr); }
  .article-page .article-cover { display: none; }
  .article-deck { max-width: 760px; }
  .article-related-grid { grid-template-columns: minmax(0,1fr); }
  .article-related-card { grid-template-columns: 120px minmax(0,1fr); }
}
@media (max-width:700px) {
  .article-page { --reading-nav: 72px; --reading-offset: 164px; }
  .article-header { padding-top: 20px; }
  .article-breadcrumb { margin-bottom: 28px; gap: 8px 12px; font-size: 12px; }
  .article-eyebrow { font-size: 10px; letter-spacing: .1em; }
  .article-head h1 { margin-top: 16px; font-size: clamp(28px,7.7vw,36px); line-height: 1.4; letter-spacing: -.04em; }
  .article-head h1 br { display: none; }
  .article-deck { margin-top: 20px; font-size: 15px; line-height: 1.85; }
  .article-byline { margin-top: 24px; padding-block: 18px; gap: 16px; }
  .article-meta { gap: 10px 14px; font-size: 12px; width: 100%; }
  .article-author { flex-basis: 100%; }
  .article-author img { width: 28px; height: 28px; }
  .article-read-time { padding-left: 14px; }
  .article-share { width: 100%; }
  .article-copy { min-height: 44px; }
  .article-layout { padding-block: 24px 56px; }
  .article-page .prose { font-size: 16px; line-height: 1.95; }
  .article-page .prose > p:first-child { font-size: 17px; }
  .article-page .prose > * + * { margin-top: 22px; }
  .content-page .article-page .prose h2 { margin-top: 44px; padding-top: 24px; font-size: 24px; line-height: 1.5; }
  .content-page .article-page .prose h3 { font-size: 20px; }
  .content-page .article-page .prose :is(.callout,blockquote) { padding: 20px; font-size: 15px; }
  .article-page .prose .pquote { padding: 24px; border-radius: 14px; font-size: 19px; }
  .article-page .prose :is(th,td) { padding: 12px 14px; }
  .article-end { gap: 12px; margin-top: 32px; }
  .article-end a { font-size: 12px; gap: 8px; }
  .article-consult { padding: 26px 22px; margin-top: 28px; border-radius: 16px; }
  .article-consult h2 { font-size: 24px; }
  .article-consult p { font-size: 15px; }
  .article-consult .button { width: 100%; min-height: 52px; }
  .article-related { padding-block: 48px 56px; }
  .article-related-heading { align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .article-related-heading h2 { font-size: 26px; }
  .article-related-heading > a { font-size: 13px; }
  .article-related-grid { gap: 14px; }
  .article-related-card { grid-template-columns: 64px minmax(0,1fr); gap: 16px; padding: 18px; border-radius: 14px; }
  .article-related-cover { margin-top: 3px; }
  .article-related-card h3 { font-size: 17px; line-height: 1.6; }
  .article-related-meta { font-size: 11px; }
}
@media (max-width:360px) {
  .article-related-card { grid-template-columns: minmax(0,1fr); }
  .article-related-cover { display: none; }
  .article-copy-status { flex-basis: 100%; }
}