/* ─────────────────────────────────────────────────────────────────
   peterbassill.com — news front page (index.php only)
   Layout after the classic news-site front page: section strip,
   four featured tiles, a latest-articles list with thumbnails and
   paging, a sidebar of widgets, then contact.
   Builds on theme.css tokens (--bg, --surface, --line, --ink…), so
   all three modes (terminal · dark · light) follow automatically.
   Everything is scoped under .nf so nothing leaks to other pages.
   ───────────────────────────────────────────────────────────────── */

/* ─── tokens ─────────────────────────────────────────────────────── */
/* Category colours live on .nf; anything that mixes a category colour
   (--nf-cat) is declared on the element that carries the .nf-c-* class,
   because custom properties resolve where they are declared. */
.nf {
  --nf-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --nf-sans: 'Inter Tight', system-ui, sans-serif;

  /* terminal: one phosphor, every category amber */
  --nf-threats: var(--accent);
  --nf-ai:      var(--accent);
  --nf-policy:  var(--accent);
  --nf-defence: var(--accent);
  --nf-privacy: var(--accent);
  --nf-opinion: var(--accent);
  --nf-cat:     var(--accent);

  --nf-accent-text:   var(--accent);   /* accent used as text */
  --nf-accent-strong: var(--accent);   /* filled buttons / current page */
  --nf-on-accent:     var(--paper);
}
[data-mode="dark"] .nf {
  --nf-threats: #ff6b6b;
  --nf-ai:      #4fc3f7;
  --nf-policy:  #ffb000;
  --nf-defence: #4ade80;
  --nf-privacy: #d8a4e6;
  --nf-opinion: #b0b0b0;
}
[data-mode="light"] .nf {
  --nf-threats: #b3261e;
  --nf-ai:      #0b5f93;
  --nf-policy:  #8a5000;
  --nf-defence: #2e6b31;
  --nf-privacy: #7b1fa2;
  --nf-opinion: #555555;
  --nf-accent-text:   #8a5000;   /* the theme's #b86b00 is 3.6:1 on cream; this is 5.8:1 */
  --nf-accent-strong: #8a5000;
  --nf-on-accent:     #fffdf8;
}

.nf .nf-c-threats { --nf-cat: var(--nf-threats); }
.nf .nf-c-ai      { --nf-cat: var(--nf-ai); }
.nf .nf-c-policy  { --nf-cat: var(--nf-policy); }
.nf .nf-c-defence { --nf-cat: var(--nf-defence); }
.nf .nf-c-privacy { --nf-cat: var(--nf-privacy); }
.nf .nf-c-opinion { --nf-cat: var(--nf-opinion); }

/* artwork: list thumbnails */
.nf .nf-art {
  --nf-art-bg:   #140f07;
  --nf-art-line: rgba(255, 176, 0, 0.20);
  --nf-art-hex:  rgba(255, 176, 0, 0.20);
  --nf-art-hot:  rgba(255, 176, 0, 0.62);
  --nf-art-ic:   var(--accent);
}
[data-mode="dark"] .nf .nf-art {
  --nf-art-bg:   color-mix(in srgb, var(--nf-cat) 13%, #121212);
  --nf-art-line: color-mix(in srgb, var(--nf-cat) 26%, transparent);
  --nf-art-hex:  color-mix(in srgb, var(--nf-cat) 32%, transparent);
  --nf-art-hot:  color-mix(in srgb, var(--nf-cat) 90%, transparent);
  --nf-art-ic:   var(--nf-cat);
}
[data-mode="light"] .nf .nf-art {
  --nf-art-bg:   color-mix(in srgb, var(--nf-cat) 10%, #fffdf8);
  --nf-art-line: color-mix(in srgb, var(--nf-cat) 24%, transparent);
  --nf-art-hex:  color-mix(in srgb, var(--nf-cat) 30%, transparent);
  --nf-art-hot:  var(--nf-cat);
  --nf-art-ic:   var(--nf-cat);
}

/* artwork + caption: featured tiles */
.nf .nf-tile {
  --nf-cap-from: rgba(10, 9, 7, 0);
  --nf-cap-to:   rgba(10, 9, 7, 0.95);
  --nf-cap-ink:  var(--ink-bright);
  --nf-cap-dim:  var(--ink-dim);
  --nf-cap-kick: var(--accent);
}
.nf .nf-tile .nf-art {
  --nf-art-bg:  #120e07;
  --nf-art-hex: rgba(255, 176, 0, 0.17);
  --nf-art-hot: rgba(255, 176, 0, 0.55);
  --nf-art-ic:  var(--accent);
}
[data-mode="dark"] .nf .nf-tile {
  --nf-cap-from: rgba(8, 8, 8, 0);
  --nf-cap-to:   rgba(8, 8, 8, 0.94);
  --nf-cap-ink:  #ffffff;
  --nf-cap-dim:  rgba(255, 255, 255, 0.74);
  --nf-cap-kick: var(--nf-cat);
}
[data-mode="dark"] .nf .nf-tile .nf-art {
  --nf-art-bg:  color-mix(in srgb, var(--nf-cat) 17%, #101010);
  --nf-art-hex: color-mix(in srgb, var(--nf-cat) 30%, transparent);
  --nf-art-hot: color-mix(in srgb, var(--nf-cat) 80%, transparent);
  --nf-art-ic:  var(--nf-cat);
}
[data-mode="light"] .nf .nf-tile {
  --nf-cap-from: rgba(0, 0, 0, 0);
  --nf-cap-to:   rgba(0, 0, 0, 0.45);
  --nf-cap-ink:  #ffffff;
  --nf-cap-dim:  rgba(255, 255, 255, 0.84);
  --nf-cap-kick: rgba(255, 255, 255, 0.90);
}
[data-mode="light"] .nf .nf-tile .nf-art {
  --nf-art-bg:  color-mix(in srgb, var(--nf-cat) 88%, #000000);
  --nf-art-hex: rgba(255, 255, 255, 0.15);
  --nf-art-hot: rgba(255, 255, 255, 0.60);
  --nf-art-ic:  rgba(255, 255, 255, 0.92);
}

/* ─── utilities ──────────────────────────────────────────────────── */
.nf-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nf .nf-ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; }
.nf a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ─── section strip ──────────────────────────────────────────────── */
.nf-sections {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 0 0 4px; padding: 4px 0 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--nf-mono); font-size: 12px;
}
.nf-sections-links {
  display: flex; gap: 14px; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.nf-sections-links::-webkit-scrollbar { display: none; }
.nf-sec {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 13px 4px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--ink-dim); text-decoration: none; white-space: nowrap;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.nf-sec .nf-ic { width: 13px; height: 13px; color: var(--nf-cat); }
.nf-sec:hover { color: var(--ink-bright); }
.nf .nf-sec:focus-visible { outline-offset: -2px; }   /* the scrolling strip would clip an outer ring */
.nf-sec.is-active { color: var(--ink-bright); border-bottom-color: var(--nf-cat); }
.nf-sections-meta {
  display: flex; align-items: center; gap: 18px; flex: none;
  color: var(--ink-dim); letter-spacing: 0.04em;
}
.nf-rss {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-dim); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em;
}
.nf-rss .nf-ic { color: var(--accent); }
.nf-rss:hover { color: var(--ink-bright); }

.nf .nf-prompt { margin: 0; padding: 18px 0 16px; }

/* ─── generated artwork (thumbnails + tiles) ─────────────────────── */
.nf-art {
  position: relative; display: block; overflow: hidden;
  background: var(--nf-art-bg);
  border: 1px solid var(--nf-art-line);
}
.nf-art-hex {
  position: absolute; top: 9px; left: 11px; right: 0;
  font: 400 10px/1.55 var(--nf-mono); letter-spacing: 0.03em;
  white-space: pre; color: var(--nf-art-hex);
}
.nf-art-hex b { font-weight: 700; color: var(--nf-art-hot); }
.nf-art-off { opacity: 0.6; }
.nf-art-ic {
  position: absolute; left: 50%; top: 50%;
  width: 36%; height: 36%; transform: translate(-50%, -50%);
  color: var(--nf-art-ic);
  filter: drop-shadow(0 0 10px var(--nf-art-bg)) drop-shadow(0 0 4px var(--nf-art-bg));
}

/* ─── featured banner ────────────────────────────────────────────── */
.nf-banner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  margin: 0 0 44px;
}
.nf-tile { position: relative; min-width: 0; }
.nf-tile-link {
  position: relative; display: block; height: 380px; overflow: hidden;
  color: inherit; text-decoration: none;
}
.nf-tile .nf-art { position: absolute; inset: 0; border: 0; }
.nf-tile .nf-art-hex {
  top: 14px; left: 16px; font-size: 11px; line-height: 1.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 35%, transparent 72%);
}
.nf-tile .nf-art-ic {
  left: auto; top: 22px; right: 20px; transform: none;
  width: 48px; height: 48px;
}
.nf-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 9px;
  padding: 90px 18px 18px;
  background: linear-gradient(to bottom, var(--nf-cap-from) 0, var(--nf-cap-to) 62%);
}
.nf-tile .nf-kicker { color: var(--nf-cap-kick); margin: 0; }
.nf-tile-title {
  margin: 0;
  font: 700 20px/1.2 var(--nf-sans); letter-spacing: -0.015em;
  color: var(--nf-cap-ink); text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.nf-tile-meta {
  font: 500 11px/1.3 var(--nf-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nf-cap-dim);
}
.nf-tile-link:hover .nf-tile-title,
.nf-tile-link:focus-visible .nf-tile-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nf-tile-link:hover .nf-tile-cap,
.nf-tile-link:focus-visible .nf-tile-cap { padding-top: 150px; }
.nf .nf-tile-link:focus-visible { outline-offset: -3px; }

/* ─── body grid ──────────────────────────────────────────────────── */
.nf-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px;
  align-items: start;
}
.nf-main { min-width: 0; }

/* line heading: LABEL ════════ */
.nf-heading {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px;
  font: 700 13px/1.2 var(--nf-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nf-accent-text);
}
.nf-heading > span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.nf-heading .nf-ic { width: 14px; height: 14px; }
.nf-heading em { font-style: normal; font-weight: 400; color: var(--ink-dim); letter-spacing: 0.06em; }
.nf-heading::after {
  content: ""; flex: 1; min-width: 24px; height: 3px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.nf-main > .nf-heading .nf-ic { color: var(--nf-cat); }

.nf-lede { margin: -6px 0 18px; color: var(--ink-dim); font-size: 16px; line-height: 1.5; max-width: 60ch; }
.nf-count {
  display: block; margin-top: 8px; font: 600 11px var(--nf-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.nf-empty { color: var(--ink-dim); font-family: var(--nf-mono); font-size: 13px; padding: 24px 0; }

/* ─── latest-articles list ───────────────────────────────────────── */
.nf-list { list-style: none; margin: 0; padding: 0; }
.nf-item {
  position: relative;
  display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 24px;
  padding: 26px 0; border-top: 1px dotted var(--line);
}
.nf-item:first-child { border-top: 0; padding-top: 4px; }
.nf-item > .nf-art { width: 172px; aspect-ratio: 1 / 1; }

.nf-kicker {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 0 0 7px;
  font: 700 11px/1.35 var(--nf-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nf-cat);
}
.nf-kicker a { position: relative; z-index: 2; color: var(--nf-cat); text-decoration: none; }
.nf-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nf-kicker .nf-kicker-series { color: var(--ink-dim); font-weight: 500; letter-spacing: 0.06em; }
.nf-kicker-sep { color: var(--ink-dim); font-weight: 400; }

.nf-title {
  margin: 0 0 9px;
  font: 600 22px/1.26 var(--nf-sans); letter-spacing: -0.015em;
  color: var(--ink-bright); text-wrap: pretty;
}
.nf-title a { color: inherit; text-decoration: none; }
.nf-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole item clicks through */
.nf-item:hover .nf-title a { color: var(--nf-accent-text); }
.nf .nf-title a:focus-visible { outline: none; }
.nf .nf-title a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }

.nf-summary {
  margin: 0 0 12px; color: var(--ink-dim); font-size: 15px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nf-meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  font: 500 11px/1.4 var(--nf-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim);
}
.nf-meta li { display: inline-flex; align-items: center; gap: 7px; }
.nf-meta .nf-ic { width: 12px; height: 12px; color: var(--ink-dim); }

/* ─── pager ──────────────────────────────────────────────────────── */
.nf-pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  font: 600 12px/1 var(--nf-mono);
}
.nf-pg {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  letter-spacing: 0.04em;
}
.nf-pg .nf-ic { width: 10px; height: 10px; }
a.nf-pg:hover { border-color: var(--nf-accent-text); color: var(--nf-accent-text); }
.nf-pg.is-current { background: var(--nf-accent-strong); border-color: var(--nf-accent-strong); color: var(--nf-on-accent); }
.nf-pg--gap { min-width: 18px; padding: 0; border-color: transparent; color: var(--ink-dim); }
.nf-pg--step { text-transform: uppercase; letter-spacing: 0.08em; }
.nf-pager-archive {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-dim); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em;
}
.nf-pager-archive .nf-ic { width: 11px; height: 11px; color: var(--accent); }
.nf-pager-archive:hover { color: var(--ink-bright); }

/* ─── sidebar ────────────────────────────────────────────────────── */
.nf-side { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.nf-widget { min-width: 0; }
.nf-widget .nf-heading { margin-bottom: 16px; }
.nf-widget p { margin: 0 0 12px; color: var(--ink-dim); font-size: 14px; line-height: 1.55; }
.nf-widget p strong { color: var(--ink-bright); font-weight: 600; }
.nf-widget .nf-widget-note { font-size: 13px; margin-bottom: 8px; }
.nf-widget .nf-widget-foot { margin: 14px 0 0; font: 12px/1.6 var(--nf-mono); color: var(--ink-dim); }
.nf-widget-foot a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ink-dim); }
.nf-widget-foot a:hover { color: var(--nf-accent-text); border-bottom-color: var(--nf-accent-text); }
.nf-widget-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font: 600 11px/1 var(--nf-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nf-accent-text); text-decoration: none;
}
.nf-widget-more .nf-ic { width: 10px; height: 10px; }
.nf-widget-more:hover { color: var(--ink-bright); }

.nf-links { list-style: none; margin: 10px 0 0; padding: 0; }
.nf-links li { border-top: 1px dotted var(--line); }
.nf-links a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.4;
}
.nf-links a:hover { color: var(--nf-accent-text); }
.nf-series-n { flex: none; font: 600 11px var(--nf-mono); color: var(--ink-dim); letter-spacing: 0.06em; text-transform: uppercase; }

/* weekly */
.nf-weekly-lead {
  position: relative; display: block; padding: 16px 18px 16px 20px;
  border: 1px solid var(--line); background: var(--surface);
  color: inherit; text-decoration: none;
}
.nf-weekly-lead::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
  background: var(--accent);
}
.nf-weekly-range {
  display: block; margin-bottom: 8px;
  font: 700 17px/1.3 var(--nf-sans); letter-spacing: -0.01em; color: var(--ink-bright);
}
.nf-weekly-sum {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; line-height: 1.5; color: var(--ink-dim);
}
.nf-weekly-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font: 600 11px/1 var(--nf-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nf-accent-text);
}
.nf-weekly-cta .nf-ic { width: 10px; height: 10px; }
.nf-weekly-lead:hover { border-color: var(--accent); }
.nf-weekly-lead:hover .nf-weekly-range { color: var(--nf-accent-text); }

/* KEV */
.nf-kev .nf-heading .nf-ic { color: var(--nf-threats); }
.nf-kev-list { list-style: none; margin: 0; padding: 0; }
.nf-kev-list li { border-top: 1px dotted var(--line); }
.nf-kev-list li:first-child { border-top: 0; }
.nf-kev-list a { display: block; padding: 10px 0; color: inherit; text-decoration: none; }
.nf-kev-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 700 12px/1.3 var(--nf-mono);
}
.nf-kev-id { color: var(--ink-bright); letter-spacing: 0.02em; }
.nf-kev-date { flex: none; color: var(--ink-dim); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.nf-kev-what { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--ink-dim); }
.nf-kev-rw {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  font: 700 10px/1 var(--nf-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nf-threats);
}
.nf-kev-list a:hover .nf-kev-id { color: var(--nf-accent-text); }

/* sections */
.nf-cats { list-style: none; margin: 0; padding: 0; }
.nf-cats li { border-top: 1px dotted var(--line); }
.nf-cats li:first-child { border-top: 0; }
.nf-cats a {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  color: var(--ink); text-decoration: none; font-size: 15px;
}
.nf-cats .nf-ic { width: 16px; height: 16px; color: var(--nf-cat); }
.nf-cats-label { flex: 1; }
.nf-cats-n { font: 600 12px var(--nf-mono); color: var(--ink-dim); min-width: 32px; text-align: right; }
.nf-cats a:hover .nf-cats-label,
.nf-cats a[aria-current] .nf-cats-label { color: var(--nf-cat); }

/* subscribe */
.nf-subscribe-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nf-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px;
  font: 700 12px/1 var(--nf-mono); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--nf-accent-strong); color: var(--nf-on-accent);
  border: 1px solid var(--nf-accent-strong); text-decoration: none;
}
.nf-btn:hover { opacity: 0.88; }
.nf-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.nf-btn--ghost .nf-ic { color: var(--accent); }
.nf-btn--ghost:hover { opacity: 1; border-color: var(--nf-accent-text); color: var(--nf-accent-text); }

/* ─── contact ────────────────────────────────────────────────────── */
.nf-contact { margin-top: 72px; padding-top: 4px; border-top: 1px solid var(--line); }
.nf-contact .prompt-head { margin: 0; padding: 20px 0 18px; }
.nf-contact .nf-heading { margin-bottom: 28px; }
.nf-contact .channels { margin-top: 28px; }
.nf .contact-form button[type="submit"] { background: var(--nf-accent-strong); color: var(--nf-on-accent); }
.nf .contact-form .form-meta { color: var(--ink-dim); }

/* ─── responsive ─────────────────────────────────────────────────── */
@media (max-width: 1140px) {
  .nf-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-tile-link { height: 320px; }
  .nf-body { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; }
  .nf-item { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }
  .nf-item > .nf-art { width: 140px; }
}

@media (max-width: 900px) {
  .nf-body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .nf-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}

@media (max-width: 640px) {
  .nf-sections { flex-wrap: wrap; gap: 0 16px; }
  .nf-sections-links { flex-basis: 100%; gap: 10px; }
  .nf-sections-meta { display: none; }
  .nf .nf-prompt { font-size: 11px; overflow-wrap: anywhere; }

  /* featured tiles become a swipeable row */
  .nf-banner {
    display: flex; gap: 8px; margin: 0 -20px 36px; padding: 0 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .nf-banner::-webkit-scrollbar { display: none; }
  .nf-tile { flex: 0 0 84%; scroll-snap-align: start; }
  .nf-tile-link { height: 300px; }
  .nf-tile-title { font-size: 19px; }

  .nf-item { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 20px 0; }
  .nf-item > .nf-art { width: 84px; }
  .nf-item .nf-art-hex { font-size: 8px; top: 5px; left: 6px; }
  .nf-title { font-size: 18px; line-height: 1.3; }
  .nf-summary { font-size: 14px; -webkit-line-clamp: 2; }
  .nf-meta { gap: 4px 14px; }

  .nf-pager-archive { margin-left: 0; flex-basis: 100%; padding-top: 10px; }
  .nf-side { grid-template-columns: minmax(0, 1fr); }
  .nf-contact { margin-top: 56px; }
}

@media (prefers-reduced-motion: no-preference) {
  .nf-tile-cap { transition: padding-top 0.35s ease; }
  .nf-item .nf-title a, .nf-sec, .nf-pg, .nf-links a { transition: color 0.15s, border-color 0.15s; }
}

@media print {
  .nf-sections, .nf-banner, .nf-side, .nf-pager, .nf-contact .contact-form, .nf-art { display: none !important; }
  .nf-body { display: block; }
  .nf-item { grid-template-columns: 1fr; }
}