/* news.css — /news and /news/<pub>.

   The list borrows its shape from the radio's played-tracks rows (.ir2-sd-row):
   a small square, the line, a quieter second line, a hover tint. A news picture
   earns a little more than a track cover does, so the square is 64px and it is a
   button — the picture opens full size where it is. */

.nwpg { margin: -22px -30px calc(-1 * (var(--player-h) + 32px)); background: #2e2d2b; color: #fff;
        padding: 34px 30px calc(var(--player-h) + 60px); min-height: 100%; }
.nwin { max-width: 680px; margin: 0 auto; border-top: 2px solid #fff; padding-top: 20px; }
.nwpg .magkick { margin-top: 0; }
.nwpg .magkick a { color: #fff; }

.nwsec { margin: 26px 0 10px; font-size: .74rem; font-weight: 400; letter-spacing: .14em; color: rgba(255,255,255,.65); }
.nwempty { margin: 24px 0; font-size: .92rem; color: rgba(255,255,255,.65); line-height: 2; }

.nwlist { display: flex; flex-direction: column; }
.nwrow { display: flex; gap: 12px; align-items: center; padding: 9px 8px; margin: 0 -8px;
         border-radius: 8px; transition: background .15s; }
.nwrow:hover { background: rgba(255,255,255,.06); }
.nwrow.ready .nwa { color: #e7c873; }

.nwcov { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 6px; border: 0; padding: 0;
         background: #3a3937 center/cover no-repeat; cursor: zoom-in; }
.nwcov.none { display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: default; }

.nwtx { min-width: 0; flex: 1; display: block; text-decoration: none; color: inherit; }
.nwt { display: block; font-size: .98rem; font-weight: 400; line-height: 1.65; color: #fff; }
.nwrow:hover .nwt { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.nwa { display: block; margin-top: 4px; font-size: .72rem; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.nwa b { color: #e7c873; font-weight: 400; }

/* ── the story page ─────────────────────────────────────────────────────────── */
.nwitem .magmeta { opacity: .6; }
.nwgimg { margin: 18px 0 22px; }
.nwgimg img { width: 100%; height: auto; display: block; border-radius: 4px; }

.nwgate, .nwwait { border: 1px solid rgba(231,200,115,.34); background: rgba(231,200,115,.08);
                   border-radius: 4px; padding: 22px 24px; margin: 8px 0 24px; }
.nwgh { font-size: 1.08rem; color: #fff; margin-bottom: 8px; }
.nwgate p, .nwwait p { font-size: .92rem; line-height: 2; color: rgba(255,255,255,.78); margin: 0 0 16px; }
.nwgb { display: flex; gap: 10px; flex-wrap: wrap; }

.nwbtn { display: inline-block; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff;
         border-radius: 24px; padding: 9px 18px; font: inherit; font-size: .85rem; cursor: pointer;
         text-decoration: none; }
.nwbtn:hover { background: rgba(255,255,255,.1); }
.nwbtn.go { background: #e7c873; border-color: #e7c873; color: #221d10; font-weight: 700; }

.nwspin { width: 26px; height: 26px; border-radius: 50%; margin-bottom: 12px;
          border: 2px solid rgba(231,200,115,.28); border-top-color: #e7c873;
          animation: nwspin 1s linear infinite; }
@keyframes nwspin { to { transform: rotate(360deg); } }

.nwsrc { margin-top: 26px; font-size: .8rem; color: rgba(255,255,255,.6); }
.nwsrc a { color: #ffcc00; }

/* the full-size picture: ✕, backdrop, Escape — the site's overlay rule */
#nwimgov { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.86);
           display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
#nwimgov.on { display: flex; }
#nwimgov img { max-width: 100%; max-height: 100%; object-fit: contain; }
#nwimgov .x { position: absolute; top: 14px; inset-inline-end: 18px; color: #fff; font-size: 26px;
              background: none; border: 0; cursor: pointer; line-height: 1; }

@media (max-width: 560px) {
  .nwpg { margin: -16px -14px -30px; padding: 24px 14px 90px; }
  .nwcov { width: 54px; height: 54px; }
  .nwt { font-size: .92rem; }
}

/* ── the band on the homepage ────────────────────────────────────────────────
   Same dark full-bleed treatment the مجله band uses, for the same reason: a
   headline must never read as a track tile. The rows themselves are the shared
   partial, so the list is identical to /news down to the pixel. */
.nwband { margin: 40px -30px 0; background: #2e2d2b; color: #fff; padding: 30px 30px 26px; }
.nwband .nwbin { border-top: 2px solid #fff; padding-top: 22px; }
.nwband .maghead h2 { font-size: 1.72rem; font-weight: 400; line-height: 1.5; color: #fff; margin: 0 0 10px; }
.nwband .maghint { display: block; font-size: .74rem; letter-spacing: .12em; color: rgba(255,255,255,.7); margin-bottom: 20px; }
.nwband .nwlist { max-width: 680px; }

.nwallbtn { display: inline-block; margin-top: 20px; font-size: .82rem; color: #fff;
            text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }
.nwallbtn:hover { border-bottom-color: #fff; }

/* ── pager, and the door for a guest at the foot of page one ─────────────── */
.nwpager { display: flex; align-items: center; gap: 14px; margin: 28px 0 0; }
.nwpg-n { font-size: .78rem; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }

.nwmore { margin: 30px 0 0; padding: 22px 24px; border-radius: 4px;
          border: 1px solid rgba(231,200,115,.34); background: rgba(231,200,115,.08); }
.nwmore .nwgh { margin-bottom: 14px; }

@media (max-width: 560px) {
  .nwband { margin: 30px -14px 0; padding: 22px 14px 20px; }
  .nwband .maghead h2 { font-size: 1.5rem; }
}

/* ── the piece (2026-09-10, reshaped the same day) ───────────────────────────
   A member drags the missing piece back into the story's own photo, and the
   translation begins. Landing on the page used to start it, which was money
   spent by accident.

   Four things the first cut got wrong, all of them his: the track ran the wrong
   way for a slider, the whole thing was too small to aim at, the "hole" was a
   dark square with the photo still showing through rather than a hole, and the
   piece was a rounded square rather than a piece of a puzzle.

   The shape is one SVG clip path in objectBoundingBox units, shared by the piece
   and the hole, so the cut-out is exactly what fills it. The track is forced LTR:
   a slider drags left-to-right everywhere, RTL page or not.

   CSS rather than canvas, still: these pictures come from is.fi and yle.fi, and a
   cross-origin image drawn into a canvas taints it. The stage and the piece share
   one background-image at two offsets, which needs no pixel access at all. */
.nwzone { margin: 10px 0 26px; direction: ltr; }
.nwpz-stage { position: relative; width: 100%; height: 260px; border-radius: 4px;
              background: #3a3937 center/cover no-repeat; overflow: hidden;
              box-shadow: 0 2px 18px rgba(0,0,0,.35); }
.nwpz-stage.noimg { background: linear-gradient(135deg,#3a3937,#232220 55%,#3a3937); }

/* Really empty: the page's own colour, cut to the shape of the piece. The inset
   shadow is clipped along with the element, so it darkens the inside of the
   silhouette and the cut reads as depth rather than as a flat sticker. */
/* the element is bigger than the square you see: the knobs live in its margin */
.nwpz-hole { position: absolute; top: 50%; transform: translateY(-50%); left: 0;
             width: 108px; height: 108px; background: #2e2d2b;
             box-shadow: inset 0 3px 9px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.10);
             clip-path: url(#nwJig); -webkit-clip-path: url(#nwJig); }

/* two drop-shadows: a hairline rim that traces the silhouette so the piece has an
   edge against a bright photo, and a soft one under it so it sits above the stage */
.nwpz-piece { position: absolute; top: 50%; left: 0; transform: translateY(-50%);
              width: 108px; height: 108px; background-repeat: no-repeat;
              clip-path: url(#nwJig); -webkit-clip-path: url(#nwJig);
              filter: drop-shadow(0 0 1px rgba(255,255,255,.75))
                      drop-shadow(0 4px 11px rgba(0,0,0,.7));
              cursor: grab; }
.nwpz-piece.shake { animation: nwshake .4s; }
@keyframes nwshake { 25% { transform: translateY(-50%) translateX(-7px); }
                     75% { transform: translateY(-50%) translateX(7px); } }

.nwpz-rail { position: relative; height: 52px; margin-top: 14px; border-radius: 26px;
             background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.nwpz-knob { position: absolute; top: -1px; left: 0; width: 52px; height: 52px; border-radius: 50%;
             background: #e7c873; color: #221d10; display: flex; align-items: center;
             justify-content: center; font-size: 22px; cursor: grab; user-select: none;
             touch-action: none; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.nwpz-knob:active { cursor: grabbing; }
.nwpz-hint { margin-top: 10px; font-size: .84rem; color: rgba(255,255,255,.72);
             line-height: 1.9; direction: rtl; }

@media (max-width: 560px) {
  .nwpz-stage { height: 190px; }
  .nwpz-hole, .nwpz-piece { width: 88px; height: 88px; }
}

/* the free part of a gated story: the summary a guest reads and a crawler indexes */
.nwlede { font-size: 1.06rem; line-height: 2; color: #fff; margin: 18px 0 20px;
          padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.18); }

/* ── the headline archive (/news/archive) ───────────────────────────────────
   Public to everyone, crawler and reader alike. Built for density: a day page
   carries up to 150 headlines, so the rows stay tight and the day tiles wrap. */
.nwdays { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
          gap: 10px; margin: 22px 0 8px; }
.nwday { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
         padding: 14px 16px; border: 1px solid rgba(231,200,115,.28); border-radius: 12px;
         background: rgba(255,255,255,.03); color: #fff; text-decoration: none;
         transition: border-color .15s, background .15s; }
.nwday:hover { border-color: rgba(231,200,115,.6); background: rgba(231,200,115,.07); }
.nwday-d { font-weight: 700; font-size: 1rem; }
.nwday-n { font-size: .82rem; color: #e7c873; white-space: nowrap; }
.nwarchnav { margin: 26px 0 8px; font-size: .9rem; color: rgba(255,255,255,.55); }
.nwarchnav a { color: #e7c873; text-decoration: none; }
.nwarchnav a:hover { text-decoration: underline; }
.magkick a { color: inherit; text-decoration: none; }
.magkick a:hover { text-decoration: underline; }