/* article.css — blog article pages (/blogs/<slug>).
   Built only from the tokens in tokens.css / DESIGN-SYSTEM.md. */

@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/_assets/fonts.gstatic.com/s/fustat/v4/NaPZcZ_aHO9Iy5tLSPJC.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/_assets/fonts.gstatic.com/s/fustat/v4/NaPZcZ_aHO9Iy5tLRvJCkyo.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --sk-bg: #000000;
  --sk-surface: #1F1F1F;
  --sk-surface-2: #262626;
  --sk-surface-3: #404040;
  --sk-ink: #FFFFFF;
  --sk-ink-2: #EDEDED;
  --sk-ink-3: #9BA3AB;
  --sk-violet: #C77DFF;
  --sk-violet-deep: #AD3BFF;
  --sk-display: 'Fustat', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --sk-ui: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --sk-r-card: 20px;
  --sk-r-pill: 999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--sk-bg);
  color: var(--sk-ink);
  font-family: var(--sk-ui);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* The nav is Framer's own markup with Framer's own rules in nav.css, which
   loads first — so a bare `a` rule here would win and repaint its links violet.
   Scoped away from it rather than fighting it with !important. */
a:not(.sk-nav a) { color: var(--sk-violet); text-decoration: none; }
a:not(.sk-nav a):hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--sk-violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.sk-wrap {
  max-width: 760px;
  margin: 0 auto;
  /* 115px clears the fixed nav band so the breadcrumb starts below the pill
     instead of underneath it. */
  padding: 115px 30px 80px;
}

/* ---- top bar ---- */
.sk-topbar {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 30px 0;
}
.sk-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sk-ink);
  font-size: 14px;
  font-weight: 400;
  min-height: 44px;
}
.sk-topbar a:hover { color: var(--sk-violet); text-decoration: none; }
.sk-topbar img {
  width: 34px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ---- banner ---- */
.sk-banner {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sk-r-card);
  margin: 10px 0 30px;
}

/* ---- header ---- */
.sk-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sk-violet);
  margin-bottom: 15px;
}
h1 {
  font-family: var(--sk-display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
.sk-subtitle {
  color: var(--sk-ink-3);
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 30px;
}

/* ---- body ---- */
article { max-width: 68ch; }
article h2 {
  font-family: var(--sk-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin: 50px 0 15px;
}
article h3 {
  font-family: var(--sk-ui);
  font-size: 20px;
  font-weight: 600;
  margin: 30px 0 10px;
}
article p { margin: 0 0 20px; }
article ul, article ol { margin: 0 0 20px; padding-left: 24px; }
article li { margin-bottom: 8px; }
article strong { font-weight: 600; color: var(--sk-ink); }
article blockquote {
  background: var(--sk-surface);
  border-left: 3px solid var(--sk-violet);
  border-radius: 0 var(--sk-r-card) var(--sk-r-card) 0;
  padding: 20px 30px;
  margin: 0 0 20px;
  color: var(--sk-ink-2);
}
article blockquote p:last-child { margin-bottom: 0; }
article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 400;
}
article th, article td {
  text-align: left;
  padding: 12px 15px;
  border-bottom: 1px solid var(--sk-surface-3);
  vertical-align: top;
}
article th {
  color: var(--sk-violet);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sk-table-scroll { overflow-x: auto; }

/* ---- PDF button ---- */
.sk-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-3);
  border-radius: var(--sk-r-pill);
  color: var(--sk-ink);
  font-family: var(--sk-ui);
  font-size: 14px;
  font-weight: 400;
  padding: 13px 28px;
  min-height: 44px;
  margin: 30px 0 0;
}
.sk-pdf-btn:hover {
  background: var(--sk-surface-2);
  border-color: var(--sk-violet);
  text-decoration: none;
}

/* ---- footer ----------------------------------------------------------------
 * Hit-tested off the real footer on /blogs rather than read from the first
 * matching node: Framer keeps hidden SSR copies of every breakpoint in the DOM,
 * and querying by text hands you a mobile variant whose computed size is about
 * half the painted one. Everything below is the painted value.
 *
 *                >= 810px      < 810px
 *   sign-off     43 / 800      22 / 800
 *   sub-line     28 / 300      15 / 300
 *   contacts     21 / 300      16 / 300     letter-spacing 1.05px / 0.8px
 *   colophon     18 / 400      12 / 400     one line
 *   memoji       118 square    118 square
 *
 * The wash has to reach the window edges, so the footer sits OUTSIDE .sk-wrap
 * in the markup — .sk-wrap caps the reading measure at 760px, and a gradient
 * clipped to that leaves two hard vertical seams.
 */
.sk-footer {
  padding: 56px 20px 64px;
  text-align: center;
  background: linear-gradient(
    rgba(0, 0, 0, 0) 36%,
    rgba(99, 30, 148, 0.57) 61%,
    rgb(163, 33, 255) 100%
  );
}
.sk-footer-inner { max-width: 1152px; margin: 0 auto; }
.sk-footer-memoji {
  width: 118px;
  height: 118px;
  margin: 0 auto 10px;
  display: block;
}
.sk-footer-sign {
  margin: 0;
  font-size: 43px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--sk-ink);
}
.sk-footer-sub {
  margin: 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--sk-ink);
}
.sk-footer-contact {
  margin: 0 auto;
  padding-top: 46px;
  max-width: 950px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.sk-footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* 44px tap target from padding alone, so nothing reflows at any width. */
  min-height: 47px;
  padding: 0 6px;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: 1.05px;
  line-height: 1.2;
  color: var(--sk-ink);
  text-decoration: none;
}
.sk-footer-contact a:hover,
.sk-footer-contact a:focus-visible { color: var(--sk-violet); text-decoration: none; }
.sk-footer-contact svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: currentColor;
}
.sk-footer-colophon {
  margin: 42px 0 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.9px;
  line-height: 1.2;
  color: var(--sk-ink);
}

/* The nav band, the footer embed and Lenis's own rules moved to
 * /_sk/frames.css so /blogs can use the same embeds without also
 * inheriting this file's article typography. Link both. */

/* ---- sources ---------------------------------------------------------------
 * Every post declares what its figures were checked against and when. It sits
 * after the article rather than inside it, so it is visible to the reader and
 * to anyone deciding whether to trust a number, without counting against the
 * post's word budget. */
.sk-sources {
  margin: 48px 0 0;
  padding: 22px 24px;
  background: var(--sk-surface, #1F1F1F);
  border-radius: var(--sk-r-card, 20px);
}
.sk-sources h2 {
  font-family: var(--sk-display, Fustat), sans-serif;
  font-size: 18px; font-weight: 800; margin: 0 0 4px;
  color: var(--sk-violet, #C77DFF);
}
.sk-sources p {
  margin: 0 0 12px; font-size: 13px; color: var(--sk-ink-3, #9BA3AB);
}
.sk-sources ul { margin: 0; padding-left: 18px; }
.sk-sources li { margin: 0 0 6px; font-size: 15px; }
.sk-sources a { color: var(--sk-ink-2, #EDEDED); text-underline-offset: 3px; }
.sk-sources a:hover { color: var(--sk-violet, #C77DFF); }