:root {
  --editorial-paper: #f5f5f2;
  --editorial-paper-warm: #ecebe5;
  --editorial-ink: #171716;
  --editorial-copy: #4c4c48;
  --editorial-muted: #73736d;
  --editorial-line: rgba(23, 23, 22, .12);
  --editorial-card: rgba(255, 255, 255, .76);
  --editorial-accent: #ffe500;
  --editorial-accent-rgb: 255, 229, 0;
  --editorial-accent-2: #8d7cff;
}

body.editorial-page[data-theme="decision"] {
  --editorial-accent: #ffcf24;
  --editorial-accent-rgb: 255, 207, 36;
  --editorial-accent-2: #77d6c5;
}

body.editorial-page[data-theme="choice"] {
  --editorial-accent: #8d7cff;
  --editorial-accent-rgb: 141, 124, 255;
  --editorial-accent-2: #65ccea;
}

body.editorial-page[data-theme="beginner"] {
  --editorial-accent: #52c98f;
  --editorial-accent-rgb: 82, 201, 143;
  --editorial-accent-2: #75b9f8;
}

body.editorial-page[data-theme="readiness"] {
  --editorial-accent: #55d68b;
  --editorial-accent-rgb: 85, 214, 139;
  --editorial-accent-2: #9a7dff;
}

body.editorial-page[data-theme="recovery"] {
  --editorial-accent: #ff806e;
  --editorial-accent-rgb: 255, 128, 110;
  --editorial-accent-2: #63b9ff;
}

body.editorial-page {
  margin: 0;
  background:
    radial-gradient(800px 520px at 7% 8%, rgba(var(--editorial-accent-rgb), .16), transparent 62%),
    linear-gradient(180deg, #fafaf8 0, var(--editorial-paper) 34rem, #eeeee9 100%);
  color: var(--editorial-copy);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

body.editorial-page a { color: inherit; }

body.editorial-page .iq-nav,
body.editorial-page #nav {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  height: 68px;
  padding: 0;
  background: rgba(28, 28, 27, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
}

body.editorial-page #nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: max(24px, calc((100vw - 1180px) / 2));
}

body.editorial-page .iq-links a,
body.editorial-page .nav-logo { color: #d5d5cf; }

body.editorial-page .iq-cta,
body.editorial-page .nav-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--editorial-accent) !important;
  color: #141412 !important;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(var(--editorial-accent-rgb), .18);
}

body.editorial-page .article {
  max-width: 1180px;
  padding: 92px 28px 112px;
}

body.editorial-page .article > .article-tag,
body.editorial-page .article > .eyebrow,
body.editorial-page .article > h1,
body.editorial-page .article > .article-dek,
body.editorial-page .article > .article-meta {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

body.editorial-page .article-tag {
  border: 0;
  border-radius: 999px;
  background: rgba(var(--editorial-accent-rgb), .16);
  color: #252522;
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

body.editorial-page .eyebrow {
  margin-top: 18px;
  margin-bottom: 22px;
  color: var(--editorial-muted);
}

body.editorial-page .article h1,
body.editorial-page .article-header h1 {
  color: var(--editorial-ink);
  font-size: clamp(46px, 7vw, 82px);
  font-weight: 600;
  letter-spacing: -.057em;
  line-height: .98;
  text-wrap: balance;
}

body.editorial-page .article-dek {
  max-width: 820px !important;
  color: #62625d;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 430;
  line-height: 1.38;
  letter-spacing: -.018em;
}

body.editorial-page .article-meta {
  color: var(--editorial-muted);
  font-size: 11px;
  margin-top: 28px;
  margin-bottom: 48px;
}

body.editorial-page .article img.hero-img {
  display: block;
  width: 100%;
  max-height: 660px;
  margin: 0 auto 72px;
  border: 0;
  border-radius: 32px;
  object-fit: cover;
  box-shadow:
    0 36px 90px rgba(26, 26, 23, .16),
    0 0 0 1px rgba(255, 255, 255, .7);
}

body.editorial-page .article-body {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  color: var(--editorial-copy);
}

body.editorial-page .article-body p,
body.editorial-page .article-body li {
  color: var(--editorial-copy);
}

body.editorial-page .article-body p {
  margin-bottom: 25px;
}

body.editorial-page .article-body strong { color: var(--editorial-ink); }

body.editorial-page .article-body h2,
body.editorial-page .article-body h3 {
  color: var(--editorial-ink);
  font-weight: 600;
  letter-spacing: -.035em;
  text-wrap: balance;
}

body.editorial-page .article-body h2 {
  position: relative;
  margin-top: 82px;
  padding-top: 23px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
}

body.editorial-page .article-body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--editorial-accent), var(--editorial-accent-2));
}

body.editorial-page .article-body h3 {
  margin-top: 48px;
  font-size: 22px;
}

body.editorial-page .article-body > ul,
body.editorial-page .article-body > ol {
  margin: 34px 0;
  padding: 28px 34px 28px 58px;
  border: 1px solid var(--editorial-line);
  border-radius: 24px;
  background: var(--editorial-card);
  box-shadow: 0 18px 48px rgba(36, 36, 32, .06);
}

body.editorial-page .article-body li::marker {
  color: var(--editorial-accent);
  font-weight: 800;
}

body.editorial-page .table-wrap,
body.editorial-page .highlight-box {
  border: 1px solid var(--editorial-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 22px 60px rgba(34, 34, 31, .08);
}

body.editorial-page .article-body .table-wrap { margin: 30px 0 50px; }

body.editorial-page .data-table th,
body.editorial-page .data-table td {
  border-color: var(--editorial-line);
  color: var(--editorial-copy);
}

body.editorial-page .data-table thead th {
  background: rgba(var(--editorial-accent-rgb), .13);
  color: var(--editorial-ink);
}

body.editorial-page .article-body .data-table th[scope="row"] { color: var(--editorial-ink); }

body.editorial-page .article-body blockquote {
  margin: 48px 0;
  padding: 34px 38px;
  border: 0;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(var(--editorial-accent-rgb), .18), rgba(255, 255, 255, .9) 64%);
  color: var(--editorial-ink);
  font-size: 21px;
  font-style: normal;
  line-height: 1.5;
  box-shadow: 0 18px 45px rgba(34, 34, 31, .07);
}

body.editorial-page .faq-list { gap: 14px; }

body.editorial-page .faq-list details,
body.editorial-page .related a,
body.editorial-page .notice {
  border-color: var(--editorial-line);
  background: rgba(255, 255, 255, .72);
  color: var(--editorial-copy);
}

body.editorial-page .faq-list details { padding: 20px 22px; }
body.editorial-page .faq-list summary { color: var(--editorial-ink); }

body.editorial-page .article-callout,
body.editorial-page .cta-card {
  margin: 64px 0;
  padding: 38px 40px;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(500px 260px at 90% 10%, rgba(var(--editorial-accent-rgb), .34), transparent 72%),
    #1d1d1b;
  color: #d7d7d1;
  box-shadow: 0 30px 70px rgba(28, 28, 25, .2);
}

body.editorial-page .article-callout strong,
body.editorial-page .cta-card h2 { color: #fff; }

body.editorial-page .article-callout .btn-primary,
body.editorial-page .cta-btn,
body.editorial-page .ao-row button {
  border-radius: 999px;
  background: var(--editorial-accent);
  color: #171715;
}

body.editorial-page .iq-actions { justify-content: center; }
body.editorial-page .btn { border-color: var(--editorial-line); }

body.editorial-page .related { gap: 18px; }
body.editorial-page .related a { border-radius: 20px; box-shadow: 0 14px 36px rgba(34, 34, 31, .05); }

body.editorial-page .iq-footer,
body.editorial-page footer {
  max-width: none;
  border-top: 1px solid var(--editorial-line);
  background: #e7e7e1;
  color: var(--editorial-muted);
}

/* The HRV feature predates the shared article shell; bring it into the same family. */
body.editorial-page .article-hero {
  max-width: 1180px;
  margin-top: 0;
  padding: 72px 28px 0;
}

body.editorial-page .article-hero-img {
  height: min(54vw, 600px);
  min-height: 340px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 48%, rgba(85, 214, 139, .28) 0 11%, transparent 11.5%),
    radial-gradient(circle at 50% 48%, transparent 0 24%, rgba(154, 125, 255, .22) 24.5% 26%, transparent 26.5%),
    radial-gradient(circle at 50% 48%, transparent 0 38%, rgba(85, 214, 139, .18) 38.5% 40%, transparent 40.5%),
    linear-gradient(145deg, #111411, #242123);
  box-shadow: 0 36px 90px rgba(26, 26, 23, .22);
}

body.editorial-page .hero-metric {
  color: #76e7a4;
  font-size: clamp(72px, 10vw, 126px);
  font-weight: 550;
  letter-spacing: -.07em;
  text-shadow: 0 0 45px rgba(85, 214, 139, .25);
}

body.editorial-page .hero-metric-label { color: #c2c7c0; }

body.editorial-page .article-header {
  max-width: 900px;
  margin-top: 72px;
  padding: 0 28px;
}

body.editorial-page .article-header .article-meta { color: var(--editorial-muted); }
body.editorial-page .article-header .article-meta a { color: var(--editorial-ink); }

body.editorial-page .highlight-box { padding: 34px; }
body.editorial-page .highlight-box h3 { color: var(--editorial-ink); }
body.editorial-page .data-row { border-color: var(--editorial-line); }
body.editorial-page .data-desc { color: var(--editorial-copy); }

body.editorial-page .author-card,
body.editorial-page .related-link,
body.editorial-page .ao-tile {
  border-color: var(--editorial-line);
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 18px 48px rgba(34, 34, 31, .06);
}

body.editorial-page .author-info h4,
body.editorial-page .related-section h3,
body.editorial-page .r-title,
body.editorial-page .ao-title { color: var(--editorial-ink); }

body.editorial-page .author-info p,
body.editorial-page .ao-blurb,
body.editorial-page .ao-fine { color: var(--editorial-muted); }

body.editorial-page .author-title,
body.editorial-page .r-tag,
body.editorial-page .ao-label { color: #4a8d67; }

body.editorial-page .author-avatar-fallback {
  border-color: rgba(var(--editorial-accent-rgb), .4);
  background: rgba(var(--editorial-accent-rgb), .16);
  color: #247047;
}

body.editorial-page .divider { background: var(--editorial-line); }

@media (min-width: 960px) {
  body.editorial-page main.article {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: clamp(46px, 6vw, 86px);
    align-items: start;
  }

  body.editorial-page .article > .article-tag,
  body.editorial-page .article > .eyebrow,
  body.editorial-page .article > h1,
  body.editorial-page .article > .article-dek,
  body.editorial-page .article > .article-meta {
    grid-column: 1;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.editorial-page .article > .article-tag { justify-self: start; width: auto; }

  body.editorial-page .article > h1 {
    font-size: clamp(48px, 5vw, 68px);
    line-height: .99;
  }

  body.editorial-page .article > .article-dek {
    font-size: clamp(19px, 1.8vw, 24px);
  }

  body.editorial-page .article > img.hero-img {
    grid-column: 2;
    grid-row: 1 / 7;
    align-self: stretch;
    height: 100%;
    min-height: 650px;
    max-height: 760px;
    aspect-ratio: auto;
    margin: 0;
  }

  body.editorial-page .article > .article-body,
  body.editorial-page .article > .iq-actions,
  body.editorial-page .article > .notice,
  body.editorial-page .article > .related {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  body.editorial-page .article > .article-body { margin-top: 96px; }
}

@media (max-width: 850px) {
  body.editorial-page .article { padding-top: 64px; }
  body.editorial-page .article h1,
  body.editorial-page .article-header h1 { font-size: clamp(42px, 10vw, 66px); }
  body.editorial-page .article img.hero-img { margin-bottom: 54px; border-radius: 24px; }
}

@media (max-width: 600px) {
  body.editorial-page { font-size: 16.5px; }
  body.editorial-page .article { padding: 48px 18px 80px; }
  body.editorial-page .article h1,
  body.editorial-page .article-header h1 { font-size: clamp(38px, 12vw, 54px); line-height: 1.01; }
  body.editorial-page .article-dek { font-size: 20px; }
  body.editorial-page .article-meta { line-height: 1.7; margin-bottom: 34px; }
  body.editorial-page .article img.hero-img { border-radius: 20px; margin-bottom: 46px; }
  body.editorial-page .article-body h2 { margin-top: 64px; font-size: 31px; }
  body.editorial-page .article-body > ul,
  body.editorial-page .article-body > ol { padding: 24px 22px 24px 44px; border-radius: 20px; }
  body.editorial-page .article-callout,
  body.editorial-page .cta-card { padding: 30px 24px; border-radius: 22px; }
  body.editorial-page .article-hero { padding: 34px 16px 0; }
  body.editorial-page .article-hero-img { min-height: 270px; height: 72vw; border-radius: 22px; }
  body.editorial-page .article-header { margin-top: 46px; padding: 0 20px; }
  body.editorial-page .article-body { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  body.editorial-page * { scroll-behavior: auto !important; }
}
