/* The news band (news-feed tickets 12, 13, 23), in the chart's tan and gold.
   .nb is the crossing's rail at the right edge of the opening screen; #news-row is the
   /read row under the hero. Behaviour in assets/js/news-band.js. */
.nb{position:fixed;top:0;bottom:0;right:clamp(16px,2vw,28px);width:min(clamp(200px,14vw,260px),calc(50vw - 41.3vmin - clamp(16px,2vw,28px) - 34px));z-index:40;
  display:flex;flex-direction:column;font-family:Archivo,-apple-system,'PingFang SC',sans-serif}
/* 2026-09-27, Gilad (ticket 44): thinner, 200 to 260px, and shrink to fit so the rail never
   covers the globe, whose radius is about 41.1vmin (review/news_band_globe_check.py). */
/* 2026-09-25, Gilad: picture-first like the dribbble.com/search/news category strip, turned
   vertical. No panel, no frame per card, and a loop fast enough to read at a glance. */
.nb-tag{flex:0 0 auto;padding:22px 2px 10px;color:#5a4e3a}
.nb-tag b{font:600 12px/1 'Spline Sans Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.nb-view{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);
  mask:linear-gradient(180deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
.nb-row{display:flex;flex-direction:column;animation:nb-run var(--nb-dur,40s) linear infinite;will-change:transform}
.nb-view:hover .nb-row,.nb-view:focus-within .nb-row{animation-play-state:paused}
@keyframes nb-run{to{transform:translateY(-50%)}}
.nb-card{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:6px;padding:16px 14px 18px;
  border-bottom:1px solid rgba(155,116,40,.3);color:#221f1a;text-decoration:none}
.nb-card:focus-visible{outline:2px solid #a61820;outline-offset:-3px}
.nb-img{grid-column:1/3;width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  filter:sepia(.35) saturate(.8) contrast(.95);border:1px solid rgba(155,116,40,.35)}
.nb-meta{grid-column:1/3;font:500 12px/1.2 'Spline Sans Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#5a4e3a}
.nb-head{grid-column:1;font:500 17px/1.28 'EB Garamond',Georgia,'Songti SC','Noto Serif SC',serif}
.nb-arrow{grid-column:2;align-self:end;font:400 18px/1 Archivo,sans-serif;color:#a61820}
.nb .nb-card{column-gap:10px;row-gap:5px;padding:0 0 26px;border:0}
.nb .nb-card:focus-visible{outline-offset:3px;border-radius:10px}
.nb .nb-img{aspect-ratio:4/3;border:0;border-radius:10px;filter:sepia(.3) saturate(.85) contrast(.95);
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nb .nb-card:hover .nb-img{transform:scale(1.02)}
.nb.nb-off{visibility:hidden!important}
.nb .nb-meta{margin-top:6px}
.nb .nb-src{display:block}   /* outlet on one line, the date under it (ticket 44) */
.nb .nb-sep{display:none}
.nb .nb-head{font-size:15px}
.nb .nb-arrow{font-size:16px}
.nb .nb-all{padding:18px 0 44px;border-top:1px solid rgba(155,116,40,.45)}
.nb .nb-all .nb-head{font-weight:600}

/* /read: the row glides right to left, pauses under the pointer, a finger or focus;
   with Reduce Motion it stands still and scrolls by hand. */
#news-row{max-width:1200px;margin:0 auto;padding:24px 48px 48px}
#news-row[hidden]{display:none}
.nb-top{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(29,29,32,.2);padding-bottom:14px;margin-bottom:20px}
.nb-top h2{font:600 16px/1 'Spline Sans Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#45464b;margin:0}
.nb-allink{font:600 16px/1 'Spline Sans Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#a61820;text-decoration:none;padding:14px 0;margin:-14px 0}
.nb-allink:focus-visible{outline:2px solid #a61820;outline-offset:4px}
#news-row .nb-view{-webkit-mask:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
#news-row .nb-row{flex-direction:row;padding:3px 0;width:max-content;animation:nb-side 70s linear infinite}
#news-row .nb-view:hover .nb-row,#news-row .nb-view:focus-within .nb-row,#news-row .nb-view:active .nb-row{animation-play-state:paused}
@keyframes nb-side{to{transform:translateX(-50%)}}
/* Draggable (news-band.js drive(), 2026-09-29): the script moves the row, the page keeps vertical swipes. */
#news-row .nb-row.nb-js{animation:none}
#news-row .nb-drag{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
#news-row .nb-drag.nb-grab{cursor:grabbing}
#news-row .nb-card{width:320px;margin-right:32px;border:0;padding:0;row-gap:10px}
#news-row .nb-card:hover,#news-row .nb-card:focus-visible{background:none}
#news-row .nb-head{font-size:20px;line-height:1.3}
#news-row .nb-meta{font-size:16px}
@media (prefers-reduced-motion:reduce){
  #news-row .nb-row{animation:none}
  #news-row .nb-view{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask:none;mask:none}
  #news-row .nb-card{scroll-snap-align:start}
  #news-row .nb-dup{display:none}
}
@media (max-width:700px){
  #news-row{padding:20px 20px 32px}
  #news-row .nb-card{width:260px;margin-right:22px}
  #news-row .nb-head{font-size:18px}
}

/* card B on the /read row (owner 2026-09-27: "Only the news changes"; phones too, his pick after
   seeing the old row on his iPhone). Same ink, gold meta and red corner as the /news/ cards in news/news.css. */
@media all{
  #news-row .nb-row{padding:3px 0 40px}
  #news-row .nb-card{width:340px;background:#211b16;color:#fbf9f4;border-radius:22px;overflow:hidden;padding:0 0 20px;row-gap:10px;
    box-shadow:0 1px 2px rgba(29,29,32,.14),0 18px 40px -22px rgba(29,29,32,.4);transition:background .28s ease}
  #news-row .nb-card:hover,#news-row .nb-card:focus-visible{background:#2b231c}
  #news-row .nb-card:focus-visible{outline:3px solid #a3812e;outline-offset:3px}
  #news-row .nb-img{border:0;border-radius:0;filter:none;aspect-ratio:2/1}
  #news-row .nb-meta{padding:6px 22px 0;font:600 16px/1.3 "Spline Sans Mono",ui-monospace,monospace;letter-spacing:.01em;text-transform:none;color:#c9ab62}
  #news-row .nb-head{padding-left:22px;font:600 22px/1.2 "EB Garamond",Georgia,"Songti SC","Noto Serif SC",serif;color:#fbf9f4}
  #news-row .nb-arrow{margin-right:20px;width:44px;height:44px;border-radius:14px 4px 14px 14px;background:#a61820;color:#fbf9f4;
    display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .28s ease}
  #news-row .nb-card:hover .nb-arrow{background:#8c1119}
}
@media (max-width:700px){
  #news-row .nb-card{width:280px}
  #news-row .nb-head{font-size:20px}
  #news-row .nb-meta{font-size:16px}
}