/* newsband.css — the two homepage news rails.

   EVERY class here is prefixed nwr, not nw. news.css got there first: its
   .nwcov is the 64x64 thumbnail on the /news list, and both stylesheets load on
   this page. The explicit height:64px in that rule beat the aspect-ratio in
   this one - later in the cascade does not help when the earlier rule sets a
   property the later one only implies - and the rail rendered its pictures at
   208x64 while every computed value looked correct in isolation.

   These began as grids and are now .strp rails, the shape the rest of this page
   already speaks in (trending, albums, recently played). Three things came out
   of that change, all of them the operator's call and all of them right:

   - the page grows by two rows instead of twelve, so the radio, the fal card
     and the pinned songs are not pushed under a wall of news
   - nobody downloads forty hotlinked publisher images on first paint; ten
     arrive, and another ten only when a reader scrolls for them
   - the section stops being a foreign object on a page built out of rails

   The one deliberate difference from .ctile: the picture stays RECTANGULAR.
   Album art is square because records are square; a news photograph cropped to
   a square loses the thing it was framed for.

   The ‹ › arrows are NOT defined here. strip-nav.js wraps every .strp and
   injects buttons that reuse the history-nav classes, so these rails inherit
   them by construction rather than by a second implementation that could drift.

   ONE THING THAT MUST NOT BE FORGOTTEN: a rail ships ten cards in the HTML and
   fetches the rest, so Google sees ten. That is fine ONLY because /news and
   /news/archive exist and are indexable - the rail is the browsing surface, the
   archive is the indexed one. Remove the archive and the feed goes invisible. */

.nwrtile { display: block; width: 208px; flex: 0 0 auto; color: inherit;
          text-decoration: none; scroll-snap-align: start; }
.nwrtile:hover .nwrtt { text-decoration: underline; text-underline-offset: 4px;
                      text-decoration-thickness: 1px; }

/* 4:3, fixed. The pictures arrive from IS, Yle, Iltalehti and MTV at whatever
   ratio each paper happens to use, and a rail of mismatched heights reads as a
   broken page rather than as variety. */
.nwrcov { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
         border-radius: 11px; margin-bottom: 8px;
         background: var(--imgbg, rgba(128,128,128,.16)) center/cover no-repeat;
         box-shadow: 0 8px 18px -8px rgba(0,0,0,.45);
         transition: transform .2s; }
.nwrtile:hover .nwrcov { transform: translateY(-3px); }
/* a story with no picture must not leave a hole the size of a picture */
.nwrcov[data-empty]::after { content: "📰"; position: absolute; inset: 0;
         display: flex; align-items: center; justify-content: center;
         font-size: 26px; opacity: .35; }

/* Two lines, clamped. One line ellipsises most Persian headlines into
   uselessness; three makes the tiles tall enough to bring back the height the
   rail was chosen to save. The fixed min-height keeps the row aligned when one
   headline runs short. */
.nwrtt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; font-size: .84rem; font-weight: 700; line-height: 1.5;
        min-height: 2.5em; }
.nwrts { display: block; margin-top: 3px; font-size: .7rem; color: var(--muted); }

/* PINNED: translated, waiting for the operator to approve it into an article.
   Same tile as the rest on purpose - it is the same promise, a story that opens
   - marked rather than restyled, so the rail keeps one rhythm. */
.nwrtile.pin .nwrcov { box-shadow: 0 0 0 2px var(--gold, #e7c873), 0 8px 18px -8px rgba(0,0,0,.45); }
.nwrpin { position: absolute; top: 7px; inset-inline-start: 7px; z-index: 2;
         background: var(--gold, #e7c873); color: var(--bg, #1a1a1a);
         font-size: .67rem; font-weight: 800; padding: 2px 7px; border-radius: 20px; }

/* the rail says it is working, without moving anything */
.strp.nwrloading { cursor: progress; }
.strp.nwrloading .nwrtile:last-child { opacity: .55; }

@media (max-width: 640px) {
  /* Same reason as the played-tracks rail: at 375px two 158px tiles fill the
     row almost exactly, so nothing tells a reader it continues. A fraction of
     the rail keeps a third tile's edge in view on any phone. */
  .nwrtile { width: calc(44% - 8px); }
  .nwrtt { font-size: .79rem; }
}

/* ── ONE BLOCK THAT IS READING (operator, 2026-09-10) ────────────────────────

   The page runs five near-identical rails in a row, and once the magazine rail
   became the news rail's twin there was nothing for the eye to hold. The fix is
   not a different card per rail; it is one block that is reading and one block
   that is music.

   Two signals, both chosen because they survive a change of skin. Twice today a
   rule written in a fixed colour rendered invisible under "brutal", so the
   ground here reuses .magband's own dark value - the treatment the operator
   already approved in July - and the second signal is a CORNER, which has no
   colour to lose at all. */
/* JUST DARKER, NOTHING ELSE (operator, 2026-09-10: «همون قبلی رو تیره کن»).

   The first version of this band wrapped the rails in 26px of padding, another
   20px inside that, and a 2px white rule across the top. None of that was asked
   for and all of it was bulk: the cards never changed size, the BLOCK did, and
   it read as a heavy new template rather than as the same two rails on a darker
   ground. Padding is now just enough to keep the dark from cutting the cards. */
.nwrband { margin: 22px -30px 0; padding: 14px 30px 4px;
           background: #2e2d2b; color: #fff; }
.nwrbandin { padding-top: 0; }

/* the band is dark whatever the page is, so its own text tokens are forced
   rather than inherited - this is the one place a fixed colour is correct,
   because the background it sits on is fixed too */
.nwrband .lh h2 { color: #fff; }
.nwrband .lh .more { color: rgba(255,255,255,.65); }
.nwrband .lh .more:hover { color: #e7c873; }
.nwrband .nwrtile { color: #fff; }
.nwrband .nwrts { color: rgba(255,255,255,.5); }
.nwrband .nwrcov { background-color: rgba(255,255,255,.08); }
 /* The two rails ran together into one undifferentiated block once they shared
    a card and a ground. They are two answers to two different questions - what
    is finished, and what is waiting - so the second gets air above it and a
    hairline to sit under, the same separator the band's own headings use. */
.nwrband .lsect { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.nwrband .lsect:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* The corner was not part of the request and it is reverted: the shape signal
   he asked for is already carried by a 4:3 rectangle standing next to a 132px
   square, and «دقیقا همون چیزی که قبل از این بود» means the card itself does
   not move. Radius stays at the 11px the tile has always had. */

/* the paper skin tilts every .strp child by half a degree, which is charming on
   album art and wrong on a news photograph inside a dark band */
html[data-ir2-skin="brutal"] .nwrband .strp > *,
html[data-ir2-skin="brutal"] .nwrband .strp > *:hover { transform: none; }

@media (max-width: 640px) {
  .nwrband { margin: 18px -14px 0; padding: 12px 14px 2px; }
}

/* ── the skin wins on specificity unless you say its name ───────────────────

   paper.css scopes its palette as html[data-ir2-skin="brutal"] .lsect .lh h2,
   which outranks a plain .nwrband .lh h2 no matter which file loads later. The
   result was ink-dark headings sitting on the dark band, technically present
   and effectively invisible - the third time in one day that a rule lost to
   this skin, and the reason every override below repeats the skin's own
   selector instead of hoping to win without it. */
/* The line under a heading is not a border - paper.css paints it as a repeating
   pencil TEXTURE (--pp-pencil) in the skin's ink, so overriding border-color did
   nothing at all and the rule stayed black on the black band. Replaced with a
   plain light rule, which is also the honest thing: a pencil stroke belongs on
   paper, and this block is not paper. */
html[data-ir2-skin="brutal"] .nwrband .lsect .lh h2 {
  color: #fff;
  background: none;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.28);
}
html[data-ir2-skin="brutal"] .nwrband .lsect .lh .more { color: rgba(255,255,255,.65); }
html[data-ir2-skin="brutal"] .nwrband .lsect .lh .more:hover { color: #e7c873; }
html[data-ir2-skin="brutal"] .nwrband .nwrtile { color: #fff; }
html[data-ir2-skin="brutal"] .nwrband .nwrts { color: rgba(255,255,255,.5); }

/* and the tilt is applied per nth-child, so an override on * never reaches it */
html[data-ir2-skin="brutal"] .nwrband .strp > :nth-child(2n+1),
html[data-ir2-skin="brutal"] .nwrband .strp > :nth-child(2n),
html[data-ir2-skin="brutal"] .nwrband .strp > :hover { transform: none; }
html[data-ir2-skin="brutal"] .nwrband .nwrtile:hover .nwrcov { transform: translateY(-3px); }

/* ── /mag, the magazine index (operator 2026-09-10) ──────────────────────────
   The same .nwrtile the rails use, laid out as a grid instead of a row. The
   tile carries a fixed 208px width because a flex item in a rail has to be told
   one; in a grid the column decides, so both the width and the flex sizing are
   handed back. */
.magrid { display: grid; gap: 22px 14px; margin-top: 22px;
          grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.magrid .nwrtile { width: auto; flex: initial; }
@media (max-width: 640px) {
  .magrid { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
}

/* THE COLOURS HERE ARE FOR A DARK COLUMN, and getting that wrong is the single
   most repeated bug in this codebase. .nwpg paints itself #2e2d2b and sets its
   text to white; the tile's own rules were written for the cream page and read
   --muted, which on the paper skin is ink at 55% - invisible on this ground.
   Shipped that way for an hour: the section label under every card and the whole
   pager were there and could not be seen.

   Scoped to .nwpg rather than to this one page, so a card drawn on ANY of the
   dark reading pages is right by construction - the same answer .nwrband
   already gives the homepage band. */
.nwpg .nwrtile { color: #fff; }
.nwpg .nwrts   { color: rgba(255,255,255,.5); }
.nwpg .nwrcov  { background-color: rgba(255,255,255,.08); }
html[data-ir2-skin="brutal"] .nwpg .nwrtile { color: #fff; }
html[data-ir2-skin="brutal"] .nwpg .nwrts   { color: rgba(255,255,255,.5); }

.magpager { display: flex; align-items: center; justify-content: space-between;
            gap: 14px; margin: 30px 0 6px; font-size: .86rem; }
.magpager a { color: #fff; text-decoration: none; font-weight: 700;
              border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
              padding: 8px 16px; }
.magpager a:hover { background: rgba(255,255,255,.09); }
.magpg { color: rgba(255,255,255,.6); }