/* rb-blog: the blog on the rb system (post.liquid → rb-article, blog-list.liquid → rb-list).
   Loaded after rb.css; only what posts and the blog index add to the shared layouts:
   the linked topic eyebrow, post images, quotes, video embeds, the fee slider, the newsletter
   card (rb/newsletter) and the index's closing chooser. Tokens only, no new colours. */

/* Head: the topic eyebrow links to its /blog/<topic>/ page */
.rb-ph .rb-eyebrow a{text-decoration:none;transition:color .15s}
.rb-ph .rb-eyebrow a:hover{color:var(--ink)}

/* A section title straight over its first heading (## Listing tips / ## Photo tips) reads as a
   kicker, so two hairlines and two big headings don't stack */
.rb-article__body h2:where(:not([class])):has(+h2){font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;color:var(--ink-3)}
.rb-article__body h2+h2:where(:not([class])){margin-top:.7em;padding-top:0;border-top:0}

/* Post images: screenshots and photos sit on paper, framed like rb figures. Each Markdown image
   carries {width=… height=…} (its size, tall ones capped at 560px high in the column), so the
   page never jumps while images load */
.rb-article__body img{display:block;margin-inline:auto;border-radius:var(--r3);background:var(--paper);box-shadow:var(--sh1)}
.rb-article__body>p:has(>img){margin-top:1.8em}
.rb-article__body>p:has(>img)+*{margin-top:1.8em}

/* Quotes: an editor's note or a quoted email, set off from the column */
.rb-article__body blockquote{padding:18px 22px;font-size:.94em;line-height:1.65}
.rb-article__body blockquote>*+*{margin-top:.8em}
.rb-article__body blockquote :is(ul,ol){display:grid;gap:.35em;padding-left:1.2em;list-style:disc}
.rb-article__body blockquote li::marker{color:var(--ink-4)}

/* Video embeds (YouTube) */
.rb-video{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r3);background:var(--ink);box-shadow:var(--sh1)}
.rb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rb-article__body>.rb-video{margin-top:1.8em}
.rb-article__body>.rb-video+*{margin-top:1.8em}

/* Fee slider (/poshmark-new-fees/): a range over a strip of three numbers */
.rb-fees{overflow:hidden;border-radius:var(--r3);background:var(--paper);box-shadow:var(--sh1);font-size:15px}
.rb-article__body>.rb-fees{margin-top:1.5em}
.rb-fees__in{display:grid;gap:12px;padding:18px 20px 20px}
.rb-fees__l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.rb-fees__l b{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rb-fees .rb-kpis{border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--tint)}
.rb-fees .rb-kpis dl>div{flex-basis:96px}
.rb-fees .rb-kpis dd{font-size:clamp(20px,2vw,24px)}
.rb-fees .rb-kpis dd span{margin-left:4px;font-size:var(--fs-xs);font-weight:600;letter-spacing:0;color:var(--ink-3)}

/* Newsletter (rb/newsletter): a quiet sign-off under the article, lighter than the product card
   that follows it (hairline, no shadow, ghost button); copy left, form right on wider screens */
.rb-news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;gap:6px 28px;padding:22px 24px;border-radius:var(--r4);box-shadow:inset 0 0 0 1px var(--line)}
.rb-article__body>.rb-news{margin-top:clamp(40px,5vw,56px)}
.rb-article__body:has(>.rb-news)+footer .rb-article__foot{margin-top:clamp(40px,5vw,56px)}
.rb-news__c{grid-row:span 2}
.rb-news__t{font-size:18px;font-weight:800;letter-spacing:-.025em;line-height:1.3;color:var(--ink)}
.rb-news__b{margin-top:4px;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2)}
.rb-news__f{display:flex;gap:8px;align-self:end}
.rb-news .rb-input{flex:1 1 auto;height:44px;font-size:15px;font-weight:500}
.rb-news .rb-input::placeholder{color:var(--ink-4)}
.rb-news .rb-btn{--h:44px;flex:none;padding:0 18px;font-size:15px}
.rb-news .rb-btn:disabled{opacity:.6;cursor:progress;transform:none}
.rb-news__note{align-self:start;font-size:var(--fs-xs);line-height:1.5;color:var(--ink-3)}
.rb-news__note[data-state=ok]{font-weight:700;color:var(--green)}
.rb-news__note:is([data-state=warn],[data-state=error]){font-weight:700;color:var(--red)}

/* Blog index: "Put what you learned to work." */
.rb-blog-next{margin-top:var(--section);padding-block:clamp(64px,8vw,104px);background:var(--well)}
.rb-blog-next__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:32px 64px}
.rb-blog-next .rb-lede{margin-top:20px}
.rb-blog-next__links{display:grid;gap:10px}
.rb-blog-next__links a{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 20px 12px 12px;border-radius:var(--r3);background:var(--paper);box-shadow:var(--sh1);font-weight:700;letter-spacing:-.01em;text-decoration:none;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.rb-blog-next__links a:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.rb-blog-next__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--ink);color:var(--paper)}
.rb-blog-next__t{flex:1 1 auto}
.rb-blog-next__links a>.rb-icon:last-child{color:var(--ink-3);transition:transform .2s var(--ease)}
.rb-blog-next__links a:hover>.rb-icon:last-child{color:var(--ink);transform:translateX(3px)}

@media (max-width:900px){
.rb-blog-next__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
.rb-article__body>p:has(>img),.rb-article__body>p:has(>img)+*,.rb-article__body>.rb-video,.rb-article__body>.rb-video+*{margin-top:1.4em}
.rb-article__body blockquote{padding:14px 16px}
.rb-news{grid-template-columns:minmax(0,1fr);padding:20px}
.rb-news__c{grid-row:auto;margin-bottom:10px}
.rb-fees__in{padding-inline:16px}
.rb-fees .rb-kpis dl{display:grid}
.rb-fees .rb-kpis dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px}
.rb-fees .rb-kpis dt{font-size:var(--fs-sm)}
.rb-fees .rb-kpis dd{font-size:18px}
.rb-list__h small{display:block;margin:6px 0 0}
}
@media (prefers-reduced-motion:reduce){
.rb-blog-next__links a,.rb-blog-next__links a>.rb-icon:last-child{transition:none}
}