/* === My Journey (flex layout) === */
.journey-flex{
  display:flex;
  gap:2rem;
  align-items:flex-start;
  margin-bottom:24px;          /* space before the next section */
}

.journey-text{ 
  flex:1 1 640px;
  min-width:0;                 /* prevents overflow on narrow screens */
}

.journey-portrait{
  flex:0 0 260px;              /* fixed width portrait column */
}

.journey-portrait img{
  display:block;               /* avoid inline gaps */
  width:100%;
  max-width:260px;
  border-radius:16px;
  border:4px solid #fff;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  object-fit:cover;

}

/* 🔒 Safety reset: kill any inherited floats/pulls */
#story img{ float:none !important; }
#story .journey-portrait, 
#story .journey-portrait img{ clear:none !important; }

/* Stack on mobile */
/* Base (desktop/tablet) — your current rules can stay here */

/* Mobile */
@media (max-width: 640px) {
  .journey-flex {
    display: flex;
    flex-direction: column;     /* stack nicely on small screens */
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 1rem;                  /* optional spacing */
  }

  /* The aside that holds the portrait */
  .journey-portrait {
    /* Avoid competing layouts on mobile */
    float: none;
    position: static;

    /* Center the box and constrain width */
    width: 100%;
    max-width: 280px;           /* tweak to taste */
    margin: 0 auto;
    text-align: center;         /* helpful for any captions */
  }

  /* The portrait image itself */
  .journey-portrait img {
    display: block;             /* make margin auto work reliably */
    max-width: 100%;
    height: auto;
    margin: 0 auto;             /* centers the actual image */
  }
}