/* Reboot Vitality: blog post + blog index templates in the APPROVED system (X3, GATE 1.5 close-out r1, 2026-10-23).
   Loads after /kit/fonts/fonts.css, /kit/tokens.css, base.css (the approved shared base) and close-band.css (B's close, verbatim).
   The post layout is the FROZEN canon (core30-v6-antigravity/templates/BLOG-POST-LAYOUT-VBH-CANON.astro): structure and spacing
   rhythm kept, tokens re-skinned to Reboot (paper / stone / ink, dusty blue the one accent, Playfair + Manrope, rings, pills).
   Every selector is class-scoped (rvb- prefix, plus the canon's load-bearing .blog-prose). No @keyframes, no animation
   declarations (motion is GSAP only, blog.js). Reveal targets hide only while the head snippet has armed .rv-motion. */

/* ---------- page tokens (the canon's per-client swap list, Reboot values) ---------- */
.w-v1 {
  --rvb-wrap: 1100px;                 /* canon .wrap max-width */
  --rvb-prose: #2A2A28;               /* long-read text on paper (13.0:1) */
  --rvb-prose-muted: #5E5B54;         /* = --fg-muted, AA on paper and stone */
  --rvb-link: var(--link-blue);       /* #3F6FA8, the text-safe member of the dusty-blue family on light grounds */
  --rvb-hair: color-mix(in srgb, var(--fg) 12%, transparent);
  --rvb-hair-2: color-mix(in srgb, var(--fg) 22%, transparent);
  --rvb-shell: color-mix(in srgb, var(--fg) 5%, transparent);
  --rvb-shell-line: color-mix(in srgb, var(--fg) 9%, transparent);
  --rvb-sticky-top: calc(var(--nav-h) + 14px + 30px);
}

/* ---------- shared pieces ---------- */
.rvb-wrap { max-width: calc(var(--rvb-wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.rvb-wrap--wide { max-width: var(--container); }
/* A's micro-pill (the approved eyebrow idiom, S1): 9 / 16 / 9 / 12 px, 6 % tint + 9 % inset hairline, caps 12 px .14em */
.rvb-pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px 9px 12px; border-radius: var(--r-pill);
  font-family: var(--font-utility); font-weight: var(--utility-weight); font-size: var(--utility-size); letter-spacing: var(--utility-track);
  text-transform: uppercase; line-height: 1.2; color: var(--fg); text-decoration: none;
  background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 9%, transparent);
}
.rvb-pill .rv-glyph { width: 26px; }
a.rvb-pill { transition: background-color .4s var(--ease-out-quart); }
a.rvb-pill:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.rvb-pill--h1 { font-size: 15px; letter-spacing: .12em; }
.rvb-pill--h1 .rv-glyph { width: 30px; }
/* breadcrumb: the service / condition ring-dot trail (interior.css section 1, copied 2026-10-23 close-out r2, owner ruling: ring dots on
   every page type, no "/" separators). Same markup (ol > li, ring dot drawn by li + li::before) and values. */
.rvb-crumb { margin: 0 0 22px; }
.rvb-crumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--fg-muted); }
.rvb-crumb-list li { display: inline-flex; align-items: center; gap: 12px; }
.rvb-crumb-list li + li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .7; }
.rvb-crumb-list a { color: inherit; text-decoration: none; }
.rvb-crumb-list a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.rvb-crumb-list [aria-current="page"] { color: var(--fg); }
.rvb-h2 { font-family: var(--font-display); font-size: var(--h2-size); line-height: 1; letter-spacing: -0.02em; }
.rvb-h2 em { font-style: italic; }
.rvb-band { position: relative; padding-block: var(--band-pad); overflow-x: clip; }
.rvb-stone { background: var(--bg-2); --rings-gap: var(--bg-2); }
.rvb-paper { background: var(--bg); --rings-gap: var(--bg); }
.rv-motion [data-rvb-reveal] { opacity: 0; }

/* ---------- the cover system (typographic + rings placeholders, one per phase; the pilot carries the generated photo) ----------
   The window light of the generated cover becomes the wash from the upper left on every placeholder, in the same warm-grey grade.
   The rings sit large and cropped; each phase turns them so the link point lands on that phase's clock position
   (01 Reset 12 o'clock, 02 Repair 3, 03 Restore 6, 04 Optimize 9): the four phases as four positions on one ring. */
.rvb-cover {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 10; border-radius: inherit;
  --cv-ground: var(--bg-2); --cv-ink: var(--ink); --cv-gap: var(--bg-2); --cv-word: var(--ink); --cv-pill: var(--ink);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(25, 25, 25, 0) 55%, rgba(25, 25, 25, .07) 100%),
    var(--cv-ground);
  color: var(--cv-word);
}
.rvb-cover[data-phase="repair"] { --cv-ground: #CFCCC4; --cv-gap: #CFCCC4; }
.rvb-cover[data-phase="restore"] { --cv-ground: var(--surface-2); --cv-gap: var(--surface-2); }
.rvb-cover[data-phase="optimize"] { --cv-ground: var(--ink-2); --cv-ink: var(--paper); --cv-gap: var(--ink-2); --cv-word: var(--paper); --cv-pill: var(--paper);
  background: linear-gradient(118deg, rgba(237, 236, 236, .10) 0%, rgba(237, 236, 236, 0) 45%), var(--cv-ground); }
.rvb-cover-rings { position: absolute; z-index: -1; width: 112%; max-width: none; height: auto; left: -6%; top: 50%; translate: 0 -50%; overflow: visible; }
.rvb-cover-rings .ring-body { fill: var(--cv-ink); stroke: var(--cv-gap); stroke-width: 16; paint-order: stroke fill; stroke-linejoin: round; }
/* group opacity (flattened), so the lower-crossing clip never double-darkens */
.rvb-cover-rg { opacity: .13; }
.rvb-cover[data-phase="optimize"] .rvb-cover-rg { opacity: .2; }
.rvb-cover-lp { fill: var(--accent); stroke: var(--cv-gap); stroke-width: 6; }
.rvb-cover-phase { position: absolute; left: 7%; top: 9%; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--cv-pill); }
.rvb-cover-phase b { font-weight: 600; opacity: .55; }
.rvb-cover-word { position: absolute; left: 7%; bottom: 9%; font-family: var(--font-display); font-style: italic; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -0.02em; color: var(--cv-word); }
.rvb-cover--photo { background: var(--ink-2); }
.rvb-cover--photo picture, .rvb-cover--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* double bezel (TASTE-SPEC 3): shell with tint + hairline, concentric inner radius */
.rvb-bezel { padding: var(--bezel-pad); border-radius: var(--r-xl); background: var(--rvb-shell); box-shadow: inset 0 0 0 1px var(--rvb-shell-line); }
.rvb-bezel > .rvb-bezel-core { position: relative; overflow: hidden; border-radius: calc(var(--r-xl) - var(--bezel-pad)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }

/* ================================================================================================================
   BLOG POST (canon: breadcrumb, eyebrow, H1, At a Glance, byline / cover band / sticky TOC + .blog-prose / tags / CTA card)
   ================================================================================================================ */
/* reading progress (canon ReadingProgressBar): a hairline in the accent, scaled by blog.js; hidden without the script */
.rvb-progress { position: fixed; z-index: 70; left: 0; right: 0; top: 0; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: var(--ink); pointer-events: none; display: none; }
.js .rvb-progress { display: block; }

.rvb-article-hero { position: relative; overflow: clip; isolation: isolate; background: var(--bg-2); --rings-gap: var(--bg-2); padding: calc(var(--nav-h) + 14px + 72px) 0 40px; }
/* A's ghost-rings watermark (why-us idiom), stone on stone, right of the canon single-column intro */
.rvb-hero-ghost { position: absolute; z-index: -1; right: -12%; top: 14%; width: min(64vw, 940px); height: auto; pointer-events: none; }
.rvb-hero-ghost .ring-body { fill: var(--ghost); stroke: var(--bg-2); stroke-width: 16; paint-order: stroke fill; stroke-linejoin: round; }
.rvb-article-hero .rvb-pill { margin: 0 0 26px; }
.rvb-article-hero h1 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4.7vw, 68px); line-height: 1.04; letter-spacing: -0.02em;
  max-width: 19em; text-wrap: balance; color: var(--fg); margin: 0;
}
/* At a Glance: the ONE element above the cover; canon LIGHT treatment (4px accent left-rule, small-caps label, 50-80 w) */
.rvb-glance { margin: 30px 0 0; max-width: 64ch; border-left: 4px solid var(--accent); padding: 2px 0 2px 20px; }
.rvb-glance-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--fg); margin-bottom: 8px; }
.rvb-glance p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--rvb-prose); }
/* byline meta (canon .meta) + the medically-reviewed stamp (owner-confirm placeholder) */
.rvb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 30px; font-size: 15px; color: var(--rvb-prose-muted); }
.rvb-meta .rvb-dot { color: color-mix(in srgb, var(--fg) 30%, transparent); }
.rvb-meta-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.rvb-meta-line::before { content: "·"; color: color-mix(in srgb, var(--fg) 30%, transparent); }
.rvb-review { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); }
.rvb-review-face { position: relative; flex: none; width: 44px; height: 44px; }
.rvb-review-face img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; filter: grayscale(1) sepia(.14) contrast(1.02); }
.rvb-review-face::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fg); }
.rvb-review-face i { position: absolute; z-index: 1; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg-2); }
.rvb-review-text { line-height: 1.35; }
.rvb-review-text strong { font-weight: 600; }
.rvb-review-text span { display: block; color: var(--rvb-prose-muted); font-size: 14px; }

/* cover band (canon .cover-wrap: same ground as the hero, aspect-constrained rounded frame) */
.rvb-cover-wrap { background: linear-gradient(var(--bg-2) 0 62%, var(--bg) 62% 100%); padding-bottom: 8px; }
.rvb-cover-frame { aspect-ratio: 16 / 8; }
.rvb-cover-frame .rvb-bezel-core { height: 100%; background: var(--ink-2); }
.rvb-cover-frame picture, .rvb-cover-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rvb-cover-cap { margin-top: 12px; font-size: 13px; color: var(--rvb-prose-muted); }

/* body grid (canon: sticky left TOC 260 px + article column max 760 px, 56 px gap at >= 1024) */
.rvb-body-band { background: var(--bg); }
.rvb-body-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 56px; padding-bottom: 112px; }
.rvb-toc-cell { display: none; }
@media (min-width: 1024px) {
  .rvb-body-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; padding-top: 72px; }
  .rvb-toc-cell { display: block; position: sticky; top: var(--rvb-sticky-top); align-self: start; }
}
.rvb-article-col { min-width: 0; max-width: 760px; }

/* TOC rail (canon BlogToc): label, list, active marker, share row */
.rvb-toc { position: relative; }
.rvb-toc-label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--fg); }
.rvb-toc-track { position: relative; }
.rvb-toc-list { position: relative; list-style: none; margin: 0; padding: 0 0 0 22px; max-height: 60vh; overflow-y: auto; scrollbar-width: none; }
.rvb-toc-list::-webkit-scrollbar { display: none; }
.rvb-toc-list::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--rvb-hair-2); }
.rvb-toc-list li { margin: 0; }
.rvb-toc-list li.lvl3 { padding-left: 14px; }
.rvb-toc-link { display: block; padding: 6px 0; font-size: 14.5px; line-height: 1.4; color: var(--rvb-prose-muted); text-decoration: none; transition: color .35s var(--ease-out-quart); }
.rvb-toc-list li.lvl3 .rvb-toc-link { font-size: 13.5px; }
.rvb-toc-link:hover { color: var(--fg); }
.rvb-toc-link.is-active { color: var(--fg); font-weight: 600; }
/* the active marker: a small interlocked-rings glyph that travels down the rail (blog.js); without the script it is not shown */
.rvb-toc-marker { position: absolute; left: -2px; top: 0; width: 18px; height: 12px; display: none; pointer-events: none; }
.js .rvb-toc-marker { display: block; }
.rvb-toc-marker .ring-body { fill: var(--fg); stroke: var(--bg); stroke-width: 40; paint-order: stroke fill; stroke-linejoin: round; }
.rvb-share { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rvb-hair); position: relative; }
.rvb-share-label { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--fg); }
.rvb-share-row { display: flex; gap: 8px; }
.rvb-share-btn {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  font: 600 13px/1 var(--font-body); color: var(--fg); text-decoration: none; cursor: pointer;
  background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 9%, transparent);
  transition: background-color .35s var(--ease-out-quart), transform .4s var(--ease-out-expo);
}
.rvb-share-btn:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.rvb-share-btn:active { transform: scale(var(--press-scale)); }
.rvb-copied { position: absolute; right: 0; top: 20px; font-size: 12px; font-weight: 600; color: var(--fg); }

/* mobile collapsed TOC bar (canon .toc-mobile), below 1024 px */
.rvb-toc-mobile { position: sticky; top: var(--rvb-sticky-top); z-index: 20; margin-bottom: 32px; border-radius: 20px; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--rvb-shell-line), 0 14px 30px -22px rgba(70, 64, 52, .4); }
@media (min-width: 1024px) { .rvb-toc-mobile { display: none; } }
.rvb-toc-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 10px 0 18px; border: 0; background: transparent; cursor: pointer; font: 600 15px/1.2 var(--font-body); color: var(--fg); text-align: left; }
.rvb-toc-toggle .rvb-toc-now { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; color: var(--rvb-prose-muted); }
.rvb-toc-chev { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 7%, transparent); transition: transform .5s var(--ease-out-expo); }
.rvb-toc-chev svg { width: 14px; height: 14px; }
.rvb-toc-toggle[aria-expanded="true"] .rvb-toc-chev { transform: rotate(180deg); }
.rvb-toc-mlist { list-style: none; margin: 0; padding: 4px 18px 16px; max-height: 55vh; overflow-y: auto; }
.rvb-toc-mlist li.lvl3 { padding-left: 14px; }
.rvb-toc-mlist .rvb-toc-link { padding: 8px 0; font-size: 15px; }

/* .blog-prose (LOAD-BEARING class name: audit-dist.py parses its links). Canon rhythm, Reboot tokens. */
.blog-prose { font-size: 18px; line-height: 1.75; color: var(--rvb-prose); }
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose > p:first-child { font-size: 20px; line-height: 1.65; color: var(--fg); }
.blog-prose h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -0.015em; color: var(--fg); margin: 3.2rem 0 1.1rem; scroll-margin-top: calc(var(--rvb-sticky-top) + 12px); text-wrap: balance; }
.blog-prose h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; color: var(--fg); margin: 2.2rem 0 .8rem; scroll-margin-top: calc(var(--rvb-sticky-top) + 12px); }
.blog-prose p { margin: 0 0 1.3rem; max-width: 68ch; }
.blog-prose a { color: var(--rvb-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--rvb-link) 45%, transparent); transition: text-decoration-color .3s var(--ease-out-quart), color .3s var(--ease-out-quart); }
.blog-prose a:hover { color: var(--fg); text-decoration-color: currentColor; }
.blog-prose strong { font-weight: 600; color: var(--fg); }
.blog-prose ul { margin: 1.3rem 0 1.6rem; padding-left: 0; list-style: none; }
.blog-prose ul li { position: relative; padding-left: 1.75rem; margin-bottom: .55rem; }
/* bullet = a small open ring with the accent link point (the brand rings, at text scale) */
.blog-prose ul li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fg); }
.blog-prose ul li::after { content: ''; position: absolute; left: 5px; top: calc(.62em + 9px); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.blog-prose ol { margin: 1.3rem 0; padding-left: 1.5rem; }
.blog-prose ol li::marker { color: var(--fg); font-weight: 600; }
.blog-prose blockquote { margin: 2rem 0; padding: 1.2rem 1.6rem; border-left: 4px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--fg); border-radius: 0 16px 16px 0; background: var(--rvb-shell); }
.blog-prose hr { margin: 3rem 0; border: 0; height: 1px; background: var(--rvb-hair-2); }
.blog-prose img { width: 100%; border-radius: 20px; margin: 2rem 0; }

/* tag row (canon .tagrow) */
.rvb-tagrow { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.rvb-tag { padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 9%, transparent); transition: background-color .35s var(--ease-out-quart); }
.rvb-tag:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }

/* conversion card (canon .cta-card: dark card, accent left-rule, booking primary + descriptive "Explore {Service}" up-link) */
.rvb-cta-card { margin-top: 48px; padding: var(--bezel-pad); border-radius: var(--r-xl); background: var(--rvb-shell); box-shadow: inset 0 0 0 1px var(--rvb-shell-line); }
.rvb-cta-core { position: relative; overflow: hidden; isolation: isolate; padding: 40px 40px 40px 44px; border-radius: calc(var(--r-xl) - var(--bezel-pad)); background: var(--bg-ink); color: var(--fg-on-ink); border-left: 4px solid var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); --rings-ink: var(--fg-on-ink); --rings-gap: var(--bg-ink); }
.rvb-cta-core .rvb-cta-ghost { position: absolute; z-index: -1; right: -14%; bottom: -46%; width: 64%; height: auto; opacity: 1; }
.rvb-cta-ghost .ring-body { fill: var(--ghost-ink); stroke: var(--bg-ink); stroke-width: 16; paint-order: stroke fill; }
.rvb-cta-core h3 { font-family: var(--font-display); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; color: var(--fg-on-ink); margin: 0 0 12px; }
.rvb-cta-core h3 em { font-style: italic; }
.rvb-cta-core p { max-width: 46ch; color: var(--fg-on-ink-muted); margin: 0 0 26px; }
.rvb-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* related posts (task ask; NOT in the frozen canon, which ships lateral linking OFF: owner decision, see DESIGN-SPEC) */
.rvb-related-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-bottom: 56px; }
.rvb-related-head .rvb-pill { margin-bottom: 26px; }
.rvb-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rvb-hair-2); }
.rvb-ledger li { border-bottom: 1px solid var(--rvb-hair-2); }
.rvb-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) 56px; gap: 40px; align-items: center; padding: 28px 0; text-decoration: none; color: var(--fg); }
.rvb-row-thumb { border-radius: var(--r-lg); padding: 5px; background: var(--rvb-shell); box-shadow: inset 0 0 0 1px var(--rvb-shell-line); }
.rvb-row-thumb .rvb-cover { border-radius: calc(var(--r-lg) - 5px); }
.rvb-row-thumb .rvb-cover-word { font-size: 30px; }
.rvb-row-text { display: grid; min-width: 0; }
.rvb-row-meta { font-size: 12px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--rvb-prose-muted); }
.rvb-row-title { margin-top: 10px; font-family: var(--font-display); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -0.01em; max-width: 26em; text-wrap: balance; }
.rvb-row-ex { margin-top: 10px; max-width: 64ch; color: var(--rvb-prose-muted); font-size: 16px; line-height: 1.55; }
.rvb-row-go { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent); transition: background-color .45s var(--ease-out-expo), color .45s var(--ease-out-expo); }
.rvb-row-go svg { width: 20px; height: 20px; transition: transform .6s var(--ease-out-expo); }
.rvb-row:hover .rvb-row-go { background: var(--ink); color: var(--paper); }
.rvb-row:hover .rvb-row-go svg { transform: translateX(3px) rotate(-45deg); }
.rvb-row .rvb-cover-rings { transition: rotate .9s var(--ease-out-expo); }
.rvb-row:hover .rvb-cover-rings { rotate: -6deg; }

/* ================================================================================================================
   BLOG INDEX (idx-hero / idx-list / idx-cta-band)
   ================================================================================================================ */
.rvb-idx-hero { background: var(--bg); --rings-gap: var(--bg); padding: calc(var(--nav-h) + 14px + 88px) 0 clamp(96px, 9vw, 150px); }
.rvb-idx-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.rvb-idx-hero .rvb-pill--h1 { margin: 0 0 36px; }
.rvb-display { font-family: var(--font-display); font-size: var(--display-size); letter-spacing: var(--display-track); line-height: var(--display-lead); font-weight: 400; max-width: 8.6em; margin-bottom: 36px; }
.rvb-display em { font-style: italic; }
.rvb-lede { font-size: 20px; line-height: 1.55; color: var(--fg-muted); max-width: 46ch; }
/* hero mark: the rings with the four phases at their clock positions (each a link into the filtered list) */
.rvb-phase-mark { position: relative; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 1; }
.rvb-phase-mark .rvb-hero-rings { position: absolute; left: 25%; top: 34.6%; width: 50%; height: auto; overflow: visible; }
.rvb-hero-rings .ring-body { fill: var(--rings-ink); stroke: var(--rings-gap); stroke-width: 16; paint-order: stroke fill; stroke-linejoin: round; }
.rvb-hero-rings .ring-line { fill: none; stroke: var(--rings-ink); stroke-width: 3; opacity: 0; }
.rvb-orbit-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rvb-orbit-line circle { fill: none; stroke: var(--rvb-hair-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rvb-phase-anno { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--r-pill); text-decoration: none; color: var(--fg); font-size: 12px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; white-space: nowrap;
  background: color-mix(in srgb, var(--bg) 86%, transparent); box-shadow: inset 0 0 0 1px var(--rvb-shell-line), 0 10px 24px -18px rgba(70, 64, 52, .5); transition: background-color .35s var(--ease-out-quart), transform .5s var(--ease-out-expo); }
.rvb-phase-anno:hover { background: var(--surface); transform: translateY(-2px); }
.rvb-phase-anno b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11px; letter-spacing: 0; }
.rvb-phase-anno span { color: var(--rvb-prose-muted); letter-spacing: .04em; text-transform: none; font-weight: 600; }
.rvb-phase-anno[data-phase="reset"] { left: 50%; top: 0; translate: -50% -50%; }
.rvb-phase-anno[data-phase="repair"] { right: 0; top: 50%; translate: 50% -50%; }
.rvb-phase-anno[data-phase="restore"] { left: 50%; bottom: 0; translate: -50% 50%; }
.rvb-phase-anno[data-phase="optimize"] { left: 0; top: 50%; translate: -50% -50%; }

/* list band */
.rvb-list-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 64px; margin-bottom: 56px; }
.rvb-list-head .rvb-pill { margin-bottom: 26px; }
.rvb-list-intro { margin-top: 22px; max-width: 52ch; color: var(--fg-muted); }
.rvb-filter { display: flex; align-items: center; gap: 22px; }
.rvb-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 600px; justify-content: flex-end; }
.rvb-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 600 14px/1 var(--font-body); color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent);
  transition: background-color .4s var(--ease-out-quart), color .4s var(--ease-out-quart), transform .4s var(--ease-out-expo);
}
.rvb-chip:hover { background: color-mix(in srgb, var(--fg) 11%, transparent); }
.rvb-chip:active { transform: scale(var(--press-scale)); }
.rvb-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.rvb-chip small { font-size: 12px; font-weight: 600; opacity: .6; }
.rvb-chip[aria-pressed="true"] small { opacity: .75; }
/* JS off: every article shows and the chips (which need the script) are not offered */
.rvb-filter { visibility: hidden; }
.js .rvb-filter { visibility: visible; }
/* the phase dial: one ring, four ticks at the clock positions, the accent link point travels to the picked phase */
.rvb-phase-dial { flex: none; width: 92px; height: 92px; overflow: visible; }
.rvb-phase-dial .dial-ring { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.rvb-phase-dial .dial-tick { stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; opacity: .3; transition: opacity .5s var(--ease-out-quart); }
.rvb-phase-dial .dial-tick.is-on { opacity: 1; }
.rvb-phase-dial .dial-dot { fill: var(--accent); stroke: var(--bg-2); stroke-width: 4; }
.rvb-phase-dial .dial-n { font: 600 11px/1 var(--font-body); fill: var(--fg); letter-spacing: .04em; text-anchor: middle; dominant-baseline: central; }

/* the index component (declared for design lint M8: data-lint-allow="index") */
.rvb-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.rvb-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); padding: var(--bezel-pad); background: var(--rvb-shell); box-shadow: inset 0 0 0 1px var(--rvb-shell-line); }
.rvb-card[hidden] { display: none; }
.rvb-card-core { position: relative; display: flex; flex-direction: column; flex: 1; overflow: hidden; border-radius: calc(var(--r-xl) - var(--bezel-pad)); background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); text-decoration: none; color: var(--fg); }
.rvb-card-media { position: relative; overflow: hidden; border-radius: calc(var(--r-xl) - var(--bezel-pad)) calc(var(--r-xl) - var(--bezel-pad)) 0 0; }
.rvb-card-media .rvb-cover { border-radius: 0; transition: transform 1s var(--ease-out-expo); }
.rvb-card-core:hover .rvb-card-media .rvb-cover { transform: scale(1.035); }
.rvb-card-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.rvb-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--rvb-prose-muted); }
.rvb-card-title { margin-top: 14px; font-family: var(--font-display); font-size: clamp(22px, 1.75vw, 25px); line-height: 1.16; letter-spacing: -0.01em; text-wrap: balance; }
.rvb-card-ex { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--rvb-prose-muted); }
.rvb-card-go { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.rvb-card-time { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--rvb-prose-muted); }
.rvb-card-go i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 7%, transparent); transition: background-color .45s var(--ease-out-expo), color .45s var(--ease-out-expo); }
.rvb-card-go svg { width: 16px; height: 16px; transition: transform .6s var(--ease-out-expo); }
.rvb-card-core:hover .rvb-card-go i { background: var(--ink); color: var(--paper); }
.rvb-card-core:hover .rvb-card-go svg { transform: translateX(2px) rotate(-45deg); }
/* the featured post: full row, the generated cover beside the copy */
.rvb-card--feature { grid-column: 1 / -1; }
.rvb-card--feature .rvb-card-core { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rvb-card--feature .rvb-card-media { border-radius: calc(var(--r-xl) - var(--bezel-pad)) 0 0 calc(var(--r-xl) - var(--bezel-pad)); min-height: 100%; }
.rvb-card--feature .rvb-cover { aspect-ratio: auto; height: 100%; min-height: 420px; }
.rvb-card--feature .rvb-card-body { padding: 48px 48px 44px; justify-content: center; }
.rvb-card--feature .rvb-card-title { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.08; }
.rvb-card--feature .rvb-card-ex { font-size: 17px; }
.rvb-feature-flag { display: inline-flex; align-self: flex-start; margin-bottom: 20px; }
.rvb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .rvb-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rvb-list-head { grid-template-columns: minmax(0, 1fr); }
  .rvb-filter-chips { justify-content: flex-start; max-width: none; }
}
@media (max-width: 1023.98px) {
  .rvb-idx-grid { grid-template-columns: minmax(0, 1fr); }
  .rvb-phase-mark { width: min(78%, 440px); margin-top: 40px; }
  .rvb-card--feature .rvb-card-core { grid-template-columns: minmax(0, 1fr); }
  .rvb-card--feature .rvb-card-media { border-radius: calc(var(--r-xl) - var(--bezel-pad)) calc(var(--r-xl) - var(--bezel-pad)) 0 0; }
  .rvb-card--feature .rvb-cover { aspect-ratio: 2 / 1; height: auto; min-height: 0; }
  .rvb-row { grid-template-columns: 200px minmax(0, 1fr) 48px; gap: 28px; }
}
@media (max-width: 767.98px) {
  .w-v1 { --rvb-sticky-top: calc(var(--nav-h) + 10px + 12px); }
  .rvb-article-hero { padding: calc(var(--nav-h) + 10px + 40px) 0 28px; }
  .rvb-article-hero .rvb-pill { margin-bottom: 20px; }
  .rvb-crumb { margin-bottom: 18px; }
  .rvb-crumb-list { font-size: 12px; gap: 4px 10px; }
  .rvb-crumb-list li { gap: 10px; }
  .rvb-article-hero h1 { font-size: 26px; line-height: 1.12; letter-spacing: -0.015em; }
  .rvb-pill-more { display: none; }
  .rvb-hero-ghost { right: -40%; top: auto; bottom: 26%; width: 120vw; }
  .rvb-meta { gap: 14px; }
  .rvb-meta-line { width: 100%; gap: 4px 10px; }
  .rvb-meta-line::before { display: none; }
  .rvb-meta-author { flex-basis: 100%; }
  .rvb-dot--a { display: none; }
  .rvb-glance { margin-top: 24px; padding-left: 16px; }
  .rvb-glance p { font-size: 17px; }
  .rvb-meta { margin-top: 24px; font-size: 14px; }
  .rvb-cover-frame { aspect-ratio: 4 / 3; }
  .rvb-bezel { border-radius: var(--r-lg); }
  .rvb-bezel > .rvb-bezel-core { border-radius: calc(var(--r-lg) - var(--bezel-pad)); }
  .rvb-body-grid { padding-top: 28px; padding-bottom: 80px; }
  .blog-prose { font-size: 17px; line-height: 1.72; }
  .blog-prose > p:first-child { font-size: 18.5px; }
  .blog-prose h2 { font-size: 28px; margin-top: 2.6rem; }
  .blog-prose h3 { font-size: 22px; }
  .rvb-cta-core { padding: 30px 18px 22px 20px; }
  .rvb-cta-actions .rv-btn { width: 100%; justify-content: space-between; padding-left: 20px; gap: 10px; }
  .rvb-related-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; }
  .rvb-row { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; }
  .rvb-row-go { display: none; }
  .rvb-row-time { display: none; }
  .rvb-row-thumb { border-radius: 16px; padding: 4px; }
  .rvb-row-thumb .rvb-cover { aspect-ratio: 1; border-radius: 12px; }
  .rvb-row-thumb .rvb-cover-word { font-size: 18px; left: 10%; bottom: 10%; }
  .rvb-row-thumb .rvb-cover-phase { display: none; }
  .rvb-row-title { margin-top: 6px; font-size: 21px; }
  .rvb-row-ex { display: none; }

  .rvb-idx-hero { padding-top: calc(var(--nav-h) + 10px + 40px); padding-bottom: 96px; }
  .rvb-idx-hero .rvb-pill--h1 { font-size: 14px; margin-bottom: 26px; }
  .rvb-display { margin-bottom: 22px; }
  .rvb-lede { font-size: 17px; }
  .rvb-phase-mark { width: 64%; margin-top: 64px; margin-bottom: 24px; }
  .rvb-phase-anno { padding: 6px 10px 6px 6px; font-size: 11px; gap: 7px; }
  .rvb-phase-anno b { width: 22px; height: 22px; }
  .rvb-phase-anno span { display: none; }
  .rvb-list-head { margin-bottom: 36px; gap: 28px; }
  .rvb-filter { align-items: flex-start; gap: 14px; }
  .rvb-phase-dial { width: 64px; height: 64px; }
  .rvb-chip { min-height: 40px; padding: 0 12px 0 12px; font-size: 13px; }
  .rvb-index { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* 390: a compact ledger card (cover square at the left, title + meta at the right); the feature stays a full card */
  .rvb-card { border-radius: var(--r-lg); }
  .rvb-card-core { display: grid; grid-template-columns: 104px minmax(0, 1fr); border-radius: calc(var(--r-lg) - var(--bezel-pad)); }
  .rvb-card-media { border-radius: calc(var(--r-lg) - var(--bezel-pad)) 0 0 calc(var(--r-lg) - var(--bezel-pad)); }
  .rvb-card-media .rvb-cover { aspect-ratio: auto; height: 100%; min-height: 128px; }
  .rvb-card-media .rvb-cover-word { font-size: 19px; left: 12%; bottom: 10%; }
  .rvb-card-media .rvb-cover-phase { display: none; }
  .rvb-card-body { padding: 16px 16px 16px 18px; }
  .rvb-card-meta { font-size: 11px; gap: 4px 10px; }
  .rvb-card-title { margin-top: 8px; font-size: 19px; }
  .rvb-card-ex { display: none; }
  .rvb-card-go { display: none; }
  .rvb-card--feature .rvb-card-core { display: grid; grid-template-columns: minmax(0, 1fr); }
  .rvb-card--feature .rvb-card-media { border-radius: calc(var(--r-lg) - var(--bezel-pad)) calc(var(--r-lg) - var(--bezel-pad)) 0 0; }
  .rvb-card--feature .rvb-cover { aspect-ratio: 16 / 10; min-height: 0; }
  .rvb-card--feature .rvb-card-body { padding: 24px 22px 24px; }
  .rvb-card--feature .rvb-card-title { font-size: 27px; }
  .rvb-card--feature .rvb-card-ex { display: block; font-size: 16px; }
  .rvb-card--feature .rvb-card-go { display: inline-flex; }
}