/* HourlyVPS blog (owner: blog-templates): /blog/ index, topic archives, single posts.
   Blocks and shortcodes inside a post body: blog-content.css (blog-components). Tokens only;
   yellow is a fill with an ink edge, text on yellow is ink. Animations: transform/opacity only. */
/* Topic accents (the covers use the same hues) */
.acc-explainers{--acc:var(--link)}
.acc-tutorials{--acc:var(--cap)}
.acc-use-cases{--acc:var(--tape-text)}
.acc-pricing{--acc:var(--ink)}
.acc-security{--acc:var(--error)}
/* Dark mode: generated covers switch to their dark twin (<picture>, hvps_bt_cover_img()); a cover
   without one (an uploaded image) is dimmed. Ink edges become notch grey. */
:root{--bt-edge:var(--ink);--bt-dim:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bt-edge:var(--notch);--bt-dim:brightness(.8)}}
:root[data-theme=dark]{--bt-edge:var(--notch);--bt-dim:brightness(.8)}
.cover-pic{display:contents}
.pcard__img:not(.has-dark),.post-cover__img:not(.has-dark){filter:var(--bt-dim)}
/* Ticks on a tape fill (decorative) */
.ledger::before,.ktake::before,.bempty__tape span,.pcard__ph{background:linear-gradient(90deg,var(--on-tape) 1.5px,transparent 0) 7px 0/12px 7px repeat-x,linear-gradient(90deg,var(--on-tape) 1.5px,transparent 0) 7px 0/72px 12px repeat-x,var(--tape)}
/* ---------- Index hero ---------- */
/* Phones: the posts start above the fold, so the figures card is left out (the hero and the
   chips already say what the blog is) and the chips become one scrolling row. */
/* Ledger: the blog's own figures under a strip of tape */
/* ---------- Lists of posts ---------- */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.75rem 1.5rem;margin:0;padding:0;list-style:none}
.pgrid>li{display:flex;min-width:0}
@media (min-width:720px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3.25rem 2rem}}
/* Card: one link (the title, stretched over the card); the topic link sits above it */
.pcard{position:relative;display:flex;flex-direction:column;width:100%}
.pcard__media{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:8px;background:var(--surface-2)}
.pcard__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard__img{transform:scale(1.03)}
.pcard__body{display:flex;flex:1;flex-direction:column;padding-top:1.125rem}
.pcard__topic{display:flex;align-items:center;gap:.5rem;font:400 .8125rem/1.4 var(--mono);color:var(--muted)}
.pcard__topic::before{content:"";flex:none;width:.5rem;height:.5rem;background:var(--acc,var(--ink))}
.pcard__topic a{position:relative;z-index:1;padding-block:.25rem;color:var(--muted);text-decoration:none}
.pcard__topic a:hover{color:var(--ink);text-decoration:underline}
.pcard__title{margin-top:.375rem;font-size:1.25rem;font-weight:650;line-height:1.24;letter-spacing:-.012em;text-wrap:pretty}
.pcard__title a{color:var(--ink);text-decoration:none}
.pcard__title a::after{content:"";position:absolute;inset:0;border-radius:8px}
.pcard:hover .pcard__title a{text-decoration:underline;text-decoration-thickness:1.5px}
.pcard__title a:focus-visible{outline:0}
.pcard__title a:focus-visible::after{outline:2px solid var(--focus);outline-offset:6px}
.pcard__excerpt{display:-webkit-box;margin-top:.5rem;overflow:hidden;color:var(--muted);font-size:.9375rem;line-height:1.55;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.pcard__meta{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin-top:auto;padding-top:1rem;font:400 .75rem/1.5 var(--mono);color:var(--muted)}
/* Pagination */
/* Empty states */
/* Essentials rail: a ruler with a notch per page */
/* ---------- Topic archive head ---------- */
/* Meta rows: notch separators sit in the gap; one that would start a wrapped line falls outside the clip box */
.thead__meta,.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem 1.25rem;overflow:hidden;margin:calc(1.25rem - 4px) -4px 0;padding:4px;list-style:none;font:400 .8125rem/1.5 var(--mono);color:var(--muted)}
.thead__meta li,.post-meta li{position:relative}
.thead__meta li::before,.post-meta li::before{content:"";position:absolute;top:50%;left:-.65rem;width:1px;height:.9em;background:var(--notch);transform:translateY(-50%)}
/* ---------- Single post ---------- */
/* The H1 repeats the last crumb: on phones it is kept for screen readers only. */
@media (max-width:719px){.is-blog-post .crumbs li:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.post-head{max-width:60rem;padding-block:clamp(1.25rem,3.5vw,2.75rem) clamp(1.5rem,3vw,2.25rem)}
.post-head h1{font-size:clamp(2.125rem,4.7vw,3.75rem);line-height:1.03;letter-spacing:-.032em}
.post-dek{max-width:44rem;margin-top:1.125rem;color:var(--muted);font-size:clamp(1.125rem,1.7vw,1.3125rem);line-height:1.5;text-wrap:pretty}
.post-meta{margin-top:calc(1.5rem - 4px)}
.post-meta a{color:var(--ink)}
.post-meta__topic a{display:inline-flex;align-items:center;gap:.5rem;min-height:28px;padding:.125rem .625rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);text-decoration:none}
.post-meta__topic a::before{content:"";width:.5rem;height:.5rem;background:var(--acc,var(--ink))}
.post-meta__topic a:hover{border-color:var(--ink)}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(3rem,6vw,4.5rem)}
.post-cover{margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.post-cover__img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:10px;background:var(--surface-2)}
.post-aside{min-width:0;margin-bottom:2rem}
.post-main{min-width:0}
/* TOC: collapsed box on mobile; sticky list with a reading-progress tape on desktop */
.ptoc__sum{display:flex;align-items:center;gap:.75rem;min-height:48px;padding:.5rem 1rem;border:1px solid var(--rule);border-radius:8px;background:var(--surface);font-weight:650;list-style:none;cursor:pointer}
.ptoc__sum::-webkit-details-marker{display:none}
.ptoc__n{margin-left:auto;font:400 .75rem/1.2 var(--mono);color:var(--muted)}
.ptoc__i{width:1.25rem;height:1.25rem;transition:transform .15s ease}
.ptoc__d[open] .ptoc__i{transform:rotate(180deg)}
.ptoc__list{position:relative;margin:.75rem 0 0;padding:0 0 0 1.375rem;list-style:none}
.ptoc__list::before,.ptoc__list::after{content:"";position:absolute;top:.25rem;bottom:.25rem;left:0;width:7px;border-radius:1px}
.ptoc__list::before{border:1.5px solid var(--rule)}
.ptoc__list::after{border:1.5px solid var(--tape-edge);background:var(--tape);transform:scaleY(var(--read,0));transform-origin:50% 0}
.ptoc__list a{display:block;padding:.3125rem 0;color:var(--muted);font-size:.9375rem;line-height:1.35;text-decoration:none}
.ptoc__list a:hover{color:var(--ink);text-decoration:underline}
.ptoc__list a[aria-current]{color:var(--ink);font-weight:650}
@media (min-width:1024px){.post-grid{grid-template-columns:minmax(0,720px) minmax(15rem,18.5rem);justify-content:space-between;column-gap:3rem}.post-cover{grid-column:1;grid-row:1}.post-aside{grid-column:2;grid-row:1/span 2;margin:0}.post-main{grid-column:1;grid-row:2}.ptoc{position:sticky;top:calc(var(--mb-h,68px) + 1.5rem);max-height:calc(100vh - var(--mb-h,68px) - 3rem);overflow:auto;padding:2px}.ptoc__sum{min-height:36px;padding:0 0 .5rem;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;font:600 .8125rem/1.4 var(--mono);color:var(--muted)}.ptoc__list{margin-top:1rem}}
/* Key takeaways (inside the body, after the intro) */
.prose .ktake{position:relative;margin-block:2rem 2.25rem;padding:1.875rem clamp(1.125rem,3vw,1.75rem) 1.5rem;border:1.5px solid var(--bt-edge);border-radius:8px;background:var(--surface);box-shadow:0 3px 0 var(--bt-edge)}
.ktake::before{content:"";position:absolute;top:0;left:0;right:0;height:14px;border-bottom:1.5px solid var(--bt-edge);border-radius:6px 6px 0 0}
.ktake__h{margin:0;font-size:1.125rem;line-height:1.3;letter-spacing:-.005em}
.prose .ktake__list{display:grid;gap:.75rem;margin:.875rem 0 0;padding:0;list-style:none}
.prose .ktake__list li{position:relative;margin:0;padding-left:1.75rem;line-height:1.55}
.ktake__list li::before{content:"";position:absolute;left:0;top:.5em;width:.875rem;height:.5rem;background:var(--tape);box-shadow:inset 0 0 0 1.5px var(--tape-edge)}
/* After the body: FAQ, Sources (same heading look as the body's H2s), editorial box, share, prev/next */
.psec{margin-top:clamp(3rem,6vw,4rem)}
.psec__h{position:relative;padding-top:1.375rem;border-top:1px solid var(--rule);font-size:clamp(1.5rem,2.6vw,1.875rem)}
.psec__h::before{content:"";position:absolute;top:-1px;left:0;width:4.5rem;height:7px;background:repeating-linear-gradient(90deg,var(--notch) 0 1px,transparent 1px .75rem)}
.psec__h:target::before{background:var(--tape);box-shadow:inset 0 0 0 1px var(--tape-edge)}
.pfaq .faq{margin-top:1.25rem}
.psrc__list{margin:1.25rem 0 0;padding:0;list-style:none;counter-reset:src}
.psrc__list li{position:relative;padding:.875rem 0 .875rem 2.75rem;border-bottom:1px solid var(--rule);counter-increment:src}
.psrc__list li:first-child{border-top:1px solid var(--rule)}
.psrc__list li::before{content:"[" counter(src) "]";position:absolute;left:0;top:.95rem;font:600 .8125rem/1.4 var(--mono);color:var(--muted)}
.psrc__list a{font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.psrc__by{display:block;margin-top:.25rem;font:400 .8125rem/1.5 var(--mono);color:var(--muted)}
.psrc__host{color:var(--ink)}
.ped{display:grid;gap:.75rem;margin-top:clamp(2.5rem,5vw,3.25rem);padding:1.5rem clamp(1.125rem,3vw,1.75rem);border:1px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--muted);font-size:.9375rem;line-height:1.6}
.ped__h{display:flex;align-items:center;gap:.75rem;color:var(--ink);font-size:1.0625rem;font-weight:650}
.ped__h::before{content:"";flex:none;width:1.75rem;height:.75rem;background:var(--tape);box-shadow:inset 0 0 0 1.5px var(--tape-edge)}
.ped time{color:var(--ink)}
.ped__links{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.ped__links a{display:inline-flex;align-items:center;min-height:36px;font-weight:600}
.pshare{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:2rem}
.pshare__h{font:600 .8125rem/1.4 var(--mono);color:var(--muted)}
.pshare__list{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.pshare__list a{display:inline-flex;align-items:center;min-height:44px;padding:.375rem .875rem;border:1.5px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:.875rem;font-weight:600;text-decoration:none}
.pshare__list a:hover{border-color:var(--ink)}
.padj{display:grid;gap:1rem;margin-top:2.5rem}
@media (min-width:720px){.padj{grid-template-columns:1fr 1fr}.padj__a--next{grid-column:2;text-align:right}}
.padj__a{display:flex;flex-direction:column;gap:.375rem;padding:1.125rem 1.25rem;border:1px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);text-decoration:none}
.padj__a:hover{border-color:var(--ink)}
.padj__a:hover .padj__t{text-decoration:underline}
.padj__k{font:400 .75rem/1.4 var(--mono);color:var(--muted)}
.padj__a--prev .padj__k::before{content:"\2190  "}
.padj__a--next .padj__k::after{content:"  \2192"}
.padj__t{font-weight:650;line-height:1.3}
.prel__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.75rem}
/* Phones: related posts as compact rows (topic, title, reading time), no covers */
@media (max-width:719px){.prel__head{margin-bottom:.75rem}.prel .pgrid{gap:0}.prel .pgrid>li{border-bottom:1px solid var(--rule)}.prel .pgrid>li:first-child{border-top:1px solid var(--rule)}.prel .pcard__media,.prel .pcard__excerpt,.prel .pcard__rev{display:none}.prel .pcard__body{padding-block:.875rem}.prel .pcard__title{margin-top:.125rem;font-size:1.0625rem;line-height:1.3}.prel .pcard__title a::after{border-radius:0}.prel .pcard__meta{padding-top:.25rem}}
/* Reading progress (created by blog.js) */
.read-bar{position:fixed;top:var(--mb-h,60px);left:0;right:0;z-index:49;height:3px;background:var(--tape);box-shadow:0 1px 0 var(--tape-edge);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@media (forced-colors:active){.ptoc__list::after,.read-bar{forced-color-adjust:none;background:Highlight;border-color:Highlight}}
@media print{.read-bar,.post-aside,.pshare,.padj,.prel,.ess,.tchips{display:none}.post-grid{display:block}}