/* ============================================================================================
   NOTICIAS - the wire, in the storefront's room.

   Loaded by `publico_noticias.html` after `publico.css`, the same way `tienda.css` is. The two
   pages share a skin on purpose: a reader who lands on a headline from a WhatsApp forward and
   then taps through to the shop should not feel handed between two companies.

   The reference site runs its market pages dark and its news section light, on a different
   platform, with a different typeface - it reads as a blog someone bolted on. This does not.

   What this page is, and is not: it is an INDEX. Every headline links out to the publisher that
   wrote it, carries that publisher's name, and reproduces no article body. That is not modesty,
   it is the only honest way to run a wire you did not report - and it is why the page can state
   a date it did not get from the publisher as "visto por nosotros" instead of dressing up a
   crawl timestamp as a publication time.
   ============================================================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/inter-900.woff2') format('woff2');
}

:root {
  --n-void: #060b14;
  --n-deck: #07101d;
  --n-card: #0b1628;
  --n-card-2: #0e1d35;
  --n-line: #1f344f;
  --n-line-2: #2f4a6d;

  --n-white: #ffffff;
  --n-soft: #9dafc6;
  --n-mute: #6b7f99;

  --n-gold: #f5c542;
  --n-gold-2: #ffd463;
  --n-gold-dim: rgba(245, 179, 1, 0.58);
  --n-ink: #111827;

  --n-live: #20d391;          /* an official voice: the publisher is the subject */
  --n-live-bg: rgba(32, 211, 145, 0.08);
  --n-hot: #ff5547;           /* today */
  --n-hot-bg: rgba(255, 85, 71, 0.09);

  --n-r: 10px;
  --n-r-sm: 8px;
  --n-tap: 44px;
  --n-fast: 120ms;
  --n-base: 200ms;
}

body {
  background: var(--n-void);
  color: var(--n-white);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The base stylesheet sets headings to Archivo Narrow, which is more specific than a `body`
   declaration. Named explicitly rather than fought with `!important`. */
h1, h2, h3, .n-chip, .n-head h1, .p-strip nav a {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.p-shelf {
  background: var(--n-deck);
  border-bottom: 1px solid var(--n-line);
}
.p-shelf .p-mark img { filter: brightness(0) invert(1); opacity: 0.96; }
.p-shelf .p-tagline,
.p-shelf .p-brand { color: var(--n-mute); }

.p-strip {
  background: var(--n-deck);
  border-bottom: 1px solid var(--n-line);
}
.p-strip nav a { color: var(--n-soft); font-weight: 700; font-size: 12.5px; }
.p-strip nav a:hover { color: var(--n-white); }
.p-strip nav a.active { color: var(--n-gold); border-bottom-color: var(--n-gold); }
.p-strip::after { background: linear-gradient(90deg, rgba(7, 16, 29, 0), var(--n-deck)); }

.p-main { max-width: 1280px; }

/* ------------------------------------------------------------------- the words at the top */

.n-head { padding: 22px 0 26px; }
.n-head h1 {
  margin: 0 0 10px;
  color: var(--n-white);
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.3rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.n-head h1 .n-gold { color: var(--n-gold); display: block; }
.n-head p {
  margin: 0;
  max-width: 64ch;
  color: var(--n-soft);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* The stamp. Block-level with a shrink-to-fit width, not `inline-flex`: an inline box sits in a
   line box and its bottom margin has no effect, which welds the pill to the headline below. */
.n-eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin: 0 0 22px;
  padding: 6px 13px;
  border: 1px solid rgba(32, 211, 145, 0.34);
  border-radius: 999px;
  background: var(--n-live-bg);
  color: var(--n-live);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.n-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--n-live);
}

/* ---------------------------------------------------------------------------- the filters */

.n-filters {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 8px;
  padding: 12px 0 10px;
  background: var(--n-void);
  border-bottom: 1px solid var(--n-line);
}
.n-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.n-row::-webkit-scrollbar { display: none; }
.n-row > span {
  flex: 0 0 auto;
  min-width: 48px;
  color: var(--n-mute);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.n-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--n-line-2);
  border-radius: var(--n-r);
  background: rgba(10, 18, 38, 0.72);
  color: var(--n-soft);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--n-fast), border-color var(--n-fast), background var(--n-fast);
}
.n-chip:hover { color: var(--n-white); border-color: var(--n-gold-dim); }
.n-chip.active { background: var(--n-gold); border-color: var(--n-gold); color: var(--n-ink); }
/* `.g-ico` not `.t-ico`/`.g-ico`: this glyph macro is shared by the shop and the wire,
   so its class belongs to the component, not to whichever page happens to load it. A
   page-owned name silently renders the marks at zero size on the other page. */
.g-ico { flex: 0 0 auto; width: 15px; height: 15px; margin-right: 7px; margin-left: -2px; }

.n-count {
  margin: 16px 0 0;
  color: var(--n-mute);
  font-size: 12.5px;
  font-weight: 700;
}

/* -------------------------------------------------------------------------- the square */

/* The picture beside a headline, and the one element on this page that is allowed to be
   decorative. It is always a square: a wire of mixed aspect ratios reads as a scrapbook, and
   the eye finds the next headline faster when every image occupies the same shape.

   Three states share these rules. An `img` fills it (a real card scan, cropped to the art, or a
   set logo flattened onto this page's own navy). Without an image `.is-type` paints the game's
   colour and sets the set name in it. Nothing here is generated - we are an index, not a
   mirror. */
.n-sq {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  border-radius: 10px;
  background: var(--n-deck);
  border: 1px solid var(--n-line-2);
}
.n-sq img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The tag string, placed right beside the game logo in the meta line. */
.n-tag.is-theme {
  background: var(--n-tag);
  color: var(--n-white);
  border-color: var(--n-line);
}

.n-sq--lead { width: 148px; height: 148px; }
.n-sq--row { width: 104px; height: 104px; }

/* -------------------------------------------------------------------------- the lead story */

/* The top-ranked headline, given a whole row. A wire that treats its top story the same as its
   twentieth is a list, not a front page - and the top story is the reason somebody opened the
   page. Below the fold everything returns to one rhythm. */
.n-lead {
  display: block;
  margin: 18px 0 22px;
  padding: 26px 28px;
  background: linear-gradient(180deg, var(--n-card) 0%, var(--n-deck) 100%);
  border: 1px solid var(--n-line-2);
  border-radius: var(--n-r);
  text-decoration: none;
  transition: border-color var(--n-base), transform var(--n-base);
}
/* With art, the square and the words sit side by side. Without it the block is unchanged, so a
   thumbnail failure costs a picture and never the layout. */
.n-lead.has-art {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}
.n-lead:hover { border-color: var(--n-gold-dim); transform: translateY(-2px); }
.n-lead h2 {
  margin: 12px 0 10px;
  color: var(--n-white);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.n-lead p {
  margin: 0;
  max-width: 78ch;
  color: var(--n-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------------------ the wire */

.n-wire {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--n-line);
}

/* A row with a square, not a card in a grid. The reference site runs twelve image-led cards
   that force a picture onto every story whether one exists or not - which is how a wire ends up
   illustrated with somebody else's watermarked screenshot. Here the square is real card art or
   it is drawn from type, and the headline still leads: it is the thing being read. */
.n-item {
  border-bottom: 1px solid var(--n-line);
}
.n-item a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 18px;
  align-items: start;
  padding: 18px 4px;
  text-decoration: none;
  transition: background var(--n-fast);
}
.n-item a:hover { background: var(--n-card); }
.n-item a:hover h3 { color: var(--n-gold); }

/* The words. One column of its own so the headline, summary and meta line stack against the
   square rather than wrapping around it. */
.n-item-body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.n-item h3 {
  margin: 0;
  color: var(--n-white);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.012em;
  transition: color var(--n-fast);
}
.n-item .n-sum {
  margin: 0;
  max-width: 84ch;
  color: var(--n-soft);
  font-size: 13px;
  line-height: 1.55;
}

/* Source, date and voice, on one line under the headline. Every one of these is a claim about
   provenance, which is the whole reason this page is trustworthy. */
.n-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 3px 0 0;
  color: var(--n-mute);
  font-size: 11.5px;
  font-weight: 600;
}
.n-src { color: var(--n-soft); font-weight: 800; }
.n-dot { color: var(--n-line-2); }

/* "visto por nosotros" - a date the publisher did not give us. Dimmer and italic, because it is
   a weaker claim than a real publication timestamp and should not look like one. */
.n-seen { font-style: italic; color: var(--n-mute); }

/* The arrow that says this leaves the site. Third column now that the square holds the first. */
.n-out {
  grid-column: 3;
  grid-row: 1;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  fill: none;
  stroke: var(--n-mute);
  stroke-width: 2;
  transition: stroke var(--n-fast), transform var(--n-fast);
}
.n-item a:hover .n-out { stroke: var(--n-gold); transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------------- tags */

.n-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* The publisher speaking about itself - a set announcement from the maker, not a report. */
.n-tag.is-official {
  border: 1px solid rgba(32, 211, 145, 0.38);
  background: var(--n-live-bg);
  color: var(--n-live);
}
/* Filed today. Red is scarcity on the shop and recency here, and appears once per page at most,
   so it never competes with itself. */
.n-tag.is-today {
  border: 1px solid rgba(255, 85, 71, 0.45);
  background: var(--n-hot-bg);
  color: var(--n-hot);
}
.n-tag.is-game {
  border: 1px solid var(--n-line-2);
  background: transparent;
  color: var(--n-soft);
}

/* ------------------------------------------------------------------------- what we are not */

/* The standing note about how this wire works, at the foot of the column - the same shape the
   shop uses for its price standard. Said once, because a disclaimer repeated under every
   headline reads as a site apologising for existing. */
.n-standard {
  margin: 30px 0 0;
  padding: 16px 18px;
  background: var(--n-deck);
  border: 1px solid var(--n-line);
  border-left: 3px solid var(--n-gold);
  border-radius: var(--n-r-sm);
  color: var(--n-soft);
  font-size: 12.5px;
  line-height: 1.6;
}
.n-standard strong {
  display: block;
  margin-bottom: 5px;
  color: var(--n-white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.n-standard p { margin: 0 0 6px; }
.n-standard p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------- what moved */

/* The strip the reference site cannot build. Their market stories are hand-written opinion;
   these are two dated readings subtracted from each other. Percentages only - an absolute price
   on this page would break rule one, which only the shop window is exempt from. */
.n-moved {
  margin: 26px 0 0;
  padding: 20px 22px;
  background: var(--n-deck);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r);
}
.n-moved-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.n-moved-head h2 {
  margin: 0 0 4px;
  color: var(--n-white);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.n-moved-head p {
  margin: 0;
  max-width: 60ch;
  color: var(--n-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
.n-moved-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--n-tap);
  padding: 0 4px;
  color: var(--n-gold);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.n-moved-cta:hover { text-decoration: underline; }

.n-moved-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.n-moved-list a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: var(--n-tap);
  padding: 11px 13px;
  background: var(--n-card);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-sm);
  text-decoration: none;
  transition: border-color var(--n-fast);
}
.n-moved-list a:hover { border-color: var(--n-gold-dim); }
.n-moved-name {
  color: var(--n-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.n-moved-set {
  color: var(--n-mute);
  font-size: 11px;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- lo que se vendió

   The sold strip. Same room as `.n-moved` above and deliberately so: both are figures with a
   dated source line at the foot, and a reader should recognise the second the moment they have
   read the first. What differs is the price, which is the point of the section and therefore
   the only thing here allowed to be large. */
.n-sold {
  margin: 26px 0 0;
  padding: 20px 22px;
  background: var(--n-deck);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r);
}
.n-sold-head {
  margin: 0 0 14px;
}
.n-sold-head h2 {
  margin: 0 0 4px;
  color: var(--n-white);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.n-sold-head p {
  margin: 0;
  max-width: 62ch;
  color: var(--n-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
.n-sold-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Three columns: the card's face, what it is, what it went for. The price column is sized to
   the longest figure the strip can hold rather than to the longest it happens to hold today,
   so a $1,472 Charizard arriving tomorrow does not reflow every row above it. */
.n-sold-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--n-line);
}
.n-sold-row:last-child { border-bottom: 0; }

.n-sold-thumb {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--n-deck);
}
.n-sold-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No listing photo: the card's initial on its game's colour, the same fallback grammar the
   wire squares use. A letter on a coloured tile reads as a deliberate placeholder; an empty
   box reads as a broken image. */
.n-sold-thumb.is-type {
  display: grid;
  place-items: center;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--sq-game, #2d3748) 78%, #000 22%) 0%,
      color-mix(in srgb, var(--sq-game, #2d3748) 52%, #000 48%) 100%);
}
.n-sold-initial {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.n-sold-card { min-width: 0; }
.n-sold-name {
  display: block;
  color: var(--n-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.n-sold-meta {
  display: block;
  margin-top: 3px;
  color: var(--n-mute);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

/* The number the section exists for. Tabular figures so a column of prices lines up on the
   decimal instead of shimmering, which is what makes a price column read as a ledger. */
.n-sold-price {
  color: var(--n-white);
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The shared figure macro draws its own provenance markup; these rules only place it in this
   room's palette. Up is green because it is the same green as the live stamp; down is the same
   red as the shop's scarcity flag. One vocabulary across both pages. */
.n-moved-list .p-delta { font-size: 14px; font-weight: 900; }
.n-moved-list .p-delta.up { color: var(--n-live); }
.n-moved-list .p-delta.down { color: var(--n-hot); }
.n-moved-list .p-delta.flat { color: var(--n-mute); }
.n-moved-list .p-win,
.n-moved-list .p-prov { color: var(--n-mute); font-size: 10.5px; font-weight: 600; }

/* The lead's "this leaves the site" line. Small, gold, with the same arrow the rows use, so
   the promise reads as a property of the link rather than as a sentence someone wrote. */
.n-leaves {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--n-gold);
}

.n-leaves::after {
  content: "\2197";
  font-size: 13px;
  line-height: 1;
}

/* The strip wears `p-ledger` so rule one's guard recognises it as a column governed by one
   dated foot - the class is a contract, not a look. It arrives carrying the operator theme's
   light `--paper` background, though, which drops a white slab into the middle of a dark page.
   Neutralised here rather than by dropping the class: the guard's reading of the markup is the
   part that must not change. */
.n-moved-list.p-ledger {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  overflow: visible;
}

/* The foot itself: the dated source line under the four percentages. Quiet, but present - it
   is the whole reason the strip is allowed to show a number at all. */
.n-moved .p-ledger-foot {
  padding: 12px 2px 0;
  border-top: 1px solid var(--n-rule);
  margin-top: 14px;
  font-size: 11px;
  color: var(--n-mute);
}

/* -------------------------------------------------------------------------- the crossover */

/* The one thing a wire bolted onto a blog platform cannot do: send a reader who just read about
   a card to the shelf where that card is. This is the whole reason the news and the shop live
   on one domain. */
.n-crossover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 26px 0 0;
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--n-card) 0%, var(--n-deck) 100%);
  border: 1px solid var(--n-line-2);
  border-radius: var(--n-r);
}
.n-crossover div { flex: 1 1 320px; }
.n-crossover h2 {
  margin: 0 0 5px;
  color: var(--n-white);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.015em;
}
.n-crossover p {
  margin: 0;
  color: var(--n-soft);
  font-size: 13px;
  line-height: 1.55;
}
.n-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--n-tap);
  padding: 0 22px;
  border-radius: var(--n-r-sm);
  background: var(--n-gold);
  color: var(--n-ink);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--n-fast);
}
.n-cta:hover { background: var(--n-gold-2); }

/* ------------------------------------------------------------------------------ the silence */

.n-empty {
  margin: 28px 0;
  padding: 50px 28px;
  background: var(--n-deck);
  border: 1px dashed var(--n-line-2);
  border-radius: var(--n-r);
  text-align: center;
}
.n-empty h2 {
  margin: 0 0 10px;
  color: var(--n-white);
  font-size: 1.1rem;
  font-weight: 900;
}
.n-empty p {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--n-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------- the footer */

.p-foot {
  background: var(--n-deck);
  border-top: 1px solid var(--n-line);
  color: var(--n-mute);
}
.p-foot a { color: var(--n-soft); }
.p-foot a:hover { color: var(--n-gold); }
.p-foot .p-sign { color: var(--n-white); font-weight: 800; }

/* -------------------------------------------------------------------------- small screens */

@media (max-width: 760px) {
  /* The sold strip on a phone. The thumbnail shrinks and the price stays put: a price column
     that wraps under the card name stops being a column, and the alignment is what lets a
     reader compare two rows without reading either of them properly. */
  .n-sold { padding: 16px 14px; }
  .n-sold-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .n-sold-thumb { width: 44px; height: 44px; }
  .n-sold-initial { font-size: 17px; }
  .n-sold-name { font-size: 12.5px; }
  .n-sold-meta { font-size: 10.5px; }
  .n-sold-price { font-size: 14px; }

  .p-shelf { padding: 8px 0; }
  .p-shelf .p-tagline { display: none; }
  .p-strip nav { gap: 14px; }
  .p-strip nav a { font-size: 12px; padding: 9px 0; }

  .n-head { padding: 14px 0 12px; }
  .n-head h1 { font-size: 1.85rem; line-height: 1; margin: 0 0 4px; }
  .n-head p:not(.n-eyebrow) { display: none; }
  .n-eyebrow { margin: 0 0 12px; padding: 4px 10px; font-size: 9.5px; }

  .n-filters { margin: 0 0 4px; padding: 8px 0 6px; }
  .n-row { gap: 7px; }
  .n-row > span { display: none; }
  .n-chip { height: 40px; padding: 0 15px; font-size: 13px; border-radius: 12px; }
  .g-ico { width: 17px; height: 17px; margin-right: 8px; }
  .n-count { margin: 10px 0 0; font-size: 12px; }

  .n-lead { margin: 14px 0 16px; padding: 18px 17px; }
  .n-lead h2 { font-size: 1.32rem; margin: 10px 0 8px; }
  .n-lead p { font-size: 13.5px; }
  /* The lead's square goes full width above the words rather than shrinking beside them: at
     393px a 148px square leaves under 200px for a headline, which wraps to five lines. */
  .n-lead.has-art { grid-template-columns: 1fr; gap: 14px; }
  .n-sq--lead { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* A headline is the tap target, so the row is padded to be one rather than relying on the
     text's own height. */
  .n-item a { padding: 16px 2px; gap: 5px 12px; }
  .n-item h3 { font-size: 15px; line-height: 1.35; }
  .n-item .n-sum { display: none; }   /* the headline is the whole promise on a phone */
  .n-meta { font-size: 11px; gap: 7px; }
  /* Small enough that two lines of headline still clear it, large enough to read the art. */
  .n-sq--row { width: 76px; height: 76px; }

  .n-crossover { padding: 17px 16px; gap: 14px; }
  .n-cta { width: 100%; justify-content: center; min-height: 46px; font-size: 13px; }

  .n-standard { margin: 22px 0 0; padding: 14px 15px; font-size: 12px; }

  /* The footer's links measured 16px tall - an unhittable line of text, not a target. The
     storefront fixes this in its own sheet; the wire needs the same fix because the two pages
     share a footer but not a stylesheet. 44px is the floor. */
  .p-foot a {
    display: inline-block;
    min-height: 44px;
    padding: 12px 0;
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .n-lead, .n-item a, .n-out { transition: none; }
  .n-lead:hover { transform: none; }
  .n-item a:hover .n-out { transform: none; }
}