.circle-field__content {
  /* Size to longest line; respect your existing max */
  inline-size: max-content;
  max-inline-size: calc(100vw - (2 * var(--content-pad)) - 20px);

  /* Enforce circle geometry */
  aspect-ratio: 1 / 1;      /* height equals width → square */
  border-radius: 50%;       /* square → circle */

  /* Layout & overflow choices */
  box-sizing: border-box;
  display: grid;            /* easy centering */
  place-items: center;      /* center text inside the circle */
  text-align: center;
  overflow: hidden;         /* clip overflow to preserve circle */
  /* alternatively: overflow: auto;  // keeps circle with internal scrollbars */

  /* Your original visuals */
  background: var(--field-bg);
  color: var(--field-text);
  border: 10px solid var(--field-border);
  box-shadow: var(--field-shadow);
  padding: var(--content-pad);
  line-height: 1.6;
  margin: 0;
  word-break: normal;
  overflow-wrap: anywhere;  /* keep long tokens from blowing up width beyond max */
}


@media (max-width: 800px) {
  .circle-field__content {
    justify-self: center;
    overflow-wrap: anywhere;

    /* keep same max width guard you already use */
    max-inline-size: calc(
      90vw
      - (2 * var(--ribbon-width-mobile))
      - (2 * var(--gap-mobile))
      - 20px
      - (2 * var(--content-pad))
    );

    /* Circle constraints */
    inline-size: max-content;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden; /* or auto */
    position: static;
  }
}
``