/* Blog OFFERA (/news/): its own reading-first shell, not the storefront's.
   Self-sufficient: from site.css it takes only the :root tokens (colours, fonts, gutter), the
   dark theme (html[data-theme="dark"], set by theme-boot.js) and the box-sizing/link reset.
   No storefront layout class is used. Everything here is under the .nb prefix. */

.nb {
  --nb-wrap: 1080px;
  --nb-read: 640px;
  --accent: var(--red);
  --accent-ink: var(--red-ink);
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) { html:has(body.nb) { scroll-behavior: smooth; } }
html:has(body.nb) { scroll-padding-top: 24px; }

:where(.nb) a { color: inherit; text-decoration: none; }
.nb :focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; border-radius: 3px; }
:where(.nb) :where(h1, h2, h3, p) { margin: 0; }

/* each category has its colour: a rule on cards and section heads, the kicker text */
.nb-c-economia-domestica { --accent: var(--red); --accent-ink: var(--red-ink); }
.nb-c-saude-financeira { --accent: var(--green); --accent-ink: #17703D; }
.nb-c-estilo-de-vida-economico { --accent: #B07A5F; --accent-ink: var(--brown-soft); }
.nb-c-cupons-e-cashback { --accent: #E3A300; --accent-ink: var(--amber-ink); }
:root[data-theme="dark"] .nb-c-saude-financeira { --accent-ink: var(--green); }
:root[data-theme="dark"] .nb-c-estilo-de-vida-economico { --accent: #C99A82; }
:root[data-theme="dark"] .nb-c-cupons-e-cashback { --accent: #E8B730; }

.nb-wrap { width: 100%; max-width: var(--nb-wrap); margin: 0 auto; padding: 0 var(--gutter, 16px); }
.nb-narrow { max-width: 880px; }
.nb-main { flex: 1; padding-bottom: 64px; }
.nb-main:has(> .nb-related:last-child) { padding-bottom: 0; }

.nb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nb-skip { position: absolute; left: -9999px; top: 8px; z-index: 300; padding: 8px 14px; border-radius: 8px; background: var(--page); color: var(--ink); font-weight: 600; }
.nb-skip:focus { left: 12px; }

.nb-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink); }
.nb-meta { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nb-empty { margin: 40px 0; color: var(--ink-3); font-size: 17px; }

/* ---------- masthead ---------- */
.nb-mast__band { background: var(--red); color: #fff; }
:root[data-theme="dark"] .nb-mast__band { background: var(--red-dark); }
.nb-mast__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 48px; }
.nb-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.nb-brand picture { display: block; flex: none; }
.nb-brand img { display: block; height: 21px; width: auto; max-width: none; filter: none; }
.nb-brand__word { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .5); font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; }
.nb-mast__shop { flex: none; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; transition: background-color .15s; }
.nb-mast__shop:hover { background: rgba(255, 255, 255, .16); }
.nb .nb-mast :focus-visible { outline-color: #fff; }

.nb-topics { border-bottom: 1px solid var(--line); background: var(--page); }
.nb-topics__row { display: flex; gap: 26px; margin: 0 auto; list-style: none; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.nb-topics__row::-webkit-scrollbar { display: none; }
.nb-topics__row li { flex: none; }
.nb-topics a { position: relative; display: block; padding: 11px 0 9px; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 600; color: var(--ink-3); transition: color .15s; }
.nb-topics a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--red); transform: scaleX(0); transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .25s; opacity: .45; }
.nb-topics a:hover { color: var(--ink); }
.nb-topics a:hover::after { transform: scaleX(.6); }
.nb-topics a[aria-current="page"] { color: var(--ink); }
.nb-topics a[aria-current="page"]::after { transform: none; opacity: 1; }

/* ---------- home ---------- */
.nb-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 32px; padding: 28px 0 12px; border-bottom: 2px solid var(--ink); }
.nb-intro h1 { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.nb-intro p { max-width: 42ch; color: var(--ink-3); font-size: 14px; line-height: 1.5; }

.nb-feature > a { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px 56px; align-items: end; padding: 40px 0 12px; }
.nb-feature .nb-kicker { grid-column: 1 / -1; }
.nb-feature__title { font-family: var(--font-display); font-size: clamp(23px, 2.7vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; transition: color .15s; }
.nb-feature > a:hover .nb-feature__title { color: var(--accent-ink); }
.nb-feature__side { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.nb-feature__desc { max-width: 52ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.nb-feature__go { font-size: 14px; font-weight: 700; color: var(--red-ink); }
.nb-feature > a:hover .nb-feature__go { text-decoration: underline; text-underline-offset: 4px; }

.nb-section { padding-top: 36px; }
.nb-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 18px; padding-top: 10px; border-top: 2px solid var(--ink); }
.nb-section.nb-c-economia-domestica .nb-section__head,
.nb-section.nb-c-saude-financeira .nb-section__head,
.nb-section.nb-c-estilo-de-vida-economico .nb-section__head,
.nb-section.nb-c-cupons-e-cashback .nb-section__head { border-top-color: var(--accent); }
.nb-section[class*="nb-c-"] .nb-card .nb-kicker { display: none; } /* the section head already names it */
.nb-section__head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.nb-section__head p { flex: 1 1 260px; font-size: 13.5px; color: var(--ink-3); }
.nb-section__all { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--red-ink); white-space: nowrap; }
.nb-section__all:hover { text-decoration: underline; text-underline-offset: 4px; }

/* typographic cards */
.nb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 28px; margin: 0; padding: 0; list-style: none; }
.nb-card > a { display: flex; flex-direction: column; gap: 7px; height: 100%; padding-top: 16px; border-top: 3px solid var(--accent); }
.nb-card__title { font-family: var(--font-display); font-size: 17.5px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; transition: color .15s; }
.nb-card > a:hover .nb-card__title { color: var(--accent-ink); }
.nb-card__desc { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-card .nb-meta { margin-top: auto; padding-top: 2px; font-size: 12.5px; }

/* ---------- category pages and older pages: an editorial list ---------- */
.nb-pagehead { padding: 32px 0 18px; border-bottom: 2px solid var(--accent); }
.nb-pagehead:not([class*="nb-c-"]) { border-bottom-color: var(--ink); }
.nb-pagehead h1 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.nb-pagehead p { margin-top: 8px; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.nb-pagehead p a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
.nb-pagehead:not([class*="nb-c-"]) .nb-kicker { color: var(--ink-3); }

.nb-rows { margin: 0; padding: 0; list-style: none; }
.nb-row > a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.nb-row__date { padding-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nb-row__text { display: flex; flex-direction: column; gap: 6px; }
.nb-row__title { font-family: var(--font-display); font-size: 20px; font-weight: 750; line-height: 1.28; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; transition: color .15s; }
.nb-row > a:hover .nb-row__title { color: var(--accent-ink); }
.nb-row__desc { max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.nb-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; }
.nb-pager a { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink); transition: border-color .15s; }
.nb-pager a:hover { border-color: var(--ink-3); }
.nb-pager a[rel="next"] { margin-left: auto; }

/* ---------- article ---------- */
.nb-progress { position: fixed; inset: 0 0 auto; z-index: 200; height: 3px; pointer-events: none; display: none; }
html.nb-js .nb-progress { display: block; }
.nb-progress__bar { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 90ms linear; }
@media (prefers-reduced-motion: reduce) { .nb-progress__bar { transition: none; } }

.nb-article__head { max-width: calc(720px + 2 * var(--gutter, 16px)); margin: 0 auto; padding: 40px var(--gutter, 16px) 28px; text-align: center; }
.nb-article__head h1 { margin-top: 10px; font-family: var(--font-display); font-size: clamp(27px, 3.6vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.nb-lead { margin: 12px auto 0; max-width: 60ch; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.nb-byline { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; text-align: left; }
.nb-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.nb-byline__text { display: flex; flex-direction: column; line-height: 1.35; }
.nb-byline__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.nb-article__head .nb-kicker:hover { text-decoration: underline; text-underline-offset: 4px; }

.nb-article__layout { max-width: calc(var(--nb-read) + 2 * var(--gutter, 16px)); margin: 0 auto; padding: 0 var(--gutter, 16px); }
.nb-article__rail { display: none; }
@media (min-width: 1100px) {
  .nb-article--toc .nb-article__layout { max-width: 1180px; display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, var(--nb-read)) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .nb-article--toc .nb-article__rail { display: block; grid-column: 1; grid-row: 1 / span 2; align-self: stretch; justify-self: end; width: 100%; max-width: 220px; }
  .nb-article--toc .nb-prose, .nb-article--toc .nb-article__end { grid-column: 2; }
}
.nb-toc { position: sticky; top: 32px; padding-top: 6px; }
.nb-toc__title { margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.nb-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.nb-toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); transition: color .15s, border-color .15s; }
.nb-toc a:hover { color: var(--ink); }
.nb-toc a[aria-current="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }

.nb-prose { font-size: 17.5px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; overflow-wrap: break-word; }
.nb-prose > :first-child { margin-top: 0; }
.nb-prose p, .nb-prose ul, .nb-prose ol, .nb-prose blockquote, .nb-prose pre { margin: 0 0 1.3em; }
.nb-prose h2 { margin: 1.8em 0 .5em; font-family: var(--font-display); font-size: 23px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); scroll-margin-top: 24px; }
.nb-prose h3 { margin: 1.6em 0 .45em; font-family: var(--font-display); font-size: 19px; font-weight: 750; line-height: 1.3; color: var(--ink); }
.nb-prose ul, .nb-prose ol { padding-left: 1.35em; }
.nb-prose li + li { margin-top: .45em; }
.nb-prose li::marker { color: var(--accent); }
.nb-prose ol li::marker { font-weight: 700; }
.nb-prose strong { color: var(--ink); font-weight: 650; }
.nb-prose a { color: var(--red-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nb-prose a:hover { text-decoration-thickness: 2px; }
.nb-prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.55; color: var(--ink); }
.nb-prose blockquote p { margin: 0; }
.nb-prose hr { width: 64px; margin: 2.6em auto; border: 0; border-top: 2px solid var(--line); }
.nb-prose code { padding: 1px 6px; border-radius: 5px; background: var(--gray-50); font-size: .86em; }
.nb-prose pre { overflow-x: auto; padding: 16px 18px; border-radius: 10px; background: var(--gray-50); font-size: 14.5px; line-height: 1.6; }
.nb-prose pre code { padding: 0; background: none; }

.nb-article__end { margin-top: 40px; }
.nb-note { padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.nb-cta { margin-top: 18px; padding: 16px 20px; border-radius: 14px; background: var(--gray-50); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.nb-cta a { color: var(--red-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.nb-related { margin-top: 56px; padding: 4px 0 56px; background: var(--gray-25); border-top: 1px solid var(--line); }
.nb-related .nb-section__head { margin-top: 32px; }

/* ---------- footer ---------- */
.nb-foot { padding: 28px 0 36px; border-top: 1px solid var(--line); background: var(--page); font-size: 14px; color: var(--ink-3); }
.nb-foot__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 40px; }
.nb-foot__brand { max-width: 42ch; }
.nb-foot__name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.nb-foot__name strong { font-weight: 800; color: var(--red); }
.nb-foot__brand p { margin-top: 6px; line-height: 1.5; }
.nb-foot__contact, .nb-foot__apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.nb-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card, #fff); border: 1px solid var(--line); transition: transform .15s ease; }
.nb-ico:hover, .nb-ico:focus-visible { transform: translateY(-2px); }
.nb-foot__apps a { display: block; line-height: 0; border-radius: 8px; }
.nb-foot__apps img { display: block; height: 44px; width: auto; }
.nb-foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 4px; font-weight: 600; color: var(--ink-2); }
.nb-foot__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.nb-foot__note { max-width: 88ch; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; }

/* ---------- smaller screens ---------- */
/* ---------- pictures and colour ---------- */
/* a post's picture: the mascot art (or the post's own cover) on a panel tinted with the category
   colour. Pictures stay modest: the text leads, the art only marks the category. */
.nb-art { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 12px;
  background: radial-gradient(120% 120% at 85% 10%, color-mix(in srgb, var(--accent) 34%, var(--page)) 0%, color-mix(in srgb, var(--accent) 14%, var(--page)) 62%); }
.nb-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 70%; padding: 8% 10% 0; transition: transform .35s ease; }
.nb-art--cover img { object-fit: cover; padding: 0; }
a:hover > .nb-art img, a:hover .nb-art img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .nb-art img { transition: none; } }

/* cards: a short picture strip above the text */
.nb-card > a { border-top: 0; padding-top: 0; }
.nb-card .nb-art { aspect-ratio: 12 / 5; margin-bottom: 5px; box-shadow: inset 0 -3px 0 var(--accent); }
.nb-section[class*="nb-c-"] .nb-card .nb-kicker { display: none; }

/* featured story: a tinted band, headline first, the art small at the side */
.nb-feature { margin-top: 20px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--page)), color-mix(in srgb, var(--accent) 6%, var(--page))); }
.nb-feature > a { grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto auto; gap: 12px 40px; align-items: center; padding: 28px 36px; }
.nb-feature__text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; align-self: end; }
.nb-feature__side { grid-column: 1; grid-row: 2; align-self: start; }
.nb-feature .nb-art--hero { grid-column: 2; grid-row: 1 / span 2; width: 100%; aspect-ratio: auto; height: 200px; background: none; border-radius: 0; }
.nb-feature .nb-art--hero img { padding: 0; object-position: 50% 50%; }
.nb-feature .nb-art--hero.nb-art--cover { border-radius: 12px; }
.nb-feature .nb-kicker { grid-column: auto; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; align-self: flex-start; }
.nb-feature .nb-feature__go { display: inline-flex; align-self: flex-start; margin-top: 4px; padding: 7px 16px; border-radius: 999px; background: var(--red); color: #fff; }
.nb-feature > a:hover .nb-feature__go { background: var(--red-dark); text-decoration: none; }

/* section heads: a coloured chip carries the category */
.nb-section[class*="nb-c-"] .nb-section__head h2 { padding: 2px 11px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, var(--page)); color: var(--accent-ink); }

/* lists: a small thumbnail beside each row */
.nb-row > a { grid-template-columns: 128px minmax(0, 1fr); align-items: start; }
.nb-row__side { display: flex; flex-direction: column; gap: 6px; }
.nb-art--thumb { aspect-ratio: 4 / 3; border-radius: 10px; }
.nb-row__date { padding-top: 0; }

/* category header: a small mascot sits to the right */
.nb-pagehead[class*="nb-c-"] { position: relative; padding-right: 140px; }
.nb-pagehead .nb-art--head { position: absolute; right: 0; bottom: 0; width: 112px; aspect-ratio: 1; border-radius: 14px 14px 0 0; }
.nb-pagehead .nb-art--head img { padding: 10% 8% 0; }

/* article banner: a short strip, no wider than the head */
.nb-art--banner { max-width: 720px; margin: 0 auto 36px; aspect-ratio: auto; height: 200px; border-radius: 14px; }
.nb-art--banner img { padding-top: 12px; object-position: 50% 70%; }
.nb-art--banner.nb-art--cover { height: auto; aspect-ratio: 2 / 1; max-height: 380px; }
.nb-art--banner.nb-art--cover img { padding: 0; object-position: 50% 50%; }
.nb-article > .nb-art--banner { width: calc(100% - 2 * var(--gutter, 16px)); }

/* ---------- smaller screens ---------- */
@media (max-width: 959px) {
  .nb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-feature > a { grid-template-columns: minmax(0, 1fr) 180px; gap: 10px 24px; padding: 24px; }
  .nb-feature .nb-art--hero { height: 150px; }
}
@media (max-width: 719px) {
  .nb-topics__row { gap: 20px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .nb-intro { padding-top: 20px; }
  .nb-intro p { font-size: 13.5px; }
  .nb-feature { margin-top: 16px; border-radius: 14px; }
  .nb-feature > a { position: relative; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 16px 20px; }
  .nb-feature__text, .nb-feature__side { grid-column: 1; grid-row: auto; }
  .nb-feature .nb-art--hero { position: absolute; right: 14px; bottom: 14px; width: 80px; height: 80px; }
  .nb-feature .nb-meta { padding-right: 84px; }
  .nb-feature__title { font-size: 22px; }
  .nb-feature__desc { font-size: 15px; }
  .nb-section { padding-top: 30px; }
  .nb-section__head p { display: none; }
  /* cards and rows: a small thumbnail beside the text */
  .nb-cards { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nb-card + .nb-card > a { padding-top: 14px; border-top: 1px solid var(--line); }
  .nb-card > a { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-auto-rows: auto; column-gap: 14px; row-gap: 4px; align-content: start; padding-bottom: 14px; }
  .nb-card .nb-art { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: 1; margin: 0; align-self: start; }
  .nb-card > a > :not(.nb-art) { grid-column: 2; }
  .nb-card__title { font-size: 16.5px; }
  .nb-card__desc { font-size: 14px; }
  .nb-card .nb-meta { margin-top: 0; }
  .nb-pagehead { padding-top: 22px; padding-bottom: 14px; }
  .nb-pagehead[class*="nb-c-"] { padding-right: 84px; }
  .nb-pagehead .nb-art--head { width: 72px; border-radius: 10px 10px 0 0; }
  .nb-pagehead p { font-size: 15px; }
  .nb-row > a { grid-template-columns: 88px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; }
  .nb-art--thumb { aspect-ratio: 1; }
  .nb-row__title { font-size: 17px; }
  .nb-row__desc { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .nb-article__head { padding-top: 26px; padding-bottom: 20px; text-align: left; }
  .nb-article__head h1 { font-size: 26px; }
  .nb-lead { margin-left: 0; font-size: 16.5px; }
  .nb-art--banner { height: 140px; margin-bottom: 24px; border-radius: 12px; }
  .nb-prose { font-size: 17px; line-height: 1.7; }
  .nb-prose h2 { font-size: 21px; }
  .nb-prose h3 { font-size: 18px; }
  .nb-prose blockquote { font-size: 17.5px; }
  .nb-related { margin-top: 44px; padding-bottom: 40px; }
}
@media (max-width: 400px) {
  .nb-brand { gap: 9px; }
  .nb-brand img { height: 19px; }
  .nb-brand__word { padding-left: 9px; font-size: 17px; }
  .nb-mast__shop { padding: 5px 10px; font-size: 12.5px; }
}

/* ---------- variety ---------- */
/* the tinted panels light up from a different corner card to card, so a row does not read as one
   picture repeated */
.nb-card:nth-child(3n+2) .nb-art:not(.nb-art--cover) { background: radial-gradient(120% 120% at 12% 0%, color-mix(in srgb, var(--accent) 32%, var(--page)) 0%, color-mix(in srgb, var(--accent) 12%, var(--page)) 64%); }
.nb-card:nth-child(3n) .nb-art:not(.nb-art--cover) { background: radial-gradient(110% 130% at 50% 110%, color-mix(in srgb, var(--accent) 30%, var(--page)) 0%, color-mix(in srgb, var(--accent) 10%, var(--page)) 66%); }
.nb-row:nth-child(even) .nb-art:not(.nb-art--cover) { background: radial-gradient(120% 120% at 15% 90%, color-mix(in srgb, var(--accent) 32%, var(--page)) 0%, color-mix(in srgb, var(--accent) 12%, var(--page)) 64%); }

/* the newest posts: a small live dot */
#recentes { display: inline-flex; align-items: center; gap: 9px; }
#recentes::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 45%, transparent); }

/* a section with one or two posts: a wide card or two halves, not empty columns */
@media (min-width: 720px) {
  .nb-cards--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-cards--duo .nb-art { aspect-ratio: 3 / 1; }
  /* solo: the picture on the left, the text centred beside it (rows placed one by one, so a
     hidden kicker leaves no gap) */
  .nb-cards--solo { grid-template-columns: minmax(0, 1fr); }
  .nb-cards--solo .nb-card > a { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: 1fr repeat(4, auto) 1fr; column-gap: 36px; row-gap: 0; }
  .nb-cards--solo .nb-art { grid-column: 1; grid-row: 1 / -1; margin: 0; aspect-ratio: 12 / 5; }
  .nb-cards--solo .nb-card > a > :not(.nb-art) { grid-column: 2; }
  .nb-cards--solo .nb-card > a > :nth-child(2) { grid-row: 2; margin-bottom: 6px; }
  .nb-cards--solo .nb-card > a > :nth-child(3) { grid-row: 3; margin-bottom: 8px; }
  .nb-cards--solo .nb-card > a > :nth-child(4) { grid-row: 4; margin-bottom: 8px; }
  .nb-cards--solo .nb-card > a > :nth-child(5) { grid-row: 5; }
  .nb-cards--solo .nb-card__title { font-size: clamp(19px, 2vw, 22px); }
  .nb-cards--solo .nb-card__desc { -webkit-line-clamp: 3; font-size: 15px; }
  .nb-cards--solo .nb-meta { margin-top: 0; padding-top: 0; }
}

/* ---------- motion ---------- */
/* small and quiet: things settle in as they arrive, the art answers the pointer, the featured
   mascot breathes. All of it off for readers who ask for less motion. */
.nb-feature { position: relative; isolation: isolate; overflow: hidden; transition: box-shadow .3s ease, translate .3s ease; }
.nb-feature > a:focus-visible { outline-offset: -3px; border-radius: 16px; }
.nb-feature::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.nb-feature:hover { translate: 0 -2px; box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--accent) 80%, transparent); }

.nb-card .nb-art, .nb-row .nb-art { transition: translate .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.nb-card > a:hover .nb-art { translate: 0 -3px; box-shadow: inset 0 -3px 0 var(--accent), 0 12px 24px -16px color-mix(in srgb, var(--accent) 75%, transparent); }
.nb-row > a:hover .nb-art { translate: 0 -2px; box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--accent) 75%, transparent); }
a:hover > .nb-art:not(.nb-art--cover) img, a:hover .nb-art:not(.nb-art--cover) img { transform: scale(1.05) rotate(-1.5deg); }

.nb-section__all > span[aria-hidden], .nb-feature__go > span[aria-hidden], .nb-mast__shop > span[aria-hidden], .nb-pager a > span[aria-hidden] { display: inline-block; white-space: pre; transition: transform .2s ease; }
.nb-section__all:hover > span[aria-hidden], .nb-feature > a:hover .nb-feature__go > span[aria-hidden], .nb-mast__shop:hover > span[aria-hidden], .nb-pager a[rel="next"]:hover > span[aria-hidden] { transform: translateX(3px); }
.nb-pager a[rel="prev"]:hover > span[aria-hidden] { transform: translateX(-3px); }
.nb-feature__go { transition: background-color .2s ease; }

@keyframes nb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nb-pop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes nb-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -6px; rotate: -1.2deg; } }
@keyframes nb-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.15); } }
@keyframes nb-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes nb-grow { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: no-preference) {
  .nb-intro, .nb-pagehead, .nb-article__head { animation: nb-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .nb-feature { animation: nb-rise .7s .08s cubic-bezier(.2, .7, .2, 1) both; }
  .nb-feature::before { animation: nb-drift 14s ease-in-out infinite alternate; }
  .nb-feature .nb-art--hero, .nb-art--banner { animation: nb-pop .7s .25s cubic-bezier(.2, .7, .2, 1) both; }
  .nb-feature .nb-art--hero:not(.nb-art--cover) img, .nb-pagehead .nb-art--head img { animation: nb-float 6s 1s ease-in-out infinite; }
  .nb-topics a[aria-current="page"]::after { animation: nb-grow .5s .15s cubic-bezier(.2, .7, .2, 1) both; }
  #recentes::before { animation: nb-ping 2.4s 1s ease-out infinite; }

  /* cards, rows and section heads settle in as they scroll into view (where the browser can tie
     an animation to scrolling; elsewhere they are simply there) */
  @supports (animation-timeline: view()) {
    .nb-card, .nb-row, .nb-section__head {
      animation: nb-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .nb-card:nth-child(3n+2) { animation-range: entry 10% entry 70%; }
    .nb-card:nth-child(3n) { animation-range: entry 20% entry 80%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .nb-feature, .nb-card .nb-art, .nb-row .nb-art, .nb-topics a::after { transition: none; }
}