/* AMIN APAC — syndicated.css
   ============================================================================
   THE OUTBOUND CARD VARIANT. Pairs with js/syndicated-data.js and
   js/syndicated-feed.js; delete the three together and nothing else knows.

   Loaded by index.html and insights.html only, AFTER css/insights.css, because
   every rule here is a modifier on a .pcard or .hub-row that sheet already
   drew. There is no card here — there is a difference.

   THE ONE JOB. Every other card on this site opens something on this domain.
   These leave. The reader has to be able to tell which is which while scanning,
   at a glance, without reading the byline — so the difference is carried by a
   mark on the image, where the eye lands first, and confirmed by the source
   domain in the byline, where the read time would otherwise be.

   WHAT IT DELIBERATELY DOES NOT DO. It does not tint the card, box it, or drop
   its contrast. The temptation with syndicated content is to mark it as
   second-class, and that would be exactly backwards here: this is the members'
   own published writing, which is the same proof the field notes are. It reads
   as equal and merely elsewhere.
   ============================================================================ */

/* ---- the arrow ------------------------------------------------------------
   Top-right of the media. It carries its own small scrim rather than relying on
   anything in the picture — a white arrow on a Melbourne daytime skyline was
   invisible without one, and since the market label moved into the card's
   eyebrow this is the ONLY thing drawn over a member's artwork. It has to earn
   that on its own, which is why it is 26px and not a bar. */
.pcard-ext{
  position:absolute;top:var(--s4);right:var(--s4);
  z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(2px);
  color:var(--white);font-size:13px;line-height:1;
  transition:transform 180ms cubic-bezier(.2,.7,.3,1),
             background-color 180ms ease-in-out;
}
.pcard.is-syn:hover .pcard-ext,
.pcard.is-syn:focus-visible .pcard-ext,
.ins-lead.is-syn:hover .pcard-ext,
.ins-lead.is-syn:focus-visible .pcard-ext{
  transform:translate(2px,-2px);
  background:rgba(0,0,0,.62);
}

/* THE LEAD, when it is a member's post. insights.js renders that slot with its
   own markup rather than through postCardHTML, so it needs the badge sized up
   to match a picture four times the area - at 26px the mark read as a
   compression artefact on the lead and as a control on the cards.

   .ins-lead-media is already position:relative, so nothing else moves. */
.ins-lead.is-syn .pcard-ext{
  top:var(--s5);right:var(--s5);
  width:34px;height:34px;font-size:16px;
}

/* ---- the byline -----------------------------------------------------------
   syndicated-feed.js has already swapped "7 min read" for the source domain.
   This sets it in the mono face the site keeps for coordinates, offsets and
   market labels. A domain is machine text and should look like it; set in the
   body face it read as though we were claiming the byline. */
.pcard.is-syn .pcard-meta,
.ins-lead.is-syn .pcard-meta{
  font-family:var(--mono);
  letter-spacing:.04em;
}

/* ---- the hub row ----------------------------------------------------------
   index.html's band prints four rows beside the lead. They have no media
   corner large enough for the badge above, so the mark goes inline after the
   title, at the end of the line the eye is already reading. */
.hub-row-ext{
  display:inline-block;margin-left:.35em;
  color:var(--ash);font-size:.8em;
  transition:transform 180ms cubic-bezier(.2,.7,.3,1);
}
.hub-row.is-syn:hover .hub-row-ext{transform:translate(2px,-2px)}
/* NO mono byline on this row, unlike the card. The card prints the source
   domain there and mono is right for a domain; the row prints the member and
   the date, exactly as every other row does, and setting those two in a
   different face made four rows of one list look like two lists. */

/* ---- the type chip --------------------------------------------------------
   insights.html's third filter value. .fbar builds its own chips; this only
   keeps the arrow from inheriting the chip's letter-spacing and drifting away
   from the word it belongs to. */
.fbar-sel .fopt-ext{margin-left:.3em;letter-spacing:0}

@media (prefers-reduced-motion:reduce){
  .pcard-ext,
  .hub-row-ext{transition:none}
  .pcard.is-syn:hover .pcard-ext,
  .pcard.is-syn:focus-visible .pcard-ext,
  .hub-row.is-syn:hover .hub-row-ext{transform:none}
}