/*
Theme Name: IT.JO WP
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: itdotjowp
*/

/* =============================================================================
   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; }

/* Amman's weather. It sits where a utility bar's small print belongs — present when you look for
   it, never competing with a headline. */
.n-weather { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.n-weather-icon { font-size: 13px; line-height: 1; }
.n-weather-temp { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The condition is the first thing to go when the bar runs out of room: the temperature and the
   city are the reading, the word for it is the elaboration. */
@media (max-width: 600px) {
  .n-weather-text { display: none; }
}

/* =============================================================================
   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 {
  flex: 0 0 auto;
  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;
}

/* The window the strip travels through. Before this it was a plain overflow:hidden list, which
   meant the first headline filled the bar and the other nine were simply cut off and never seen. */
.n-ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* A short fade at either end, so a headline arrives and departs instead of being sliced by a
     hard edge. */
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

/* The track carries two identical copies of the list and is moved by exactly one copy's width, so
   the restart lands copy two where copy one started and the loop has no visible seam.

   It travels to the RIGHT, which is the opposite of an English ticker and the correct direction
   here. In a right-to-left line the first word of a headline is its rightmost; moving the track
   rightward brings that word into view first at the left edge, with the rest following behind it.
   Moving it leftward — the English convention — would show every headline's last word first. */
.n-ticker-track {
  display: flex;
  width: max-content;
  animation: n-ticker-run var(--n-ticker-seconds, 40s) linear infinite;
}
@keyframes n-ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* A moving headline is a link the reader has to catch. Hovering or tabbing to one stops the strip
   so it can actually be clicked. */
.n-ticker:hover .n-ticker-track,
.n-ticker:focus-within .n-ticker-track { animation-play-state: paused; }

.n-ticker-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.n-ticker li { white-space: nowrap; color: var(--n-ink-2); }
.n-ticker li a:hover { color: var(--n-red); }

/* A pip between headlines, in the masthead red. Carried by every item rather than by "li + li",
   because the join between the two copies is invisible to a sibling selector and the separator
   would drop out exactly once per loop. */
.n-ticker li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--n-red);
  margin-inline: 20px 14px;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  /* No movement at all: the strip becomes a list the reader can swipe through themselves. */
  .n-ticker-track { animation: none; width: auto; overflow-x: auto; scrollbar-width: none; }
  .n-ticker-track::-webkit-scrollbar { display: none; }
  .n-ticker-list + .n-ticker-list { display: none; }
}

/* =============================================================================
   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. */
/* Hidden when the hero has no photograph to sit on.
   The control strip is a 16:9 box pinned to the top of the hero, on the assumption that a 16:9
   picture is the first thing in every slide. A promoted story without a featured image starts with
   its category and headline instead — and the strip's dark gradient and two arrow buttons then
   landed straight on top of the lead headline and made it unreadable. */
.n-hero:not(:has(.n-thumb)) .n-hero-controls { display: none; }

.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; }

/* A card whose story has no picture must not sit in the picture's column.
   n_card() prints the thumbnail only when the post has one, but the text block is always printed —
   so with no thumbnail the text became grid item 1 and was squeezed into the fixed 116px track,
   leaving a wide empty column beside it. On a 46,000-post archive a story without a featured image
   is a certainty, not an edge case. Anything that is the only child takes the whole row. */
.n-lead-side article > :only-child,
.n-strip-row .n-card > :only-child,
.n-archive-grid .n-card > :only-child { grid-column: 1 / -1; }
.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 article 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 shares one column and sits centred in the card, so the space is even on both sides and
   looks deliberate, because it is.

   The measure is in rem, NOT ch. `ch` resolves against each element's own font size, so the same
   "72ch" became about 1200px on the 33px headline — no constraint at all — and about 576px on the
   16px line carrying the section and the date. The result was a byline visibly indented from the
   headline directly above it. One absolute measure gives every element the same two edges. */
:root { --n-measure: 44rem; }

.n-article > *,
.n-article-body > * {
  max-width: var(--n-measure);
  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 shares the article's measure rather than running the full width of the card.
   Sitting wider than the headline above it, it made the headline look indented instead of making
   the picture look generous — one column, one set of edges, top to bottom. */
.n-article-figure { margin: 0 0 1.4rem; }
.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;
}

/* 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; }
}