/* Blog: index, category and post pages. Self-contained and matched to the homepage: the same 19px root and
   Tailwind rem scale (text-sm .875rem, text-xl 1.25rem, text-4xl 2.25rem ...), colours, top bar and footer. */

:root {
  --bg: #f8fafc;
  --card: #fff;
  --fg: #1f2937;
  --navy: #1d3a5d;
  --muted: #65758b;
  --accent: #6467f2;
  --accent-ink: #4f46e5;              /* the accent, darkened for text links on white */
  --accent-wash: rgba(100, 103, 242, .08);
  --line: #e1e7ef;
  --card-line: #e5e7eb;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, .07);
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 19px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 14px; top: 12px; z-index: 60; padding: 10px 16px; border: 2px solid var(--accent); border-radius: 8px; background: #fff; color: var(--navy); }

/* The homepage container: 1400px, 1rem gutters, 2rem from 1024px. */
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 1024px) { .wrap { padding: 0 2rem; } }

/* ---- Top bar (as the homepage's) ------------------------------------------------------------------------------- */

.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .95); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-nav-in { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; padding: 1rem; }
@media (min-width: 1024px) { .site-nav-in { padding: 1rem 2rem; } }
.site-brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; }
.site-brand img { width: 2rem; height: 2rem; }
.site-brand-text { display: none; flex-direction: column; line-height: 1.25; }
.site-brand-name { color: var(--navy); font-size: 19px; font-weight: 700; line-height: 1.75; white-space: nowrap; }
.site-brand-by { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .025em; }
.site-links { display: none; align-items: center; gap: 2rem; }
.site-links a { color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.25rem; text-decoration: none; white-space: nowrap; transition: color .15s; }
.site-links a:hover, .site-links a[aria-current="page"] { color: var(--navy); }
.site-links a[aria-current="page"] { font-weight: 600; }
.site-nav-end { display: flex; align-items: center; gap: .75rem; }
.site-cta { display: none; align-items: center; padding: .625rem 1.25rem; border-radius: 9999px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.25rem; text-decoration: none; white-space: nowrap; transition: opacity .15s; }
.site-cta:hover { opacity: .9; }
.site-cta svg, .site-menu-cta svg { flex: none; margin-right: 8px; }
.site-menu-btn { display: inline-flex; padding: .5rem; border: 0; background: none; color: var(--fg); cursor: pointer; }
.site-menu-btn .ico-close, .site-menu-btn[aria-expanded="true"] .ico-open { display: none; }
.site-menu-btn[aria-expanded="true"] .ico-close { display: inline; }
.site-menu { padding: 0 1rem 1rem; border-top: 1px solid var(--line); background: #fff; }
.site-menu[hidden] { display: none; }
.site-menu a { display: block; padding: .75rem 0; color: var(--fg); font-size: 15px; font-weight: 500; text-decoration: none; }
.site-menu a:hover { color: var(--accent); }
.site-menu .site-menu-cta { display: flex; align-items: center; justify-content: center; margin-top: .5rem; padding: .625rem 1.25rem; border-radius: 9999px; background: var(--accent); color: #fff; font-weight: 600; }
@media (min-width: 640px) { .site-brand-text { display: flex; } .site-cta { display: inline-flex; } }
@media (min-width: 768px) { .site-links { display: flex; } .site-menu-btn, .site-menu { display: none !important; } }
@media (min-width: 768px) and (max-width: 1099.98px) { .site-links { gap: 1.25rem; } }
@media (min-width: 768px) and (max-width: 959.98px) { .site-links a[data-wide] { display: none; } }

/* ---- Footer (as the homepage's) -------------------------------------------------------------------------------- */

.site-foot { padding: 3rem 1rem; background: var(--navy); }
.site-foot-in { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.site-foot p { margin: 0; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } }
.foot-brand-row { display: flex; align-items: center; gap: .75rem; }
.foot-brand-row img { width: 2rem; height: 2rem; }
.foot-co { color: #f8fafc; font-size: .875rem; font-weight: 600; line-height: 1.25rem; }
.foot-loc { color: rgba(248, 250, 252, .6); font-size: .75rem; line-height: 1rem; }
.site-foot .foot-blurb { margin-top: 1rem; color: rgba(248, 250, 252, .6); font-size: .75rem; line-height: 1.6; }
.foot-mail { display: inline-block; margin-top: .75rem; color: rgba(248, 250, 252, .7); font-size: .75rem; line-height: 1rem; text-decoration: none; }
.site-foot .foot-h { margin-bottom: .75rem; color: #f8fafc; font-size: .75rem; font-weight: 600; line-height: 1rem; letter-spacing: .025em; text-transform: uppercase; }
.foot-col a { display: block; padding: 5px 0; color: rgba(248, 250, 252, .7); font-size: .875rem; line-height: 1.5; text-decoration: none; transition: color .15s; }
.foot-col a:hover, .foot-mail:hover { color: #f8fafc; }
.foot-legal { display: flex; flex-direction: column; align-items: center; gap: 11px; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(248, 250, 252, .1); text-align: center; }
.site-foot .foot-legal p { max-width: 70ch; font-size: 13.5px; line-height: 1.65; }
.foot-legal .a70 { color: rgba(248, 250, 252, .7); }
.foot-legal .a60 { color: rgba(248, 250, 252, .6); }
.foot-legal .a40 { color: rgba(248, 250, 252, .4); }

/* ---- Shared pieces --------------------------------------------------------------------------------------------- */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs span[aria-hidden] { color: #b4bfcd; }

/* Pill buttons, as the homepage hero's "Talk to Us" (filled) and "Try It Live" (outlined, with a live light). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: .75rem 1.75rem; border: 2px solid transparent; border-radius: 9999px; font-size: 1rem; font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: opacity .18s, background-color .18s, transform .18s; }
.btn svg { flex: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-live { border-color: var(--accent); background: transparent; color: var(--accent); animation: blog-glow 2.8s ease-out infinite; }
.btn-live:hover { background: rgba(100, 103, 242, .05); transform: translateY(-2px); animation-play-state: paused; }
.btn-sm { padding: .5rem 1.25rem; font-size: .875rem; }
.live-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 999px; background: #22c55e; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #22c55e; animation: blog-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes blog-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes blog-glow { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .42); } 70% { box-shadow: 0 0 0 14px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }

.post-tag { position: relative; z-index: 1; align-self: flex-start; display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); font-size: .75rem; font-weight: 600; letter-spacing: .025em; line-height: 1.5; text-decoration: none; text-transform: uppercase; }
.post-tag:hover { background: rgba(100, 103, 242, .14); }

/* ---- Listing pages --------------------------------------------------------------------------------------------- */

/* No visible title or introduction: breadcrumbs, then the topic filters. */
.blog-hero { padding: 2.5rem 0 2rem; text-align: center; }
.blog-hero .crumbs { justify-content: center; }
@media (min-width: 768px) { .blog-hero { padding: 3rem 0 2.25rem; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: .25rem; }
.chip { display: inline-flex; align-items: center; padding: .4rem 1rem; border: 1px solid var(--card-line); border-radius: 9999px; background: #fff; color: var(--muted); font-size: .875rem; font-weight: 500; text-decoration: none; transition: color .15s, border-color .15s; }
.chip:hover { border-color: #c7c9fb; color: var(--navy); }
.chip.active { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.chip-rss::before { content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: #f97316; }

.blog-list { padding: 1rem 0 5rem; }
/* One card a row on phones, two from 720px and three from 1100px (at most 400px each). Rows with fewer cards are
   centred on the listings; "More from the blog" starts from the left. */
.post-grid { --card: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), var(--card))); justify-content: center; gap: 2rem; }
@media (min-width: 720px) { .post-grid { --card: calc((100% - 2rem) / 2); } }
@media (min-width: 1100px) { .post-grid { --card: min(400px, calc((100% - 4rem) / 3)); } }
.more-posts .post-grid { justify-content: start; }

.post-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .22s ease, border-color .2s ease; }
.post-card:hover { transform: translateY(-3px); border-color: #d6d9f5; box-shadow: 0 16px 34px rgba(23, 43, 84, .11); }
.post-card-media { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--card-line); background: #eef2ff; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.25rem 1.5rem 1.4rem; }
.post-card-title { margin: .15rem 0 0; color: var(--navy); font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a::after { content: ""; position: absolute; inset: 0; }
.post-card-title a:focus-visible { outline: none; }
.post-card:focus-within { outline: 3px solid #818cf8; outline-offset: 3px; }
.post-card:has(.post-tag:focus-visible) { outline: none; }
.post-card-excerpt { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.post-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: auto 0 0; padding-top: .6rem; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.post-card-meta img { width: 28px; height: 28px; margin-right: .15rem; border-radius: 50%; }
.post-card-meta span:first-of-type { color: var(--fg); font-weight: 600; }

.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 2.5rem; color: var(--muted); font-size: .875rem; }
.pager a { font-weight: 600; text-decoration: none; }

/* ---- Post page: the article, and on wide screens a sticky column with "On this page", the author and the demo -- */

.post-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; max-width: 1280px; margin: 0 auto; padding: 2rem 1rem 4rem; }
@media (min-width: 1024px) { .post-wrap { padding: 2.75rem 2rem 5rem; } }
@media (min-width: 1100px) { .post-wrap { grid-template-columns: minmax(0, 1fr) 290px; } }

.post-head h1 { margin: 0 0 1rem; color: var(--navy); font-size: 1.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
@media (min-width: 480px) { .post-head h1 { font-size: 1.875rem; } }
@media (min-width: 768px) { .post-head h1 { font-size: 2.25rem; } }
.post-lede { margin: 0 0 1.5rem; color: var(--muted); font-size: 1.125rem; line-height: 1.6; }
.byline { display: flex; align-items: center; gap: .75rem; margin: 0 0 2rem; }
.byline img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px var(--card-line); }
.byline p { display: flex; flex-direction: column; margin: 0; line-height: 1.4; }
.byline-name { color: var(--navy); font-size: .875rem; font-weight: 600; }
.byline-meta { color: var(--muted); font-size: .875rem; }

.post-cover { margin: 0 0 1.5rem; overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.post-cover img { width: 100%; }

/* "Follow along live": the demo, one click from the top of every post. */
.live-strip { display: flex; align-items: center; gap: .9rem; margin: 0 0 2.5rem; padding: .9rem 1rem .9rem 1.25rem; border: 1px solid #dfe2fb; border-radius: var(--radius); background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 60%, #ecfdf5 100%); }
.live-strip p { flex: 1; margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.live-strip strong { color: var(--navy); }
.live-strip .btn { flex: none; background: #fff; }
.live-strip .btn:hover { background: #f5f5ff; }

.post-body { font-size: 1rem; line-height: 1.7; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.25rem; }
.post-body h2 { margin: 3rem 0 1rem; color: var(--navy); font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; scroll-margin-top: 110px; }
.post-body h3 { margin: 2.25rem 0 .75rem; color: var(--fg); font-size: 1.25rem; font-weight: 700; line-height: 1.3; scroll-margin-top: 110px; }
.post-body ul, .post-body ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.post-body li { margin: .4rem 0; }
.post-body a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body strong { color: #111827; }
.post-body code { padding: .12em .4em; border-radius: 6px; background: #eef2f7; color: var(--navy); font-family: var(--mono); font-size: .84em; }

/* Numbered walk-through steps. */
.step { display: flex; align-items: baseline; gap: .75rem; }
.step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .875rem; font-weight: 700; transform: translateY(-2px); }

/* A screenshot from the demo. Click (or Enter) opens it full size. */
figure.shot { margin: 1.75rem 0 2rem; }
figure.shot .shot-frame { display: block; overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); cursor: zoom-in; }
figure.shot img { width: 100%; }
figure.shot figcaption { margin-top: .8rem; color: var(--muted); font-size: .875rem; line-height: 1.6; }
figure.shot figcaption b { color: var(--fg); }
/* Matches the numbered orange marks drawn on the screenshots. */
figure.shot figcaption .cap-n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; margin-right: .3em; padding: 0 .3em; border-radius: 999px; background: #f97316; color: #fff; font-size: .8em; font-weight: 700; line-height: 1; vertical-align: .08em; }

/* "What you can't do" list. */
.post-body .cant { display: grid; gap: .75rem; margin: 1.25rem 0 1.75rem; padding: 0; list-style: none; }
.post-body .cant li { position: relative; margin: 0; padding: 1rem 1.25rem 1rem 3.2rem; border: 1px solid var(--card-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.post-body .cant li::before { content: "✕"; position: absolute; left: 1.05rem; top: 1.2rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 900; line-height: 1.35rem; text-align: center; }
.post-body .cant li strong { color: var(--navy); }

/* "What you get" list. */
.post-body .can { margin: 1.25rem 0 1.75rem; padding: 0; list-style: none; }
.post-body .can li { position: relative; margin: 0 0 .7rem; padding-left: 2.1rem; }
.post-body .can li::before { content: "✓"; position: absolute; left: 0; top: .2rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 900; line-height: 1.35rem; text-align: center; }

.post-body .note { margin: 1.5rem 0; padding: 1.1rem 1.4rem; border: 1px solid #d9dbfb; border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--accent-wash); font-size: .95rem; }
.post-body .note p:last-child { margin-bottom: 0; }

.post-body .summary-box { margin: 2.5rem 0 0; padding: 1.5rem 1.75rem; border: 1px solid var(--card-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); }
.post-body .summary-box h2 { margin-top: 0; }
.post-body .summary-box ul, .post-body .summary-box p:last-child { margin-bottom: 0; }

/* The closing call to action: the homepage hero's pair of buttons on a light panel. */
.post-cta { margin: 3.5rem 0 0; padding: 2.25rem 2rem; border: 1px solid #dfe2fb; border-radius: 16px; background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 55%, #ecfdf5 100%); text-align: center; }
.post-cta h2 { margin: 0 0 .6rem; color: var(--navy); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.post-cta p { max-width: 36rem; margin: 0 auto 1.5rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.post-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }

/* "On this page": a collapsible box under the cover on narrow screens; the sticky column on wide ones. */
.toc ol { margin: 0; }
.toc-inline { margin: 0 0 2.25rem; border: 1px solid var(--card-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.toc-inline summary { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; color: var(--navy); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; list-style: none; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.toc-inline[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.toc-inline ol { padding: 0 1.25rem 1rem 2.6rem; }
.toc-inline li { padding: .2rem 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.toc-inline a { color: var(--fg); text-decoration: none; }
.toc-inline a:hover, .toc-inline a.active { color: var(--accent-ink); }

.post-aside { display: none; }
.aside-label { margin: 0 0 .8rem; color: var(--navy); font-size: .75rem; font-weight: 600; line-height: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.aside-sticky { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 1.5rem; max-height: calc(100vh - 128px); overflow-y: auto; padding: 2px 4px 4px 2px; scrollbar-width: thin; }
.toc-side ol { padding: 0; border-left: 2px solid var(--line); list-style: none; }
.toc-side li { margin: 0; }
.toc-side a { display: block; margin-left: -2px; padding: .3rem 0 .3rem 1rem; border-left: 2px solid transparent; color: var(--muted); font-size: .875rem; line-height: 1.45; text-decoration: none; transition: color .15s, border-color .15s; }
.toc-side a:hover { color: var(--navy); }
.toc-side a.active { border-left-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

.author-card { padding: 1.25rem; border: 1px solid var(--card-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.author-row { display: flex; align-items: center; gap: .8rem; }
.author-row img { flex: none; width: 56px; height: 56px; border-radius: 50%; }
.author-card p { margin: 0; }
.author-name { color: var(--navy); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.author-org { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.author-card .author-bio { margin-top: .9rem; color: var(--fg); font-size: .875rem; line-height: 1.6; }
.author-end { margin-top: 2.5rem; }


@media (min-width: 1100px) {
  .post-aside { display: block; }
  .toc-inline, .author-end { display: none; }
}
/* On a short screen the column keeps only "On this page"; the author card moves to the end of the article. */
@media (min-width: 1100px) and (max-height: 720px) {
  .author-side { display: none; }
  .author-end { display: block; }
}

.more-posts { border-top: 1px solid var(--line); background: #fff; }
.more-posts .wrap { max-width: 1280px; padding-top: 3rem; padding-bottom: 4.5rem; }
.more-posts h2 { margin: 0 0 1.5rem; color: var(--navy); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }

/* Full-size screenshot viewer. */
.shot-viewer { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(15, 23, 42, .82); cursor: zoom-out; }
.shot-viewer img { max-width: min(1600px, 100%); max-height: 100%; width: auto; border-radius: 10px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.shot-viewer button { position: absolute; top: 16px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 24px; cursor: pointer; }

@media (max-width: 640px) {
  .post-wrap { gap: 2.5rem; }
  .post-cover { margin-bottom: 2rem; }
  .post-body h2 { margin-top: 2.5rem; }
  .post-body .cant li { padding: .9rem 1rem .9rem 2.9rem; }
  .post-body .cant li::before { left: .85rem; top: 1.1rem; }
  .post-cta { padding: 1.75rem 1.25rem; }
  .post-cta-actions .btn { flex: 1 1 100%; }
  .live-strip { flex-wrap: wrap; padding: 1rem; }
  .live-strip p { flex-basis: calc(100% - 2rem); }
  .live-strip .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-live, .live-dot::after { animation: none; }
  .btn-live:hover, .post-card:hover { transform: none; }
}