/* ============================================================================
   Retirement Made Clear — assets/article.css  (Article shell v2)
   Panel-locked decisions 2026-07-22; spec: `Research/Ramsey page-level
   teardown + RMC impact-design plan - 2026-07-22.md` §3a.

   Wire on article pages AFTER rmc.css + convert.css:
     <link rel="stylesheet" href="assets/article.css" />
     <script src="assets/article.js" defer></script>   (LAST — after convert.js
                                                        and motion.js)
   Components:
     .article-grid  three-column shell at ≥1200px — TOC | article | rail.
                    Below 1200px everything stacks; the article keeps its
                    existing centered `--measure` behavior untouched.
     .toc-rail      sticky "On this page" jump nav (desktop; built by
                    article.js from the article's H2s). Sticky NAVIGATION
                    is sanctioned; nothing else on the page follows scroll.
     .toc-mobile    <details> "On this page" above the body (<1200px).
     .tip-note      the in-article callout device. Three labels, rotated:
                    WORTH KNOWING / THE NUMBER TO REMEMBER / HERE'S THE
                    TRAP (trap ≤1 per article, ≤1/3 of placements
                    site-wide). Content rule: restatement of a fact already
                    in the article — zero new claims, zero advice.
     .next-steps    end-of-article card — exactly THREE verb-first on-site
                    actions. Never "talk to the firm" (that ask lives in
                    C2 / the talk card only).
     .rail-right    NON-STICKY right rail (panel: 6/8 called followers
                    pushy) — related-guides card + the talk card. The talk
                    card renders ≥1200px ONLY; below that it is suppressed
                    so it can never double with the canonical C2 end panel.
   Uses rmc.css tokens and shared classes only — no new colors, radii,
   shadows, or type families. The talk card matches C2's visual anatomy
   (ink panel, serif line, one button) but NEVER carries .btn.high — the
   page's single amber allowance stays inside C2 (convert.js guardrail).
   ========================================================================== */

/* ------------------------------------------------------ THE GRID SHELL --- */
/* Below 1200px: .article-grid is a plain block — .a-col keeps its existing
   centered measure; the rail stacks after the article at matching width.   */
.article-grid{display:block;}

@media (min-width:1200px){
  .article-grid{
    display:grid;
    grid-template-columns:168px minmax(0,656px) 288px;
    gap:40px;
    justify-content:center;
    padding:0 var(--gutter);
  }
  .article-grid > .a-col{
    grid-column:2; grid-row:1;
    max-width:none; width:100%; margin:0; padding:0;
  }
  .article-grid > .toc-rail{grid-column:1; grid-row:1;}
  .article-grid > .rail-right{grid-column:3; grid-row:1;}
}
@media (min-width:1400px){
  .article-grid{
    grid-template-columns:200px minmax(0,672px) 300px;
    gap:48px;
  }
}

/* anchor jumps land clear of the sticky masthead */
.a-body h2[id]{scroll-margin-top:96px;}

/* ------------------------------------- TOC — sticky desktop rail (JS) --- */
.toc-rail{display:none;}
@media (min-width:1200px){
  .toc-rail{
    display:block;
    position:sticky; top:96px;              /* sticky NAVIGATION — sanctioned */
    align-self:start;
    max-height:calc(100vh - 120px); overflow-y:auto;
    padding:0.15rem 0 0.5rem;
  }
}
.toc-label{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-mono); font-size:0.6875rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--warm-gray);
}
.toc-label::before{
  content:""; width:6px; height:6px; border-radius:var(--r-pill);
  background:var(--clear); flex:none;
}
.toc-rail ol{list-style:none; margin:0.85rem 0 0; padding:0;}
.toc-rail li{margin:0;}
.toc-rail a{
  display:block; padding:0.42rem 0.2rem 0.42rem 0.85rem;
  border-left:2px solid var(--line);
  font-size:0.8125rem; line-height:1.45; color:var(--ink-soft);
  transition:color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.toc-rail a:hover{color:var(--deep);}
.toc-rail a.is-active{
  border-left-color:var(--clear); color:var(--ink); font-weight:600;
}

/* --------------------------------- TOC — mobile <details> (<1200px, JS) --- */
.toc-mobile{
  margin:0 0 2.1rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (min-width:1200px){ .toc-mobile{display:none;} }
.toc-mobile summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.85rem 0.1rem; cursor:pointer; list-style:none;
}
.toc-mobile summary::-webkit-details-marker{display:none;}
.toc-mobile .toc-caret{
  flex:none; width:9px; height:9px;
  border-right:2px solid var(--warm-gray); border-bottom:2px solid var(--warm-gray);
  transform:rotate(45deg); margin-right:0.2rem;
  transition:transform .15s var(--ease-out);
}
.toc-mobile[open] .toc-caret{transform:rotate(-135deg); margin-top:0.3rem;}
.toc-mobile ol{list-style:none; margin:0 0 1rem; padding:0;}
.toc-mobile li{margin:0;}
.toc-mobile a{
  display:block; padding:0.45rem 0.1rem 0.45rem 0.9rem;
  border-left:2px solid var(--line);
  font-size:0.9375rem; line-height:1.5; color:var(--ink-soft);
}
.toc-mobile a:hover{color:var(--deep);}

/* ------------------------------------------ TIP CALLOUT (.tip-note) ------ */
/* Hairline-ruled, mono label with the house 6px Clear dot — the same
   construction as .sa-label. Body is a pull-quote-style RESTATEMENT of a
   fact already made in the article.                                        */
.tip-note{
  margin:2.5rem 0;
  padding:1.15rem 0.1rem 1.25rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.tip-note .tip-label{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-mono); font-size:0.6875rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--deep);
  margin-bottom:0.55rem;
}
.tip-note .tip-label::before{
  content:""; width:6px; height:6px; border-radius:var(--r-pill);
  background:var(--clear); flex:none;
}
.tip-note p{
  font-size:1.03125rem; line-height:1.62; color:var(--ink); margin:0;
}

/* ------------------------------------------- NEXT STEPS (.next-steps) ---- */
/* Replaces the passive "Go Deeper" list: a white card with the house
   Deep→Clear topline (the .checkup-cta::before pattern), serif H2, and
   exactly three verb-first on-site actions.                                */
.next-steps{
  position:relative;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  padding:1.7rem 1.8rem 1.35rem;
  margin:3rem 0 0;
}
.next-steps::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--deep),var(--clear));
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.a-body .next-steps h2{
  border-top:none; padding-top:0;
  font-size:1.5rem; margin:0 0 0.6rem;
}
.a-body .next-steps ul{list-style:none; margin:0; padding:0;}
.a-body .next-steps li{
  margin:0; padding:0.7rem 0;
  border-top:1px solid var(--line);
}
.a-body .next-steps li:first-child{border-top:none;}
.next-steps a{
  display:inline-flex; align-items:baseline; gap:0.45em;
  font-size:1rem; font-weight:600; color:var(--deep); line-height:1.45;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:transparent;
  transition:color .15s var(--ease-out), text-decoration-color .25s ease-in-out;
}
.next-steps a .arr{color:var(--clear); transition:transform .15s var(--ease-out);}
.next-steps a:hover{color:var(--clear); text-decoration-color:currentColor;}
.next-steps a:hover .arr{transform:translateX(3px);}

/* -------------------------------------- RIGHT RAIL (.rail-right) --------- */
/* NON-STICKY by explicit panel decision: it sits at its natural position
   and does not follow scroll. Below 1200px the rail stacks after the
   article at article width; the talk card is desktop-only (see below).     */
.rail-right{
  display:grid; gap:1.4rem; align-content:start;
  max-width:var(--measure);
  margin:2.6rem auto 0; padding:0 var(--gutter);
}
@media (min-width:1200px){
  .rail-right{
    max-width:none; margin:0; padding:0;
    align-self:start;                       /* natural position — no sticky */
  }
}

.rail-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:1.25rem 1.35rem 1.3rem;
}
.rail-kicker{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-mono); font-size:0.6875rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--deep);
}
.rail-kicker::before{
  content:""; width:6px; height:6px; border-radius:var(--r-pill);
  background:var(--clear); flex:none;
}

/* related guides — three compact entries, title + mono read-time */
.related-card ul{list-style:none; margin:0.7rem 0 0; padding:0;}
.related-card li{border-top:1px solid var(--line); padding:0.75rem 0;}
.related-card li:first-child{border-top:none; padding-top:0.45rem;}
.related-card li:last-child{padding-bottom:0.15rem;}
.related-card a{
  display:block; font-size:0.9375rem; font-weight:600; line-height:1.42;
  color:var(--ink); transition:color .15s var(--ease-out);
}
.related-card a:hover{color:var(--deep);}
.related-card .rg-meta{
  display:block; margin-top:0.3rem;
  font-family:var(--font-mono); font-size:0.6875rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--warm-gray);
}

/* talk card — C2's visual anatomy (ink panel, serif line, one button) at
   rail scale. Copy is panel-locked (Q4-C) verbatim. NEVER .btn.high; the
   amber budget belongs to C2. Desktop-rail-only: suppressed below 1200px
   so it cannot double with the canonical C2 end panel.                     */
.talk-card{
  background:var(--ink); border:none;
  border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  padding:1.5rem 1.45rem;
}
.talk-card .rail-kicker{color:#B9C0C7;}        /* .kicker.on-dark value */
.talk-card p{
  font-family:var(--font-display); font-weight:600;
  font-size:1.1875rem; line-height:1.42; letter-spacing:-0.005em;
  color:var(--paper); margin:0.75rem 0 1.2rem;
}
.talk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5em;
  font-family:var(--font-text); font-weight:600; font-size:0.9375rem;
  background:var(--paper); color:var(--ink);
  padding:11px 20px; border-radius:var(--r-md);
  text-decoration:none;
  transition:background .15s var(--ease-out), transform .15s var(--ease-out),
             box-shadow .15s var(--ease-out);
}
.talk-btn:hover{
  background:var(--white); color:var(--ink);
  transform:translateY(-1px); box-shadow:var(--shadow-2);
}
.talk-btn:active{transform:translateY(1px); box-shadow:var(--shadow-1);}
.talk-btn .arr{color:var(--clear); transition:transform .15s var(--ease-out);}
.talk-btn:hover .arr{transform:translateX(3px);}
@media (max-width:1199.98px){ .talk-card{display:none;} }

/* -------------------------------------------------------- small screens --- */
@media (max-width:600px){
  .next-steps{padding:1.4rem 1.3rem 1.1rem;}
  .rail-card{padding:1.15rem 1.15rem 1.2rem;}
  .tip-note{margin:2.1rem 0;}
}

/* ------------------------------------------------------ reduced motion --- */
@media (prefers-reduced-motion:reduce){
  .toc-mobile .toc-caret,
  .next-steps a .arr, .talk-btn, .talk-btn .arr{transition:none !important;}
}