:root {
  --apex-article-bg: #050505;
  --apex-article-panel: #0f0f0f;
  --apex-article-line: rgba(255, 255, 255, 0.14);
  --apex-article-text: #f7f7f7;
  --apex-article-muted: #c8c8c8;
  --apex-article-blue: #00d6e8;
  --apex-article-blue-dark: #00b8c7;
  --apex-article-heading: "Playfair Display", Georgia, serif;
  --apex-article-body: "Poppins", Arial, sans-serif;
  --apex-article-max: 1180px;
  --apex-article-reading: 820px;
}

body.apex-article-page {
  overflow-x: clip;
  background: var(--apex-article-bg);
  color: var(--apex-article-text);
}

/* Keep selected text readable against the dark reader. The brand blue appears
   only during the user's selection, so it remains a restrained accent. */
.apex-article-page .apex-article-main::selection,
.apex-article-page .apex-article-main *::selection {
  background: var(--apex-article-blue) !important;
  color: var(--apex-article-bg) !important;
  text-shadow: none;
}

.apex-article-page .apex-article-main::-moz-selection,
.apex-article-page .apex-article-main *::-moz-selection {
  background: var(--apex-article-blue) !important;
  color: var(--apex-article-bg) !important;
  text-shadow: none;
}

.apex-article-main,
.apex-article-main * {
  box-sizing: border-box;
}

.apex-article-main {
  background: var(--apex-article-bg);
  color: var(--apex-article-text);
  font-family: var(--apex-article-body);
}

.apex-article-shell {
  width: min(calc(100% - 40px), var(--apex-article-max));
  margin-inline: auto;
}

.apex-article-hero {
  border-bottom: 1px solid var(--apex-article-line);
  background: #050505;
}

.apex-article-hero__inner {
  max-width: 1040px;
  padding-block: clamp(72px, 8vw, 120px) clamp(56px, 7vw, 92px);
}

.apex-article-back {
  display: inline-block;
  margin-bottom: 42px;
  color: var(--apex-article-muted);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.apex-article-back:hover,
.apex-article-content a,
.apex-article-kicker {
  color: var(--apex-article-blue);
}

.apex-article-kicker {
  margin: 0 0 16px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.apex-article-hero h1 {
  max-width: 1000px;
  margin: 0;
  color: #fff;
  font-family: var(--apex-article-heading);
  font-size: clamp(2.65rem, 5.5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-transform: none;
  text-wrap: balance;
}

.apex-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  color: #a9a9a9;
  font-size: 0.83rem;
}

.apex-article-deck {
  max-width: 800px;
  margin: 28px 0 0;
  color: var(--apex-article-muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.75;
}

.apex-article-cover {
  position: relative;
  height: clamp(340px, 58vw, 720px);
  margin-top: clamp(42px, 7vw, 84px);
  overflow: hidden;
  border: 1px solid var(--apex-article-line);
  border-radius: 16px;
  background: var(--apex-article-panel);
}

.apex-article-cover .apex-blog-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apex-article-reader {
  padding-block: clamp(54px, 8vw, 110px) clamp(76px, 10vw, 140px);
}

.apex-article-content {
  width: min(100%, var(--apex-article-reading));
  margin-inline: auto;
  color: var(--apex-article-text);
  font-family: var(--apex-article-body);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.85;
}

.apex-article-content > :first-child {
  margin-top: 0 !important;
}

.apex-article-content p,
.apex-article-content li,
.apex-article-content figcaption {
  color: var(--apex-article-muted);
  font-family: var(--apex-article-body) !important;
}

.apex-article-content p {
  margin-block: 0 1.45em;
}

.apex-article-content h2,
.apex-article-content h3,
.apex-article-content h4 {
  color: #fff !important;
  font-family: var(--apex-article-heading) !important;
  text-transform: none !important;
  text-wrap: balance;
}

.apex-article-content h2 {
  margin: 2.1em 0 0.7em;
  font-size: clamp(1.9rem, 4vw, 3rem) !important;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14 !important;
}

.apex-article-content h3 {
  margin: 1.8em 0 0.65em;
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  font-weight: 600;
  line-height: 1.25 !important;
}

.apex-article-content h4 {
  margin: 1.6em 0 0.6em;
  font-size: 1.2rem !important;
}

/* Older Gutenberg posts wrapped heading text in <mark class="has-black-color">.
   Neutralize that legacy formatting without changing the stored post content. */
.apex-article-content h2 mark,
.apex-article-content h3 mark,
.apex-article-content h4 mark,
.apex-article-content h2 mark *,
.apex-article-content h3 mark *,
.apex-article-content h4 mark * {
  padding: 0;
  background: transparent !important;
  color: inherit !important;
}

.apex-article-content a {
  text-underline-offset: 4px;
}

/* The link checker can label a working Instagram profile as broken and inject
   a line-through. Keep the link functional and remove only that false visual. */
.apex-article-content a.broken_link[href*="instagram.com"] {
  text-decoration: none !important;
}

.apex-article-content img,
.apex-article-content video,
.apex-article-content iframe {
  max-width: 100%;
}

.apex-article-content img {
  height: auto;
  border-radius: 12px;
}

.apex-article-content figure,
.apex-article-content .wp-block-image {
  max-width: 100%;
  margin: 2.2em auto;
}

.apex-article-content blockquote {
  margin: 2em 0;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--apex-article-blue);
}

.apex-article-content ul,
.apex-article-content ol {
  padding-left: 1.4em;
}

.apex-article-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.apex-article-content th,
.apex-article-content td {
  padding: 12px;
  border: 1px solid var(--apex-article-line);
}

.apex-article-next {
  width: min(100%, 920px);
  margin: clamp(70px, 9vw, 120px) auto 0;
  padding: clamp(30px, 5vw, 56px);
  border: 1px solid rgba(0, 214, 232, 0.5);
  border-radius: 16px;
  background: var(--apex-article-panel);
}

.apex-article-next h2 {
  margin: 0;
  color: #fff;
  font-family: var(--apex-article-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-transform: none;
}

.apex-article-next > p:not(.apex-article-kicker) {
  max-width: 690px;
  margin: 18px 0 0;
  color: var(--apex-article-muted);
  line-height: 1.7;
}

.apex-article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.apex-article-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
}

.apex-article-button--primary {
  border-color: #fff;
  background: #fff;
  color: #050505;
}

.apex-article-button:hover,
.apex-article-button--primary:hover {
  border-color: var(--apex-article-blue);
  background: var(--apex-article-blue);
  color: #050505;
}

.apex-article-back:focus-visible,
.apex-article-button:focus-visible,
.apex-article-content a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

@media (max-width: 680px) {
  .apex-article-shell {
    width: min(calc(100% - 28px), var(--apex-article-max));
  }

  .apex-article-hero__inner {
    padding-block: 64px 56px;
  }

  .apex-article-back {
    margin-bottom: 34px;
  }

  .apex-article-cover {
    height: 420px;
    border-radius: 12px;
  }

  .apex-article-actions,
  .apex-article-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apex-article-main *,
  .apex-article-main *::before,
  .apex-article-main *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}