/* shell-overrides.css — NOT part of the handoff.
   Additions required by the reconstructed page shells, kept in their own file so
   the author's styles.css stays byte-for-byte as recovered. Delete this file when
   the original .html shells arrive.

   Why this exists: styles.css handles narrow screens for .hero, .counters, .tiles,
   .briefs and .foot-cols, and for the nav it only sets `gap: 0`. It contains no
   wrap or collapse rule, so the author's own masthead nav must have been shorter
   than any usable link set here — five links still measured 404px against a 390px
   viewport. This lets the nav wrap instead, which is additive and changes nothing
   at tablet width or above. */
@media (max-width: 760px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 14px;
    justify-content: flex-start;
  }
  /* the masthead already wraps, so give the nav the full row once it does */
  .masthead-row > .nav { flex: 1 1 100%; }
}

/* Inline accent inside a heading. styles.css has no such class — its `.pull` is a
   pull-quote block with an accent background and its own padding, which inside an
   <h1> would render as a blue box rather than emphasis. */
.h-accent { color: var(--color-accent); }

/* Slot aspect ratios. styles.css sets one only for .demo-slot (16/9), so every
   other slot had no height driver and collapsed. Ratios come from the media_slots
   spec in data.js; `.slot img { object-fit: cover }` absorbs any difference
   between the spec and the supplied file's own dimensions. */
.slot-4x3  { aspect-ratio: 4 / 3; }
.slot-16x9 { aspect-ratio: 16 / 9; }

/* Search results reuse the wire list. Each row is a hit with its score, kind,
   source and confidence, so the page carries the same provenance furniture as
   every other list on the site. */
#results .item { grid-template-columns: 74px 1fr auto; }
#results .score { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); }
#results .kindtag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-mute); border: 1px solid var(--color-line);
  border-radius: 999px; padding: 1px 8px; }
#results .empty-state p { text-transform: none; letter-spacing: 0; }
@media (max-width: 760px) { #results .item { grid-template-columns: 1fr; } }

/* Belt and braces for syndicated text. styles.css already applies this pattern to
   .srcrow and .job children; briefs need it too because RSS summaries are outside
   our control and one unbreakable token widened the page to 3,667px. */
.briefs li, .briefs li > * { min-width: 0; overflow-wrap: anywhere; }