/* =========================================================
   Teardown article: Figma Dev Handoff › Blog / Teardown CMS (1092:21918)
   Loaded after teardowns.css (shares the featured hero and Insight cards).
   1440 base · ≥1680 (1920 frame) · ≤1199 (834 frame) · ≤699 (390 frame)
   ========================================================= */

@media (prefers-reduced-motion: no-preference) { html:has(.art-page) { scroll-behavior: smooth; } }

/* ---------- Hero ---------- */
.art-top { padding: 31px 40px; gap: 46px; }
.feat--article { gap: 17px; }
.art-hero { gap: 32px; }
.art-hero__crumb { font-size: 12px; font-weight: 500; line-height: 1.5; color: #f2f2ec; }
.art-hero__crumb span { color: rgba(242, 242, 236, .5); }
.art-hero__crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.art-hero__title { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.art-hero__meta { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 500; line-height: 1.5; color: #f2f2ec; }
.art-hero__meta i { width: 4px; height: 4px; border-radius: 50%; background: #f2f2ec; }
.art-hero__updated { position: relative; z-index: 2; font-size: 12px; font-weight: 500; line-height: 1.5; color: #ddd3b9; opacity: .7; }

/* ---------- Body frame: lines top/bottom (outer) and left/right (inner) ---------- */
.art { padding: 0 40px; box-shadow: inset 0 1px #b5aa7d, inset 0 -1px #b5aa7d; }
.art__main { display: grid; grid-template-columns: minmax(220px, 268px) minmax(0, 1fr) minmax(148px, 176px); align-items: start; gap: 40px; padding: 40px; box-shadow: inset 1px 0 #b5aa7d, inset -1px 0 #b5aa7d; }

/* Author sticks on the left. Index sticks on the right. */
.art__side { position: sticky; top: var(--gnav-space, 24px); width: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.art__toc { position: sticky; top: var(--gnav-space, 24px); }
.art-index {
  --grain: .08;
  width: 100%; padding: 12px 12px 14px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(143.2deg, #0e4887 26.18%, #0c265f 109.64%);
  color: #fff; font-size: 13px; line-height: 1.35;
}
.art-index > * { position: relative; z-index: 1; }
.art-index__label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.art-index__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.art-index__list a { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; opacity: .5; transition: opacity .35s var(--ease); }
.art-index__list a span:first-child { font-weight: 500; }
.art-index__list a:hover, .art-index__list a.is-active { opacity: 1; }

.art-author {
  --grain: .08;
  width: 100%; padding: 24px; border-radius: 12px; overflow: hidden;
  background: #e2d6bb;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.art-author > * { position: relative; z-index: 1; }
.art-author__label { font-size: 20px; font-weight: 500; line-height: 1.5; color: rgba(32, 30, 20, .49); }
.art-author__name { display: flex; align-items: center; gap: 12px; }
.art-author__name img { width: 42px; height: 42px; border-radius: 32px; object-fit: cover; flex: none; }
.art-author__name div { display: flex; flex-direction: column; gap: 4px; font-weight: 500; color: var(--ink); opacity: .7; white-space: nowrap; }
.art-author__who { font-size: 24px; line-height: 1.2; letter-spacing: -.04em; }
.art-author__role { font-size: 16px; line-height: 1.5; }
.art-author__bio { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 500; line-height: 1.5; }
.art-author__bio p:first-child { color: var(--ink); opacity: .7; }
.art-author__bio p:last-child { color: rgba(32, 30, 20, .49); }

.art-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.art-connect__label { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--ink); opacity: .7; }
.art-connect__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.art-connect__links a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 32px;
  box-shadow: inset 0 0 0 1px rgba(109, 95, 38, .35); color: #6d5f26; font-size: 14px; font-weight: 500; line-height: 1;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.art-connect__links a:hover { background: rgba(109, 95, 38, .1); box-shadow: inset 0 0 0 1px rgba(109, 95, 38, .6); }
.art-connect__links img { width: 16px; height: 16px; }

/* ---------- Text column ----------
   One spacing scale: 1em between blocks in the text, larger steps for sub-headings, quotes and images,
   16px from a section heading to its text, and ~2x the paragraph gap (as seen, including line spacing) between sections.
   Resets are wrapped in :where() so they never outrank the flow rule. */
.art__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
/* Desktop: the column has one measure (about 75 characters), centred between the author card and the index, so the
   summary card, headings and paragraphs share the same edges at every width instead of the text stopping short. */
@media (min-width: 1200px) { .art__text { width: 100%; max-width: 720px; justify-self: center; } }
.art-sec { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; scroll-margin-top: 24px; }
.art-sec__label + .art-sec__title { margin-top: -8px; }
/* Summary: a sand card (like the author card) with the brand star beside its label. */
.art-sec--summary { --grain: .08; overflow: hidden; padding: 32px; border-radius: 12px; background: #e2d6bb; }
.art-sec--summary > * { position: relative; z-index: 1; }
.art-sec--summary .art-sec__label { display: flex; align-items: center; gap: 12px; }
.art-sec__star { flex: none; width: .5em; height: .72em; color: var(--blue-700); }
.art-sec__label { display: block; max-width: 22em; font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); }
.art-sec__title { max-width: 28em; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.art-sec__body { width: 100%; max-width: none; font-size: 18px; font-weight: 400; line-height: 1.6; color: var(--ink); }
:where(.art-sec__body) :where(p, ul, ol, h3, h4, blockquote, img, figure) { margin: 0; }
.art-sec__body > * + * { margin-top: 1em; }
.art-sec__body > :is(h3, h4) { margin-top: 32px; }
.art-sec__body > :is(h3, h4) + * { margin-top: .5em; }
.art-sec__body > :is(blockquote, img, figure),
.art-sec__body > :is(blockquote, img, figure) + * { margin-top: 1.5em; }
.art-sec__body > :first-child { margin-top: 0; }
.art-sec__body ul, .art-sec__body ol { padding-left: 24px; }
.art-sec__body ul { list-style: none; }
.art-sec__body ul li { position: relative; }
.art-sec__body li + li { margin-top: .5em; }
.art-sec__body ul li::before { content: "·"; position: absolute; left: -16px; width: 8px; text-align: center; }
.art-sec__body ol { list-style: decimal; }
.art-sec__body a { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
.art-sec__body strong { font-weight: 600; }
.art-sec__body h3 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.art-sec__body h4 { font-size: 1em; font-weight: 600; }
.art-sec__body img { max-width: 100%; height: auto; border-radius: 12px; }
/* Quote callout (Figma "Quote"): 7px blue bar, 24px text */
.art-sec__body blockquote {
  display: flex; padding: 16px 0 16px 28px; max-width: 796px;
  background: linear-gradient(var(--blue-700), var(--blue-700)) 0 0 / 7px 100% no-repeat;
}
.art-sec__body blockquote p { max-width: 611px; font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -.03em; color: rgba(32, 30, 20, .7); }
.art-sec__body blockquote strong { font-weight: 500; color: var(--ink); }

/* ---------- FAQ (shared component, Figma paddings for this page) ---------- */
.art-page .faq { padding: 80px 40px; }

/* ---------- Read next ---------- */
.rn { display: flex; flex-direction: column; gap: 48px; padding: 80px 40px; overflow: hidden; }
.rn__title { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: #18181b; }
.rn__track {
  display: flex; gap: 24px; margin-right: -40px; padding-right: 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.rn__track::-webkit-scrollbar { display: none; }
.rn__track > .card { flex: 0 0 628px; scroll-snap-align: start; }
.rn__track:focus { outline: none; }
.rn__nav { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rn__arrow { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 32px; background: var(--blue-700); transition: background-color .25s var(--ease), opacity .25s var(--ease); }
.rn__arrow:hover { background: var(--blue-900); }
.rn__arrow:disabled { opacity: .4; cursor: default; }
.rn__all-m { display: none; }

/* =========================================================
   ≥1680 · Desktop 1920 frame
   ========================================================= */
@media (min-width: 1680px) {
  .art-top { padding: 31px 80px; }
  .feat--article .feat__copy { width: 858px; gap: 32px; }
  .feat--article .feat__eyebrow, .feat--article .feat__title { margin-bottom: 0; }
  .feat--article .feat__img { top: 343px; width: 1898px; height: 740px; }
  .art-hero__crumb, .art-hero__updated { font-size: 14px; }
  .art-hero__meta { font-size: 24px; }

  .art { padding: 0 80px; }
  .art__main { grid-template-columns: 300px minmax(0, 1fr) 180px; }
  .art__side { width: auto; flex-basis: auto; }
  .art-index { font-size: 13px; }
  .art-author__label { font-size: 24px; }
  .art-author__bio { font-size: 18px; }
  .art-connect__label { font-size: 14px; }
  .art-author__who { font-size: 28px; }
  .art-author__role { font-size: 20px; }
  .art__cta { font-size: 20px; }
  .art__text { gap: 56px; max-width: 800px; }
  .art-sec { gap: 20px; }
  .art-sec__label + .art-sec__title { margin-top: -10px; }
  .art-sec__label { font-size: 40px; }
  .art-sec__title { font-size: 24px; }
  .art-sec__body { font-size: 20px; }
  .art-sec__body h3 { font-size: 24px; }
  .art-sec__body blockquote p { font-size: 24px; }

  .rn { padding: 80px; }
  .rn__track { margin-right: -80px; padding-right: 80px; }
  .rn__title { font-size: 48px; }
  .rn__all { font-size: 20px; }
}

/* =========================================================
   ≤1199 · Tablet 834 frame
   ========================================================= */
@media (max-width: 1199px) {
  .art-top { padding: 31px 40px; gap: 46px; }
  .feat--article { height: 541px; gap: 32px; }
  .feat--article .feat__copy { gap: 24px; }
  .feat--article .feat__eyebrow { font-size: 20px; font-weight: 400; }
  .feat--article .feat__title { font-weight: 600; line-height: 1; }
  .feat--article .feat__img { top: 354px; }

  .art__main { display: flex; flex-direction: column; align-items: stretch; }
  .art__text { gap: 44px; }
  .art__side { position: static; width: 100%; flex: none; }
  .art__toc, .art-index { display: none; }
  .art-author__bio { width: 100%; }

  /* Article tablet FAQ (Figma): left-aligned 40px title, full-width questions, open pair inset 40px */
  .art-page .faq { padding: 80px 40px; align-items: stretch; }
  .art-page .faq__title { font-size: 40px; text-align: left; white-space: normal; }
  .art-page .q { width: 100%; }
  .art-page .qa.is-open .q, .art-page .a { width: auto; max-width: none; margin: 0 40px; }
  .art-page .q::before, .art-page .a::after { display: none; }

  .rn__track { flex-direction: column; margin-right: 0; padding-right: 0; overflow: visible; scroll-snap-type: none; }
  .rn__track > .card { flex: none; }
  .rn__track > .card[hidden] { display: none; }
}

/* =========================================================
   ≤699 · Mobile 390 frame
   ========================================================= */
@media (max-width: 699px) {
  .art-top { padding: 20px; gap: 24px; }
  .feat--article { height: 558px; gap: 17px; padding: 20px; }
  .feat--article .feat__copy { gap: 24px; }
  .art-hero__crumb { font-size: 10px; margin-bottom: -7px; }
  .art-hero__title { gap: 24px; }
  .feat--article .feat__eyebrow { font-size: 16px; }
  .feat--article .feat__title { font-size: 32px; font-weight: 500; }
  .art-hero__meta { font-size: 16px; }
  .art-hero__updated { font-size: 10px; margin-top: 7px; }
  .feat--article .feat__img { left: -250px; top: 325px; width: 850px; height: 331px; object-position: 50% 50%; }

  .art { padding: 0; }
  .art__main { gap: 24px; padding: 40px 20px; box-shadow: none; }
  .art-author__label { font-size: 16px; }
  .art-author__who { font-size: 18px; }
  .art-author__role { font-size: 14px; }
  .art-author__bio { font-size: 16px; }
  .art-connect__label { font-size: 12px; }
  .art__cta { align-self: stretch; }
  .art__text { gap: 36px; }
  .art-sec { gap: 14px; }
  .art-sec--summary { padding: 24px 20px; }
  .art-sec__label + .art-sec__title { margin-top: -6px; }
  .art-sec__label { font-size: 26px; }
  .art-sec__title { font-size: 18px; }
  .art-sec__body { font-size: 16px; }
  .art-sec__body > :is(h3, h4) { margin-top: 26px; }
  .art-sec__body blockquote { gap: 12px; padding-left: 19px; }
  .art-sec__body blockquote p { font-size: 18px; }

  .art-page .faq { padding: 40px 21px; align-items: center; }
  .art-page .faq__title { font-size: 36px; text-align: center; }
  .art-page .qa.is-open .q, .art-page .a { margin: 0; width: 100%; }
  .art-page .q::before, .art-page .a::after { display: block; }

  .rn { padding: 40px 20px; gap: 24px; }
  .rn__title { font-size: 28px; }
  .rn__arrow { display: none; }
  .rn__all { align-self: stretch; flex: 1; }
  .rn__all-d { display: none; }
  .rn__all-m { display: inline; }
}