/* News: a compact closing rail at the foot of the page (heading from shead.css).
   Four equal cards in one row. Where the row fits (wide screens) it sits still and the arrow
   buttons stay hidden; where it does not, it scrolls sideways with snap points, the next card
   peeking in from the right, and news.js shows the arrows. Without JS it is the same rail,
   scrolled natively (with a thin scrollbar, so a mouse can reach the last card).
   Under the rail: "All news and research" on the left, the arrows on the right. */

.news {
  --n-ease: cubic-bezier(.22, .61, .36, 1);
  --n-line: var(--line-dark);
  --n-dim: .16;
  --n-gap: var(--gap-grid);
}
.news .nobr { white-space: nowrap; }

/* ---------- Tools (under the rail, the same distance as the Results buttons under their cards;
   the rail's own 10px foot is taken off) ---------- */
.news__tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: calc(clamp(2.25rem, 4.5vw, 3.5rem) - 10px);
}

#main .news .news__all {
  display: inline-flex; align-items: center; gap: .875rem;
  min-height: 44px; padding: .3125rem .3125rem .3125rem 1.125rem;
  border: 1px solid var(--n-line); border-radius: 999px;
  color: var(--paper); font-size: .9375rem; letter-spacing: -.01em; line-height: 1.2;
  transition: border-color .25s, background-color .25s;
}
.news__disc {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: var(--paper);
  transition: background-color .3s;
}
.news__disc svg { transition: transform .45s var(--n-ease); }
#main .news .news__all:hover { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .03); }
.news__all:hover .news__disc, .news__all:focus-visible .news__disc { background: var(--blue); }
.news__all:hover .news__disc svg, .news__all:focus-visible .news__disc svg { transform: translateX(2px); }

.news__ctl { display: flex; gap: .5rem; }
.news__ctl[hidden] { display: none; }
.news__btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--n-line); background: transparent; color: var(--paper); cursor: pointer;
  transition: border-color .25s, background-color .25s, opacity .25s;
}
.news__btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .04); }
.news__btn:disabled { opacity: .3; cursor: default; }
.news__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Rail ---------- */
/* The rail bleeds to the screen edges (so a card can peek in) while its first card lines up
   with the page; 100% in a card's width is the page column. */
.news__feed {
  display: flex; gap: var(--n-gap);
  margin: -8px calc(var(--gut) * -1) 0; /* the 8px top padding (room for a lifted card) sits inside the head's gap */
  padding: 8px var(--gut) 10px; scroll-padding-inline: var(--gut);
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.news__feed::-webkit-scrollbar { display: none; }
html:not(.js) .news__feed { scrollbar-width: thin; scrollbar-color: #ffffff2e transparent; }
.news__item { flex: 0 0 min(16rem, 74vw); min-width: 0; scroll-snap-align: start; }
@media (min-width: 700px) {
  /* three and a half: the fourth card peeks in */
  .news__item { flex-basis: max(15rem, calc((100% - 3 * var(--n-gap)) / 3.6)); }
}
@media (min-width: 1200px) {
  /* all four in one row, edge to edge of the page column */
  .news__item { flex-basis: max(15rem, calc((100% - 3 * var(--n-gap)) / 4)); }
}

/* ---------- Card ---------- */
.ncard { position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; }
.ncard__media {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 4px;
  background: #161a20;
}
.ncard__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fx, 50% 50%);
  transform: scale(1.02); transform-origin: 50% 50%;
}
/* a veil so bright artwork sits on the dark page; it lifts on hover and focus */
.ncard__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: var(--void); opacity: var(--n-dim);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: opacity .5s var(--n-ease);
}

/* body: kicker row (with the way-in disc on its right), then the headline */
.ncard__body {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: .75rem; padding-top: 1rem;
}
.ncard__meta { grid-area: 1 / 1; display: flex; align-items: center; min-height: 1.75rem; margin: 0; }
.ncard__body > .ncard__dot { grid-area: 1 / 2; }
#main .news .ncard__t {
  grid-area: 2 / 1 / 3 / -1;
  margin: .5rem 0 0; color: var(--paper);
  font-size: 1.0625rem; font-weight: 300; letter-spacing: -.015em; line-height: 1.4;
  text-wrap: pretty;
}
.ncard__kicker {
  font-size: .6875rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute-dark); overflow-wrap: anywhere; transition: color .3s;
}
.ncard__kicker--type {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; white-space: nowrap;
  color: #9dbcff; background: rgba(157, 188, 255, .14); border-radius: 999px; padding: .25rem .6875rem;
}
.ncard__link { color: inherit; }
.ncard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ncard__link:focus-visible { outline: none; }
.ncard__link:focus-visible::after { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 4px; }
.ncard__tl {
  background-image: linear-gradient(rgba(247, 247, 245, .55), rgba(247, 247, 245, .55));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size .55s var(--n-ease);
}

/* the way in: a quiet disc at rest, blue when you reach for it */
.ncard__dot {
  position: relative; flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .09); color: var(--paper);
  transform: scale(.875); transform-origin: 100% 50%;
  transition: transform .5s var(--n-ease), background-color .35s, color .35s;
}
.ncard__dot svg { opacity: .7; transition: opacity .25s, transform .45s var(--n-ease); }

/* hover and keyboard focus share one state */
.ncard:hover .ncard__media::after, .ncard:focus-within .ncard__media::after { opacity: 0; }
.ncard:hover .ncard__kicker:not(.ncard__kicker--type),
.ncard:focus-within .ncard__kicker:not(.ncard__kicker--type) { color: var(--paper); }
.ncard:hover .ncard__tl, .ncard:focus-within .ncard__tl { background-size: 100% 1px; }
.ncard:hover .ncard__dot, .ncard:focus-within .ncard__dot { transform: scale(1); background: var(--blue); color: #fff; }
.ncard:hover .ncard__dot svg, .ncard:focus-within .ncard__dot svg { opacity: 1; transform: translateX(2px); }

@media (prefers-reduced-motion: no-preference) {
  .ncard__media img { transition: transform 1.2s var(--n-ease); }
  .ncard:hover .ncard__media img, .ncard:focus-within .ncard__media img { transform: scale(1.06); }
  /* on reveal, each image settles into place */
  html.js .news .rv:not(.is-in) .ncard__media img { transform: scale(1.1); }
}

/* touch screens have no hover: the arrow shows at full strength */
@media (hover: none) {
  .ncard__dot { background: rgba(255, 255, 255, .1); }
  .ncard__dot svg { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ncard__media::after, .ncard__dot, .ncard__dot svg, .ncard__tl, .ncard__kicker,
  .news__disc, .news__disc svg { transition: none; }
}