/*
Theme Name: Vinkmag Child — أخبار ع النار
Theme URI: https://3lnar.com
Description: Dense Arabic news layout for 3lnar.com. A child of Vinkmag, so the parent theme can be updated without losing any of this. Advertising slots, theme options and every existing setting are the parent's and are left exactly as they are.
Author: server maintenance
Template: vinkmag
Version: 1.0
Text Domain: vinkmag-child
*/

/* =============================================================================
   Design tokens

   A news front page lives or dies on how many headlines a reader can take in at
   once, so the scale is fixed and small — 44 / 24 / 17 / 14 / 12 — and every
   module picks from it rather than inventing a size. The red is the one from the
   masthead; everything else is neutral so the red always means "this is the
   thing to look at".
   ========================================================================== */
:root {
  --n-red: #e20613;
  --n-red-dark: #b50510;
  --n-ink: #14161a;
  --n-ink-2: #3d434d;
  --n-meta: #767d89;
  --n-line: #e2e5ea;
  --n-line-soft: #eef0f3;
  --n-paper: #ffffff;
  --n-wash: #f5f6f8;

  --n-44: 2.4rem;
  --n-24: 1.35rem;
  --n-17: 1.0rem;
  --n-14: 0.86rem;
  --n-12: 0.75rem;

  --n-gap: 1.35rem;
  --n-wrap: 1240px;
}

/* =============================================================================
   Base
   ========================================================================== */
body.n-news {
  background: var(--n-wash);
  color: var(--n-ink);
  font-family: "Tajawal", "Segoe UI", system-ui, sans-serif;
  font-size: var(--n-17);
  line-height: 1.75;
}

.n-news img { max-width: 100%; display: block; }
.n-news a { color: inherit; text-decoration: none; }
.n-news a:hover { color: var(--n-red); }

.n-wrap { max-width: var(--n-wrap); margin-inline: auto; padding-inline: 16px; }

/* Headlines take the display face; body text and card meta stay on Tajawal,
   which holds its shape far better at 12–14px than a display face does. */
.n-news h1, .n-news h2, .n-news h3, .n-news h4,
.n-lead-title, .n-card-title, .n-strip-head h2 {
  font-family: "Noto Kufi Arabic", "Tajawal", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  text-wrap: balance;
}

/* =============================================================================
   Utility bar — date, weather, currency. Small, dark, never competing.
   ========================================================================== */
.n-util {
  background: #101216;
  color: #9aa1ad;
  font-size: var(--n-12);
}
.n-util .n-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 7px; }
.n-util .n-live { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.n-util .n-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--n-red); animation: n-pulse 2s ease-in-out infinite;
}
@keyframes n-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .n-util .n-live::before { animation: none; } }
.n-util .n-util-end { margin-inline-start: auto; display: flex; gap: 14px; }

/* =============================================================================
   Masthead — logo beside the leaderboard slot, which is the parent theme's
   top_banner rendered through vinkmag_ad(). Nothing about the ad mechanism
   changes here; only where it sits.
   ========================================================================== */
.n-masthead { background: var(--n-paper); border-bottom: 1px solid var(--n-line); }
.n-masthead .n-wrap { display: flex; align-items: center; gap: 26px; padding-block: 14px; }
.n-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.n-brand img { height: 52px; width: auto; object-fit: contain; }
.n-brand:hover { color: inherit; }

/* -----------------------------------------------------------------------------
   The masthead logo, rebuilt from the newsroom's own artwork.

   The red frame carries two black panels — أخبار on the right, النار on the left
   — with the inverted triangle and its ع standing between them and overhanging
   both. The "www.3lnar.com" line the print version carries is left off: on the
   site itself, the address is the address bar.

   Rebuilt rather than re-uploaded because the original file lived in the uploads
   this site lost, and a logo that can go missing takes the masthead with it.

   Every measurement derives from one custom property, so the whole lockup scales
   by changing a single number and nothing drifts out of proportion.
   -------------------------------------------------------------------------- */
.n-logo {
  --u: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: calc(var(--u) * 1.34);
  font-family: "Noto Kufi Arabic", sans-serif;
  line-height: 1;
}

.n-logo-bar {
  display: flex;
  align-items: stretch;
  background: var(--n-red);
  padding: calc(var(--u) * .07);
  gap: calc(var(--u) * .07);
  border-radius: calc(var(--u) * .06);
}

.n-logo-panel {
  display: flex;
  align-items: center;
  background: #111316;
  color: #fff;
  font-weight: 800;
  font-size: calc(var(--u) * .42);
  padding: calc(var(--u) * .13) calc(var(--u) * .2);
  border-radius: calc(var(--u) * .05);
}

/* The gap the triangle stands in. It belongs to the bar, so the red shows behind the triangle's
   edges exactly as it does in the printed logo. */
.n-logo-slot { width: calc(var(--u) * .66); flex: 0 0 auto; }

/* The overhang top and bottom is what makes the mark read as one object rather than as a badge
   parked between two boxes. clip-path, not a border trick: it stays a true triangle at any size
   and can carry a letter inside it. */
.n-logo-tri {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * .94);
  height: calc(var(--u) * 1.28);
  background: var(--n-red);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}

.n-logo-ain {
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--u) * .68);
  line-height: 1;
  padding-top: calc(var(--u) * .2);
}

.n-ad-leader { flex: 1; min-width: 0; display: flex; justify-content: center; }
.n-ad-leader:empty { display: none; }

/* The hosting credit. Quiet by construction — it is an acknowledgement, not a second masthead.

   Pinned to the far edge with an auto margin rather than relying on the advertising slot beside it
   to push it there: that slot collapses to nothing whenever no banner is set, and the credit then
   slid back up against the masthead. An auto margin holds the edge either way. */
.n-supported {
  flex: 0 0 auto;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--n-12);
  color: var(--n-meta);
  padding: 6px 10px;
  border: 1px solid var(--n-line);
  border-radius: 999px;
  white-space: nowrap;
}
.n-supported img { height: 22px; width: auto; }
.n-supported:hover { border-color: var(--n-line); color: var(--n-ink-2); background: var(--n-wash); }

/* =============================================================================
   Section navigation — the red bar. On a news portal this is the primary
   wayfinding, so it is the one full-bleed block of brand colour on the page.
   ========================================================================== */
.n-nav { background: var(--n-red); position: sticky; top: 0; z-index: 50; }
.n-nav .n-wrap { display: flex; overflow-x: auto; scrollbar-width: none; }
.n-nav .n-wrap::-webkit-scrollbar { display: none; }
.n-nav a {
  color: #fff; font-family: "Noto Kufi Arabic", sans-serif; font-weight: 600;
  font-size: var(--n-14); padding: 12px 15px; white-space: nowrap;
  border-inline-end: 1px solid rgba(255, 255, 255, .14);
}
.n-nav a:hover, .n-nav a.n-on { background: var(--n-red-dark); color: #fff; }

/* =============================================================================
   Breaking ticker
   ========================================================================== */
.n-ticker {
  background: var(--n-paper); border-bottom: 1px solid var(--n-line);
  font-size: var(--n-14);
}
.n-ticker .n-wrap { display: flex; align-items: center; gap: 14px; padding-block: 9px; }
.n-ticker .n-tag {
  background: var(--n-red); color: #fff; font-weight: 700; font-size: var(--n-12);
  padding: 4px 11px; border-radius: 3px; white-space: nowrap;
  font-family: "Noto Kufi Arabic", sans-serif;
}
.n-ticker ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.n-ticker li { white-space: nowrap; color: var(--n-ink-2); }

/* =============================================================================
   Advertising band — the banners sold by the newsroom.

   Two across on a wide screen rather than seven stacked: the same inventory, in
   the same order, without pushing every headline below the fold. Each banner
   keeps its own proportions — an advertiser's artwork is not ours to crop.
   ========================================================================== */
.n-sponsors { padding-block: var(--n-gap) 0; }
.n-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}
.n-sponsor {
  display: block;
  background: var(--n-paper);
  border: 1px solid var(--n-line);
  border-radius: 3px;
  overflow: hidden;
}
.n-sponsor img { width: 100%; height: auto; }

/* An odd banner at the end takes the full width rather than leaving a hole beside it. */
.n-sponsor-grid > .n-sponsor:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .n-sponsor-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   Page shell
   ========================================================================== */
.n-main { padding-block: var(--n-gap) 2.4rem; }
.n-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; }

/* =============================================================================
   Lead block — one large story, three stacked beside it. The single biggest
   decision on the page: it says what today is about.
   ========================================================================== */
.n-lead { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--n-gap); }
.n-lead-title { font-size: var(--n-44); line-height: 1.32; margin-block: 12px 8px; }

/* A small heading over each block at the top of the page. Two columns of headlines side by side
   with nothing naming them is just "more news"; named, the reader knows what each one is and can
   follow it to the section behind it. */
.n-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--n-line);
}
.n-block-head h2 { font-family: "Noto Kufi Arabic", sans-serif; font-size: var(--n-17); margin: 0; }
.n-block-head .n-more { margin-inline-start: auto; font-size: var(--n-12); color: var(--n-meta); }

/* Breaking carries the brand colour: it is the one label on this page that means "now". */
.n-urgent {
  display: inline-block;
  background: var(--n-red);
  color: #fff;
  padding: 3px 13px;
  border-radius: 3px;
  font-size: var(--n-14);
}

/* The hero rotates. Slides are stacked in the same grid cell rather than laid out in a row, so the
   block's height is the tallest slide's and the page never jumps as the story changes — a layout
   that shifts under the reader every six seconds is worse than one that does not move at all. */
.n-hero { position: relative; display: grid; }
.n-hero:focus-visible { outline: 2px solid var(--n-red); outline-offset: 3px; }

/* Every slide stays in the grid cell, all five on top of one another, and the inactive ones are
   hidden with visibility rather than removed from the layout.

   That is what keeps the block a fixed height. Headlines differ in length — two lines here, four
   there — so if only the current slide occupied the cell, the hero would grow and shrink every six
   seconds and drag the whole page up and down with it. Stacked, the cell is as tall as the longest
   headline and never moves.

   visibility:hidden also takes the hidden slides out of the tab order and out of the accessibility
   tree, which opacity alone would not do. */
.n-hero-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s ease;
}
.n-hero-slide.n-on { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .n-hero-slide { transition: none; } }

/* The controls sit ON the photograph, not under it.

   Anchored to the top of the hero with the picture's own 16:9 ratio, so the strip covers exactly
   the image and nothing else — no hard-coded height to drift out of step when the image size
   changes. The container ignores pointer events and the controls take them back, so the whole
   photograph stays a link to the story except where a button actually is. */
.n-hero-controls {
  position: absolute;
  top: 0;
  inset-inline: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 10px;
  pointer-events: none;
}
.n-hero-controls > * { pointer-events: auto; }

/* A soft shade along the bottom of the picture. Without it the dots vanish on a bright photograph
   and sit on nothing on a dark one. */
.n-hero-controls::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
  pointer-events: none;
}

.n-hero-arrow {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 22, .55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(3px);
  transition: background .2s ease;
}
.n-hero-arrow:hover { background: var(--n-red); }

.n-hero-dots {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
/* The dot is a 4px bar, but the target is not.

   A four-pixel-high control cannot be hit with a fingertip, which is most of why the slider felt
   dead on a phone. The button keeps a comfortable touch height and draws the visible bar as a
   pseudo-element inside it, so what you aim at is far larger than what you see. */
.n-hero-dots button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.n-hero-dots button::before {
  content: "";
  display: block;
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .55);
  transition: background .2s ease;
}
.n-hero-dots button.n-on::before { background: var(--n-red); }
.n-hero-dots button:focus-visible,
.n-hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .n-hero-dots button, .n-hero-arrow { transition: none; }
}

/* On a phone the arrows shrink; they do not disappear.

   Hiding them left five four-pixel bars as the only sign that the hero was a slider at all, and a
   reader reported — correctly — that the phone "has no slider". A smaller control is a compromise;
   no control is a missing feature. */
@media (max-width: 560px) {
  .n-hero-arrow { width: 32px; height: 32px; }
  .n-hero-controls { padding-inline: 6px; }
}

/* Reduced motion drops the cross-fade. The slider still advances — see the note in hero.js. */
@media (prefers-reduced-motion: reduce) {
  .n-hero-slide { transition: none; }
}
.n-lead-excerpt { color: var(--n-ink-2); font-size: var(--n-17); margin: 0; }

.n-lead-side { display: grid; gap: 14px; align-content: start; }
.n-lead-side article { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; }
.n-lead-side .n-card-title { font-size: var(--n-14); }

/* =============================================================================
   Cards — the page's unit. 71 of them on a busy front page, so they are as
   light as they can be: image, category, headline, time.
   ========================================================================== */
/* display:block is load-bearing, not tidiness. The thumbnail is an <a>, which is inline by
   default, and aspect-ratio has no effect on an inline box — so every image kept its own natural
   proportions and the rows came out ragged, while the inline box wrapping a block <img> left the
   lead block with no reliable height and the section below it painted over the headline. */
.n-thumb {
  display: block;
  overflow: hidden;
  background: var(--n-line-soft);
  border-radius: 3px;
}
.n-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.n-card:hover .n-thumb img, .n-lead-main:hover .n-thumb img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .n-thumb img { transition: none; } }

.n-badge {
  display: inline-block; font-family: "Noto Kufi Arabic", sans-serif;
  font-size: var(--n-12); font-weight: 700; color: var(--n-red);
}
.n-time { font-size: var(--n-12); color: var(--n-meta); font-variant-numeric: tabular-nums; }
.n-card-title { font-size: var(--n-17); margin-block: 6px 5px; }
.n-card-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* =============================================================================
   Section strips — a titled row of four. Repeated per category, which is what
   makes the front page a map of the newsroom rather than one long feed.
   ========================================================================== */
.n-strip { margin-top: 2rem; }
.n-strip-head {
  display: flex; align-items: center; gap: 12px;
  border-block-start: 3px solid var(--n-ink); padding-top: 11px; margin-bottom: 14px;
}
.n-strip-head h2 { font-size: var(--n-24); }
.n-strip-head h2::before {
  content: ""; display: inline-block; width: 9px; height: 9px; background: var(--n-red);
  margin-inline-end: 9px; vertical-align: 2px;
}
.n-strip-head .n-more { margin-inline-start: auto; font-size: var(--n-14); color: var(--n-meta); }
.n-strip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--n-gap); align-items: start; }
.n-strip-row .n-card-title { font-size: var(--n-14); }

/* One shape for every small thumbnail on the page — the side stack and all five strips. A row of
   cards whose images each keep their own proportions reads as a mistake before it reads as
   anything else, and it is what makes a news grid look assembled rather than designed. The lead
   is the single deliberate exception, at 16:9. */
.n-card .n-thumb { aspect-ratio: 3 / 2; }
.n-lead-main .n-thumb { aspect-ratio: 16 / 9; }

/* =============================================================================
   Side rail — latest news as a timed list, plus the sidebar ad slot.
   ========================================================================== */
.n-rail { display: grid; gap: 1.6rem; align-content: start; position: sticky; top: 56px; }
.n-panel { background: var(--n-paper); border: 1px solid var(--n-line); border-radius: 4px; }
.n-panel > h2 {
  font-size: var(--n-17); padding: 12px 15px; margin: 0;
  border-bottom: 2px solid var(--n-red); background: var(--n-paper);
}
.n-panel ul { margin: 0; padding: 0; list-style: none; }
.n-panel li { border-bottom: 1px solid var(--n-line-soft); }
.n-panel li:last-child { border-bottom: 0; }
.n-panel li a { display: block; padding: 11px 15px; font-size: var(--n-14); line-height: 1.65; }
.n-panel li .n-time { display: block; margin-top: 4px; }

.n-ad-rail { display: flex; justify-content: center; }
.n-ad-rail:empty { display: none; }

/* =============================================================================
   Section listings — the same card, in a four-up grid. Uniform by construction:
   every thumbnail here is the one .n-card .n-thumb ratio used everywhere else.
   ========================================================================== */
.n-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--n-gap) 1.1rem;
  align-items: start;
}

.n-pager { margin-top: 2rem; }
.n-pager .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.n-pager .page-numbers {
  display: inline-block; min-width: 38px; text-align: center;
  padding: 7px 11px; border: 1px solid var(--n-line); border-radius: 3px;
  background: var(--n-paper); font-size: var(--n-14); font-variant-numeric: tabular-nums;
}
.n-pager .page-numbers.current,
.n-pager .page-numbers:hover { background: var(--n-red); border-color: var(--n-red); color: #fff; }

/* =============================================================================
   The article. The one page that is deliberately not dense: a comfortable
   measure and large type, because this is where reading actually happens.
   ========================================================================== */
.n-article { background: var(--n-paper); border: 1px solid var(--n-line); border-radius: 4px; padding: 1.8rem; }
/* One measure for the whole article, not just the running text.

   Long lines tire the eye, so the body is capped at a comfortable length. Capping only the body,
   though, left the text hugging one edge of a much wider card with a bare gap down the other —
   which reads as a layout mistake rather than as a typographic decision. Every element in the
   article now shares the same column and sits centred in the card, so the space is even on both
   sides and looks deliberate, because it is. */
.n-article > *,
.n-article-body > * {
  max-width: 72ch;
  margin-inline: auto;
}

.n-article-title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.45; margin-block: 10px 16px; }

/* The lead photograph is the deliberate exception: it runs the full width of the card, the way a
   picture runs across a page in print. Its caption goes back to the text measure. */
.n-article-figure { margin: 0 0 1.4rem; max-width: none; }
.n-article-figure img { width: 100%; height: auto; border-radius: 3px; }
.n-article-figure figcaption {
  font-size: var(--n-12); color: var(--n-meta); padding-top: 7px;
  max-width: 72ch; margin-inline: auto;
}

/* The related strip is a four-up grid and needs the whole card. */
.n-article > .n-strip { max-width: none; }

.n-article-body { font-size: 1.08rem; line-height: 2.05; color: var(--n-ink-2); }
.n-article-body p { margin: 0 0 1.15rem; }
.n-article-body h2, .n-article-body h3 { color: var(--n-ink); margin: 1.8rem 0 .7rem; }
.n-article-body img { height: auto; border-radius: 3px; margin-block: 1rem; }
.n-article-body a { color: var(--n-red); text-decoration: underline; text-underline-offset: 3px; }
.n-article-body blockquote {
  margin: 1.4rem 0; padding: .2rem 1.1rem;
  border-inline-start: 3px solid var(--n-red); color: var(--n-ink); font-size: 1.1rem;
}
/* The parent theme's in-article advert, wherever its position setting puts it. */
.n-article-body .single-post-ad { display: block; margin: 1.6rem 0; }

.n-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1.6rem; }
.n-tags a {
  font-size: var(--n-12); padding: 5px 11px; border-radius: 999px;
  background: var(--n-wash); border: 1px solid var(--n-line); color: var(--n-ink-2);
}
.n-tags a:hover { background: var(--n-red); border-color: var(--n-red); color: #fff; }

/* =============================================================================
   Footer
   ========================================================================== */
.n-foot { background: #101216; color: #9aa1ad; margin-top: 2.6rem; padding-block: 2.4rem 1.2rem; }
.n-foot a { color: #cfd4dc; }
.n-foot a:hover { color: #fff; }

/* Proportional columns, not equal ones. The brand block needs room for a logo and a line of text;
   the two link columns do not, and giving all three the same width left the first one nearly empty
   with the links stranded in the middle of a very wide page. */
.n-foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}

.n-foot h3 {
  color: #fff; font-size: var(--n-14); margin: 0 0 .9rem;
  font-family: "Noto Kufi Arabic", sans-serif;
}
.n-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--n-14); }

/* Eight sections in one tall column left a lot of dead space beside it. */
.n-foot-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }

.n-foot-brand p { margin: 1rem 0 0; font-size: var(--n-14); max-width: 34ch; line-height: 1.85; }
.n-logo-foot { --u: 40px; }
.n-logo-foot .n-logo-panel { background: #000; }

.n-foot-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; }
.n-foot-social a {
  font-size: var(--n-12); padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
}
.n-foot-social a:hover { background: var(--n-red); border-color: var(--n-red); color: #fff; }

.n-foot-base {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2rem; padding-top: 1.1rem;
  font-size: var(--n-12); display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; align-items: center;
}
.n-foot-credit { display: inline-flex; align-items: center; gap: 7px; opacity: .85; }
.n-foot-credit:hover { opacity: 1; }
.n-foot-credit img { height: 18px; width: auto; }

@media (max-width: 820px) {
  .n-foot-cols { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}

/* =============================================================================
   Responsive. The grid degrades by removing columns, never by shrinking type:
   a headline that has become unreadable has stopped doing its job.
   ========================================================================== */
@media (max-width: 1080px) {
  .n-cols { grid-template-columns: minmax(0, 1fr); }
  .n-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .n-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .n-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-article { padding: 1.2rem; }
}
@media (max-width: 760px) {
  :root { --n-44: 1.6rem; --n-24: 1.15rem; }
  .n-lead { grid-template-columns: minmax(0, 1fr); }
  .n-masthead .n-wrap { flex-wrap: wrap; gap: 12px; }
  .n-ad-leader { order: 3; flex-basis: 100%; justify-content: flex-start; }
}
@media (max-width: 520px) {
  /* At phone width a four-up row becomes a list, so each card turns into a thumbnail beside its
     headline — the same shape as the side stack, which keeps every small image on the site
     identical rather than introducing a third proportion just for small screens. */
  .n-strip-row,
  .n-archive-grid { grid-template-columns: minmax(0, 1fr); }
  .n-strip-row .n-card,
  .n-archive-grid .n-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; }
}