/* =========================================================
   Rate My Ratings — blog.css
   The blog (/blog, /blog/category/{slug}, /blog/{slug}).
   Loaded after catalogue.css and built on it: breadcrumbs, the
   page head, chips, the empty and foot bands all come from there.
   This file adds the article cards, the article page, and the
   prose styles for the body HTML the admin panel sends.
   ========================================================= */

/* ---------- Index & category: tools -------------------- */
.blog-head h1 { max-width: 22ch; }
.blog-tools { display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; padding-bottom: 24px; margin-bottom: 36px; border-bottom: var(--hairline); }
.blog-cats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.blog-cats .chip { text-decoration: none; display: inline-flex; align-items: center; }
.blog-cats .chip.is-on:hover { background: var(--ink); color: var(--fg-on-dark); }

.blog-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 340px; margin-left: auto; }
.blog-search .cat-search__icon { top: 50%; transform: translateY(-50%); }
.blog-search input { flex: 1 1 auto; min-width: 0; font-family: var(--font-sans); font-size: 14.5px; padding: 9px 14px 9px 34px; border: 1px solid transparent; border-radius: var(--radius-1); background: var(--bg-2); color: var(--fg-1); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.blog-search input::placeholder { color: var(--fg-faint); }
.blog-search input:hover { background: var(--paper-2); border-color: var(--rule); }
.blog-search input:focus { outline: none; background: var(--bg-3); border-color: var(--rule-strong); }
.blog-search .btn { flex: 0 0 auto; }

.blog-none { font-size: 15.5px; color: var(--fg-2); margin: 0; }

/* ---------- Lead article (page 1 of the index) --------- */
.post-lead { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; background: white; border: var(--hairline); border-radius: 4px; box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: 32px; transition: border-color 120ms var(--ease-out); }
.post-lead:hover { border-color: var(--ink); }
.post-lead--text { grid-template-columns: 1fr; }
.post-lead__media { background: var(--bg-2); border-right: var(--hairline); }
.post-lead__media img { display: block; width: 100%; height: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.post-lead__body { display: flex; flex-direction: column; gap: 14px; justify-content: center; padding: 40px; min-width: 0; }
.post-lead__flags { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 22px; }
.post-lead__title { font-size: 32px; line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; margin: 0; text-wrap: balance; }
.post-lead__title a { color: var(--fg-1); text-decoration: none; }
.post-lead__title a::after { content: ""; position: absolute; inset: 0; }
.post-lead:hover .post-lead__title a { color: var(--rmr-blue); }
.post-lead__title a:focus-visible { outline: none; }
.post-lead__title a:focus-visible::after { outline: 2px solid var(--rmr-blue); outline-offset: -2px; border-radius: 4px; }
.post-lead__excerpt { font-size: 16.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }

/* ---------- Article cards ------------------------------ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { position: relative; display: flex; flex-direction: column; background: white; border: var(--hairline); border-radius: 4px; box-shadow: var(--shadow-1); overflow: hidden; min-width: 0; transition: border-color 120ms var(--ease-out), transform 120ms var(--ease-out); }
.post-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.post-card--featured { border-color: var(--rmr-blue); box-shadow: inset 0 2px 0 var(--rmr-blue), var(--shadow-1); }
.post-card__media { background: var(--bg-2); border-bottom: var(--hairline); }
.post-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1 1 auto; }
.post-card__cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rmr-blue); margin: 0; }
.post-card__title { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; margin: 0; text-wrap: balance; }
.post-card__title a { color: var(--fg-1); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.post-card:hover .post-card__title a { color: var(--rmr-blue); }
.post-card__title a:focus-visible { outline: none; }
.post-card__title a:focus-visible::after { outline: 2px solid var(--rmr-blue); outline-offset: 3px; }
.post-card__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: none; }
.post-card__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-faint); margin: auto 0 0; padding-top: 6px; }

/* ---------- Pagination --------------------------------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: var(--hairline); }
.pager ol { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.pager__n { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--fg-2); text-decoration: none; border-radius: var(--radius-1); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.pager__n:hover { background: var(--bg-2); color: var(--fg-1); }
.pager__n.is-on { background: var(--ink); color: var(--fg-on-dark); }
.pager__gap { font-family: var(--font-mono); font-size: 13px; color: var(--fg-faint); padding: 0 4px; }
.pager__step { flex: 0 0 120px; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.pager__step:hover { text-decoration: underline; }
.pager__step--next { text-align: right; }

/* ---------- Article head ------------------------------- */
.post-head { padding: 56px 0 0; }
.post-head__copy { max-width: 760px; }
.post-head__cat { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 20px; }
.post-head__cat a { color: var(--rmr-blue); text-decoration: none; }
.post-head__cat a:hover { text-decoration: underline; }
.post-head h1 { font-size: 46px; line-height: 1.08; letter-spacing: -0.022em; font-weight: 600; margin: 0 0 22px; text-wrap: balance; }
.post-head__lede { font-size: 20px; line-height: 1.55; color: var(--fg-2); margin: 0; max-width: 60ch; }
.post-byline { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; padding-top: 20px; border-top: var(--hairline); }
.post-byline p { margin: 0; }
.post-byline__who { font-size: 15px; color: var(--fg-2); }
.post-byline__name { color: var(--fg-1); font-weight: 600; }
.post-byline__meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-muted); }
.post-cover { margin: 44px 0 0; border: var(--hairline); border-radius: 4px; overflow: hidden; background: var(--bg-2); }
.post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }

/* ---------- Article body & contents -------------------- */
/* The contents column sits to the right so the body keeps the title's left
   edge; it comes first in the markup so on a phone it reads first. */
.post-body { padding: 56px 0 88px; border-bottom: var(--hairline); }
.post-body__grid { display: grid; grid-template-columns: minmax(0, 720px); }
.post-body__grid--toc { grid-template-columns: minmax(0, 720px) 240px; justify-content: space-between; gap: 64px; }
.post-body__grid--toc .post-toc { grid-column: 2; grid-row: 1; }
.post-body__grid--toc .post-main { grid-column: 1; grid-row: 1; }
.post-main { min-width: 0; }

.post-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding-left: 20px; border-left: var(--hairline); }
.post-toc__h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 14px; }
.post-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.post-toc ol ol { gap: 8px; margin-top: 8px; padding-left: 14px; }
.post-toc a { font-size: 14px; line-height: 1.4; color: var(--fg-2); text-decoration: none; display: block; }
.post-toc ol ol a { font-size: 13.5px; color: var(--fg-muted); }
.post-toc a:hover { color: var(--rmr-blue); }

/* ---------- Prose: the body HTML from the admin panel -- */
.blog-prose { font-size: 17.5px; line-height: 1.7; color: var(--fg-1); overflow-wrap: break-word; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose p { font-size: inherit; line-height: inherit; max-width: none; margin: 0 0 1.25em; }
.blog-prose h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.014em; margin: 2.1em 0 0.6em; }
.blog-prose h3 { font-size: 21px; line-height: 1.3; letter-spacing: -0.008em; margin: 1.8em 0 0.5em; }
.blog-prose h4 { font-size: 17.5px; line-height: 1.4; font-weight: 600; margin: 1.6em 0 0.4em; }
.blog-prose a { color: var(--fg-link); }
.blog-prose strong { font-weight: 600; }
.blog-prose ul, .blog-prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.blog-prose li { margin: 0 0 0.45em; padding-left: 0.2em; }
.blog-prose li > ul, .blog-prose li > ol { margin: 0.45em 0 0; }
.blog-prose li::marker { color: var(--fg-muted); }
.blog-prose hr { margin: 2.5em 0; }

.blog-prose figure { margin: 2em 0; }
.blog-prose img { display: block; max-width: 100%; height: auto; border-radius: 4px; border: var(--hairline); background: var(--bg-2); }
.blog-prose figcaption { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; color: var(--fg-muted); margin-top: 10px; }

.blog-prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--ink); color: var(--fg-2); font-size: 19px; line-height: 1.6; }
.blog-prose blockquote p:last-child { margin-bottom: 0; }

.blog-prose code { font-family: var(--font-mono); font-size: 0.86em; background: var(--bg-2); border-radius: var(--radius-1); padding: 0.12em 0.36em; }
.blog-prose pre { margin: 1.8em 0; padding: 18px 20px; background: var(--bg-inverse); color: var(--fg-on-dark); border-radius: 4px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; }
.blog-prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; border-radius: 0; }

/* A wide table scrolls inside itself rather than widening the page. */
.blog-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.8em 0; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; border-top: 1px solid var(--ink); }
.blog-prose th, .blog-prose td { padding: 10px 16px 10px 0; text-align: left; vertical-align: top; border-bottom: var(--hairline); }
.blog-prose th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }

/* ---------- FAQ, topics, author ------------------------ */
.post-faq { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ink); }
.post-faq h2 { font-size: 26px; letter-spacing: -0.014em; margin: 0 0 8px; }
.post-faq dl { margin: 0; }
.post-faq__item { padding: 20px 0; border-bottom: var(--hairline); }
.post-faq dt { font-size: 17.5px; font-weight: 600; line-height: 1.4; }
.post-faq dd { margin: 8px 0 0; }
.post-faq dd p { font-size: 16px; line-height: 1.65; color: var(--fg-2); margin: 0 0 0.8em; max-width: none; }
.post-faq dd p:last-child { margin-bottom: 0; }

.post-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 40px 0 0; max-width: none; }
.post-tags__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-right: 4px; }

.post-author { margin-top: 40px; padding: 26px; background: white; border: var(--hairline); border-radius: 4px; box-shadow: var(--shadow-1); }
.post-author p { margin: 0; max-width: none; }
.post-author .post-author__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rmr-blue); margin-bottom: 10px; }
.post-author__name { font-size: 18px; font-weight: 600; }
.post-author__role { font-size: 14.5px; font-weight: 400; color: var(--fg-muted); margin-left: 6px; }
.post-author .post-author__bio { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); margin-top: 8px; }
.post-author__link { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.post-author__link:hover { text-decoration: underline; }

/* ---------- Newsletter signup ------------------------- */
/* .nl--wide is the band at the foot of the index and category pages; an
   article ends with the branded card (.nlc, below) instead. In both, the
   notes are hidden until :target shows one after a plain form post, or
   the script sets a state class; once it has, the class wins over the
   fragment. */
.nl { margin-top: 40px; padding: 28px; background: white; border: var(--hairline); border-radius: 4px; box-shadow: var(--shadow-1); }
.nl--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px 48px; align-items: start; margin-top: 56px; padding: 36px 40px; }
.nl .nl__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rmr-blue); margin: 0 0 10px; }
.nl__h { font-size: 22px; line-height: 1.25; letter-spacing: -0.012em; font-weight: 600; margin: 0; text-wrap: balance; }
.nl__panel { margin-top: 22px; }
.nl--wide .nl__panel { margin-top: 0; }
.nl .field { margin-bottom: 16px; }
.nl__row { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.nl__row .btn { flex: none; }
.nl .nl__consent { flex: 1 1 260px; font-size: 13px; line-height: 1.5; color: var(--fg-muted); margin: 0; max-width: none; }
.nl__consent a { color: var(--fg-1); }

.nl__note { display: none; scroll-margin-top: 120px; outline: none; }
.nl__note p { margin: 0; max-width: none; }
.nl__note--sent { padding: 18px 20px; background: var(--rmr-green-50); border-radius: 2px; }
.nl__note--sent p { font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.nl__note--sent .nl__note-h { font-weight: 600; color: var(--fg-1); margin-bottom: 4px; }
.nl__note--error { background: #FCEEEB; border: 1px solid #E8B5A8; padding: 10px 14px; border-radius: 2px; margin-bottom: 16px; }
.nl__note--error p { font-size: 13.5px; line-height: 1.5; color: #8C2C19; }

[data-nl]:not(.is-sent):not(.is-error):not(.is-hold) .nl__note:target,
[data-nl].is-sent [data-nl-note="sent"],
[data-nl].is-error [data-nl-note="error"],
[data-nl].is-hold [data-nl-note="hold"] { display: block; }
[data-nl]:not(.is-sent):not(.is-error):not(.is-hold) #newsletter-sent:target ~ .nl__form,
[data-nl].is-sent .nl__form { display: none; }

/* ---------- Newsletter bubble (article pages) ---------- */
/* Bottom left, mirroring the live chat's launcher at bottom right: the
   same size and inset, so the two read as a pair. The panel opens up
   out of the bubble; on a phone it spans the screen above it. */
.nlb { --nlb-inset: 20px; --nlb-size: 56px; position: fixed; left: calc(var(--nlb-inset) + env(safe-area-inset-left, 0px)); bottom: calc(var(--nlb-inset) + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; align-items: center; gap: 12px; }
.nlb[hidden] { display: none; }

.nlb__btn { position: relative; flex: none; display: grid; place-items: center; width: var(--nlb-size); height: var(--nlb-size); padding: 0; border: 0; border-radius: 50%; background: var(--rmr-blue); color: white; cursor: pointer; box-shadow: 0 6px 18px rgba(24,112,232,0.32), 0 2px 4px rgba(20,22,26,0.12); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s; }
.nlb__btn:hover { background: var(--rmr-blue-700); transform: translateY(-2px); }
.nlb__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nlb__icon { grid-area: 1 / 1; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nlb__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.nlb.is-open .nlb__btn { background: var(--ink); box-shadow: 0 6px 18px rgba(20,22,26,0.28); }
.nlb.is-open .nlb__icon:not(.nlb__icon--close) { opacity: 0; transform: rotate(90deg) scale(0.6); }
.nlb.is-open .nlb__icon--close { opacity: 1; transform: none; }
/* The amber dot from the logo's map, standing in for "something new". */
.nlb__dot { position: absolute; top: 9px; right: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--rmr-amber); box-shadow: 0 0 0 2px var(--rmr-blue); transition: opacity var(--dur-fast) var(--ease-out); }
.nlb__btn:hover .nlb__dot { box-shadow: 0 0 0 2px var(--rmr-blue-700); }
.nlb.is-open .nlb__dot { opacity: 0; }

.nlb__label { font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--fg-1); background: white; border: var(--hairline); border-radius: var(--radius-pill); padding: 8px 14px; box-shadow: 0 4px 14px rgba(20,22,26,0.10); pointer-events: none; opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.nlb__btn:hover + .nlb__label,
.nlb__btn:focus-visible + .nlb__label,
.nlb.is-peek .nlb__label { opacity: 1; transform: none; }
.nlb.is-open .nlb__label { opacity: 0; }

/* Out of the way while the signup at the end of the article is on screen,
   and gone once the reader has subscribed — unless the panel is open. */
.nlb.is-tucked:not(.is-open) .nlb__btn,
.nlb.is-done:not(.is-open) .nlb__btn { opacity: 0; visibility: hidden; transform: scale(0.7); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.nlb.is-tucked:not(.is-open) .nlb__label,
.nlb.is-done:not(.is-open) .nlb__label { display: none; }

/* .nlb-scoped so its scrolling wins over the card's overflow. */
.nlb .nlb__panel { position: absolute; left: 0; bottom: calc(var(--nlb-size) + 14px); width: 372px; max-height: calc(100vh - var(--nlb-size) - 2 * var(--nlb-inset) - 30px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 48px rgba(20,22,26,0.18), 0 2px 6px rgba(20,22,26,0.08); transform-origin: bottom left; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.97); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.nlb.is-open .nlb__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nlb__close { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(244,242,236,0.7); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nlb__close:hover { background: rgba(255,255,255,0.1); color: white; }
.nlb__close:focus-visible { outline: 2px solid var(--rmr-amber); outline-offset: 1px; }

/* ---------- Newsletter card -------------------------- */
/* The branded signup, in the bubble's panel and at the end of an article. */
.nlc { background: white; border: var(--hairline); border-radius: var(--radius-3); overflow: hidden; }
.nlc--inline { margin-top: 40px; box-shadow: 0 10px 30px rgba(20,22,26,0.08), 0 1px 3px rgba(20,22,26,0.05); }
.nlc__head { position: relative; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 16px 16px 16px 20px; background: var(--ink); color: var(--fg-on-dark); overflow: hidden; }
/* A faint street grid behind the header, after the logo's map. */
.nlc__head::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.nlc__logo { position: relative; width: 26px; height: auto; flex: none; }
.nlc .nlc__brand { position: relative; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.15; color: var(--fg-on-dark); max-width: none; }
.nlc__k { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rmr-amber); }

.nlc__body { padding: 22px 22px 20px; }
.nlc__h { font-size: 19px; line-height: 1.28; letter-spacing: -0.012em; font-weight: 600; margin: 0 0 8px; text-wrap: balance; }
.nlc .nlc__lede { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0 0 18px; max-width: none; }
.nlc .field { margin-bottom: 12px; }
.nlc .field input { width: 100%; }
.nlc .nl__row { flex-direction: column; align-items: stretch; gap: 12px; }
.nlc .nl__row .btn { justify-content: center; padding-top: 13px; padding-bottom: 13px; }
.nlc .nl__consent { font-size: 12.5px; line-height: 1.5; color: var(--fg-muted); margin: 0; max-width: none; }

/* With the reading column's width, the card at the end of an article puts
   the email field and the button on one line, the consent line under both.
   The row steps aside so its button and line join the form's grid. */
@media (min-width: 641px) {
  .nlc--inline .nlc__body { padding: 26px 28px 24px; }
  .nlc--inline .nl__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 10px; }
  .nlc--inline .nl__form .field { grid-column: 1; margin: 0; }
  .nlc--inline .nl__row { display: contents; }
  .nlc--inline .nl__row .btn { grid-column: 2; align-self: end; height: 46px; padding: 0 26px; }
  .nlc--inline .nl__consent { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .nlb__btn, .nlb__icon, .nlb__label, .nlb .nlb__panel { transition: none; }
  .nlb__btn:hover { transform: none; }
}

/* ---------- Newsletter confirm & unsubscribe pages ----- */
.nl-page { padding-bottom: 120px; border-bottom: 0; }
.nl-action { margin: 0; }

/* ---------- Responsive --------------------------------- */
@media (max-width: 1020px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-body__grid--toc { grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; }
}

@media (max-width: 920px) {
  .post-lead { grid-template-columns: 1fr; }
  .post-lead__media { border-right: 0; border-bottom: var(--hairline); }
  .post-lead__media img { height: auto; }
  .post-lead__body { padding: 28px; }
  .post-lead__title { font-size: 26px; }
  .post-head h1 { font-size: 34px; }
  .post-head__lede { font-size: 18px; }
  .post-body__grid--toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .post-body__grid--toc .post-toc, .post-body__grid--toc .post-main { grid-column: 1; grid-row: auto; }
  .nl--wide { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .post-toc { position: static; max-height: none; overflow: visible; padding: 20px 22px; margin-bottom: 40px; border: var(--hairline); border-radius: 4px; background: white; }
}

@media (max-width: 640px) {
  .blog-tools { gap: 16px; }
  .blog-search { order: -1; flex: 1 1 100%; margin-left: 0; }
  .post-grid { grid-template-columns: 1fr; }
  .post-lead__body { padding: 22px; }
  .post-lead__title { font-size: 23px; }
  .post-card__body { padding: 20px; }
  .pager__step { flex-basis: auto; }
  .pager ol .pager__n:not(.is-on) { display: none; }
  .pager__gap { display: none; }
  .post-head { padding-top: 40px; }
  .post-head h1 { font-size: 29px; }
  .post-head__lede { font-size: 16.5px; }
  .post-cover { margin-top: 32px; }
  .post-body { padding: 40px 0 64px; }
  .blog-prose { font-size: 16.5px; }
  .blog-prose h2 { font-size: 23px; }
  .blog-prose h3 { font-size: 19px; }
  .blog-prose blockquote { font-size: 17px; }
  .post-faq h2 { font-size: 22px; }
  .post-author { padding: 22px; }
  .nl, .nl--wide { padding: 22px; }
  .nl-page { padding-bottom: 80px; }
  .nlb { --nlb-inset: 16px; --nlb-size: 52px; }
  .nlb .nlb__panel { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nlb-inset) + var(--nlb-size) + 12px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100vh - var(--nlb-size) - 2 * var(--nlb-inset) - 40px); max-height: calc(100dvh - var(--nlb-size) - 2 * var(--nlb-inset) - 40px); }
}

@media print {
  .blog-tools, .pager, .post-toc, .blog-related, .cat-foot, .nl, .nlc, .nlb { display: none; }
}