/* ============================================================================
   Blog ARTICLE template — Figma 650:127124 (desktop 1512x6454)
                                 650:127438 (mobile   393x9363)
   File rijNBFC24rPaqbSoj29uvJ (the Atlas-org copy).

   Every value here was read out of the node JSON, not eyeballed. Needs
   atlas-tokens.css + atlas-chrome.css, atlas-blog2-{hero,grid}.css for the
   read-more cards, and atlas-final.css + atlas-footer.css for the last band.

   TEMPLATE NOTE. `.art-prose` is the swappable body container. It is styled by
   ELEMENT (h2/h3/p/ul/ol/blockquote/figure/img/table/pre/code/a), never
   per-paragraph, so a real post can be pasted in without touching CSS.

   RHYTHM. Figma nests the body as: a column of BLOCKS (gap 80 desktop / 40
   mobile) each of which is a section (gap 60), each of which is a heading and
   its content (gap 32). In CSS that is: every top-level child carries a 60px
   bottom margin; a heading carries the block gap on top; and the element
   immediately before a heading drops its bottom margin so the heading's
   margin owns the break outright instead of collapsing to the larger of the
   two. That last rule is what makes the mobile 40 possible at all, since 40
   is SMALLER than the 60 it would otherwise collapse against.
   ========================================================================= */

.art {
  /* page-scoped values from the file. Not promoted to atlas-tokens.css because
     nothing else on the site is drawn on this light page yet. */
  --art-page:      #F0F2F5;   /* 650:127124 frame fill */
  --art-ink:       #0D0D0D;
  --art-ink-70:    rgba(13,13,13,.7);
  --art-ink-05:    rgba(13,13,13,.05);
  --art-link:      #33635F;   /* inline link + pull-quote ink */
  --art-quote:     #FAFFFF;
  --art-author:    #FBFBFB;
  --art-chip:      #F4F4F4;

  --art-block: 80px;          /* 650:127248 itemSpacing — 40 on mobile */
  --art-sect:  60px;          /* 650:127250 etc itemSpacing */

  background: var(--art-page);
  color: var(--art-ink);
  font-family: var(--font-sans);
}

/* ===========================================================================
   BAND 1 — dark hero region.  Figma 650:127126, 1512 x 4801 at page y=56.
   The frame itself has no fill; the dark comes from a blurred ellipse plus a
   left-to-right overlay, both drawn over the light page.
   ======================================================================== */
.art-top {
  position: relative;
  isolation: isolate;
  padding-bottom: 160px;      /* 650:127126 ends 4857, content ends 4697 */
}

/* The two backdrop layers are clipped by their own wrapper, NOT by overflow on
   .art-top: an overflowing ancestor becomes the scrollport for position:sticky,
   and the table of contents inside this section has to be able to stick. */
.art-top__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* 650:127127 "Ellipse 473" — 1708x630 at (-147, -58) of the frame, #051F1D,
   LAYER_BLUR 516. Figma blur radius is ~2x the CSS blur() value. The second
   BACKGROUND_BLUR(316) on the same node is dropped: Chrome renders a
   backdrop-filter on a blended element as an opaque frosted plate. */
.art-top__glow {
  position: absolute;
  /* anchored to the centred 1512 stage: -756 (half the frame) -147 (its x) */
  left: 50%;
  margin-left: -903px;
  top: -58px;
  width: 1708px;
  height: 630px;
  border-radius: 50%;
  background: #051F1D;
  filter: blur(258px);
}

/* 650:127128 "Overlay" — 1512x890 at band y=0 (page y=56).
   This is a BACKGROUND, so it is full-bleed rather than a fixed 1512 stage:
   a centred 1512 plate would leave bare light edges above the design width. */
.art-top__overlay {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  min-width: 1512px;
  top: 56px;
  height: 890px;
  background: linear-gradient(89.8deg, rgba(5,63,59,.62) 0%, rgba(5,63,59,0) 100%);
}

.art-top > .afx-bar,
.art-top > .afx-nav,
.art-top > .art-main { position: relative; z-index: 1; }

/* the 1206 content column, centred in 1512 — 650:127149 */
.art-col {
  width: 1206px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;                   /* 650:127149 itemSpacing */
}
/* 650:127149 sits at page y=205. Nav band ends at 66+59=125, so 80px above. */
.art-top .art-col { margin-top: 80px; }

/* --------------------------------------------------------------- header row
   650:127150 — HORIZONTAL, gap 184, children hug. 1206 x 245. */
.art-head {
  display: flex;
  flex-direction: row;
  gap: 184px;
  align-items: flex-start;
}

/* 650:127151 — 137x42 glass pill, r50. min-width, not width, so the pill holds
   the drawn size — which is what lands the headline column at x=474 through
   the 184px gap — but grows rather than wrapping if the label measures wider. */
.art-back {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: none;
  min-width: 137px;
  height: 42px;
  padding: 12px 20px;
  border-radius: var(--r-50);
  background: var(--w-08);
  border: 1px solid var(--w-08);
  box-sizing: border-box;
  color: var(--af-white);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-weight: var(--w-semi);
  font-size: 14px;
  line-height: 18.2px;
  letter-spacing: -0.42px;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
/* the SVG already carries the node's own opacity="0.6"; only the label needs
   it applying here, or the chevron ends up at 0.36. Raised to .8 on the label
   because .6 white on the composited hero is 3.7:1. */
.art-back span { opacity: .8; }
.art-back__chev { width: 7px; height: 11px; flex: none; display: block; }

/* 650:127154 — 650 wide, VERTICAL gap 24 */
.art-head__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 650px;
  flex: none;
}
/* 650:127155 — 608 wide, VERTICAL gap 16 */
.art-head__stack { display: flex; flex-direction: column; gap: 16px; width: 608px; }

/* 650:127156 — meta row, HORIZONTAL gap 16, align centre.
   The three items are nested in their own row so the mobile frame can put the
   category pill on a line of its own; nested gap 16 = flat gap 16 on desktop. */
.art-meta,
.art-meta__row { display: flex; flex-direction: row; align-items: center; gap: 16px; }

/* 650:127157 — category pill, 4/12 padding, r57.
   The drawn fill is a near-white glass plate with WHITE text, which only
   resolves over the hero photography. The default here is therefore the
   translucent plate that works on the dark band; anything reusing .art-cat on
   the light page gets ink instead of an invisible label. */
.art-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 57px;
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
  color: var(--art-ink);
  font-weight: var(--w-medium);
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.42px;
  text-decoration: none;
}
.art-top .art-cat { color: var(--af-white); }

/* 650:127159 / 174 / 183 — icon + 10px uppercase label, gap 4 */
.art-meta__item { display: inline-flex; align-items: center; gap: 4px; }
.art-meta__item img { width: 14px; height: 14px; flex: none; display: block; }
.art-meta__item span {
  font-weight: var(--w-medium);
  font-size: 10px;
  line-height: 11.9px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}

/* 650:127193 — h1, SF Pro 510 / 56 / 61.6 / -1.68 */
.art-h1 {
  margin: 0;
  width: 608px;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 56px;
  line-height: 61.6px;
  letter-spacing: -1.68px;
  color: var(--af-white);
}
/* 650:127194 — dek, 400 / 20 / 26.4 / -0.6, node opacity .8 */
.art-dek {
  margin: 0;
  width: 650px;
  font-weight: var(--w-regular);
  font-size: 20px;
  line-height: 26.4px;
  letter-spacing: -0.6px;
  color: rgba(255,255,255,.8);
}

/* ------------------------------------------------------------- hero picture
   650:127195 — 1206x450, radius 28, image STRETCH with a vertical crop that is
   already baked into art-hero.webp, so a plain cover is exact here. */
.art-hero {
  display: block;
  width: 1206px;
  height: 450px;
  border-radius: var(--r-28);
  object-fit: cover;
  flex: none;
}

/* ===========================================================================
   BAND 2 — the article itself.  650:127196, HORIZONTAL gap 32, pad-bottom 180
   ======================================================================== */
.art-body {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
  padding-bottom: 180px;
}

/* ------------------------------------------------------------------ sidebar
   650:127197 — 290 wide. Drawn static; it is a table of contents, so it is
   sticky in the build. At scroll 0 it sits exactly where Figma puts it. */
.art-side {
  width: 290px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 24px;
}
.art-side__stack { display: flex; flex-direction: column; gap: 10px; }

/* 650:127199 / 650:127226 — white cards, r24, pad 16 */
.art-card {
  background: var(--af-white);
  border-radius: var(--r-24);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 650:127200 — eyebrow chip, r100, pad 4/8, gap 4 */
.art-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  align-self: flex-start;
  height: 22px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--art-chip);
}
.art-chip img { width: 14px; height: 14px; flex: none; display: block; }
.art-chip span {
  font-weight: var(--w-medium);
  font-size: 10px;
  line-height: 11.9px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--art-ink-70);
}

/* 650:127213 — the TOC list. Rows are r16, 16px side padding.
   The drawn opacities (row .8 x text .7 = .56) put the label at 4.48:1, just
   under AA, and the current row at 3.21:1. Both are raised by the smallest
   amount that clears 4.5:1 — declared deviation, the design is a hair short. */
.art-toc { list-style: none; margin: 0; padding: 0; }
.art-toc a {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--r-16);
  text-decoration: none;
  font-weight: var(--w-medium);
  font-size: 16px;
  line-height: 21.1px;
  letter-spacing: -0.48px;
  color: var(--art-ink);
  opacity: .62;
  transition: background-color var(--t-fast) var(--e-out),
              opacity var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
/* 650:127214 — the current row: #F0F5F5 plate, 590 weight, teal ink */
.art-toc a[aria-current="true"] {
  background: var(--af-pale);
  color: var(--art-link);
  font-weight: var(--w-semi);
  opacity: .9;
}

/* 650:127239 — share row, three 36-tall buttons, gap 4, r42, fill 5% ink */
.art-share { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.art-share a {
  flex: 1 1 0;
  height: 36px;
  border-radius: 42px;
  background: var(--art-ink-05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.art-share img { display: block; }

/* 650:127247 — lime button, 56 tall, r100, 1.5 gradient stroke.
   Ink is set explicitly: never let this inherit a link colour. */
.art-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 18px 32px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--af-lime);
  color: var(--af-ink-teal);
  text-decoration: none;
  font-weight: var(--w-semi);
  font-size: 16px;
  line-height: 19.1px;
  letter-spacing: -0.48px;
  box-shadow: 2px 14px 24px 0 rgba(38,63,66,.12);
  position: relative;
  transition: transform var(--t-instant) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}
/* the 1.5px gradient hairline — border-color cannot take a gradient */
.art-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--af-card-g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.art-btn img { width: 20px; height: 20px; flex: none; display: block; }

/* ===========================================================================
   .art-prose — THE SWAPPABLE BODY.  650:127248, 884 wide.
   Styled by element only. See the RHYTHM note at the top of this file.
   ======================================================================== */
.art-prose {
  width: 884px;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--w-regular);
  font-size: 20px;
  line-height: 26.4px;
  letter-spacing: -0.2px;
  color: var(--art-ink-70);
  overflow-wrap: anywhere;    /* a pasted URL must wrap, not overflow the column */
}

/* every top-level block carries the within-section gap ... */
.art-prose > * { margin: 0 0 var(--art-sect); }
/* ... a heading carries the block gap on top instead ... */
.art-prose h2 {
  margin: var(--art-block) 0 32px;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 32px;
  line-height: 35.2px;
  letter-spacing: -0.32px;
  color: var(--art-ink);
  scroll-margin-top: 96px;
}
/* 650:127257 — inline sub-heading, 590 / 20 / 30 / -0.2 */
.art-prose h3 {
  margin: var(--art-sect) 0 32px;
  font-weight: var(--w-semi);
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: var(--art-ink);
  scroll-margin-top: 96px;
}
/* ... and whatever precedes a heading or the author card drops its own bottom
   margin, so the block gap is the heading's alone rather than the larger of
   the two. Without this the mobile 40 could never beat the 60 below it. */
.art-prose > *:has(+ h2),
.art-prose > *:has(+ .art-author) { margin-bottom: 0; }
.art-prose > :first-child { margin-top: 0; }
.art-prose > :last-child  { margin-bottom: 0; }

/* paragraphSpacing 16 INSIDE a block (e.g. inside a blockquote or an li) ... */
.art-prose p { margin: 0 0 16px; }
.art-prose p:last-child { margin-bottom: 0; }
/* ... but a top-level paragraph IS a block, and this has to be restated: it
   out-specifies `.art-prose > *` above, which would otherwise leave every
   paragraph on the 16px inner value. */
.art-prose > p { margin-bottom: var(--art-sect); }
.art-prose > p + p { margin-top: -44px; }   /* 60 - 44 = the drawn 16 */

/* 650:127258 — UNORDERED, listSpacing 8, indent 1 */
.art-prose ul,
.art-prose ol { padding-left: 32px; }
.art-prose ul { list-style: disc; }
.art-prose li { margin-bottom: 8px; }
.art-prose li:last-child { margin-bottom: 0; }
/* a nested list is part of its parent item, not a new block */
.art-prose li > ul,
.art-prose li > ol { margin: 8px 0 0; }
.art-prose li > p { margin-bottom: 0; }

/* inline links — #33635F, underlined (styleOverrideTable 4 / 18) */
.art-prose a {
  color: var(--art-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--t-fast) var(--e-out);
}

/* 650:127254 / 267 / 268 — inline art, r32.
   height:auto is load-bearing: every migrated image now carries its real
   width/height attributes (tools/fix-blog-html.py), and without it a narrowed
   image keeps the attribute height and stretches.
   No crop. The drawn 884x300 band (aspect-ratio + object-fit: cover) cut the
   top and bottom off every chart and screenshot the posts migrated with, which
   is "parts of the content not being visible" in the 7 Oct SEO list. A post
   image is content, so it is shown whole, as it was on Webflow. */
.art-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-32);
}
.art-prose > img { width: 100%; }

/* a two-up figure — 650:127266, HORIZONTAL gap 16, two 434x300 */
.art-figrow { display: flex; flex-direction: row; gap: 16px; }
.art-figrow img { flex: 1 1 0; min-width: 0; height: 300px; object-fit: cover; }

/* 650:127263 — pull quote, #FAFFFF, r24, pad 32, teal 510/20/26.4/-0.4 */
.art-prose blockquote {
  padding: 32px;
  border-radius: var(--r-24);
  background: var(--art-quote);
  color: var(--art-link);
  font-weight: var(--w-medium);
  font-size: 20px;
  line-height: 26.4px;
  letter-spacing: -0.4px;
}
.art-prose blockquote p { margin: 0; color: inherit; }

/* 650:127273 — the closing line, 510 / 26 / 34.3 / -0.26 */
.art-prose .art-kicker {
  margin: var(--art-sect) 0 var(--art-sect);
  font-weight: var(--w-medium);
  font-size: 26px;
  line-height: 34.3px;
  letter-spacing: -0.26px;
  color: var(--art-ink-70);
}
.art-prose .art-kicker + p { margin-top: 0; }   /* not the -44 pair rule */

/* provisions for content the sample post does not contain */
.art-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--art-ink-05);
  color: var(--art-ink);
  overflow-wrap: anywhere;
}
.art-prose pre {
  padding: 24px;
  border-radius: var(--r-24);
  background: var(--af-white);
  overflow-x: auto;
}
.art-prose pre code { background: none; padding: 0; }

/* TABLES. The migrated posts bring their own table CSS in <style> embeds
   (.funded-table, .rules-table, ... with borders, header fill and zebra rows),
   so these rules only fix what breaks it here, and the embeds keep their look.

   - display:table, not block. A block <table> wraps its rows in an anonymous
     table that shrink-wraps, so a post's 3-column table drew as a 250px strip
     clipped at the left of a scroller (the screenshot in the 7 Oct list).
   - min-width:0 beats the embeds' min-width (0,1,1 over 0,1,0). Every embed on
     a page is global, so the LAST one's value hit all of that page's tables:
     one post asked for 1200px and got 1600px for a three-column table.
   - overflow-wrap:break-word, not the prose's `anywhere`: `anywhere` counts
     toward min-content, so a cell would collapse to one character wide before
     the table ever scrolled.
   The scrolling itself belongs to the wrapper: the post's own (.table-wrapper
   and friends), or .art-table, which tools/fix-blog-html.py puts round a bare
   table. Either way a wide table scrolls inside the column, never the page. */
.art-prose table {
  display: table;
  width: 100%;
  min-width: 0;
  margin: 0;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: break-word;
}
.art-prose .art-table,
.art-prose div:has(> table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.art-prose th,
.art-prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--art-ink-05); }
.art-prose th { color: var(--art-ink); font-weight: var(--w-semi); }
.art-prose hr { border: 0; border-top: 1px solid var(--art-ink-05); }

/* h4/h5. 1,600 sub-headings arrived from Webflow and nothing styled them. */
.art-prose h4,
.art-prose h5 {
  margin: var(--art-sect) 0 16px;
  font-weight: var(--w-semi);
  font-size: 18px;
  line-height: 26px;
  color: var(--art-ink);
}
.art-prose h4 + *,
.art-prose h5 + * { margin-top: 0; }

/* IN-ARTICLE CTA. 98 posts style .button-link from an embed whose fill is
   var(--soft-blue), a Webflow variable this site never defined: the button
   painted white text on the light page and simply vanished. The other posts
   carry the same markup with no embed at all and showed a bare underlined
   link. Both now draw as the article's own lime button. white-space:nowrap
   from the embed also pushed long labels past a phone's edge, so it wraps. */
.art-prose .button-wrapper { display: flex; justify-content: center; }
.art-prose .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 56px;
  padding: 16px 32px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--af-lime);
  background-image: none;
  color: var(--af-ink-teal);
  font-weight: var(--w-semi);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.48px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  box-shadow: 2px 14px 24px 0 rgba(38,63,66,.12);
}

/* FAQ ACCORDION (60 posts). Webflow shipped the markup, a button per question
   and a .panel per answer, but neither the styling nor the script came across,
   so each question drew as a grey browser button. atlas-article.js adds
   .art-acc to <html> before it collapses anything, so with no JS every
   answer simply stays open. */
.art-prose .faq-accordion { display: flex; flex-direction: column; gap: 12px; }
.art-prose .accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  border-radius: var(--r-24);
  background: var(--art-author);
  color: var(--art-ink);
  font: inherit;
  font-weight: var(--w-semi);
  text-align: left;
  cursor: pointer;
}
.art-prose .accordion::after {
  content: "+";
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--art-link);
}
.art-prose .accordion[aria-expanded="true"]::after { content: "\2212"; }
.art-prose .panel { padding: 4px 24px 8px; }
.art-acc .art-prose .panel[hidden] { display: none; }

/* the author's name and the byline link to /author/<slug>, as on Webflow;
   they read as the name, not as an inline prose link */
.art-prose .art-author__name a,
.art-meta__item a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .art-prose .art-author__name a:hover,
  .art-meta__item a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ------------------------------------------------------------- author card
   650:127274 — 884x184, #FBFBFB, r32, pad 24, gap 24 */
.art-author {
  margin-top: var(--art-block);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: var(--r-32);
  background: var(--art-author);
  box-shadow: 13px 35px 41px 0 rgba(0,31,24,.07);
}
.art-author__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.art-author__who { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.art-author__pic { width: 64px; height: 64px; border-radius: var(--r-12); object-fit: cover; flex: none; display: block; }
.art-author__name {
  margin: 0 0 6px;
  font-weight: var(--w-medium);
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.6px;
  color: var(--art-ink);
}
/* 650:127282 — role chip, r57, 4/8 pad.
   DECLARED DEVIATION. The drawn fill is
     linear-gradient(73.7deg, #053F3B 0%, rgba(5,63,59,.79) 59.83%, #FFF 100%)
   — a dark teal plate — under #0D0D0D text, which is ~1.5:1 and unreadable.
   The plate is inverted to a light tint of the same hue so the drawn ink can
   stay. Raise with design if the dark plate was intended, in which case the
   label needs to become white. */
.art-author__role {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 57px;
  background: linear-gradient(73.7deg, rgba(5,63,59,.10) 0%, rgba(5,63,59,.06) 59.83%, rgba(255,255,255,.4) 100%);
  font-weight: var(--w-medium);
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.42px;
  color: var(--art-ink);
}
/* node opacity .8 sits on the text and the icon, not on the plate; the SVG
   already carries its own .8, so nothing is applied to the image here */
.art-author__role { opacity: .8; }
.art-author__role img { width: 16px; height: 16px; flex: none; display: block; }
/* 650:127292 — Read Bio, 49 tall, r28, DM Sans 600/16, and NO shadow */
.art-author__bio {
  height: 49px;
  padding: 14px 20px;
  border-radius: var(--r-28);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 20.8px;
  letter-spacing: -0.48px;
  box-shadow: none;
  flex: none;
  white-space: nowrap;
}
.art-author__blurb {
  margin: 0;
  font-weight: var(--w-medium);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.48px;
  color: var(--art-ink);
  opacity: .8;
}

/* ===========================================================================
   BAND 3 — "Read more below".  650:127297, 1512x502, pad 0 40, gap 40
   This band POSITIONS content, so it is a fixed 1512 stage kept centred, not a
   full-bleed background: letting it stretch would drag the 40px gutter with it
   and the cards would stop lining up with the 1206 column above.
   ======================================================================== */
.art-more {
  width: 1512px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.art-more__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 64px;
  margin-bottom: 40px;
}
/* 650:127299 — 510 / 64 / 64 / -1.92, two-tone gradient ink */
.art-more__h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -1.92px;
  background: linear-gradient(159.2deg, #0D0D0D 0%, #CECECE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
/* 650:127300 — two 49px round buttons, gap 13 */
.art-nav { display: flex; flex-direction: row; align-items: center; gap: 13px; flex: none; }
.art-nav button {
  width: 49px;
  height: 49px;
  border-radius: var(--r-50);
  background: rgba(38,63,66,.08);
  border: 1px solid rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--t-fast) var(--e-out),
              opacity var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.art-nav button[disabled] { opacity: .4; cursor: default; }
.art-nav button img { width: 10px; height: 15px; display: block; }  /* 8x13 ink + 2px stroke */
.art-nav__prev img { transform: scaleX(-1); }

/* 650:127305 — card rail, gap 16. Four 390 cards overflow 1432 by design; the
   prev/next buttons above are what that overflow is for.

   REUSE. The card itself is the SAME Figma component the blog index ships
   (650:125841 -> .afxbg-card in atlas-blog2-grid.css), so the article page
   loads that file rather than growing a second implementation. Only the rail
   is new here — the index lays the same cards out on a grid, and its
   max-width:1512 rule relaxes the card to width:auto for that grid, which on a
   flex rail would resolve to max-content. The drawn width is restated here. */
.art-rail {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* the rail runs out to the frame edge, not the 40px gutter — that is what
     clips the fourth card mid-way in the design */
  margin-right: -40px;
  padding-right: 40px;
}
.art-rail::-webkit-scrollbar { display: none; }
.art-rail .afxbg-card { flex: none; width: 390px; }
.art-rail .afxbg-card__media,
.art-rail .afxbg-card__body { width: 382px; }

/* ===========================================================================
   BETWEEN THE TWO DRAWN WIDTHS
   The design exists at 1512 and 393 only. Everything above 1512 is a centred
   stage; everything below it has to become fluid or the fixed 1206 / 1512
   boxes overflow. Fluid, not clipped: a clipped column silently loses the
   right-hand end of every line.
   ======================================================================== */
@media (max-width: 1512px) {
  .art-col   { width: auto; max-width: 100%; padding: 0 40px; box-sizing: border-box; }
  .art-hero  { width: 100%; height: auto; aspect-ratio: 1206 / 450; }
  .art-prose { width: auto; }
  .art-more  { width: auto; max-width: 100%; }
  .art-head__main,
  .art-head__stack { width: auto; max-width: 100%; min-width: 0; }
  /* The base rule is `flex: none`, so with width:auto the header sized to
     the max-content of its dek, one unwrapped line, and pushed the page up to
     365px wider than the screen on every post from 820 to 1512 (measured
     12 Oct 2026; /post/pay-after-you-pass-prop-firm, the top post, included).
     Let it shrink to the space left beside the sidebar instead. */
  .art-head__main { flex: 1 1 auto; }
  .art-h1, .art-dek { width: auto; }
  .art-figrow img { width: auto; }
}
@media (max-width: 1100px) {
  /* the 290 sidebar plus a 884 column no longer fit; the TOC goes full width
     above the prose, as it does on the mobile frame */
  /* stretch, not the row's flex-start: in a column flex-start shrink-wraps
     the prose to its widest child, so a wide comparison table widened the
     page (235px at 820 on /post/cheapest-prop-firms) instead of scrolling in
     its own wrapper. The <=767 block below already says the same. */
  .art-body { flex-direction: column; align-items: stretch; }
  .art-side { position: static; width: auto; }
  .art-side__stack { flex-direction: row; gap: 16px; }
  .art-side__stack > * { flex: 1 1 0; }
}

/* ===========================================================================
   MOBILE — Figma 650:127438, 393 wide.
   Column is 345 wide inside 24px gutters; block gap 40, section gap 60.
   ======================================================================== */
@media (max-width: 760px) {
  .art { --art-block: 40px; }            /* 650:127537 itemSpacing */

  .art-top { padding-bottom: 99px; }     /* 650:127609 ends 6612 of 6711 */
  .art-top__glow { left: -549px; margin-left: 0; top: -35px; }
  .art-top__overlay { left: 0; right: 0; width: auto; min-width: 0; height: 1428px; }

  .art-col { padding: 0 24px; gap: 40px; }
  .art-top .art-col { margin-top: 60px; }

  /* 650:127463 — header stack goes vertical, gap 32 */
  .art-head { flex-direction: column; gap: 32px; }
  /* 650:127469 — VERTICAL, gap 16: the pill sits above the three items */
  .art-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .art-head__stack { gap: 16px; }

  /* 650:127507 — 510 / 42 / 46.2 / -1.26 */
  .art-h1 { font-size: 42px; line-height: 46.2px; letter-spacing: -1.26px; }
  /* 650:127508 — 400 / 18 / 23.8 / -0.54 */
  .art-dek { font-size: 18px; line-height: 23.8px; letter-spacing: -0.54px; }

  /* 650:127509 — 345x242 */
  .art-hero { aspect-ratio: 345 / 242; }

  /* The sidebar does not exist on mobile: 650:127446 runs
        TOC card -> prose -> author card -> share card -> CTA
     as one 345 column. display:contents flattens the two sidebar wrappers so
     the four pieces can be ordered into that sequence; the author card rides
     along inside .art-prose, where it is already last. */
  /* align-items:flex-start is right for the desktop ROW, but in a column it
     makes every child shrink-wrap to its max-content width, so anything wide
     inside the prose (a comparison table) widens the page instead of scrolling
     inside its own wrapper. */
  .art-body { flex-direction: column; align-items: stretch; gap: 40px; padding-bottom: 80px; }
  .art-side,
  .art-side__stack { display: contents; }
  .art-card--toc   { order: 1; }
  .art-prose       { order: 2; }
  .art-card--share { order: 3; }
  .art-side > .art-btn { order: 4; margin-top: -8px; }   /* 650:127586 gap is 32 */

  .art-prose { font-size: 18px; line-height: 23.8px; letter-spacing: -0.18px; }
  .art-prose h3 { font-size: 18px; line-height: 27px; letter-spacing: -0.18px; }
  .art-prose blockquote { font-size: 18px; line-height: 23.8px; letter-spacing: -0.36px; }
  /* 650:127562 — 510 / 24 / 31.7 / -0.24 */
  .art-prose .art-kicker { font-size: 24px; line-height: 31.7px; letter-spacing: -0.24px; }

  /* 650:127555 — the pair stacks, gap 16, each 345x300 */
  .art-figrow { flex-direction: column; }
  .art-figrow img { width: 100%; flex: none; }

  /* 650:127563 — who row, then blurb, then a full-width 49px button */
  .art-author__row { display: contents; }
  .art-author__who   { order: 1; }
  .art-author__blurb { order: 2; }
  .art-author__bio   { order: 3; width: 100%; }

  /* 650:127609 — read-more band, pad 0 24, gap 24; arrows drop below the h2 */
  .art-more { padding: 0 24px; }
  .art-more__head { flex-direction: column; align-items: flex-start; gap: 16px; height: auto; margin-bottom: 24px; }
  .art-more__h2 { font-size: 32px; line-height: 32px; letter-spacing: -0.96px; white-space: normal; }
  .art-nav { gap: 8px; }                                  /* 650:127612 */
  .art-rail { margin: 0 -24px; padding: 0 24px; }
  .art-rail .afxbg-card { width: 342px; }
  .art-rail .afxbg-card__media,
  .art-rail .afxbg-card__body { width: 334px; }
}

/* ------------------------------------------------------------------- hover
   Behind a pointer query so a tap does not leave a stuck hover state. */
@media (hover: hover) and (pointer: fine) {
  .art-back:hover { background: var(--w-14); }
  .art-toc a:hover { background: var(--art-ink-05); opacity: .85; }
  .art-toc a[aria-current="true"]:hover { background: var(--af-pale); opacity: 1; }
  .art-share a:hover { background: rgba(13,13,13,.09); }
  .art-btn:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); }
  .art-author__bio:hover { box-shadow: 0 6px 14px 0 rgba(38,63,66,.16); }
  .art-prose a:hover { opacity: .75; }
  .art-nav button:not([disabled]):hover { background: rgba(38,63,66,.16); }
}

/* press feedback on everything clickable — the acknowledgement is local, so it
   lands instantly even when the navigation behind it is slow */
.art-back:active,
.art-btn:active,
.art-cat:active,
.art-toc a:active,
.art-share a:active,
.art-nav button:not([disabled]):active { transform: translateY(1px) scale(.985); }
.art-cat { transition: background-color var(--t-fast) var(--e-out),
                       transform var(--t-instant) var(--e-out); }

/* keyboard focus. Teal on the light page; the lime ring is reserved for the
   dark hero, where teal would disappear — and lime on #F0F2F5 is 1.02:1, so
   this must not be scoped to the whole .art-top section. */
.art :focus-visible {
  outline: 2px solid var(--art-link);
  outline-offset: 2px;
  border-radius: 6px;
}
.art-top > .afx-bar :focus-visible,
.art-top > .afx-nav :focus-visible,
.art-top > .afx-mnav :focus-visible,
.art-top .art-head :focus-visible {
  outline-color: var(--af-lime);
}


/* ---------------------------------------------------------------------------
   MOBILE PERFORMANCE, 3 Aug 2026
   This decorative glow carries filter: blur(258px) over a box ~1693x956. Blur
   cost is O(area x radius), so on a phone GPU it is one of the most expensive
   things on the page — and because it sits in the backdrop root, anything that
   samples the backdrop (the mobile menu's overlay) had to resolve it first,
   which took ~15s. A 258px-blurred solid ellipse is, visually, a radial
   gradient; below 768 it is drawn as one, for nothing.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .art-top__glow {
    filter: none;
    background: radial-gradient(closest-side, #051F1D 0%, rgba(5,31,29,0) 100%);
  }
}