/*
SURVXCOM Magazine Editorial Article Style v3.0
A premium longform journalism layer for SURVXCOM.

Canonical wrapper:
<article class="survxcom-article">

Backward-compatible wrapper:
<article class="survx-article">

Design intent:
- Similar CSS structure to the Current Signal Article Style plugin
- Late-loaded, high-specificity CSS
- Magazine/news typography
- Serif longform body
- Sans-serif metadata and utility modules
- Large first-letter/drop-cap lede
- Keeps editorial modules needed by existing SURVXCOM articles
*/

:root {
  --survxcom-magazine-article-max: 980px;
  --survxcom-magazine-reading-max: 760px;
  --survxcom-magazine-body-size: 19px;

  --survxcom-magazine-text: #111111;
  --survxcom-magazine-heading: #111111;
  --survxcom-magazine-muted: #555555;
  --survxcom-magazine-soft-muted: #777777;
  --survxcom-magazine-rule: #111111;
  --survxcom-magazine-light-rule: #d8d8d8;
  --survxcom-magazine-soft: #faf8f4;
  --survxcom-magazine-briefing: #f7f8fa;
  --survxcom-magazine-affiliate: #fff8ed;
  --survxcom-magazine-link: #111111;
  --survxcom-magazine-blue: #174b88;
}

/* Root editorial island */
html body .survxcom-article,
html body .survx-article,
html body .entry-content .survxcom-article,
html body .entry-content .survx-article,
html body .post-content .survxcom-article,
html body .post-content .survx-article,
html body .wp-block-post-content .survxcom-article,
html body .wp-block-post-content .survx-article,
html body .site-main .survxcom-article,
html body .site-main .survx-article,
html body .content-area .survxcom-article,
html body .content-area .survx-article,
html body article.survxcom-article,
html body article.survx-article {
  display: block !important;
  width: 100% !important;
  max-width: var(--survxcom-magazine-article-max) !important;
  margin: 0 auto !important;
  padding: 38px 42px 70px !important;
  background: #ffffff !important;
  color: var(--survxcom-magazine-text) !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: var(--survxcom-magazine-body-size) !important;
  line-height: 1.78 !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

html body .survxcom-article *,
html body .survxcom-article *::before,
html body .survxcom-article *::after,
html body .survx-article *,
html body .survx-article *::before,
html body .survx-article *::after {
  box-sizing: border-box !important;
}

/* Reading column wrappers */
html body .survxcom-article .survxcom-copy,
html body .survxcom-article .survx-copy,
html body .survx-article .survxcom-copy,
html body .survx-article .survx-copy,
html body .survxcom-article .article-copy,
html body .survx-article .article-copy {
  display: block !important;
  width: 100% !important;
  max-width: var(--survxcom-magazine-reading-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Links */
html body .survxcom-article a,
html body .survx-article a {
  color: var(--survxcom-magazine-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  box-shadow: none !important;
  border: none !important;
}

html body .survxcom-article a:hover,
html body .survx-article a:hover,
html body .survxcom-article a:focus,
html body .survx-article a:focus {
  color: var(--survxcom-magazine-muted) !important;
}

/* Headings */
html body .survxcom-article h1,
html body .survxcom-article h2,
html body .survxcom-article h3,
html body .survxcom-article h4,
html body .survx-article h1,
html body .survx-article h2,
html body .survx-article h3,
html body .survx-article h4 {
  background: transparent !important;
  color: var(--survxcom-magazine-heading) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
}

html body .survxcom-article h1,
html body .survx-article h1 {
  max-width: var(--survxcom-magazine-reading-max) !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: clamp(2.2rem, 5vw, 3.35rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.035em !important;
}

html body .survxcom-article h2,
html body .survx-article h2 {
  margin: 48px 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 24px !important;
  line-height: 1.24 !important;
}

html body .survxcom-article h3,
html body .survx-article h3 {
  margin: 34px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

html body .survxcom-article h4,
html body .survx-article h4 {
  margin: 28px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #333333 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Core paragraphs */
html body .survxcom-article p,
html body .survx-article p {
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--survxcom-magazine-text) !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: var(--survxcom-magazine-body-size) !important;
  line-height: 1.78 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Magazine lede / automatic drop-cap paragraph */
html body .survxcom-article p.survxcom-lede,
html body .survx-article p.survxcom-lede,
html body .survxcom-article p.lede,
html body .survx-article p.lede,
html body .survxcom-article p.survxcom-auto-lede,
html body .survx-article p.survxcom-auto-lede {
  font-size: calc(var(--survxcom-magazine-body-size) + 1px) !important;
  line-height: 1.72 !important;
  margin-bottom: 24px !important;
}

html body .survxcom-article p.survxcom-lede::first-letter,
html body .survx-article p.survxcom-lede::first-letter,
html body .survxcom-article p.lede::first-letter,
html body .survx-article p.lede::first-letter,
html body .survxcom-article p.survxcom-auto-lede::first-letter,
html body .survx-article p.survxcom-auto-lede::first-letter {
  float: left !important;
  color: var(--survxcom-magazine-heading) !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 5.15rem !important;
  line-height: .76 !important;
  font-weight: 800 !important;
  padding: .08em .12em 0 0 !important;
  margin: 0 !important;
}

/* Header metadata */
html body .survxcom-article .kicker,
html body .survx-article .kicker {
  display: block !important;
  max-width: var(--survxcom-magazine-reading-max) !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--survxcom-magazine-heading) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  letter-spacing: .09em !important;
  font-weight: 800 !important;
}

html body .survxcom-article .subtitle,
html body .survxcom-article .dek,
html body .survx-article .subtitle,
html body .survx-article .dek {
  display: block !important;
  max-width: var(--survxcom-magazine-reading-max) !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #222222 !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 23px !important;
  line-height: 1.38 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

html body .survxcom-article .byline,
html body .survx-article .byline {
  display: block !important;
  max-width: var(--survxcom-magazine-reading-max) !important;
  margin: 0 auto 30px !important;
  padding: 0 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--survxcom-magazine-rule) !important;
  background: transparent !important;
  color: var(--survxcom-magazine-muted) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Images and figures */
html body .survxcom-article figure,
html body .survx-article figure,
html body .survxcom-article .survxcom-article-image,
html body .survx-article .survxcom-article-image {
  display: block !important;
  max-width: var(--survxcom-magazine-article-max) !important;
  margin: 30px auto 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .survxcom-article img,
html body .survx-article img {
  max-width: 100% !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .survxcom-article figure img,
html body .survx-article figure img,
html body .survxcom-article .survxcom-article-image img,
html body .survx-article .survxcom-article-image img {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

html body .survxcom-article figcaption,
html body .survx-article figcaption,
html body .survxcom-article .wp-caption-text,
html body .survx-article .wp-caption-text {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--survxcom-magazine-muted) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Lists */
html body .survxcom-article ul,
html body .survxcom-article ol,
html body .survx-article ul,
html body .survx-article ol {
  margin: 0 0 24px 24px !important;
  padding: 0 !important;
  color: var(--survxcom-magazine-text) !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: var(--survxcom-magazine-body-size) !important;
  line-height: 1.72 !important;
}

html body .survxcom-article ul,
html body .survx-article ul {
  list-style: disc !important;
}

html body .survxcom-article ol,
html body .survx-article ol {
  list-style: decimal !important;
}

html body .survxcom-article li,
html body .survx-article li {
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1.62 !important;
}

/* Tables */
html body .survxcom-article table,
html body .survx-article table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 26px 0 32px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  color: #111111 !important;
}

html body .survxcom-article th,
html body .survx-article th {
  background: #111111 !important;
  color: #ffffff !important;
  text-align: left !important;
  padding: 10px 12px !important;
  border: 1px solid #111111 !important;
  font-weight: 800 !important;
}

html body .survxcom-article td,
html body .survx-article td {
  padding: 10px 12px !important;
  border: 1px solid #dddddd !important;
  vertical-align: top !important;
}

html body .survxcom-article tr:nth-child(even) td,
html body .survx-article tr:nth-child(even) td {
  background: #f8f8f8 !important;
}

/* Editorial boxes retained from v2.0, but visually restrained */
html body .survxcom-article .notice,
html body .survxcom-article .box,
html body .survxcom-article .note-box,
html body .survxcom-article .briefing,
html body .survxcom-article .affiliate,
html body .survxcom-article .affiliate-disclosure,
html body .survxcom-article .related-box,
html body .survxcom-article .toc,
html body .survxcom-article .scenario-box,
html body .survxcom-article .source-box,
html body .survxcom-article .final-note,
html body .survxcom-article .outpost-box,
html body .survx-article .notice,
html body .survx-article .box,
html body .survx-article .note-box,
html body .survx-article .briefing,
html body .survx-article .affiliate,
html body .survx-article .affiliate-disclosure,
html body .survx-article .related-box,
html body .survx-article .toc,
html body .survx-article .scenario-box,
html body .survx-article .source-box,
html body .survx-article .final-note,
html body .survx-article .outpost-box {
  display: block !important;
  margin: 32px 0 !important;
  padding: 18px 20px !important;
  border: 1px solid var(--survxcom-magazine-rule) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

html body .survxcom-article .briefing,
html body .survx-article .briefing {
  background: var(--survxcom-magazine-briefing) !important;
}

html body .survxcom-article .affiliate,
html body .survxcom-article .affiliate-disclosure,
html body .survx-article .affiliate,
html body .survx-article .affiliate-disclosure {
  background: var(--survxcom-magazine-affiliate) !important;
  border-color: #d9c09a !important;
  color: #4f3b20 !important;
}

html body .survxcom-article .notice p,
html body .survxcom-article .box p,
html body .survxcom-article .note-box p,
html body .survxcom-article .briefing p,
html body .survxcom-article .affiliate p,
html body .survxcom-article .affiliate-disclosure p,
html body .survxcom-article .related-box p,
html body .survxcom-article .toc p,
html body .survxcom-article .source-box p,
html body .survxcom-article .final-note p,
html body .survx-article .notice p,
html body .survx-article .box p,
html body .survx-article .note-box p,
html body .survx-article .briefing p,
html body .survx-article .affiliate p,
html body .survx-article .affiliate-disclosure p,
html body .survx-article .related-box p,
html body .survx-article .toc p,
html body .survx-article .source-box p,
html body .survx-article .final-note p {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 0 12px !important;
}

html body .survxcom-article .notice p:last-child,
html body .survxcom-article .box p:last-child,
html body .survxcom-article .note-box p:last-child,
html body .survxcom-article .briefing p:last-child,
html body .survxcom-article .affiliate p:last-child,
html body .survxcom-article .affiliate-disclosure p:last-child,
html body .survx-article .notice p:last-child,
html body .survx-article .box p:last-child,
html body .survx-article .note-box p:last-child,
html body .survx-article .briefing p:last-child,
html body .survx-article .affiliate p:last-child,
html body .survx-article .affiliate-disclosure p:last-child {
  margin-bottom: 0 !important;
}

/* Pullquotes */
html body .survxcom-article .pullquote,
html body .survxcom-article .pullbox,
html body .survxcom-article blockquote,
html body .survx-article .pullquote,
html body .survx-article .pullbox,
html body .survx-article blockquote {
  display: block !important;
  margin: 36px 0 !important;
  padding: 18px 0 18px 20px !important;
  border: 0 !important;
  border-left: 4px solid #111111 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #111111 !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 24px !important;
  line-height: 1.42 !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-align: left !important;
}

/* Source / related list typography */
html body .survxcom-article .source-list,
html body .survxcom-article .related-list,
html body .survx-article .source-list,
html body .survx-article .related-list {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Video / embed modules */
html body .survxcom-article .video-embed,
html body .survxcom-article .survxcom-video,
html body .survx-article .video-embed,
html body .survx-article .survxcom-video {
  position: relative !important;
  width: 100% !important;
  margin: 30px 0 !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

html body .survxcom-article .video-embed iframe,
html body .survxcom-article .survxcom-video iframe,
html body .survx-article .video-embed iframe,
html body .survx-article .survxcom-video iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* Monetization / ad boundaries */
html body .survxcom-article .survxcom-ad-boundary,
html body .survxcom-article .survxcom-monetization-zone,
html body .survx-article .survxcom-ad-boundary,
html body .survx-article .survxcom-monetization-zone {
  display: block !important;
  min-height: 18px !important;
  margin: 34px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Micro / captions / small notes */
html body .survxcom-article .micro,
html body .survxcom-article .small-note,
html body .survx-article .micro,
html body .survx-article .small-note {
  color: var(--survxcom-magazine-muted) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

/* Horizontal rules */
html body .survxcom-article hr,
html body .survx-article hr {
  border: 0 !important;
  border-top: 1px solid var(--survxcom-magazine-rule) !important;
  height: 0 !important;
  margin: 34px 0 !important;
  background: transparent !important;
}

/* WordPress alignment resets */
html body .survxcom-article .alignwide,
html body .survx-article .alignwide,
html body .survxcom-article .alignfull,
html body .survx-article .alignfull {
  max-width: var(--survxcom-magazine-article-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile */
@media (max-width: 760px) {
  html body .survxcom-article,
  html body .survx-article,
  html body .entry-content .survxcom-article,
  html body .entry-content .survx-article,
  html body .post-content .survxcom-article,
  html body .post-content .survx-article {
    padding: 24px 16px 46px !important;
  }

  html body .survxcom-article p,
  html body .survx-article p,
  html body .survxcom-article ul,
  html body .survxcom-article ol,
  html body .survx-article ul,
  html body .survx-article ol {
    font-size: 18px !important;
    line-height: 1.72 !important;
  }

  html body .survxcom-article .subtitle,
  html body .survxcom-article .dek,
  html body .survx-article .subtitle,
  html body .survx-article .dek {
    font-size: 20px !important;
    line-height: 1.42 !important;
  }

  html body .survxcom-article h1,
  html body .survx-article h1 {
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
  }

  html body .survxcom-article h2,
  html body .survx-article h2 {
    font-size: 22px !important;
  }

  html body .survxcom-article p.survxcom-lede::first-letter,
  html body .survx-article p.survxcom-lede::first-letter,
  html body .survxcom-article p.lede::first-letter,
  html body .survx-article p.lede::first-letter,
  html body .survxcom-article p.survxcom-auto-lede::first-letter,
  html body .survx-article p.survxcom-auto-lede::first-letter {
    font-size: 4.35rem !important;
  }

  html body .survxcom-article .pullquote,
  html body .survxcom-article .pullbox,
  html body .survxcom-article blockquote,
  html body .survx-article .pullquote,
  html body .survx-article .pullbox,
  html body .survx-article blockquote {
    font-size: 21px !important;
  }
}