/* ============================================================================
   catalog.css — the logo chip and the "coming soon" card for /websites/.

   Loaded only by the pages that need it (page modules export `css`), so the
   shared sheets stay the size they are. Everything here is scoped under .cat3
   so it cannot leak into another grid.

   BRAND OS v3.0 "ATLAS". One rule changed here and it changed for a measured
   reason: the "coming soon" line used to be True North text on a white card.
   v3 §1.2 states it as a LAW — "never type on white at any size" — and the
   measurement is 2.85:1, which fails AA at every size. So the line follows the
   v3 status-chip pattern instead (P02): on a light ground the DOT carries the
   colour and the label does not. The label is now Midnight Green at 15.8:1 and
   the dot is Meridian, which is the signal colour for in progress.
   ========================================================================= */

/* The mark. One 44px slot for every card, whether the file behind it is a
   fetched brand logo with its own background (Legacy Steel Works), a
   transparent PNG that floats on the card (Leixir), or a full-bleed lettermark
   tile. object-fit: contain is what makes those three read as one row: nothing
   is cropped and nothing is stretched, so a wordmark and a monogram sit at the
   same optical weight. */
.cat3 .cat3-logo {
  width: 44px;
  height: 44px;
  /* v3 §3.5: a tile's corner radius is 22% of its width, "so an app icon and a
     favicon curve alike". 44 x 0.22 = 9.68px. These are other people's marks,
     not DJVF's, but the container they sit in is this site's. */
  border-radius: calc(44px * .22);
  object-fit: contain;
  display: block;
  margin-bottom: 4px;
  /* Fetched marks are drawn for a light ground, and the card is --card white,
     so this only matters if a sheet ever flips the card dark. */
  background: var(--card);
}

/* A hover rule used to sit here declaring a bare .18s transition on the
   logo: a raw duration the timing budget never owned, on a rule that named
   no property and so animated nothing. Deleted in the 2026-08-25 rollout.
   The card hover itself lives in shell3.css and carries the spark-glow
   family; the logo rides along without motion of its own. */

/* ---- The unlinked card ----------------------------------------------------
   Homeowner Insights has no public URL yet: the only build of it is a preview
   carrying a "not approved for publication" banner, so the card must not be
   clickable. shell3.css already gives div.cat3-cell the card shell; this adds
   the part that says "this one is deliberately not a link" — no hover lift, no
   pointer, and a badge where the URL line would be. */
.cat3 div.cat3-cell { cursor: default; }

/* The status line. Label in Midnight Green (15.8:1 on the white card), dot in
   Meridian — "in progress / information", which is exactly what an unpublished
   site is. Meridian measures 3.0:1 on white, which is why it is a 6px shape
   here and never the words. */
.cat3 .cat3-soon {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cat3 .cat3-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--beacon);
  flex: none;
}

/* The URL line sets word-break: break-all so a long domain wraps instead of
   overflowing. That is right for the domain and wrong for the words after it,
   which were breaking mid-syllable ("read the b / uild"), so the call to
   action opts out of the rule the domain needs. */
.cat3 .cat3-go {
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
  color: var(--primary);
}

/* ---- The partner-microsite diagram ----------------------------------------
   It stands where fourteen cards used to. The cards named every partner and
   linked into live pages on the employer's domain; the diagram says the same
   thing about the ARCHITECTURE, which is the part that is DJ's to show.

   The SVG is inline and uses the site's own tokens, so it re-skins with the
   palette like everything else and adds no request. It scrolls inside its own
   box rather than shrinking below legibility: fourteen tiles at phone width
   would be fourteen grey specks. */
.ms {
  margin: 26px 0 0;
  background: var(--band);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.4vw, 28px);
  overflow-x: auto;
}

.ms svg {
  display: block;
  width: 100%;
  min-width: 660px;
  height: auto;
}

.ms figcaption {
  margin-top: 14px;
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 62ch;
}