/*
 * Rexclick typography layer based on Apple Newsroom's May 2026 article system.
 * Uses the operating system's SF Pro faces where available and Apple's public
 * fallback order elsewhere; no Apple-hosted font files are copied or hotlinked.
 */
:root {
  --rex-font-display: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rex-font-text: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rex-type-ink: #1d1d1f;
  --rex-type-secondary: #6e6e73;
  --rex-display: var(--rex-font-display);
}

html {
  font-size: 100%;
  font-synthesis: none;
  text-size-adjust: 100%;
}

body.rexclick-body {
  color: var(--rex-type-ink);
  font-family: var(--rex-font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -.374px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.rexclick-body button,
body.rexclick-body input,
body.rexclick-body select,
body.rexclick-body textarea {
  font-family: var(--rex-font-text);
  letter-spacing: -.374px;
}

body.rexclick-body h1,
body.rexclick-body h2,
body.rexclick-body h3,
body.rexclick-body h4,
body.rexclick-body h5,
body.rexclick-body h6,
body.rexclick-body .entry-title,
body.rexclick-body .pillar-name {
  color: var(--rex-type-ink);
  font-family: var(--rex-font-display);
  font-style: normal;
  text-wrap: balance;
}

/* Apple Newsroom desktop display hierarchy. */
body.rexclick-body h1,
.home-hero h1,
.article-hero h1,
.search-platform-hero h1,
.author-platform-grid h1,
.cart-empty-state h1,
.checkout-unavailable-state h1,
.articles-page .articles-hero h1,
.tools-page .tools-hero h1,
.store-collection-header h1,
.generic-page-content .page-title-header .entry-title {
  font-size: 56px !important;
  font-weight: 700;
  line-height: 60px !important;
  letter-spacing: -.28px !important;
}

body.rexclick-body h2,
.platform-section-heading h2,
.platform-section-bar h2,
.rexclick-contact-intro h2,
.search-results-heading h2,
.search-empty-state h2 {
  font-size: 40px !important;
  font-weight: 700;
  line-height: 44px !important;
  letter-spacing: 0 !important;
}

body.rexclick-body h3,
.article-card h2,
.editorial-lead-copy h3,
.editorial-list-item h3,
.product-card h2,
.tools-product-body h3,
.search-result-card h3 {
  font-size: 24px !important;
  font-weight: 700;
  line-height: 28px !important;
  letter-spacing: .216px !important;
}

body.rexclick-body h4,
body.rexclick-body h5,
body.rexclick-body h6 {
  font-size: 21px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: .231px;
}

/* Article display, reading copy, section heads, and image captions match the reference. */
.article-hero h1 {
  font-family: var(--rex-font-display);
  font-size: 56px !important;
  font-weight: 700;
  line-height: 60px !important;
  letter-spacing: -.28px !important;
}

.article-deck {
  font-family: var(--rex-font-text);
  font-size: 17px !important;
  font-weight: 400;
  line-height: 25px !important;
  letter-spacing: -.374px !important;
}

.article-content-area .article-body-column,
.article-body-column p,
.article-body-column li,
.generic-page-content .entry-content,
.product-description,
.product-summary {
  font-family: var(--rex-font-display);
  font-size: 19px !important;
  font-weight: 400;
  line-height: 27px !important;
  letter-spacing: .228px !important;
}

.article-body-column h2 {
  margin: 52px 0 16px;
  font-family: var(--rex-font-display);
  font-size: 24px !important;
  font-weight: 700;
  line-height: 28px !important;
  letter-spacing: .216px !important;
}

.article-body-column h3 {
  margin: 44px 0 16px;
  font-family: var(--rex-font-display);
  font-size: 21px !important;
  font-weight: 700;
  line-height: 25px !important;
  letter-spacing: .231px !important;
}

.article-body-column p { margin-bottom: 27px; }

figcaption,
.image-caption,
.entry-content figcaption,
.article-card-meta,
.editorial-meta,
.product-collection,
.shop-kicker,
.platform-kicker,
.article-byline,
.rex-share-label,
.rc-contact-label,
.rc-contact-note,
.tools-product-category,
.home-hero-caption p,
.site-footer,
.site-footer p {
  font-family: var(--rex-font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -.12px;
}

.article-card p,
.editorial-lead-copy > p:not(.editorial-meta),
.editorial-list-item p,
.tools-product-summary,
.product-card-body,
.search-result-card div > p,
.platform-section-heading-split > p:last-child,
.home-hero-lede,
.command-hero-copy > p,
.rc-card p {
  font-family: var(--rex-font-text);
  font-size: 17px !important;
  font-weight: 400;
  line-height: 25px !important;
  letter-spacing: -.374px !important;
}

/* Keep terminal word pairs together, but let oversized pairs wrap rather than
   overflow a narrow article. Server rendering avoids a JS-dependent reflow. */
.article-body-column .article-widow-tail {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-indent: 0;
}

.main-navigation > ul > li > a,
.main-navigation > ul > li > details > summary {
  font-family: var(--rex-font-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  letter-spacing: -.12px !important;
}

.search-popover summary,
.platform-button,
.platform-text-link,
.checkout-button,
.secondary-button,
.cart-add-form button,
.article-read-link,
.editorial-read {
  font-family: var(--rex-font-text) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -.224px;
}

@media (max-width: 1068px) {
  body.rexclick-body h1,
  .home-hero h1,
  .article-hero h1,
  .search-platform-hero h1,
  .author-platform-grid h1,
  .cart-empty-state h1,
  .checkout-unavailable-state h1,
  .articles-page .articles-hero h1,
  .tools-page .tools-hero h1,
  .store-collection-header h1,
  .generic-page-content .page-title-header .entry-title {
    font-size: 48px !important;
    line-height: 52px !important;
    letter-spacing: -.144px !important;
  }

  body.rexclick-body h2,
  .platform-section-heading h2,
  .platform-section-bar h2,
  .rexclick-contact-intro h2,
  .search-results-heading h2,
  .search-empty-state h2 {
    font-size: 32px !important;
    line-height: 36px !important;
    letter-spacing: .128px !important;
  }

  body.rexclick-body h3,
  .article-card h2,
  .editorial-lead-copy h3,
  .editorial-list-item h3,
  .product-card h2,
  .tools-product-body h3,
  .search-result-card h3 {
    font-size: 21px !important;
    line-height: 25px !important;
    letter-spacing: .231px !important;
  }

  .article-content-area .article-body-column,
  .article-body-column p,
  .article-body-column li,
  .generic-page-content .entry-content,
  .product-description,
  .product-summary {
    font-family: var(--rex-font-text);
    font-size: 17px !important;
    line-height: 25px !important;
    letter-spacing: -.374px !important;
  }

  .article-body-column h2 {
    margin-top: 48px;
    font-size: 21px !important;
    line-height: 25px !important;
    letter-spacing: .231px !important;
  }
}

@media (max-width: 734px) {
  body.rexclick-body h1,
  .home-hero h1,
  .article-hero h1,
  .search-platform-hero h1,
  .author-platform-grid h1,
  .cart-empty-state h1,
  .checkout-unavailable-state h1,
  .articles-page .articles-hero h1,
  .tools-page .tools-hero h1,
  .store-collection-header h1,
  .generic-page-content .page-title-header .entry-title {
    font-size: 32px !important;
    line-height: 36px !important;
    letter-spacing: .128px !important;
  }

  body.rexclick-body h2,
  .platform-section-heading h2,
  .platform-section-bar h2,
  .rexclick-contact-intro h2,
  .search-results-heading h2,
  .search-empty-state h2 {
    font-size: 28px !important;
    line-height: 32px !important;
    letter-spacing: .196px !important;
  }

  body.rexclick-body h3,
  .article-card h2,
  .editorial-lead-copy h3,
  .editorial-list-item h3,
  .product-card h2,
  .tools-product-body h3,
  .search-result-card h3,
  .article-body-column h2,
  .article-body-column h3 {
    font-size: 21px !important;
    line-height: 25px !important;
    letter-spacing: .231px !important;
  }
}

/* Apple Newsroom tiles use a compact 21/25 display title at every viewport. */
.article-results .article-card h2 {
  font-family: var(--rex-font-display) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 25px !important;
  letter-spacing: .231px !important;
}

/* Keep the taxonomy label inside its 200–220px sidebar column. */
body.rexclick-body .article-category-sidebar h2 {
  font-family: var(--rex-font-text) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 21px !important;
  letter-spacing: -.374px !important;
}

/* Preserve Apple's compact 12/16 type on Rexclick's dark footer. */
.site-footer {
  background: #091321 !important;
  color: rgba(255, 255, 255, .7) !important;
  font-family: var(--rex-font-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  letter-spacing: -.12px !important;
}

.site-footer .footer-column h2 {
  font-family: var(--rex-font-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  letter-spacing: -.12px !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
}

.site-footer .footer-column a {
  margin: 0 0 8px !important;
  color: rgba(255, 255, 255, .65) !important;
  font-family: var(--rex-font-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  letter-spacing: -.12px !important;
}

.site-footer .footer-column a:hover { color: #fff !important; }
.site-footer .footer-brand p {
  color: rgba(255, 255, 255, .7) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}
.site-footer .footer-bottom {
  color: rgba(255, 255, 255, .64) !important;
  border-top-color: rgba(255, 255, 255, .15) !important;
}