:root{
  --navy-950:#081326; --navy-900:#0B1F3A; --navy-800:#14335C; --navy-100:#E7ECF3;
  --white:#FFFFFF; --paper:#F7F9F7;
  --emerald-700:#0A5C3F; --emerald-600:#0E6E4E; --emerald-100:#E1F1EA;
  --gold-600:#B08D2B; --gold-500:#C9A227; --gold-100:#F4ECD3;
  --ink-muted:#5B697D; --line:rgba(11,31,58,0.12);
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  --radius-sm:4px; --radius-md:10px; --radius-lg:20px;
  --container:1180px; --article-width:720px; --gutter:clamp(1.25rem, 5vw, 3rem);
  --ease:cubic-bezier(.16,.84,.44,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; font-family:var(--font-body); color:var(--navy-900); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; color:var(--navy-900); font-weight:600;}
p{margin:0;}
ul,ol{margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
.eyebrow{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--emerald-700); }

/* NAV (shared) */
.nav{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:1rem var(--gutter); max-width:var(--container); margin:0 auto; }
.nav-brand{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; }
.nav-brand .rx{ color:var(--gold-500); font-style:italic; margin-left:2px; }
.nav-links{ display:flex; gap:1.8rem; font-size:0.92rem; font-weight:600; }
.nav-links a:hover{ color:var(--emerald-700); }
.nav-cta{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; background:var(--navy-900); color:var(--white); padding:0.6rem 1.1rem; border-radius:var(--radius-sm); }
@media (max-width:780px){ .nav-links{ display:none; } }

/* Nested dropdown nav */
.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{ background:none; border:none; font:inherit; font-weight:600; color:inherit; cursor:pointer; display:flex; align-items:center; gap:0.3rem; padding:0; }
.nav-dropdown-trigger:hover{ color:var(--emerald-700); }
.nav-dropdown .caret{ font-size:0.65em; opacity:0.6; }
.nav-dropdown-menu{ position:absolute; top:100%; left:0; margin-top:0.9rem; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(11,31,58,0.14); min-width:220px; padding:0.5rem; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .15s var(--ease), transform .15s var(--ease), visibility .15s; z-index:200; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-item{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.65rem 0.8rem; border-radius:6px; font-size:0.88rem; font-weight:600; color:var(--navy-900); white-space:nowrap; cursor:pointer; }
.nav-dropdown-item:hover, .nav-dropdown-parent:hover{ background:var(--paper); color:var(--emerald-700); }
.nav-dropdown-sub{ position:relative; }
.nav-dropdown-submenu{ position:absolute; top:-0.5rem; left:100%; margin-left:0.4rem; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(11,31,58,0.14); min-width:190px; padding:0.5rem; opacity:0; visibility:hidden; transform:translateX(4px); transition:opacity .15s var(--ease), transform .15s var(--ease), visibility .15s; }
.nav-dropdown-sub:hover .nav-dropdown-submenu, .nav-dropdown-sub:focus-within .nav-dropdown-submenu{ opacity:1; visibility:visible; transform:translateX(0); }
.nav-dropdown-submenu a{ display:block; padding:0.6rem 0.8rem; border-radius:6px; font-size:0.86rem; font-weight:600; color:var(--navy-900); }
.nav-dropdown-submenu a:hover{ background:var(--paper); color:var(--emerald-700); }
.soon-tag{ font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--gold-600); background:var(--gold-100); padding:0.15rem 0.4rem; border-radius:4px; font-weight:700; }

.btn{ display:inline-block; padding:0.85rem 1.5rem; border-radius:var(--radius-sm); font-weight:600; font-size:0.95rem; }
.btn-primary{ background:var(--navy-900); color:var(--white); }
.btn-primary:hover{ background:var(--navy-800); }
.btn-outline{ border:1.5px solid var(--navy-900); color:var(--navy-900); }
.btn-outline:hover{ background:var(--navy-900); color:var(--white); }

/* ARTICLE HERO */
.article-hero{ padding:3rem 0 2.5rem; border-bottom:1px solid var(--line); }
.breadcrumb{ font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-muted); margin-bottom:1.2rem; }
.breadcrumb a:hover{ color:var(--emerald-700); }
.article-hero h1{ font-size:clamp(1.9rem,4.2vw,2.7rem); line-height:1.18; max-width:22ch; }
.article-meta{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; margin-top:1.3rem; font-size:0.88rem; color:var(--ink-muted); }
.article-meta .byline{ font-weight:600; color:var(--navy-900); }
.article-meta .dot{ color:var(--line); }
.article-dek{ margin-top:1rem; font-size:1.08rem; color:var(--ink-muted); max-width:62ch; line-height:1.7; }

/* ARTICLE BODY */
.article-body{ max-width:var(--article-width); margin:0 auto; padding:3rem var(--gutter) 1rem; }
.article-body > *{ max-width:100%; }
.article-body h2{ font-size:1.5rem; margin-top:2.6rem; margin-bottom:0.9rem; }
.article-body h2:first-child{ margin-top:0; }
.article-body h3{ font-size:1.18rem; margin-top:1.8rem; margin-bottom:0.6rem; color:var(--emerald-700); }
/* Site-wide rule: all article body copy is justified, not ragged-right.
   Applies to every page that includes this stylesheet (articles, blog
   posts, MPJE guides, etc.) — do not override with text-align:left on
   individual pages. hyphens:auto keeps word-spacing even since these
   columns are fairly narrow; text-justify:inter-word is the standard
   companion property for cleaner spacing in supporting browsers. */
.article-body p,
.direct-answer p,
.takeaway-box p,
.bottom-line p,
.faq-item p,
.reason-item p,
.step-item p,
.related p,
.article-dek{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}
.article-body p{ margin-bottom:1.15rem; font-size:1.03rem; line-height:1.8; color:#243348; }
.article-body ul, .article-body ol{ margin:0 0 1.3rem 1.4rem; }
.article-body li{ font-size:1.03rem; line-height:1.75; color:#243348; margin-bottom:0.45rem; }
.direct-answer{ background:var(--paper); border-left:3px solid var(--emerald-700); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:1.3rem 1.5rem; margin-bottom:1.8rem; }
.direct-answer p{ margin-bottom:0.7rem; }
.direct-answer p:last-child{ margin-bottom:0; }

/* Numbered reason list (article 2) */
.reason-list{ counter-reset:reason; margin:0 0 1.5rem; padding:0; }
.reason-item{ list-style:none; counter-increment:reason; padding:1.1rem 0 1.1rem 3rem; position:relative; border-top:1px solid var(--line); }
.reason-item:first-child{ border-top:none; }
.reason-item::before{ content:counter(reason); position:absolute; left:0; top:1.15rem; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--navy-900); color:var(--white); font-family:var(--font-mono); font-size:0.85rem; font-weight:600; display:flex; align-items:center; justify-content:center; }
.reason-item h3{ margin-top:0; margin-bottom:0.4rem; color:var(--navy-900); }
.reason-item p{ margin-bottom:0.5rem; }

/* Step list (article 3) */
.step-list{ counter-reset:step; margin:0 0 1.5rem; padding:0; }
.step-item{ list-style:none; counter-increment:step; padding:0 0 1.6rem 3rem; position:relative; }
.step-item::before{ content:"Step " counter(step); position:absolute; left:0; top:0.1rem; font-family:var(--font-mono); font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--emerald-700); }
.step-item h3{ margin-top:1.1rem; margin-bottom:0.5rem; }

/* Callouts */
.takeaway-box{ background:var(--navy-900); color:var(--white); border-radius:var(--radius-md); padding:1.6rem 1.8rem; margin:2.2rem 0; }
.takeaway-box .eyebrow{ color:var(--gold-500); }
.takeaway-box p{ color:var(--navy-100); margin-top:0.6rem; margin-bottom:0; font-size:1.02rem; line-height:1.7; }
.bottom-line{ background:var(--emerald-100); border-radius:var(--radius-md); padding:1.6rem 1.8rem; margin:2.2rem 0; }
.bottom-line h2{ margin-top:0; font-size:1.3rem; color:var(--emerald-700); }
.bottom-line p{ margin-bottom:0; }

/* FAQ */
.faq-item{ border-top:1px solid var(--line); padding:1.3rem 0; }
.faq-item h3{ margin:0 0 0.5rem; font-size:1.05rem; }
.faq-item p{ margin-bottom:0; }

/* Related articles */
.related{ background:var(--paper); border-radius:var(--radius-md); padding:1.6rem 1.8rem; margin:2.2rem 0; }
.related h2{ font-size:1.2rem; margin-top:0; margin-bottom:0.9rem; }
.related ul{ margin-left:1.2rem; }
.related li{ margin-bottom:0.5rem; font-size:0.98rem; }
.related a{ color:var(--emerald-700); font-weight:600; }
.related a:hover{ text-decoration:underline; }

/* Disclaimer */
.disclaimer{ font-size:0.85rem; color:var(--ink-muted); line-height:1.65; padding-top:1.4rem; border-top:1px solid var(--line); margin-top:2rem; }

/* References */
.references{ margin-top:1.5rem; }
.references h2{ font-size:1.2rem; }
.references ol{ margin-left:1.3rem; }
.references li{ font-size:0.88rem; line-height:1.7; color:var(--ink-muted); margin-bottom:0.5rem; }
.references a{ color:var(--emerald-700); word-break:break-word; }
.references a:hover{ text-decoration:underline; }

/* Author bio block */
.author-box{ display:flex; gap:1.1rem; align-items:flex-start; background:var(--paper); border-radius:var(--radius-md); padding:1.5rem 1.7rem; margin:2.5rem 0; }
.author-avatar{ flex:none; width:56px; height:56px; border-radius:50%; background:var(--navy-900); color:var(--gold-500); font-family:var(--font-display); font-weight:600; font-size:1.3rem; display:flex; align-items:center; justify-content:center; }
.author-box h3{ font-size:1.02rem; margin-bottom:0.3rem; }
.author-box p{ font-size:0.92rem; color:var(--ink-muted); margin-bottom:0; line-height:1.6; }

/* Newsletter CTA */
.newsletter-cta{ background:var(--navy-900); color:var(--white); border-radius:var(--radius-lg); padding:2.2rem clamp(1.5rem,4vw,2.6rem); margin:2.8rem auto 0; max-width:var(--article-width); }
.newsletter-cta h2{ color:var(--white); font-size:1.4rem; }
.newsletter-cta p{ color:var(--navy-100); margin-top:0.6rem; }
.newsletter-form{ display:flex; gap:0.6rem; margin-top:1.3rem; flex-wrap:wrap; }
.newsletter-form input{ flex:1; min-width:200px; padding:0.8rem 1rem; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.06); color:var(--white); }
.newsletter-form input::placeholder{ color:var(--navy-100); }
.newsletter-form button{ background:var(--gold-500); color:var(--navy-900); border:none; padding:0.8rem 1.2rem; border-radius:var(--radius-sm); font-weight:700; }

/* Book promo callout (blog posts) */
.book-promo{ display:flex; gap:1.4rem; align-items:center; background:var(--navy-900); border-radius:var(--radius-lg); padding:1.8rem; margin:2.5rem 0; }
.book-promo-cover{ flex:none; width:100px; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,0.35); }
.book-promo-text .eyebrow{ color:var(--gold-500); }
.book-promo-text h3{ color:var(--white); font-size:1.25rem; margin:0.4rem 0 0.6rem; }
.book-promo-text p{ color:var(--navy-100); font-size:0.94rem; line-height:1.6; margin-bottom:1rem; }
.book-promo-text .btn-primary{ background:var(--gold-500); color:var(--navy-900); }
.book-promo-text .btn-primary:hover{ background:var(--gold-600); }
@media (max-width:560px){ .book-promo{ flex-direction:column; align-items:flex-start; } .book-promo-cover{ width:120px; } }
.article-footer-meta{ font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-muted); margin-top:2.5rem; }

footer.site-footer{ padding:2.5rem 0; border-top:1px solid var(--line); margin-top:3rem; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.footer-links{ display:flex; flex-wrap:wrap; gap:1rem 1.5rem; font-size:0.88rem; }
.footer-copy{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-muted); }

/* Landing page (/articles) */
.cat-grid{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:2rem; }
@media (min-width:760px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
.cat-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.5rem 1.6rem; position:relative; transition:border-color 0.2s, box-shadow 0.2s; }
.cat-card:has(.cat-card-link):hover{ border-color:var(--emerald-700); box-shadow:0 4px 16px -8px rgba(11,31,58,0.25); }
.cat-card h3 a.cat-card-link{ color:inherit; text-decoration:none; }
.cat-card h3 a.cat-card-link:hover{ color:var(--emerald-700); }
.cat-card h3 a.cat-card-link::after{ content:""; position:absolute; inset:0; }
.cat-card-arrow{ color:var(--emerald-700); font-weight:600; }
.cat-card h3{ font-size:1.08rem; margin-bottom:0.5rem; }
.cat-card p{ font-size:0.92rem; color:var(--ink-muted); line-height:1.6; margin-bottom:0; }
.article-list{ margin-top:2.5rem; display:flex; flex-direction:column; gap:0; }
.article-list-item{ display:flex; flex-direction:column; gap:0.35rem; padding:1.5rem 0; border-top:1px solid var(--line); }
.article-list-item .tag{ font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold-600); }
.article-list-item h3{ font-size:1.2rem; }
.article-list-item h3 a:hover{ color:var(--emerald-700); }
.article-list-item p{ font-size:0.95rem; color:var(--ink-muted); }

/* Comparison tables within article body */
.table-wrap{ overflow-x:auto; margin:1.5rem 0; border:1px solid var(--line); border-radius:var(--radius-md); }
.table-wrap table{ width:100%; border-collapse:collapse; font-size:0.88rem; min-width:560px; }
.table-wrap th{ background:var(--navy-900); color:var(--white); text-align:left; padding:0.7rem 0.85rem; font-weight:700; }
.table-wrap td{ padding:0.7rem 0.85rem; border-top:1px solid var(--line); color:#232B38; vertical-align:top; }
.table-wrap tr:nth-child(even) td{ background:var(--paper); }