/*
 * pv-blog.css — the blog reading experience.
 *
 * One stylesheet for the five redesigned templates: index, category, search,
 * author and single post. Everything is scoped under `.pv-blog`, which each
 * template opens *inside* the shared chrome and closes before the chrome
 * footer, so nothing here can reach the Tailwind header/footer that chrome.css
 * owns.
 *
 * This file is hand-written and is NOT PurgeCSS output — the bundles in
 * vendors.bundle.css / app.bundle.css are, and they are dequeued on every
 * template that loads this one (see provis_child_enqueue_styles). Keep it that
 * way: a purge pass cannot see selectors that only ever appear in post content.
 */

/* ============================================================
   TOKENS
   One grey family, cooled slightly toward the brand green.
   The brand green has exactly three jobs: active chip, hover, focus ring.
   ============================================================ */
.pv-blog{
  --brand:#00B26B;          /* rules, focus rings, markers - never behind text */
  --brand-ink:#00794F;      /* the green when it must carry white text, or sit on white as text */
  --brand-ink-hover:#00633F;
  --ink:#0E1513;
  --ink-2:#5A6560;
  --rule:#DEE6E1;
  --rule-strong:#C4D2CB;
  --sep:#849089;            /* breadcrumb separators and other decorative marks */
  --tint:#F4F7F5;
  --surface:#FFFFFF;
  --r:12px;                 /* the single radius. pills use 999px. */
  /* 600px at 18px measures ~70 characters in DM Sans. 690px measured 85, which
     is wider than the article columns this was benchmarked against. */
  --measure:600px;
  --display:'Poppins',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
  --shell:1240px;
  --chrome-h:72px;          /* the fixed shared-chrome header, from 768px up */
}

.pv-blog{
  background:var(--surface); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* The browser surfaces we did not draw still belong to the design: form
     controls, the caret, selection and the scrollbar all ship with defaults
     that answer to the OS, not to this palette. */
  color-scheme:light;
  accent-color:var(--brand);
  caret-color:var(--brand-ink);
}
.pv-blog ::selection{background:#C9F0DE; color:var(--ink)}

/* The shared chrome header is position:fixed from 768px up (chrome.css), so it
   is out of flow and the first 72px of the document sits underneath it. Pay for
   it explicitly instead of relying on whatever padding the first section
   happens to carry. */
@media (min-width:768px){ .pv-blog{padding-top:var(--chrome-h)} }

.pv-blog *{box-sizing:border-box}
.pv-blog img{max-width:100%; display:block}
.pv-blog a{color:inherit; text-decoration:none}
.pv-blog h1,.pv-blog h2,.pv-blog h3,.pv-blog h4{font-family:var(--display); margin:0; text-wrap:balance}
/* :where() keeps these resets at 0,1,0 so component rules never lose to them.
   Written as `.pv-blog p` they are 0,1,1 and silently beat the prose flow rule
   `.pv-prose > * + *`, which collapses every paragraph and list gap in the
   article body. */
.pv-blog :where(p){margin:0}
.pv-blog :where(ul,ol){margin:0; padding:0; list-style:none}

.pv-shell{max-width:var(--shell); margin:0 auto; padding:0 24px}
.pv-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* Document-level, so it cannot live inside .pv-blog. Contents-rail and
   in-article anchors both jump; headings carry their own scroll-margin-top for
   the fixed chrome, so no global scroll-padding is needed alongside it. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* An SEO plugin's own table of contents, injected into the_content. The article
   template renders its contents rail from the headings itself, so a second list
   in the middle of the prose is a duplicate. Carried over from blog-style.css,
   which these templates no longer load. */
#ez-toc-container{display:none !important}

/* Focus is visible everywhere, and it is the brand green. */
.pv-blog a:focus-visible,
.pv-blog button:focus-visible,
.pv-blog input:focus-visible,
.pv-blog summary:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:4px;
}

/* provis_post_thumbnail() wraps its <img> in a <picture> whenever a WebP
   companion exists on disk, so every fixed-ratio media box has to survive the
   extra element. <picture> is inline by default and would otherwise collapse
   the aspect-ratio box to the image's intrinsic height. */
.pv-card-media picture,
.pv-fmedia picture,
.pv-rail-thumb picture,
.pv-hero picture{display:block; width:100%; height:100%}

.pv-dot{display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; vertical-align:middle; margin:0 3px}
.pv-kicker{
  display:block; font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-ink);
}

/* WordPress core emits <h2 class="screen-reader-text"> from the pagination and
   the search form. The block-library CSS that hides it is dequeued on these
   templates, so the class is defined here rather than borrowed. */
.pv-blog .screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; white-space:nowrap; width:1px;
}
.pv-blog .screen-reader-text:focus{
  background-color:#fff; clip-path:none; color:var(--brand-ink); display:block;
  font-size:1rem; height:auto; left:5px; line-height:normal;
  padding:15px 23px 14px; top:5px; width:auto; z-index:100000;
}

/* ============================================================
   1a. INDEX MASTHEAD  -  compact, no stock illustration.
   Replaces the 425px banner section.
   ============================================================ */
.pv-masthead{padding:44px 0 26px}
.pv-masthead h1{font-size:clamp(2.1rem,4.4vw,2.85rem); font-weight:700; letter-spacing:-.035em; line-height:1.05}
.pv-masthead p{margin-top:12px; max-width:72ch; color:var(--ink-2); font-size:1.0625rem}

/* ============================================================
   1b. ARCHIVE / ARTICLE HEADER  -  one component, several variants.
   The H1 is always the thing being archived, never "Our Blog".
   ============================================================ */
.pv-head{padding:34px 0 26px}
.pv-crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  font-size:.8125rem; color:var(--ink-2); margin-bottom:24px;
}
.pv-crumbs a:hover{color:var(--brand-ink)}
/* The slashes were --rule-strong, 1.56:1 on white: the crumb trail read as one
   run-on line. --sep is recessive but actually visible (3.3:1). */
.pv-crumbs span[aria-hidden]{color:var(--sep)}
/* No opacity. --ink-2 at 70% measures 3.19:1; the crumb is already
   distinguished from its siblings by not being a link. */
.pv-crumbs .pv-current{color:var(--ink-2)}

.pv-head h1{font-size:clamp(1.9rem,4.2vw,2.625rem); font-weight:700; line-height:1.07; letter-spacing:-.032em; margin-top:12px}
.pv-head h1 .pv-q{color:var(--brand-ink)}
.pv-lede{margin-top:18px; max-width:62ch; font-size:1.0625rem; line-height:1.58; color:var(--ink-2)}
.pv-count{
  margin-top:18px; font-family:var(--mono); font-size:.8125rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.pv-count b{color:var(--ink); font-weight:400}

/* author variant: avatar beside the name */
.pv-author-head{display:flex; align-items:center; gap:22px}
.pv-author-head img{width:84px; height:84px; border-radius:50%; flex:none; border:1px solid var(--rule)}
@media (max-width:560px){
  .pv-author-head{gap:16px}
  .pv-author-head img{width:60px; height:60px}
}

/* ============================================================
   2. FILTER BAR  -  replaces the 91-item vertical sidebar.
   Sticky under the chrome. Horizontal scroll-snap on mobile,
   no JavaScript: these are plain category links.
   ============================================================ */
/* The shared chrome header is position:fixed at 72px tall with z-index 9990, so
   the filter row must stick BELOW it, not at viewport top, or it parks itself
   out of sight behind the header. On a phone the chrome grows to 115px and two
   stacked sticky bars would eat a fifth of the viewport, so it stays static
   there and simply scrolls away. */
.pv-bar{background:rgba(255,255,255,.94); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.pv-bar-flush{border-top:0}
@media (min-width:821px){
  .pv-bar{position:sticky; top:var(--chrome-h); z-index:20; backdrop-filter:blur(8px)}
}
.pv-bar-inner{max-width:var(--shell); margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:20px}

.pv-chips{
  display:flex; gap:8px; overflow-x:auto; flex:1 1 auto;
  scrollbar-width:none; scroll-snap-type:x proximity;
  /* 6px, not 2px. overflow-x:auto forces overflow-y:auto too, so a 2px gutter
     clipped the 3px-offset focus ring off every chip top and bottom. */
  padding:6px 2px;
  /* Scroll shadows: the `local` gradients mask the `scroll` ones, so a shadow
     shows only on a side that still has chips off-screen. Tells you the row
     scrolls without arrows or JS. */
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center/32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right center/32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(14,21,19,.12), rgba(14,21,19,0)) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(14,21,19,.12), rgba(14,21,19,0)) right center/12px 100% no-repeat scroll;
}
.pv-chips::-webkit-scrollbar{display:none}
.pv-chip{
  flex:none; scroll-snap-align:start; white-space:nowrap;
  font-family:var(--display); font-weight:500; font-size:.875rem;
  padding:7px 15px; border-radius:999px; border:1px solid var(--rule); color:var(--ink-2);
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.pv-chip:hover{border-color:var(--brand); color:var(--brand-ink)}
/* White on #00B26B measures 2.77:1 - the most prominent control on the page was
   the one that failed AA. --brand-ink carries white at 5.45:1 and still reads as
   the same green. --brand keeps its job on the border, so the chip is unchanged
   in silhouette. */
.pv-chip.is-active{background:var(--brand-ink); border-color:var(--brand-ink); color:#fff}
.pv-chip.is-active:hover{background:var(--brand-ink-hover); border-color:var(--brand-ink-hover); color:#fff}

.pv-search{position:relative; flex:none; width:240px}
.pv-search input{
  width:100%; font-family:var(--body); font-size:.875rem; color:var(--ink);
  padding:8px 34px; border:1px solid var(--rule); border-radius:999px; background:var(--surface);
}
/* No opacity here. --ink-2 at 75% measures 3.52:1, and placeholder text is held
   to the same 4.5:1 as body copy. */
.pv-search input::placeholder{color:var(--ink-2)}
.pv-search input:hover{border-color:var(--rule-strong)}
.pv-search .pv-mag{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--ink-2)}
.pv-search .pv-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:0; background:none; cursor:pointer; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.pv-search .pv-clear:hover{background:var(--tint); color:var(--ink)}
.pv-search .pv-clear svg{width:12px; height:12px}
@media (max-width:820px){
  .pv-bar-inner{flex-direction:column; align-items:stretch; gap:10px}
  .pv-search{width:100%; order:-1}
  .pv-chips{margin:0 -24px; padding:6px 24px}
}

/* ============================================================
   3. FEATURED BAND  -  replaces the carousel that showed one post.
   Featured post two thirds, Most read rail one third.
   ============================================================ */
.pv-band{background:var(--tint); border-bottom:1px solid var(--rule)}
.pv-band-inner{
  max-width:var(--shell); margin:0 auto; padding:40px 24px 44px;
  display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:44px; align-items:start;
}

.pv-feature{display:block}
.pv-feature .pv-fmedia{
  display:block; border-radius:var(--r); overflow:hidden; background:var(--rule);
  aspect-ratio:16/9; border:1px solid var(--rule);
}
.pv-feature .pv-fmedia img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.pv-feature:hover .pv-fmedia img{transform:scale(1.02)}
.pv-feature h2{
  font-size:clamp(1.5rem,2.6vw,1.95rem); font-weight:600; letter-spacing:-.025em;
  line-height:1.18; margin-top:18px;
}
.pv-feature:hover h2{color:var(--brand-ink)}
.pv-feature .pv-fex{margin-top:12px; color:var(--ink-2); font-size:1rem; max-width:62ch}
.pv-feature .pv-fmeta{margin-top:14px; color:var(--ink-2); font-size:.8125rem}
.pv-feature .pv-kicker{margin-top:16px}

/* An h2, not a styled <p>: it names the rail beside the featured post, and it
   is what the rail's <ul> is labelled by. The mono treatment is unchanged. */
.pv-blog .pv-rail-title-h{
  font-family:var(--mono); font-size:.6875rem; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); padding-bottom:12px;
  border-bottom:1px solid var(--rule-strong); margin-bottom:4px;
}
.pv-rail li + li{border-top:1px solid var(--rule)}
.pv-rail-link{display:grid; grid-template-columns:78px minmax(0,1fr); gap:13px; padding:14px 0; align-items:start}
.pv-rail-thumb{display:block; border-radius:7px; overflow:hidden; aspect-ratio:16/10; background:var(--rule)}
.pv-rail-thumb img{width:100%; height:100%; object-fit:cover}
.pv-rail-title{
  font-family:var(--display); font-weight:600; font-size:.875rem;
  line-height:1.35; letter-spacing:-.008em;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pv-rail-link:hover .pv-rail-title{color:var(--brand-ink)}
.pv-rail-meta{display:block; margin-top:5px; font-size:.75rem; color:var(--ink-2)}
.pv-rail-all{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-family:var(--display); font-weight:600; font-size:.875rem; color:var(--brand-ink);
  border-top:1px solid var(--rule); padding-top:16px; width:100%;
}
.pv-rail-all svg{width:14px; height:14px; transition:transform .18s ease}
.pv-rail-all:hover svg{transform:translateX(3px)}

@media (max-width:900px){
  .pv-band-inner{grid-template-columns:minmax(0,1fr); gap:32px; padding:30px 24px 34px}
  /* Stacked, five rail rows put ~500px between the featured post and the grid.
     Three is enough on a phone, and the rest are one tap away in Latest. */
  .pv-rail li:nth-child(n+4){display:none}
}

/* ============================================================
   4. GRID  -  full width now that the sidebar is gone.
   Cards are ~390px instead of 306px, which is what pays for
   the 19px title. Hairline, not a 7px grey shadow.
   ============================================================ */
.pv-latest{padding:46px 0 10px}
.pv-results{padding:38px 0 0}
.pv-sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--rule)}
.pv-sec-head h2{font-size:1.4rem; font-weight:600; letter-spacing:-.02em}
.pv-sec-head .pv-meta{font-family:var(--mono); font-size:.75rem; color:var(--ink-2)}
.pv-sec-head a{font-family:var(--display); font-weight:600; font-size:.875rem; color:var(--brand-ink); display:inline-flex; align-items:center; gap:7px}
.pv-sec-head a svg{width:14px; height:14px; transition:transform .18s ease}
.pv-sec-head a:hover svg{transform:translateX(3px)}

.pv-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px; padding:32px 0 0}
@media (max-width:1000px){.pv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.pv-grid{grid-template-columns:minmax(0,1fr); gap:26px}}

.pv-card{display:flex}
.pv-card-link{
  display:flex; flex-direction:column; width:100%;
  border:1px solid var(--rule); border-radius:var(--r);
  padding:14px 14px 16px; background:var(--surface);
  transition:border-color .2s ease;
}
.pv-card-link:hover{border-color:var(--rule-strong)}
.pv-card-media{display:block; border-radius:8px; overflow:hidden; background:var(--rule); aspect-ratio:16/10; margin-bottom:14px}
.pv-card-media img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.pv-card-link:hover .pv-card-media img{transform:scale(1.03)}
.pv-card-title{
  font-size:1.1875rem; font-weight:600; line-height:1.34; letter-spacing:-.012em; margin-top:9px;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pv-card-link:hover .pv-card-title{color:var(--brand-ink)}
.pv-card-ex{
  margin-top:9px; font-size:.9375rem; line-height:1.58; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Meta pinned to the bottom so it lines up across a row regardless of title length. */
.pv-card-meta{margin-top:auto; padding-top:14px; font-size:.8125rem; color:var(--ink-2)}
/* matched terms in search results */
.pv-card mark{background:#D8F3E5; color:var(--ink); padding:0 .12em; border-radius:3px}

/* Newsletter tile occupies one grid cell rather than a full-width band. */
.pv-tile-subscribe{
  display:flex; flex-direction:column; justify-content:center;
  border-radius:var(--r); padding:26px 24px; background:var(--ink); color:#fff;
}
.pv-tile-subscribe h3{font-size:1.1875rem; font-weight:600; line-height:1.3; letter-spacing:-.015em}
.pv-tile-subscribe p{margin-top:10px; font-size:.875rem; line-height:1.55; color:rgba(255,255,255,.72)}
.pv-sub-form{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.pv-sub-form input{
  flex:1 1 130px; min-width:0; font-family:var(--body); font-size:.875rem;
  padding:9px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06); color:#fff;
}
.pv-sub-form input::placeholder{color:rgba(255,255,255,.5)}
.pv-sub-form button{
  flex:none; font-family:var(--display); font-weight:600; font-size:.875rem;
  padding:9px 16px; border-radius:8px; border:0; cursor:pointer;
  background:var(--brand-ink); color:#fff; transition:background-color .18s ease;
}
.pv-sub-form button:hover{background:var(--brand-ink-hover)}
/* The tile sits on --ink, so the page's green focus ring has nothing to sit
   against; inside it the ring is white. */
.pv-tile-subscribe :is(input,button):focus-visible{outline:2px solid #fff; outline-offset:2px}
/* Below ~330px of tile the two controls share, "you@company.com" is clipped
   inside its own field. Give the input the whole row and let the button follow. */
@media (max-width:400px){
  .pv-sub-form{flex-direction:column; align-items:stretch}
  /* flex-basis switches axis with the direction, so the 130px that was a min
     width becomes a 130px-tall input if it is left alone. */
  .pv-sub-form input{flex:0 0 auto}
  .pv-sub-form button{align-self:flex-start}
}

/* ============================================================
   5. EMPTY STATE  -  search with no matches, archive with no posts
   ============================================================ */
.pv-empty{
  margin:32px 0 0; padding:44px 32px; border:1px solid var(--rule);
  border-radius:var(--r); background:var(--tint); max-width:760px;
}
.pv-empty h2{font-size:1.3rem; font-weight:600; letter-spacing:-.02em}
.pv-empty p{margin-top:12px; color:var(--ink-2); max-width:56ch}
.pv-empty ul{margin-top:18px; padding-left:1.15em; list-style:disc; color:var(--ink-2); font-size:.9375rem}
.pv-empty li{margin-top:.4em}
.pv-empty li::marker{color:var(--brand)}
.pv-empty .pv-suggest{margin-top:26px; padding-top:22px; border-top:1px solid var(--rule-strong)}
.pv-empty .pv-suggest p{margin:0 0 12px; font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.pv-empty .pv-suggest div{display:flex; flex-wrap:wrap; gap:8px}
@media (max-width:660px){
  /* 32px each side left only 247px of readable width on a 390px phone */
  .pv-empty{padding:28px 20px}
}

/* ============================================================
   5b. CATEGORY DESCRIPTION
   A term that carries real copy keeps it. The lede under the title shows the
   opening sentence; the rest is set here, below the grid, at the same measure
   and in the same prose stylesheet an article uses.
   ============================================================ */
.pv-catdesc{margin-top:56px; padding-top:34px; border-top:1px solid var(--rule)}
.pv-catdesc-h{font-size:1.4rem; font-weight:600; letter-spacing:-.02em; margin-bottom:22px}

/* ============================================================
   6. PAGINATION  -  one radius, one green, real numbers.
   ============================================================ */
.pv-pager{display:flex; justify-content:center; align-items:center; gap:7px; padding:46px 0 8px; flex-wrap:wrap}
.pv-pager a,.pv-pager span{
  font-family:var(--display); font-size:.9375rem; font-weight:500;
  min-width:40px; height:40px; padding:0 12px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); color:var(--ink-2);
  transition:border-color .18s ease, color .18s ease;
}
.pv-pager a:hover{border-color:var(--brand); color:var(--brand-ink)}
.pv-pager .pv-current{background:var(--brand-ink); border-color:var(--brand-ink); color:#fff}
.pv-pager .pv-gap{border:0; min-width:20px; padding:0}
.pv-pager .pv-prev,.pv-pager .pv-next{font-weight:600; color:var(--ink)}

/* ============================================================
   7. ALL TOPICS  -  the other 85 categories.
   A closed <details>, so every anchor stays in the served HTML
   and no category archive gets orphaned.
   ============================================================ */
.pv-topics{border-top:1px solid var(--rule); margin-top:44px; padding:26px 0 60px}
.pv-topics summary{
  cursor:pointer; font-family:var(--display); font-weight:600; font-size:.9375rem;
  display:flex; align-items:center; gap:9px; list-style:none; width:fit-content;
}
.pv-topics summary::-webkit-details-marker{display:none}
/* The caret is inline SVG with no width/height attributes, and `summary` is a
   flex container — without an explicit box it stretches to the line box and
   pushes the label into a three-line wrap. */
.pv-topics summary .pv-caret{width:14px; height:14px; flex:none; transition:transform .2s ease; color:var(--ink-2)}
.pv-topics[open] summary .pv-caret{transform:rotate(90deg)}
.pv-topics summary .pv-n{font-family:var(--mono); font-weight:400; font-size:.75rem; color:var(--ink-2)}
.pv-cloud{display:flex; flex-wrap:wrap; gap:7px; margin-top:20px}
.pv-cloud a{
  font-size:.8125rem; color:var(--ink-2); padding:5px 11px;
  border:1px solid var(--rule); border-radius:999px;
  transition:border-color .16s ease, color .16s ease;
}
.pv-cloud a:hover{border-color:var(--brand); color:var(--brand-ink)}

/* ============================================================
   8. READING PROGRESS  (single post)
   CSS scroll-driven, so there is no scroll listener. Where
   animation-timeline is unsupported the bar simply never appears.
   ============================================================ */
.pv-progress{display:none}
@supports (animation-timeline: scroll()){
  .pv-progress{
    display:block; position:fixed; top:var(--chrome-h); left:0; right:0; height:2px;
    z-index:30; background:transparent; pointer-events:none;
  }
  .pv-progress i{
    display:block; height:100%; width:100%; background:var(--brand);
    transform-origin:0 50%; transform:scaleX(0);
    animation:pv-progress linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes pv-progress{ to { transform:scaleX(1); } }
}
@media (max-width:900px){ .pv-progress{display:none !important} }

/* ============================================================
   9. ARTICLE HEADER  -  title before image
   ============================================================ */
.pv-article .pv-head{padding:34px 0 0}
.pv-article .pv-crumbs{margin-bottom:22px}
.pv-article .pv-crumbs .pv-current{max-width:38ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Title measure. Display type can run wider than body copy, so ~24 words of
   headline sits comfortably at 900px while the reading column stays at 600.
   The header runs the full shell width rather than being indented to line up
   with the reading column: indenting aligns the title with the body text, but
   leaves ~280px of unexplained empty space beside the title above the fold,
   and the rail that would justify it is not on screen yet. */
.pv-head-inner{max-width:900px}
.pv-article .pv-head h1{
  margin-top:14px; font-size:clamp(2rem,4.4vw,2.875rem); font-weight:700;
  line-height:1.07; letter-spacing:-.032em;
}
.pv-deck{margin-top:22px; max-width:58ch; font-size:1.1875rem; line-height:1.55; color:var(--ink-2)}
.pv-byline{
  display:flex; align-items:center; gap:12px; margin-top:28px;
  padding-top:22px; border-top:1px solid var(--rule); max-width:900px;
}
.pv-byline img{width:38px; height:38px; border-radius:50%; flex:none}
.pv-byline .pv-who{font-family:var(--display); font-weight:600; font-size:.9375rem}
.pv-byline .pv-who a:hover{color:var(--brand-ink)}
.pv-byline .pv-when{font-size:.8125rem; color:var(--ink-2); margin-top:1px}

.pv-hero{
  /* margin-top, NOT the `margin` shorthand: the shorthand resets margin-inline
     and cancels the offset set alongside it. margin-inline:0 kills the
     browser's default <figure> margin of 1em 40px, which otherwise leaves the
     hero 40px short of the shell's right edge while every other section
     reaches it. */
  margin-top:30px; margin-inline:0;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--rule); aspect-ratio:16/9; background:var(--tint);
}
.pv-hero img{width:100%; height:100%; object-fit:cover}

/* ============================================================
   10. ARTICLE BODY  -  contents rail plus reading column
   ============================================================ */
.pv-body{padding:44px 0 0}
.pv-body-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:0}
@media (min-width:1080px){
  .pv-body-grid{grid-template-columns:216px minmax(0,1fr); gap:64px; align-items:start}
}

/* contents rail */
.pv-toc{display:none}
@media (min-width:1080px){
  .pv-toc{
    display:block; position:sticky; top:calc(var(--chrome-h) + 24px);
    max-height:calc(100dvh - var(--chrome-h) - 48px); overflow-y:auto;
    padding-bottom:8px;
    /* A long post's rail always scrolls. Two things follow from that and
       neither is designed: a default grey scrollbar sitting inside the reading
       furniture, and the last entry sliced clean through at the bottom edge,
       which reads as a broken box rather than as more content. The mask fades
       the last 28px out, and the scrollbar is drawn from the palette -
       hairline, and only while the rail is hovered. */
    scrollbar-width:thin; scrollbar-color:transparent transparent;
    transition:scrollbar-color .2s ease;
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
            mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  }
  .pv-toc:hover,.pv-toc:focus-within{scrollbar-color:var(--rule-strong) transparent}
  .pv-toc::-webkit-scrollbar{width:6px}
  .pv-toc::-webkit-scrollbar-track{background:transparent}
  .pv-toc::-webkit-scrollbar-thumb{background:transparent; border-radius:999px}
  .pv-toc:hover::-webkit-scrollbar-thumb,
  .pv-toc:focus-within::-webkit-scrollbar-thumb{background:var(--rule-strong)}
}
.pv-toc-h{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 14px;
}
.pv-toc ol{list-style:none; display:flex; flex-direction:column; gap:1px}
.pv-toc a{
  display:block; padding:6px 0 6px 14px; font-size:.8125rem; line-height:1.4;
  color:var(--ink-2); border-left:2px solid var(--rule);
  transition:color .18s ease, border-color .18s ease;
}
/* The clamp goes on an inner span, not the anchor: with -webkit-box on the
   anchor itself the anchor's padding-bottom sits outside the clamped box and a
   sliver of line three shows through. */
.pv-toc a > span{
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.pv-toc a:hover{color:var(--brand-ink); border-left-color:var(--rule-strong)}
/* active section, set by the observer in pv-article.js */
.pv-toc a.is-current{color:var(--brand-ink); border-left-color:var(--brand); font-weight:700}
.pv-toc-sub{list-style:none; margin:0; padding:0}
.pv-toc-sub a{padding-left:26px; font-size:.78125rem}

/* mobile contents: a real disclosure, closed by default, no JS needed */
.pv-toc-m{margin:0 0 30px; border:1px solid var(--rule); border-radius:var(--r); background:var(--tint)}
@media (min-width:1080px){ .pv-toc-m{display:none} }
.pv-toc-m summary{
  cursor:pointer; list-style:none; padding:14px 16px;
  font-family:var(--display); font-weight:600; font-size:.9375rem;
  display:flex; align-items:center; gap:9px;
}
.pv-toc-m summary::-webkit-details-marker{display:none}
.pv-toc-m summary .pv-caret{width:14px; height:14px; flex:none; transition:transform .2s ease; color:var(--ink-2)}
.pv-toc-m[open] summary .pv-caret{transform:rotate(90deg)}
.pv-toc-m summary .pv-n{font-family:var(--mono); font-weight:400; font-size:.75rem; color:var(--ink-2); margin-left:auto}
.pv-toc-m ol{list-style:none; padding:0 16px 14px; margin:0}
.pv-toc-m ol a{display:block; padding:7px 0; font-size:.875rem; color:var(--ink-2); border-bottom:1px solid var(--rule)}
.pv-toc-m ol li:last-child > a{border-bottom:0}
.pv-toc-m .pv-toc-sub a{padding-left:14px; font-size:.8125rem}

/* ============================================================
   11. THE PROSE STYLESHEET
   Everything WordPress can emit, scoped so it cannot leak into
   the chrome and cannot be purged by PurgeCSS.
   ============================================================ */
/* Two tracks: text is capped at the measure, media spans the whole column.
   This replaces a negative-margin breakout, which pulled figures and tables
   leftward INTO the sticky contents rail and overlapped it. Expanding right
   into space the column already has needs no magic numbers and cannot collide. */
.pv-prose{
  display:grid;
  grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);
  font-size:18px; line-height:1.7; color:var(--ink);
}
.pv-prose > *{grid-column:1}
.pv-prose > figure,
.pv-prose > .pv-tablewrap,
.pv-prose > .wp-block-table{grid-column:1 / -1}
/* Vertical flow. Reset on every child, then space between siblings. Do NOT add
   a `.pv-prose p{margin:0}` rule here: it is specificity 0,1,1 and would beat
   the 0,1,0 sibling rule below, collapsing every paragraph gap on the page. */
.pv-prose > *{margin-top:0; margin-bottom:0}
.pv-prose > * + *{margin-top:1.15em}

/* the opening paragraph carries the article, so it is set larger */
.pv-prose > p:first-of-type{font-size:19px; line-height:1.68}

/* On a 311px column, 18px measures only 37 characters. 17px holds ~40, which is
   where the current site already sits, so mobile density is not a regression. */
@media (max-width:700px){
  .pv-prose{font-size:17px; line-height:1.68}
  .pv-prose > p:first-of-type{font-size:18px}
  .pv-prose h2{font-size:25px; margin-top:2.2em}
  .pv-prose h3{font-size:19.5px}
}

.pv-prose strong{font-weight:600}   /* posts here run to 170 of them. 700 would shout. */
.pv-prose em{font-style:italic}

/* headings: space ABOVE is what makes sections visible */
.pv-prose h2{
  font-size:29px; font-weight:600; line-height:1.2; letter-spacing:-.022em;
  margin-top:2.6em; margin-bottom:.55em; scroll-margin-top:calc(var(--chrome-h) + 24px);
}
.pv-prose h3{
  font-size:21px; font-weight:600; line-height:1.3; letter-spacing:-.012em;
  margin-top:1.9em; margin-bottom:.45em; scroll-margin-top:calc(var(--chrome-h) + 24px);
}
.pv-prose h4{
  font-size:18px; font-weight:600; line-height:1.35;
  margin-top:1.6em; margin-bottom:.4em; scroll-margin-top:calc(var(--chrome-h) + 24px);
}
.pv-prose h2 + p, .pv-prose h3 + p, .pv-prose h4 + p{margin-top:0}
.pv-prose h2:first-child{margin-top:0}

/* body links, distinguishable from the surrounding bold text */
.pv-prose a:not(.pv-btn){
  color:var(--brand-ink); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--rule-strong);
  transition:text-decoration-color .18s ease;
}
.pv-prose a:not(.pv-btn):hover{text-decoration-color:var(--brand)}

/* lists: the dominant block on this blog, up to 21 per post */
.pv-prose ul,.pv-prose ol{padding-left:1.35em}
.pv-prose li{margin-top:.55em}
.pv-prose li::marker{color:var(--brand)}
.pv-prose ul{list-style:disc}
.pv-prose ol{list-style:decimal}
.pv-prose ol li::marker{color:var(--ink-2); font-variant-numeric:tabular-nums}
.pv-prose li > ul,.pv-prose li > ol{margin-top:.5em}
.pv-prose li > ul{list-style:circle}

/* figures may run wider than the measure, so images have presence
   without the reading line ever changing */
.pv-prose figure{margin:2.2em 0}
.pv-prose figure img{width:100%; height:auto; border-radius:var(--r); border:1px solid var(--rule)}
.pv-prose figcaption{margin-top:11px; font-size:14px; line-height:1.5; color:var(--ink-2); text-align:left}
/* an image dropped straight into the flow still needs the same treatment */
.pv-prose > img{border-radius:var(--r); border:1px solid var(--rule); height:auto}
.pv-prose iframe,.pv-prose video{max-width:100%; border-radius:var(--r)}

/* tables. WordPress emits no <thead>, so the first row is promoted to
   <th scope="col"> on the way out (provis_prepare_article_content). Screen
   readers then announce the column a cell belongs to, which is the whole point
   of a comparison table; styling the first row visually never gave anyone that.
   Both selectors are kept so an un-promoted table still looks right. */
.pv-tablewrap{margin:2.2em 0}
.pv-tablewrap figcaption{margin-top:11px; font-size:14px; line-height:1.5; color:var(--ink-2)}
.pv-scroller{
  overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r);
  /* A scroll container has to be reachable without a mouse. tabindex on the
     markup makes it focusable; this keeps the ring visible when it is. */
  scroll-snap-type:x proximity;
  /* Scroll shadows: the two `local` gradients mask the two `scroll` ones, so a
     shadow appears only on the side that still has content off-screen. */
  background:
    linear-gradient(to right, var(--surface) 34%, rgba(255,255,255,0)) left center/44px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 34%, rgba(255,255,255,0)) right center/44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(14,21,19,.13), rgba(14,21,19,0)) left center/16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(14,21,19,.13), rgba(14,21,19,0)) right center/16px 100% no-repeat scroll,
    var(--surface);
}
.pv-scroller:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.pv-prose table{
  border-collapse:collapse; width:100%; min-width:520px;
  font-size:15.5px; line-height:1.5; background:transparent;
}
.pv-prose td,.pv-prose th{
  padding:13px 16px; border-bottom:1px solid var(--rule); vertical-align:top;
  text-align:left; font-variant-numeric:tabular-nums;
}
.pv-prose thead th,
.pv-prose table:not(:has(thead)) tr:first-child td{
  background:var(--tint); font-family:var(--display); font-weight:600; font-size:14px;
  color:var(--ink); border-bottom:1px solid var(--rule-strong);
}
.pv-prose tr:first-child td strong{font-weight:600}
.pv-prose tbody tr:last-child td{border-bottom:0}

.pv-prose blockquote{
  margin:2em 0; padding:2px 0 2px 22px; border-left:2px solid var(--brand);
  font-size:19px; line-height:1.6; color:var(--ink);
}
.pv-prose blockquote p + p{margin-top:.7em}

.pv-prose code{
  font-family:var(--mono); font-size:.87em; background:var(--tint);
  padding:.14em .4em; border-radius:5px;
}
.pv-prose pre{
  margin:2em 0; padding:18px 20px; background:var(--tint); border:1px solid var(--rule);
  border-radius:var(--r); overflow-x:auto; font-family:var(--mono); font-size:14.5px; line-height:1.6;
}
.pv-prose pre code{background:none; padding:0; font-size:inherit}
.pv-prose hr{margin:2.6em 0; border:0; border-top:1px solid var(--rule)}

/* ============================================================
   12. ARTICLE FOOTER  -  share row, author block
   ============================================================ */
.pv-after{max-width:var(--measure); margin-top:56px}
.pv-share{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:18px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.pv-share-l{font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-right:4px}
.pv-share a,.pv-share button{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--body); font-size:.8125rem; color:var(--ink-2);
  padding:7px 13px; border:1px solid var(--rule); border-radius:999px;
  background:var(--surface); transition:border-color .18s ease, color .18s ease;
}
.pv-share a:hover,.pv-share button:hover{border-color:var(--brand); color:var(--brand-ink)}
.pv-share svg{width:14px; height:14px; flex:none}

.pv-author{
  display:flex; gap:18px; margin-top:34px; padding:22px;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--tint);
}
.pv-author img{width:56px; height:56px; border-radius:50%; flex:none}
.pv-author .pv-a-l{font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.pv-author h2{font-size:1.0625rem; font-weight:600; margin-top:5px}
.pv-author h2 a:hover{color:var(--brand-ink)}
.pv-author p{margin-top:7px; font-size:.9375rem; line-height:1.55; color:var(--ink-2); max-width:56ch}
@media (max-width:560px){ .pv-author{flex-direction:column; gap:14px} }

/* ============================================================
   13. RELATED and CTA  -  one CTA per page
   ============================================================ */
.pv-related{padding:60px 0 0}
.pv-related .pv-grid{gap:28px}

.pv-cta{margin:70px 0 0; padding:52px 0 60px; border-top:1px solid var(--rule); text-align:center}
.pv-cta h2{font-size:clamp(1.5rem,3vw,1.95rem); font-weight:600; letter-spacing:-.022em; line-height:1.2; max-width:22ch; margin:0 auto}
.pv-cta p{margin:14px auto 0; max-width:52ch; color:var(--ink-2); font-size:1.0625rem}
.pv-btn{
  display:inline-flex; align-items:center; gap:9px; margin-top:26px; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:.9375rem;
  padding:13px 24px; border-radius:999px; border:0;
  /* White on #00B26B measures 2.77:1. --brand-ink carries white at 5.45:1 and
     still reads as the same green. */
  background:var(--brand-ink); color:#fff; transition:background-color .18s ease;
}
.pv-btn:hover{background:var(--brand-ink-hover)}
.pv-btn svg{width:15px; height:15px}

/* ============================================================
   14. BACK TO TOP
   footer.php emits this outside .pv-blog, and its styling used to come from
   app.bundle.css, which these templates no longer load. custom.js drives the
   opacity; only the box is defined here.
   ============================================================ */
.pv-blog ~ .back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:35;
  width:44px; height:44px; border-radius:50%; cursor:pointer; padding:0;
  background:#fff; border:1px solid #C4D2CB; color:#0E1513;
  box-shadow:0 2px 10px rgba(14,21,19,.10);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .18s ease, color .18s ease;
}
.pv-blog ~ .back-to-top:hover{border-color:#00B26B; color:#00794F}
.pv-blog ~ .back-to-top:focus-visible{outline:2px solid #00B26B; outline-offset:3px}

/* ============================================================
   TOUCH TARGETS
   Density on a mouse, reach on a finger. Keyed to the pointer rather than the
   viewport, so a small laptop window keeps the compact bar and a tablet at the
   same width does not.
   ============================================================ */
@media (pointer:coarse){
  .pv-chip{padding:11px 16px}
  .pv-search input{padding-top:11px; padding-bottom:11px}
  .pv-search .pv-clear{width:32px; height:32px; right:4px}
  .pv-pager a,.pv-pager span{min-width:44px; height:44px}
  .pv-cloud a{padding:9px 13px}
  .pv-topics summary{padding:6px 0}
  .pv-share a,.pv-share button{padding:13px 16px}
  .pv-toc-m summary{padding:16px}
  .pv-toc-m ol a{padding:11px 0}
  .pv-crumbs{gap:10px; font-size:.875rem}
}

/* A heading and a trailing link stop being a row well before 660px. */
@media (max-width:560px){
  .pv-sec-head{flex-direction:column; align-items:flex-start; gap:6px}
}

/* Motion collapses entirely, per the plan's motion budget. */
@media (prefers-reduced-motion:reduce){
  .pv-blog *{transition:none !important; animation:none !important}
  .pv-progress{display:none !important}
  .pv-blog .pv-card-link:hover .pv-card-media img,
  .pv-blog .pv-feature:hover .pv-fmedia img{transform:none}
}