/* Hrivika Global — article (single post) styles.
   Served from /products/assets/ so WordPress content filters can never touch it.

   Every published article is ONE core/html block:
     <article class="hvcx hvpost"> … </article>
   with the post's page template set to "Elementor Full Width" (elementor_header_footer),
   so the theme prints its header + footer and this file owns everything in between.

   Design language is the blog index (page 515, "Notes from the export desk"):
   same tokens, same .kick / .meta / .cat / .btn / .ask band, so an article reads as
   the same publication as the card that linked to it.

   NO JavaScript. Entrances are pure CSS animations with fill-mode `both`, and the
   reading bar is a scroll-driven animation behind an @supports guard — an article can
   never end up invisible because a script failed to load. */

:root{
  --navy:#0B2F6D; --navy-deep:#081F49; --blue:#163F85;
  --gold:#C89A3D; --gold-deep:#A87722; --gold-hi:#E3C077; --gold-wash:rgba(200,154,61,.12);
  --text:#2E3542; --gray:#6B7280; --pale:#EEF3FA; --bg:#F8F9FC;
  --border:#E5E7EB; --white:#fff; --wa:#25D366; --wa-deep:#1DA851;
  --head:"Plus Jakarta Sans",system-ui,sans-serif;
  --body:"DM Sans",system-ui,sans-serif;
  --r-pill:100px;
  --shadow:0 16px 40px -18px rgba(11,47,109,.16);
  --shadow-lift:0 30px 64px -24px rgba(11,47,109,.32);
  --ease:cubic-bezier(.22,.61,.36,1);
  --col:760px;                      /* the reading column */
}

/* ---------------------------------------------------------------- base */
.hvcx *{box-sizing:border-box}
.hvcx{font-family:var(--body);font-size:16px;line-height:1.65;color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.hvcx img{max-width:100%;display:block}
.hvcx a{color:inherit;text-decoration:none}
.hvcx h1,.hvcx h2,.hvcx h3,.hvcx h4{font-family:var(--head);color:var(--navy);margin:0;line-height:1.14}
.hvcx p{margin:0}
.hvcx .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.hvcx .col{max-width:calc(var(--col) + 48px);margin:0 auto;padding:0 24px}

.hvcx .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.94rem;
  border-radius:var(--r-pill);padding:13px 26px;border:none;cursor:pointer;text-align:center;text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s}
.hvcx .btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.hvcx .btn-gold{background:var(--gold-deep);color:#fff}
.hvcx .btn-gold:hover{background:#96691C;color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(168,119,34,.6)}
.hvcx .btn-line{background:transparent;color:var(--navy);border:1.5px solid var(--border)}
.hvcx .btn-line:hover{border-color:var(--navy);transform:translateY(-2px)}
.hvcx .btn-wa{background:var(--wa);color:#fff}
.hvcx .btn-wa:hover{background:var(--wa-deep);color:#fff;transform:translateY(-2px)}
.hvcx .btn-white{background:#fff;color:var(--navy)}
.hvcx .btn-white:hover{color:var(--navy);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(4,12,30,.45)}

.hvcx .kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:.73rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
.hvcx .kick::before{content:"";width:34px;height:2px;background:var(--gold)}
.hvcx .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.78rem;color:var(--gray);letter-spacing:.03em}
.hvcx .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--border)}
.hvcx .cat{display:inline-block;font-family:var(--head);font-weight:700;font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);background:var(--gold-wash);border:1px solid rgba(200,154,61,.32);
  border-radius:var(--r-pill);padding:5px 13px}

/* ------------------------------------------------- reading progress bar */
/* Pure CSS. Browsers without scroll-driven animations simply never see it. */
.hvpost .prog{position:fixed;top:0;left:0;z-index:9999;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi))}
@keyframes hv-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:scroll()){
  .hvpost .prog{animation:hv-prog linear both;animation-timeline:scroll(root block)}
}

/* --------------------------------------------------------- entrance */
@keyframes hv-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hvpost .up{animation:hv-up .7s var(--ease) both}
.hvpost .up.d1{animation-delay:.09s}
.hvpost .up.d2{animation-delay:.18s}
.hvpost .up.d3{animation-delay:.27s}

/* ------------------------------------------------------------ masthead */
.hvpost .art-mast{position:relative;isolation:isolate;overflow:hidden;padding:62px 0 96px;
  background:radial-gradient(900px 460px at 12% -20%,#fff 0%,var(--pale) 55%,var(--bg) 100%)}
.hvpost .art-mast::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(11,47,109,.10) 1px,transparent 1px);background-size:22px 22px}
/* the deep bottom padding exists for the hero image to overlap into;
   an article without one closes the gap instead */
.hvpost .art-mast.solo{padding-bottom:34px}
.hvpost .back{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;
  font-size:.78rem;letter-spacing:.06em;color:var(--gray);margin-bottom:26px;transition:color .2s,gap .2s var(--ease)}
.hvpost .back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.hvpost .back:hover{color:var(--gold-deep);gap:13px}
.hvpost .art-mast h1{font-size:clamp(2rem,4.4vw,3.15rem);font-weight:800;letter-spacing:-.022em;line-height:1.08;
  max-width:19ch;margin-top:16px}
.hvpost .art-mast h1 b{color:var(--gold-deep);font-weight:800}
.hvpost .lede{color:#4B5563;font-size:1.13rem;line-height:1.62;margin:22px 0 0;max-width:58ch}
.hvpost .art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px;
  font-size:.8rem;color:var(--gray);letter-spacing:.03em}
.hvpost .art-meta .dot{width:4px;height:4px;border-radius:50%;background:#C9D2E0}
.hvpost .art-meta time{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- hero image */
.hvpost .art-hero{position:relative;z-index:2;margin-top:-64px}
.hvpost .art-hero figure{margin:0}
.hvpost .art-hero .shot{position:relative;overflow:hidden;border-radius:26px;background:var(--pale);
  aspect-ratio:16/9;box-shadow:var(--shadow-lift);border:1px solid rgba(255,255,255,.7)}
.hvpost .art-hero .shot img{width:100%;height:100%;object-fit:cover}
.hvpost .art-hero figcaption{margin:14px 2px 0;font-size:.8rem;color:var(--gray);line-height:1.5}

/* --------------------------------------------------------------- body */
.hvpost .art-body{padding:56px 0 4px;font-size:1.06rem;line-height:1.78;color:#333A47}
.hvpost .art-body > * + *{margin-top:1.15em}
.hvpost .art-body > p + p{margin-top:1.35em}

.hvpost .art-body h2{font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.015em;
  line-height:1.2;margin-top:2.3em}
.hvpost .art-body h2::before{content:"";display:block;width:38px;height:2px;background:var(--gold);margin-bottom:18px}
.hvpost .art-body h3{font-size:1.19rem;font-weight:700;letter-spacing:-.008em;line-height:1.3;margin-top:1.9em}
.hvpost .art-body h2 + p,.hvpost .art-body h3 + p{margin-top:.85em}
.hvpost .art-body strong{color:var(--navy);font-weight:600}
.hvpost .art-body em{font-style:italic}
.hvpost .art-body a{color:var(--navy);font-weight:500;
  box-shadow:inset 0 -1px 0 0 rgba(200,154,61,.55);transition:box-shadow .2s,color .2s}
.hvpost .art-body a:hover{color:var(--gold-deep);box-shadow:inset 0 -2px 0 0 var(--gold)}

/* the opening paragraph carries a touch more weight */
.hvpost .art-body > p.first{font-size:1.15rem;line-height:1.7;color:#2E3542}

/* lists — gold markers, never browser bullets */
.hvpost .art-body ul,.hvpost .art-body ol{list-style:none;padding:0;margin-top:1.2em}
.hvpost .art-body li{position:relative;padding-left:28px;margin-top:.62em}
.hvpost .art-body ul > li::before{content:"";position:absolute;left:7px;top:.68em;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.hvpost .art-body ol{counter-reset:hvol}
.hvpost .art-body ol > li{counter-increment:hvol}
.hvpost .art-body ol > li::before{content:counter(hvol) ".";position:absolute;left:0;top:0;
  font-family:var(--head);font-weight:700;font-size:.95em;color:var(--gold-deep)}
.hvpost .art-body li > ul{margin-top:.5em}

/* pull quote */
.hvpost .art-body blockquote{margin:2.1em 0;padding:2px 0 2px 26px;border-left:3px solid var(--gold);
  font-family:var(--head);font-weight:600;font-size:1.28rem;line-height:1.42;letter-spacing:-.012em;color:var(--navy)}
.hvpost .art-body blockquote p + p{margin-top:.5em}
.hvpost .art-body blockquote cite{display:block;margin-top:12px;font-family:var(--body);font-style:normal;
  font-weight:500;font-size:.82rem;letter-spacing:.04em;color:var(--gray)}

/* figures */
.hvpost .art-body figure{margin:2.1em 0}
.hvpost .art-body figure img{width:100%;border-radius:20px;border:1px solid var(--border)}
.hvpost .art-body figcaption{margin-top:12px;font-size:.8rem;color:var(--gray);line-height:1.5}

/* spec tables — the workhorse of a materials blog */
.hvpost .art-body .tbl{margin:2.1em 0;overflow-x:auto;background:#fff;border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
.hvpost .art-body table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.hvpost .art-body thead th{background:var(--navy);color:#fff;font-family:var(--head);font-weight:600;
  font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;text-align:left;padding:14px 18px;white-space:nowrap}
.hvpost .art-body tbody td{padding:13px 18px;border-top:1px solid var(--border);vertical-align:top}
.hvpost .art-body tbody tr:nth-child(even){background:#FAFBFD}
.hvpost .art-body tbody td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}

/* desk callout */
.hvpost .art-body .note{margin:2.1em 0;padding:24px 28px;background:var(--pale);
  border-left:3px solid var(--gold);border-radius:0 18px 18px 0}
.hvpost .art-body .note .nk{display:block;font-family:var(--head);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:9px}
.hvpost .art-body .note p{font-size:1rem;line-height:1.7;color:#3A4250}
.hvpost .art-body .note p + p{margin-top:.7em}

/* key takeaways card */
.hvpost .art-body .takeaways{margin:2.4em 0;padding:30px 32px;background:#fff;border:1px solid var(--border);
  border-radius:24px;box-shadow:var(--shadow)}
.hvpost .art-body .takeaways h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;margin-bottom:16px}
.hvpost .art-body .takeaways ul{margin-top:0}
.hvpost .art-body .takeaways li{font-size:1rem;line-height:1.62}

/* ------------------------------------------------------ article diagrams */
/* Interactive figures. Every state change is a radio :checked sibling
   selector — no JavaScript, so nothing here can be broken by a WP filter
   or a blocked asset, and each control is keyboard-operable. */
.hvpost .art-body .dgm{margin:2.4em 0;padding:26px 28px 22px;background:#fff;
  border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.hvpost .art-body .dgm > input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hvpost .art-body .dgm-head{margin:0 0 20px;font-size:inherit;color:inherit}
.hvpost .art-body .dgm-k{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);
  font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.hvpost .art-body .dgm-k::before{content:"";width:22px;height:2px;background:var(--gold)}
.hvpost .art-body .dgm-head b{display:block;margin-top:8px;font-family:var(--head);font-weight:700;
  font-size:1.16rem;color:var(--navy);line-height:1.25}
.hvpost .art-body .dgm-head i{display:block;margin-top:5px;font-style:normal;font-size:.86rem;color:var(--gray)}
.hvpost .art-body .dgm-note{margin-top:16px;font-size:.78rem;line-height:1.55;color:var(--gray)}
.hvpost .art-body .dgm .ring{display:block;width:100%;height:auto}

/* focus ring for keyboard users, since the real input is off-screen */
.hvpost .art-body .dgm > input:focus-visible + label,
.hvpost .art-body .dgm > input:focus-visible ~ * label[for]:focus,
.hvpost .art-body .dgm label:focus-within{outline:2px solid var(--gold);outline-offset:3px}

/* --- four-pipe selector --- */
.hvpost .art-body .pipe-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hvpost .art-body .pipe-row label{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:16px 8px 14px;border:1.5px solid var(--border);border-radius:18px;cursor:pointer;
  background:#FCFDFE;transition:border-color .2s,transform .2s var(--ease),background .2s}
.hvpost .art-body .pipe-row label:hover{border-color:#C9D3E4;transform:translateY(-2px)}
.hvpost .art-body .pipe-row .ring{max-width:74px}
.hvpost .art-body .pipe-row .pn{font-family:var(--head);font-weight:700;font-size:.95rem;color:var(--navy)}
.hvpost .art-body .pipe-row .pw{font-size:.68rem;letter-spacing:.06em;color:var(--gray);text-align:center}
.hvpost .art-body .pipe-panels{margin-top:18px}
.hvpost .art-body .pp{display:none}
.hvpost .art-body .pp dl{margin:0;display:grid;gap:0}
.hvpost .art-body .pp dl > div{display:grid;grid-template-columns:170px 1fr;gap:16px;
  padding:11px 0;border-top:1px solid var(--border)}
.hvpost .art-body .pp dt{font-family:var(--head);font-weight:600;font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gray);margin:0}
.hvpost .art-body .pp dd{margin:0;font-size:.97rem;color:#333A47}
#hvpipe-upvc:checked ~ .pipe-row label[data-p="upvc"],
#hvpipe-cpvc:checked ~ .pipe-row label[data-p="cpvc"],
#hvpipe-swr:checked  ~ .pipe-row label[data-p="swr"],
#hvpipe-hdpe:checked ~ .pipe-row label[data-p="hdpe"]{border-color:var(--gold);background:var(--gold-wash)}
#hvpipe-upvc:checked ~ .pipe-panels .pp[data-p="upvc"],
#hvpipe-cpvc:checked ~ .pipe-panels .pp[data-p="cpvc"],
#hvpipe-swr:checked  ~ .pipe-panels .pp[data-p="swr"],
#hvpipe-hdpe:checked ~ .pipe-panels .pp[data-p="hdpe"]{display:block}

/* --- pressure / temperature chart --- */
.hvpost .art-body .dgm-derate .chart{overflow-x:auto}
.hvpost .art-body .dgm-derate svg{display:block;width:100%;min-width:460px;height:auto}
.hvpost .art-body .dgm-derate .mk{display:none}
.hvpost .art-body .steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hvpost .art-body .steps label{font-family:var(--head);font-weight:600;font-size:.85rem;color:var(--navy);
  background:#fff;border:1.5px solid var(--border);border-radius:var(--r-pill);padding:7px 15px;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.hvpost .art-body .steps label:hover{border-color:#C9D3E4}
.hvpost .art-body .readouts{margin-top:16px}
.hvpost .art-body .ro{display:none;padding:16px 18px;background:var(--pale);border-radius:16px}
.hvpost .art-body .ro b{display:block;font-family:var(--head);font-weight:800;font-size:1.6rem;color:var(--navy);line-height:1}
.hvpost .art-body .ro span{display:block;margin-top:6px;font-size:.88rem;color:#3A4250}
.hvpost .art-body .ro em{display:block;margin-top:8px;font-style:normal;font-size:.8rem;
  font-weight:600;letter-spacing:.02em;color:var(--gold-deep)}
#hvtemp-23:checked ~ .chart .mk[data-t="23"],#hvtemp-38:checked ~ .chart .mk[data-t="38"],
#hvtemp-49:checked ~ .chart .mk[data-t="49"],#hvtemp-60:checked ~ .chart .mk[data-t="60"],
#hvtemp-71:checked ~ .chart .mk[data-t="71"],#hvtemp-82:checked ~ .chart .mk[data-t="82"],
#hvtemp-93:checked ~ .chart .mk[data-t="93"]{display:block}
#hvtemp-23:checked ~ .readouts .ro[data-t="23"],#hvtemp-38:checked ~ .readouts .ro[data-t="38"],
#hvtemp-49:checked ~ .readouts .ro[data-t="49"],#hvtemp-60:checked ~ .readouts .ro[data-t="60"],
#hvtemp-71:checked ~ .readouts .ro[data-t="71"],#hvtemp-82:checked ~ .readouts .ro[data-t="82"],
#hvtemp-93:checked ~ .readouts .ro[data-t="93"]{display:block}
#hvtemp-23:checked ~ .steps label[data-t="23"],#hvtemp-38:checked ~ .steps label[data-t="38"],
#hvtemp-49:checked ~ .steps label[data-t="49"],#hvtemp-60:checked ~ .steps label[data-t="60"],
#hvtemp-71:checked ~ .steps label[data-t="71"],#hvtemp-82:checked ~ .steps label[data-t="82"],
#hvtemp-93:checked ~ .steps label[data-t="93"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* --- SWR type toggle --- */
.hvpost .art-body .swr-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:420px;margin:0 auto}
.hvpost .art-body .swr-row label{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:18px 10px 15px;border:1.5px solid var(--border);border-radius:18px;cursor:pointer;background:#FCFDFE;
  transition:border-color .2s,background .2s,transform .2s var(--ease)}
.hvpost .art-body .swr-row label:hover{border-color:#C9D3E4;transform:translateY(-2px)}
.hvpost .art-body .swr-row .ring{max-width:104px}
.hvpost .art-body .swr-row .pn{font-family:var(--head);font-weight:700;font-size:1rem;color:var(--navy)}
.hvpost .art-body .swr-row .pw{font-size:.7rem;letter-spacing:.06em;color:var(--gray)}
.hvpost .art-body .swr-panels{margin-top:18px}
.hvpost .art-body .sp{display:none;padding:16px 18px;background:var(--pale);border-radius:16px;font-size:.94rem}
.hvpost .art-body .sp b{color:var(--navy);font-weight:600}
.hvpost .art-body .sp span{display:block;margin-top:5px;color:#3A4250}
#hvswr-a:checked ~ .swr-row label[data-s="a"],
#hvswr-b:checked ~ .swr-row label[data-s="b"]{border-color:var(--gold);background:var(--gold-wash)}
#hvswr-a:checked ~ .swr-panels .sp[data-s="a"],
#hvswr-b:checked ~ .swr-panels .sp[data-s="b"]{display:block}

@media (max-width:620px){
  .hvpost .art-body .dgm{padding:22px 18px 18px}
  .hvpost .art-body .pipe-row{grid-template-columns:repeat(2,1fr)}
  .hvpost .art-body .pp dl > div{grid-template-columns:1fr;gap:3px}
}

/* FAQ — carries schema.org/FAQPage microdata, so it must stay visible */
.hvpost .art-body .faq{margin:1.6em 0 0}
.hvpost .art-body .qa{padding:22px 0;border-top:1px solid var(--border)}
.hvpost .art-body .qa:last-child{border-bottom:1px solid var(--border)}
.hvpost .art-body .qa h3{margin-top:0;font-size:1.06rem;line-height:1.35}
.hvpost .art-body .qa p{margin-top:9px;color:#4B5563}

/* ------------------------------------------------------------ article end */
.hvpost .art-end{margin-top:52px;padding:30px 0 8px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hvpost .art-end .lab{font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray)}
.hvpost .share{display:flex;gap:10px;flex-wrap:wrap}
.hvpost .share a{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;
  font-size:.82rem;color:var(--navy);background:#fff;border:1px solid var(--border);
  border-radius:var(--r-pill);padding:9px 17px;transition:border-color .2s,transform .2s var(--ease),color .2s}
.hvpost .share a:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-2px)}
.hvpost .share svg{width:15px;height:15px;fill:currentColor;flex:none}
.hvpost .art-end .more{margin-left:auto}
.hvpost .art-end .more a{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;
  font-size:.9rem;color:var(--gold-deep);transition:gap .2s var(--ease)}
.hvpost .art-end .more a:hover{gap:14px}
.hvpost .art-end .more svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- ask band */
.hvpost .ask{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:76px 0;margin-top:72px;
  background:linear-gradient(118deg,var(--navy-deep),var(--navy) 55%,var(--blue))}
.hvpost .ask::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:20px 20px}
.hvpost .ask::after{content:"";position:absolute;top:-220px;right:-140px;width:560px;height:560px;border-radius:50%;
  z-index:-1;background:radial-gradient(circle,rgba(200,154,61,.26) 0%,transparent 62%)}
.hvpost .ask-in{max-width:720px}
.hvpost .ask .kick{color:var(--gold-hi)}
.hvpost .ask h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.015em}
.hvpost .ask h2 b{color:var(--gold-hi)}
.hvpost .ask p{color:#C7D3EC;margin:16px 0 28px;max-width:52ch}
.hvpost .ask-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------------------------------------------------- responsive */
@media (max-width:860px){
  .hvpost .art-mast{padding:46px 0 84px}
  .hvpost .art-mast h1{max-width:none}
  .hvpost .art-hero{margin-top:-56px}
  .hvpost .art-hero .shot{border-radius:20px}
  .hvpost .art-body{padding-top:44px;font-size:1.02rem}
  .hvpost .ask{padding:60px 0;margin-top:56px}
}
@media (max-width:640px){
  .hvpost .lede{font-size:1.05rem}
  .hvpost .art-hero{margin-top:-40px}
  .hvpost .art-hero .shot{aspect-ratio:4/3}
  .hvpost .art-body .note,.hvpost .art-body .takeaways{padding-left:20px;padding-right:20px}
  .hvpost .art-body blockquote{font-size:1.14rem;padding-left:20px}
  .hvpost .art-end .more{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hvpost .up{animation:none}
  .hvpost .prog{animation:none;display:none}
}

/* the theme capitalises headings — undo it inside our payload */
.hvcx h1,.hvcx h2,.hvcx h3,.hvcx h4,.hvcx .btn{text-transform:none}