/* /content — THE FEED AS EVIDENCE, NOT AS DECORATION.
   ==================================================================
   🔴 FACADE PATTERN. EVERY CARD IS A SELF-HOSTED WebP THAT LINKS OUT.
   There are no embeds on this page and there must not be. Instagram's oEmbed
   went tokenless again in Jun 2026 so an embed is *possible* — and it is still
   wrong here for four reasons, in order of how much they matter:
     1. A live feed is UNCURATED. Several of Juan's own reels state his personal
        income and a card balance. On a job-search page those would surface by
        themselves, and nobody would have chosen them.
     2. Each embed is 50–100KB of third-party JS, wants cookie consent, and
        sometimes needs a viewer login to render at all.
     3. It would break no-build / no-dependency / no-webfonts in one move.
     4. A hiring page should not change without Juan looking at it.
   Nine posters, 420x746 each, 248KB total. Refreshing them is a manual step on
   purpose — see site-docs for the refresher, which is itself a /code artifact.

   ⚠️ The numbers on the cards are PER-POST view counts read from the platform,
   not follower-relative rates. A profile-level average and a per-post average
   are different measurements and mixing them produced a wrong claim once
   already. If these are refreshed, refresh the header stats in the same pass. */

/* ⚠️ THE 62ch CAP IS ESCAPED IN work.css, NOT HERE, AND THE FIRST ATTEMPT LOST
   SILENTLY. `#rail > .item > *:not(.item__lead):not(.rig):not(.lead__grid)
   :not(.vid)` caps every direct child at 62ch — right for prose, wrong for a
   ten-card grid. Declaring `#rail > .item > .feed__grid { max-width: none }`
   here scores (1,2,0) against that selector's (1,5,0), because every `:not()`
   argument counts, so it never applied and the grid stayed capped at 664px with
   nothing in devtools looking broken. work.css says it outright — state the
   exemption in the exclusion list rather than fight a specificity tie — so
   `.feed__grid` is now the fifth `:not()` there. */

.feed__grid {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 16px;
}

.feed__card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-decoration: none;
  color: inherit;
}

/* The frame. `aspect-ratio` reserves the box before the image decodes, so the
   grid does not reflow as nine files land — the same reason every <img> below
   also carries explicit width/height. */
.feed__shot {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #050706;
  border: 1px solid rgba(220, 230, 221, .16);
  transition: border-color .18s ease;
}

.feed__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sits under the tube's own treatment, so it is pulled back a touch to stop
     the photographs fighting the phosphor. */
  filter: saturate(.92) contrast(1.02);
  transition: transform .3s ease;
}

/* THE PLAY MARK IS THE HONEST PART OF THE FACADE: it says "this is a video and
   it lives somewhere else." Without it a still reads as a photograph, and the
   card would be pretending to be an embed. */
.feed__play {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 22px 10px 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
  background: linear-gradient(to top, rgba(5, 7, 6, .88), rgba(5, 7, 6, 0));
}

.feed__play::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 8px solid var(--amber);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.feed__n {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  letter-spacing: .02em;
}

.feed__t {
  font-size: 13.2px;
  line-height: 1.45;
  color: var(--fg-dim);
}

/* Hover is a lift, not a glow — the tube already glows and a second glow reads
   as a bug. Keyboard focus gets the same treatment plus a real ring. */
.feed__card:hover .feed__shot { border-color: rgba(240, 168, 60, .45); }
.feed__card:hover .feed__shot img { transform: scale(1.03); }
.feed__card:hover .feed__t { color: var(--fg); }
.feed__card:focus-visible { outline: none; }
.feed__card:focus-visible .feed__shot {
  border-color: var(--amber);
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.feed__also {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(220, 230, 221, .09);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-dim);
  line-height: 1.7;
}
.feed__also b { color: var(--fg); font-weight: 600; }

/* Two up on a phone. One up would make a nine-item page nine screens long, and
   the point of the grid is that the consistency is visible at a glance. */
@media (max-width: 480px) {
  .feed__grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .feed__t { font-size: 12.4px; }
}

@media (prefers-reduced-motion: reduce) {
  .feed__shot img, .feed__shot { transition: none; }
  .feed__card:hover .feed__shot img { transform: none; }
}

/* Section 04 shows ONE card, and a single item in an auto-fill grid would
   stretch to the full column width — a lone 176px-min cell becomes ~660px and
   the portrait still gets cropped to a letterbox. Cap it instead. */
.feed__grid--one { grid-template-columns: minmax(0, 232px); }