/* ============================================================================
   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, FILL (= object-fit cover) */
.art-prose img {
  display: block;
  max-width: 100%;
  border-radius: var(--r-32);
}
/* the drawn band image is 884x300. aspect-ratio rather than a hard height, so
   a pasted portrait image is letterboxed to the band rather than silently
   stretched, and the rule still holds when the column narrows. */
.art-prose > img { width: 100%; aspect-ratio: 884 / 300; object-fit: cover; }

/* 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; }
.art-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 24px;
}
.art-prose th,
.art-prose td { padding: 12px 16px; text-align: left; 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); }

/* ------------------------------------------------------------- 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; }
  .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 */
  .art-body { flex-direction: column; }
  .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%);
  }
}