/* MoveConsole — the blog: /blog and its articles (flat addresses, like /help-*).
   Builds on site.css + role.css (labels, the FAQ). Made for long reads: a 720px column at 18px, a contents list that
   stays beside it on wide screens (the same .lg-toc behaviour as the legal pages: site.js folds it on narrow screens
   and marks the section being read), tables that scroll on their own, and one drawn picture per article in that
   article's colour. A thin reading bar runs along the top where the browser can drive it from the scroll. */

.rl-blog{ --accent: #186ff2; --accent-600: #0e5bd6; --accent-ink: #031a3f; --tint: #eef5ff; --tint-2: #dcebff; }
.bl-blue{ --accent: #186ff2; --accent-600: #0e5bd6; --accent-ink: #031a3f; --tint: #eef5ff; --tint-2: #dcebff; }
.bl-coral{ --accent: #e2552e; --accent-600: #c9441f; --accent-ink: #3a1206; --tint: #fff5f0; --tint-2: #ffdccd; }
.bl-gold{ --accent: #b06a00; --accent-600: #935800; --accent-ink: #2e1c00; --tint: #fdf8ee; --tint-2: #f6e2bb; }
.bl-violet{ --accent: #6b4de6; --accent-600: #5a3bd4; --accent-ink: #1b1240; --tint: #f6f4ff; --tint-2: #e4ddff; }
.bl-teal{ --accent: #0e8f74; --accent-600: #0b7a63; --accent-ink: #04291f; --tint: #eff8f4; --tint-2: #cdebe0; }

/* ================= the hub ================= */
.bl-hub-hero{ padding: calc(var(--hdr) + clamp(28px, 4vw, 64px)) 0 clamp(32px, 3.4vw, 48px); }
.bl-hub-head{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: end; gap: 18px clamp(24px, 5vw, 80px); }
.bl-hub-head > div{ display: grid; justify-items: start; gap: 20px; }
.bl-hub-head > p{ max-width: 46ch; margin: 0; color: var(--ink-s); font-size: 18px; line-height: 1.55; }

/* the featured article: picture left, words right */
.bl-feat{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .25s; }
.bl-feat:hover{ box-shadow: inset 0 0 0 1px var(--tint-2), 0 30px 60px -40px rgba(6, 26, 63, .35); }
.bl-feat .bl-vis{ border-radius: 0; min-height: 360px; }
.bl-feat-txt{ display: grid; align-content: center; justify-items: start; gap: 16px; padding: clamp(24px, 3.4vw, 48px); }
.bl-feat-txt h2{ margin: 0; color: var(--navy); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; font-weight: 550; letter-spacing: -.03em; text-wrap: balance; }
.bl-feat-txt p{ margin: 0; color: var(--ink-s); font-size: 17px; line-height: 1.55; }
.bl-feat + .bl-feat{ margin-top: 18px; }

.bl-cards{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.bl-card{ display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .25s, transform .3s var(--ease); }
.bl-card:hover{ box-shadow: inset 0 0 0 1px var(--tint-2), 0 30px 60px -40px rgba(6, 26, 63, .35); transform: translateY(-2px); }
/* a card's picture takes the height its drawing needs (zoom shrinks the layout too, unlike scale) */
.bl-card .bl-vis{ border-radius: 0; min-height: 230px; padding: 26px 20px; }
.bl-card .bl-vis > *{ zoom: .82; }
.bl-card-txt{ display: grid; align-content: start; gap: 10px; padding: 22px 24px 24px; }
.rl-sec.bl-hub-list{ padding-top: 0; }
.bl-card-txt h2, .bl-card-txt h3{ margin: 0; color: var(--navy); font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.bl-card-txt p{ margin: 0; color: var(--ink-s); font-size: 15.5px; line-height: 1.55; }
.bl-tag{ color: var(--accent-ink); font: 600 11.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.bl-tag::before{ content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--accent); vertical-align: 1px; }
.bl-read{ color: var(--muted); font: 500 13.5px/1.3 var(--font-ui); }

/* ================= an article ================= */
.bl-head{ padding-bottom: clamp(24px, 3vw, 40px); }
.bl-head-grid{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(28px, 4.5vw, 72px); }
.bl-head-txt{ display: grid; justify-items: start; gap: 18px; }
.bl-crumbs{ display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); font: 500 13.5px/1.3 var(--font-ui); }
.bl-crumbs li + li::before{ content: "/"; margin-right: 8px; color: #c3c8d2; }
.bl-crumbs a:hover{ color: var(--accent-600); }
.bl-h1{ margin: 0; color: var(--navy); font-size: clamp(36px, 4.2vw, 60px); line-height: 1.03; font-weight: 550; letter-spacing: -.04em; text-wrap: balance; }
.bl-dek{ max-width: 52ch; margin: 0; color: var(--ink-s); font-size: clamp(18px, 1.4vw, 20.5px); line-height: 1.5; text-wrap: pretty; }
.bl-meta{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0; color: var(--muted); font: 500 14px/1.3 var(--font-ui); }
.bl-meta span + span::before{ content: "·"; margin-right: 18px; color: #c3c8d2; }
.bl-meta b{ color: var(--ink); font-weight: 600; }

.bl-doc{ padding: clamp(20px, 3vw, 40px) 0 0; }
.bl-grid{ display: grid; grid-template-columns: 250px minmax(0, 720px); justify-content: center; align-items: start; gap: clamp(36px, 5vw, 88px); }

/* contents: site.js's .lg-toc (folds on narrow screens, marks the section in view); the column around it stays put */
.bl-side{ position: sticky; top: calc(var(--hdr) + 24px); max-height: calc(100vh - var(--hdr) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lg-toc summary{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; list-style: none; color: var(--accent-ink); font: 600 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.lg-toc summary::-webkit-details-marker{ display: none; }
.lg-toc summary svg{ display: none; }
.lg-toc ol{ list-style: none; counter-reset: toc; display: grid; gap: 1px; margin: 0; padding: 0; border-left: 1px solid var(--hair); }
.lg-toc li{ counter-increment: toc; }
.lg-toc a{ display: flex; gap: 10px; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; color: var(--muted); font: 500 14px/1.35 var(--font-ui); transition: color .2s, border-color .2s; }
.lg-toc a::before{ content: counter(toc); min-width: 1.3em; color: #a3a8b2; font-variant-numeric: tabular-nums; }
.lg-toc a:hover{ color: var(--ink); }
.lg-toc a.on{ color: var(--accent-600); border-left-color: var(--accent); }
.lg-toc a.on::before{ color: var(--accent); }
.bl-toc-cta{ display: grid; gap: 10px; margin-top: 26px; padding: 18px; border-radius: 16px; background: var(--tint); }
.bl-toc-cta b{ color: var(--navy); font: 600 15px/1.3 var(--font-ui); }
.bl-toc-cta span{ color: var(--ink-s); font-size: 13.5px; line-height: 1.45; }

/* the text */
.bl-body{ min-width: 0; color: var(--ink-2); font-size: 18px; line-height: 1.72; }
.bl-body > h2, .bl-faq > h2{ margin: 60px 0 16px; color: var(--navy); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.18; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.bl-body h3{ margin: 34px 0 10px; color: var(--navy); font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.bl-body p{ margin: 0 0 18px; text-wrap: pretty; }
.bl-body ul, .bl-body ol{ display: grid; gap: 9px; margin: 0 0 20px; padding-left: 24px; }
.bl-body li::marker{ color: var(--accent); font-weight: 600; }
.bl-body strong{ color: var(--ink); font-weight: 650; }
.bl-body a:not(.btn){ color: var(--accent-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bl-body a:not(.btn):hover{ text-decoration-thickness: 2px; }

/* "in short" at the top */
.bl-short{ margin: 0 0 8px; padding: 26px 28px 24px; border-radius: 22px; background: var(--tint); }
.bl-short h2{ margin: 0 0 14px; color: var(--accent-ink); font: 600 12.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.bl-short ul{ list-style: none; gap: 12px; margin: 0; padding: 0; }
.bl-short li{ position: relative; padding-left: 34px; color: var(--ink); font-size: 17px; line-height: 1.5; }
.bl-short li::before{ content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 7px; background: #fff; }
.bl-short li::after{
  content: ""; position: absolute; left: 4px; top: 6px; width: 14px; height: 14px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* tables scroll on their own, never the page */
.bl-table{ margin: 8px 0 24px; overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); -webkit-overflow-scrolling: touch; }
.bl-table table{ width: 100%; min-width: 520px; border-collapse: collapse; font: 400 15.5px/1.45 var(--font-ui); }
.bl-table th, .bl-table td{ padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.bl-table thead th{ background: var(--tint); color: var(--accent-ink); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.bl-table tbody tr:last-child td{ border-bottom: 0; }
.bl-table tbody tr:nth-child(even) td{ background: #fafbfc; }
.bl-table td.n, .bl-table th.n{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-table td:first-child{ color: var(--ink); font-weight: 500; }
.bl-table caption{ caption-side: bottom; padding: 10px 16px 12px; color: var(--muted); font-size: 13.5px; text-align: left; }

/* a tip, a note, a warning */
.bl-tip{ display: grid; gap: 4px; margin: 22px 0 24px; padding: 18px 20px; border-radius: 16px; background: var(--tint); }
.bl-tip b{ color: var(--accent-ink); font: 600 12.5px/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.bl-tip p{ margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.bl-tip.is-warn{ background: #fff7ed; }
.bl-tip.is-warn b{ color: #9a3412; }

/* a formula */
.bl-formula{ display: grid; gap: 8px; margin: 18px 0 24px; padding: 20px 22px; border-radius: 16px; background: var(--navy); color: #fff; }
.bl-formula small{ color: rgba(255, 255, 255, .62); font: 600 11.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.bl-formula code{ color: #fff; font: 500 clamp(16px, 1.6vw, 19px)/1.5 var(--font-mono); white-space: normal; }
.bl-formula code em{ color: #9ec5ff; font-style: normal; }

/* a worked example */
.bl-ex{ margin: 18px 0 26px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 24px 50px -40px rgba(6, 26, 63, .35); overflow: hidden; }
.bl-ex-h{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 16px 20px; background: var(--tint); }
.bl-ex-h b{ color: var(--accent-ink); font: 600 12.5px/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.bl-ex-h span{ color: var(--ink-s); font: 500 14px/1.3 var(--font-ui); }
.bl-ex dl{ display: grid; margin: 0; padding: 6px 20px 8px; }
.bl-ex dl div{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--hair); font: 400 15.5px/1.4 var(--font-ui); }
.bl-ex dl div:last-child{ border-bottom: 0; }
.bl-ex dt small{ display: block; color: var(--muted); font-size: 13px; }
.bl-ex dd{ margin: 0; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bl-ex dl .is-total{ border-top: 2px solid var(--navy); border-bottom: 0; margin-top: 4px; padding-top: 14px; }
.bl-ex dl .is-total dt{ color: var(--navy); font-weight: 600; }
.bl-ex dl .is-total dd{ color: var(--accent-600); font: 600 19px/1.2 var(--font); letter-spacing: -.01em; }
.bl-ex p{ margin: 0; padding: 0 20px 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* numbered steps and check lists */
.bl-body ol.bl-steps{ list-style: none; counter-reset: st; gap: 0; padding: 0; margin: 8px 0 24px; }
.bl-steps > li{ counter-increment: st; position: relative; padding: 14px 0 14px 50px; border-bottom: 1px solid var(--hair); }
.bl-steps > li:last-child{ border-bottom: 0; }
.bl-steps > li::before{ content: counter(st); position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--accent-600); font: 600 14px/1 var(--font-ui); }
.bl-body ul.bl-check{ list-style: none; padding: 0; }
.bl-check > li{ position: relative; padding-left: 32px; }
.bl-check > li::before{ content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 6px; background: var(--accent); }
.bl-check > li::after{
  content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* sample messages, as chat bubbles */
.bl-body ul.bl-msgs{ list-style: none; gap: 16px; margin: 8px 0 22px; padding: 0; }
.bl-msgs li{ display: grid; gap: 6px; }
.bl-msgs b{ color: var(--muted); font: 600 12.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.bl-msgs p{ justify-self: start; max-width: 540px; margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--tint); color: var(--ink); font-size: 16.5px; line-height: 1.5; }

/* a product screen inside the text */
.bl-shot{ margin: 26px 0 30px; }
.bl-shot .ui-win{ border-radius: 14px; }
.bl-shot figcaption{ margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.bl-shot.is-phone, .bl-shot.is-card{ display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 26px; }
.bl-shot.is-card{ grid-template-columns: 300px minmax(0, 1fr); }
.bl-shot.is-phone .ui-win{ border-radius: 30px; }
.bl-shot.is-phone figcaption, .bl-shot.is-card figcaption{ margin: 0; font-size: 15.5px; }

/* where MoveConsole comes in: one dark box per article */
.bl-product{ display: grid; gap: 14px; margin: 40px 0; padding: clamp(22px, 2.6vw, 32px); border-radius: 24px; background: var(--navy); color: #fff; }
.bl-product small{ color: #9ec5ff; font: 600 11.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.bl-product h2, .bl-product h3{ margin: 0; color: #fff; font-size: clamp(22px, 2vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.bl-product p{ margin: 0; color: rgba(255, 255, 255, .78); font-size: 16.5px; line-height: 1.6; }
.bl-body .bl-product ul{ list-style: none; gap: 10px; margin: 0; padding: 0; }
.bl-product li{ position: relative; padding-left: 28px; color: rgba(255, 255, 255, .9); font-size: 16px; line-height: 1.5; }
.bl-product li::before{ content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 4px; background: #186ff2; }
.bl-product li b{ color: #fff; font-weight: 600; }
.bl-product .bl-product-cta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.bl-body .bl-product a.btn{ text-decoration: none; }

/* FAQ (role.css's look, in the article column) */
.bl-faq .faq-list{ border-top: 1px solid var(--hair); }
.bl-faq .faq-list summary{ font-size: 18px; }

/* the next reads */
.bl-more .bl-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.bl-help{ margin-top: clamp(40px, 5vw, 64px); }
.bl-more{ padding-bottom: clamp(72px, 8vw, 128px); }   /* the last section of the article, but inside <article>, so .rl-sec:has(+ .end) misses it */

/* a reading bar along the top, where scroll-driven animations exist */
.bl-progress{ display: none; }
@supports (animation-timeline: scroll()){
  .bl-progress{ display: block; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); animation: bl-read linear both; animation-timeline: scroll(root); }
  @keyframes bl-read{ to{ transform: scaleX(1); } }
}

/* ================= the drawn pictures (one per article) ================= */
.bl-vis{ position: relative; display: grid; place-items: center; overflow: hidden; margin: 0; padding: clamp(18px, 3vw, 36px); border-radius: 24px;
  background: radial-gradient(circle at 1px 1px, rgba(6, 26, 63, .08) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--tint); }
.bl-head .bl-vis{ aspect-ratio: 5 / 4; }
.bl-vis .v-card{ width: min(100%, 380px); padding: 18px 18px 16px; border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -36px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .06); font-family: var(--font-ui); }
.bl-vis .v-h{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: var(--navy); font: 600 14px/1.2 var(--font-ui); }
.bl-vis .v-h em{ padding: 4px 9px; border-radius: 999px; background: var(--tint); color: var(--accent-600); font: 600 12px/1 var(--font-ui); font-style: normal; }

/* checklist */
.v-checks{ display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v-checks li{ display: grid; grid-template-columns: 22px minmax(0, 1fr) 46px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f7f8fa; color: var(--ink); font-size: 13.5px; }
.v-checks i{ display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.v-checks i::after{ content: ""; width: 11px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.v-checks s{ height: 6px; border-radius: 3px; background: var(--tint-2); text-decoration: none; }

/* a box with its measurements */
.v-box{ width: min(100%, 360px); display: grid; justify-items: center; gap: 14px; }
.v-box svg{ width: 100%; height: auto; overflow: visible; }
.v-box .bx-top{ fill: #f6d9b8; } .v-box .bx-left{ fill: #e9bf8f; } .v-box .bx-right{ fill: #dcab73; }
.v-box .bx-tape{ fill: #c7925a; opacity: .55; }
.v-box .bx-dim{ stroke: var(--accent-600); stroke-width: 1.6; fill: none; }
.v-box text{ fill: var(--accent-ink); font: 600 13px var(--font-ui); }
.v-box .v-chip{ padding: 9px 14px; border-radius: 12px; background: var(--navy); color: #fff; font: 500 13.5px/1.2 var(--font-mono); white-space: nowrap; }

/* an estimate */
.v-lines{ display: grid; margin: 0; }
.v-lines div{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--hair); color: var(--ink-s); font-size: 13.5px; }
.v-lines dd{ margin: 0; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.v-lines .is-total{ border-bottom: 0; border-top: 2px solid var(--navy); margin-top: 4px; padding-top: 10px; color: var(--navy); font-weight: 600; }
.v-lines .is-total dd{ color: var(--accent-600); font-size: 15px; }

/* a road to the first job */
.v-road{ display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.v-road li{ position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; color: var(--ink); font-size: 13.5px; }
.v-road li::before{ content: ""; position: absolute; left: 10px; top: 22px; bottom: -8px; width: 2px; background: var(--tint-2); }
.v-road li:last-child::before{ display: none; }
.v-road i{ position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #fff; }
.v-road li.is-next i{ background: #fff; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px #fff; }
.v-road small{ color: var(--muted); font-size: 12px; }
.v-road li.is-next{ font-weight: 600; color: var(--accent-600); }

/* a pipeline */
.v-pipe{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v-col{ display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 10px; background: #f7f8fa; }
.v-col b{ display: flex; justify-content: space-between; gap: 4px; color: var(--ink-s); font: 600 10.5px/1.2 var(--font-ui); letter-spacing: .03em; text-transform: uppercase; }
.v-col b span{ color: var(--accent-600); }
.v-col > span{ display: grid; gap: 4px; padding: 7px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.v-col > span::before, .v-col > span::after{ content: ""; height: 5px; border-radius: 3px; background: var(--tint-2); }
.v-col > span::after{ width: 60%; background: #e9ebef; }
.v-col.is-won > span{ box-shadow: 0 0 0 1.5px var(--accent); }

/* days at 110°F year by year (the Arizona report's card); bar height = days × 1.85px */
.v-heat{ display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; gap: 6px; margin: 0; padding: 6px 0 0; list-style: none; }
.v-heat li{ display: grid; justify-items: center; gap: 6px; color: var(--muted); font: 500 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.v-heat i{ width: 100%; height: calc(var(--v) * 1.85px); border-radius: 4px 4px 0 0; background: var(--tint-2); }
.v-heat .is-max{ color: var(--navy); font-weight: 600; }
.v-heat .is-max i{ background: var(--accent); }
.v-heat b{ color: var(--accent-600); font: 600 12px/1 var(--font-ui); }

/* ================= smaller screens ================= */
@media (max-width: 1100px){
  .bl-more .bl-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px){
  .bl-grid{ grid-template-columns: minmax(0, 720px); }
  .bl-side{ position: static; max-height: none; overflow: visible; }
  .lg-toc{ border-radius: 18px; background: var(--pale); }
  .lg-toc summary{ margin: 0; padding: 18px 20px; cursor: pointer; }
  .lg-toc summary svg{ display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
  .lg-toc details[open] summary svg{ transform: rotate(180deg); }
  .lg-toc ol{ margin: 0 20px 18px; }
  .bl-toc-cta{ display: none; }
}
@media (max-width: 900px){
  .bl-hub-head, .bl-head-grid, .bl-feat{ grid-template-columns: minmax(0, 1fr); }
  .bl-feat .bl-vis, .bl-head .bl-vis{ min-height: 0; aspect-ratio: auto; padding: 30px 18px; }
}
@media (max-width: 640px){
  .bl-cards, .bl-more .bl-cards{ grid-template-columns: minmax(0, 1fr); }
  .bl-body{ font-size: 17px; }
  .bl-meta{ gap: 4px 16px; }
  .bl-meta span + span::before{ display: none; }
  /* always two lines on a phone — the byline, then date and reading time. In one line it fit in the fallback font
     but not in Geist, so the swap wrapped it and pushed the picture down (CLS 0.15 in PageSpeed). */
  .bl-meta span:first-child{ flex-basis: 100%; }
  .bl-shot.is-phone, .bl-shot.is-card{ grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bl-shot.is-phone .ui-win{ width: 220px; }
  .bl-shot.is-card .ui-win{ width: min(100%, 320px); }
  .v-pipe{ gap: 5px; } .v-col{ padding: 6px; }
}
@media (prefers-reduced-motion: reduce){
  .bl-card, .bl-feat{ transition: none; }
  .bl-card:hover{ transform: none; }
}