@charset "UTF-8";
/* ==========================================================================
   Avanzando Hacia el Éxito · One Stop Career Center of Puerto Rico
   css/03-mascot.css

   The One Stop mascot image on the "Mi camino" card and in the help band.

   Sections in this file:
   GUIDE FIGURE (One Stop mascot)

   index.html loads css/01 to css/07 in this order and the later files build on
   the earlier ones: they reuse the colours and sizes defined in 01 as custom
   properties (var(--brand), var(--ink)…), and where two rules tie, the later
   file wins. Keep the order.
   ========================================================================== */

/* ============================================================
   GUIDE FIGURE (One Stop mascot)

   The waving stop sign One Stop uses on its own social media, with
   "ONE STOP" on its belly, so the page greets people with a
   character they may already know from the organisation. Drawn,
   never photographed: a stock photo of a person reads as false
   when it is not real and consented, and the low-literacy
   literature prefers simple drawn shapes over photographs anyway.

   It appears in two places and never speaks: on the way in
   ("Mi camino") and where the page hands you to a person (the
   help band). A figure that follows you screen by screen talking
   to you turns an adult sorting out their criminal record into
   someone being led by the hand.

   It stands free, without a disc behind it: its octagon and its
   raised hand already make the shape.
   ============================================================ */
.mascot{display:block;flex:none;width:132px;height:auto}
.mascot-link{flex:none;padding:0;border:0;background:transparent;border-radius:14px;cursor:pointer}

/* The opening line of a tool: the page's own voice, not a character's. */
.lead-in{font-size:1.05em;color:var(--ink-2);max-width:60ch;margin:0 0 22px}